

とりとん
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【PHP】WordPressの記事一覧を新着順に埋め込むコード
-
2020.8.27【PHP】WordPressの記事一覧を新着順に埋め込むコード
-
2020.8.27【PHP】WordPressの記事一覧を新着順に埋め込むコード

とりとん
早速コードを確認してみよう!
コード

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>
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 the_category(); ?> |
抜粋文 | <?php the_excerpt(); ?> |
投稿ID | <?php the_ID(); ?> |
今回紹介したコードを参考に、任意で取得する内容を記述してみてください!

WordPressはほんとに便利やね~

最後まで読んでいただきありがとうございました!