カテゴリーやタグの取得もOK！WordPressの記事一覧を埋め込むコード

とりとん

HTMLのサイトとWordPressをうまく併用したいな～

既存のHPはそのまま運用しつつ、HP内にブログやコラムとしてWordPressを設置したい。

HPにWordPressで投稿した最新記事を表示させたい。

・・などなど、既存のHPにWordPressの使いたい部分だけを埋め込むことで、簡単にコンテンツを増やすことできます。

また、ブログやコラムが管理しやすくなるのでオススメです

今回は、既存のHPにWordPressの最新記事を取得・表示する方法を紹介していきたいと思います。

※この記事で紹介するのは、ドメイン直下のルートディレクトリにWordPressをインストールした場合の取得・表示方法です。

別のドメイン下にある、外部のWordPressの記事情報を取得する方法はこちらからどうぞ⬇️

サンプルとして、

◆ カテゴリー「コーディング」の新着記事(※)3件を横並びで表示

◆ サムネイル・投稿日・タイトル・リンクボタンの4項目を表示

※今回紹介するコードは、本来WordPress内ではなくHTMLサイトに記述するコードのため、下記DEMOではこのページの情報が取得されて、当記事が3つ表示されていますが、実際は新着3件が表示されますw

という感じのスタイルで表示させてみました⬇️

DEMO

2020.8.27

カテゴリーやタグの取得もOK！WordPressの記事一覧を埋め込むコード

check
2020.8.27

カテゴリーやタグの取得もOK！WordPressの記事一覧を埋め込むコード

check
2020.8.27

カテゴリーやタグの取得もOK！WordPressの記事一覧を埋め込むコード

check

とりとん

早速コードを確認してみよう！

この記事の内容は・・

コード
取得できる情報まとめ

コード

PHP

※まずは、この1行を</head>の直前に記述します。

<?php include_once("wp-load.php"); ?>

<ul class="blog_list">
    <?php
        $cnt = 0;
        $args = array(
            'posts_per_page' => 3, //表示件数
            'category_name' => 'coding'//カテゴリーのスラッグ
        );
        $posts = get_posts( $args );
        foreach ( $posts as $post ): 
          if($cnt > 2) break;
          $cnt++;

        setup_postdata( $post ); 
    ?>

    <li class="blog_list_item">
        <div class="thumbnail"><?php the_post_thumbnail(); ?></div>
        <div class="date"><?php the_date("Y.n.j"); ?></div>
        <div class="title"><?php the_title(); ?></div>
        <div class="button"><a href="<?php the_permalink(); ?>">check</a></div>
    </li>


    
    <?php
      endforeach; 
      wp_reset_postdata(); 
    ?>
</ul>

‘posts_per_page’ => 3, //表示件数

↑「3」のあとの「,」をお忘れずに！これがないとエラーでページ表示できません！

‘category_name’ => ‘coding’//カテゴリーのスラッグ

↑全カテゴリーを表示したい場合は、「”」のように空白にしたらOK！

CSS

.blog_list {
    display: flex;
    list-style: none;
}
  
.blog_list_item {
  width: 100%;
  padding: 5px;
  font-size: 1vw;
  color: #6d6d6d;
  box-shadow: 0 0px 0.5vw rgba(0, 0, 0, 0.29);
  border-radius: 10px;
  margin-bottom: 0.8vw;
}

  
.blog_list_item:nth-child(n) {
  margin-right: 0.8vw;
}
  
.blog_list_item:nth-child(3n) {
  margin-right: 0;
}
  
.date {
  margin: 0.7vw 0 0.5vw;
}
  
.title {
  margin-bottom: 1.3vw;
  padding-left: 0.3vw;
}

.button {
  overflow: hidden;
  border-radius: 10px;
}
  
.button a {
  display: block;
  position: relative;
  text-align: center;
  color: #fff;
  background: pink;
  padding: 5px 0;
}

.button a::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 0;
  height: 0;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left: 8px solid #fff;
}

.thumbnail img {
  border-radius: 10px;
}

取得できる情報まとめ

WordPressでは独自の関数を使い、様々な情報を取得することができます。

取得情報	関数
アイキャッチ画像	<?php the_post_thumbnail(); ?>
投稿日	<?php the_date(“Y.n.j”); ?>
タイトル	<?php the_title(); ?>
本文	<?php the_content(); ?>
リンク	<?php the_permalink(); ?>
抜粋文	<?php echo get_the_excerpt(); ?>

カテゴリーはちょっと特殊でこんな感じ。

カテゴリー名	<?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?>
カテゴリースラッグ	<?php $category = get_the_category(); $cat_slug = $category[0]->category_nicename; echo $cat_slug; ?>
カテゴリーID	<?php $category = get_the_category(); $cat_id = $category[0]->cat_ID; echo $cat_id; ?>
子カテゴリ(複数)	<?php $cats = get_the_category(); foreach($cats as $cat): if($cat->parent) echo $cat->cat_name . ‘ / ‘; endforeach; ?>

タグの取得はこんな感じ。