そのまま使える!かんたんWordPressのPHPコード【記事一覧編】

Webサイト制作
サイト制作
2020.12.21
かんたんWordPressのPHPコード

WordPressを使ってWEBサイトを作成する場合、PHPは避けて通れないものとなります。
しかし、WEBサイトを作る為にプログラムを勉強しなければならないというのは非常に高いハードルとなってしまいます。
そこで、コピー&ペーストするだけで記事一覧をカスタマイズ出来るWordPress用PHPコードを公開します。
PHPを理解していなくてもこの記事内の項目を設定するだけでWordPressの記事一覧が表示出来ます
コラム内の解説を読んで内容を理解したら更に上のWordPressのカスタマイズが出来るようになる。
そんなWordPress用PHPコードとなっております。

WordPressの記事一覧を表示するコード

こちらがWordPressの記事一覧をカスタマイズ出来るようにするPHPコードとなります。
以下のファイルの記事一覧を表示したい箇所に貼り付けコードの3行目〜10行目の設定項目を指定すると絞り込んだ内容の記事の一覧が表示されます。

  • archive.php
  • category.php
  • taxonomy.php
  • date.php
  • tag.php
  • search.php
  • “<?php 〜 ?>”このタグの中身がPHPとなっていますのでそれ以外の場所に任意のHTMLを書き込む事が出来ます。

    <div>
    <?php
    $args = array(
    	'post_type' => 'post'	// 投稿タイプ
    	'category_name' => 'カテゴリのスラッグ',	// 絞り込むカテゴリ
    	'tag' => 'タグスラッグ',	// 絞り込むタグ
    	's' => '検索文字列',	// 検索文字列
    	'posts_per_page' => 3,	// 表示件数
    	'post_status' => 'publish',	// 公開済みのみ
    	'orderby' => 'date',	//新着順
    	'order' => 'ASC',	// 昇順
    );
    query_posts($args);
    // ループ
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
    ?>
    <!-- 表示する投稿の数だけ繰り返されるタグ -->
    <div><?php the_title(); /* 記事タイトル */ ?></div>
    <div><?php the_date(); /* 記事投稿日付 */ ?></div>
    <div><?php the_tags(); /* 記事のタグ(複数の場合カンマ区切り) */ ?></div>
    <div><?php the_content('', false); /* 記事内容 */ ?></div>
    <!-- ここまでが繰り返される -->
    <?php
    // ループの終了
        endwhile;
    endif;
    
    // 投稿データのリセット
    wp_reset_query();
    ?>
    </div>
    

    WordPressの記事一覧を表示する設定の解説

    「WordPressの記事一覧を表示するコード」項目で記載したコードの設定の詳細な解説をしていきたいと思います。
    まず、コードの3行目〜10行目が記事一覧を絞り込む設定項目となります。
    こちらで設定された内容で記事の一覧が表示されます。
    必要のない設定はその行を消せば、設定内容から消えます。

    投稿タイプの指定

    3行目は投稿タイプの指定となります。
    以下の内容を記載する事で、記事の種類での絞り込みが出来ます。

  • post:デフォルトで用意されている「投稿」の一覧が表示されます。
  • カスタム投稿のslug:指定したカスタム投稿の一覧が表示されます。
  • page:固定ページの一覧が表示されます。
  • カテゴリの指定

    4行目はカテゴリの指定となります。
    カテゴリのスラッグを記述する事で、記事のカテゴリでの絞り込みが出来ます。

    タグの指定

    5行目はタグの指定となります。
    タグのスラッグを記述する事で、記事のタグでの絞り込みが出来ます。

    文字列検索の指定

    6行目は文字列検索の指定となります。
    記事タイトルと記事内容で指定した文字列を一致するものがある記事一覧を絞り込みます。
    デフォルトではカスタムフィールド等の値は絞り込みの対象となっていませんが
    function.phpに「add_filter」というフックでプログラムを記載すると対象にすることが可能です。

    表示件数の指定

    7行目は表示件数の指定となります。
    ここで指定した数の記事が1ページに表示されます。

    公開状態の指定

    8行目は公開状態の指定となります。
    公開中の記事のみを表示する場合は、このままの記載若しくは、この設定を消してしまって問題ないです。
    もし公開中以外の記事の一覧を作成する場合にこの項目使用します。

    一覧の順番の指定

    9行目、10行目は一覧の順番の指定となります。
    9行目でどの項目の順番で並べるか、10行目で大きい順なのか小さい順なのかを指定します。
    よく使われる項目の指定は以下になります。

  • title:タイトルの文字列のあいうえお順
  • date:記事の作成日順
  • modified:記事の更新順、dateと異なる点は記事を更新する度に表示順が変わります。
  • rand:ランダム。表示する度に順番が変わる様になります。
  • 10行目は大きい順、小さい順の指定しか出来ません。

  • ASC:小さい順、昇順
  • DESC:大きい順、降順
  • WordPressの記事一覧を表示する繰り返しの解説

    「WordPressの記事一覧を表示するコード」項目で記載したコードの繰り返し部分詳細な解説をしていきたいと思います。
    19行目から24行目までの部分が記事1件につき1回表示されます。
    記事が2件あれば2回、3件あれば3回と記事の件数に応じて繰り返し表示されます。
    実際の記事の件数が設定で指定した表示件数を超える場合は表示件数の数だけ繰り返されます。
    その中で記述しているPHPコードについの解説です。

    記事タイトル

    以下のコードが記事のタイトルを表示するコードになります。
    記事タイトルを表示したい箇所に貼り付けるとそれぞれの記事のタイトルが表示されます。

    <?php the_title(); /* 記事タイトル */ ?>
    

    記事投稿日付

    以下のコードが記事の投稿日付を表示するコードになります。
    管理画面で指定した日付の形式で表示されます。

    <?php the_date(); /* 記事投稿日付 */ ?>
    

    この箇所だけ日付の形式を変えたい場合は以下の様に形式を指定出来ます。
    以下のコードの場合’2020-12-21’の様に日付までをハイフンで繋いだ形式となります。

    <?php the_date('Y-m-d'); /* 記事投稿日付 */ ?>
    

    記事のタグ

    以下のコードで記事に設定されているタグがカンマ区切りで表示されます。

    <?php the_tags(); /* 記事のタグ(複数の場合カンマ区切り) */ ?>
    

    記事内容

    以下のコードで記事の内容がすべて表示されます。

    <?php the_content('', false); /* 記事内容 */ ?>
    

    “<!–more–>タグを使用している場合はこのコードでは全てが表示されてしまう為、以下のコードを利用します。

    <?php the_content(); /* 記事内容 */ ?>
    

    まとめ

    WordPressはとても便利で拡張のあるCMSだと思います。
    PHPがわからなかったとしても、誰かが書いたPHPコードを利用して、自分の思いのままのWEBサイトを管理出来るようになります。
    WordPressに記載するPHPコードはある程度定石のようなものがあるので先ずは定番のコードを利用してサイトを作成するのが良いかもしれません。
    今回はWordPressの記事一覧ページを作成するためのコードでしたが今後も、WordPressのそれぞれのページに向けた定番PHPコードを紹介していきたいと思います。

    SEOやWEB制作に関する情報を検索する

    コラム

    最新コラム

    人気コラム

    過去の記事

    ご質問やご相談などお気軽にお問い合わせください。