WordPressにカテゴリー別の記事一覧を表示させる方法【自作サイトマップ】

WordPress 記事一覧表示WordPress

ここでは、WordPressの好きなページに「カテゴリー別の記事一覧」を表示させる方法を紹介します。

例えば、固定ページを使ってサイトマップを自作するときに便利。カテゴリー別に分類できるので、雑記ブログでも分かりやすくまとめることが出来ると思います。

プラグインは使用せず、ほぼコピペのみで使えるのでぜひ試してみてください!

スポンサーリンク

WordPressでカテゴリー別に記事一覧を表示させる手順

何も考えず紹介する手順通りにやることで実装できますが、web制作初心者からするとおそらく意味が分からないと思うので、簡単に流れを説明しておきます。

  1. 記事一覧を表示させるコードを記述したPHPファイルの作成
  2. ショートコードを使って固定ページよりコードを呼び出す

やることは大きく分けてこの2つです。

1、記事一覧を表示させるコードを記述したPHPファイルの作成

まずは記事一覧を表示させるコードの作成をします。

WordPressのサイトはいくつものPHPファイルによって構成されているんですが、今回はそこに「記事一覧を表示させるコードを記述したPHPファイル」を新たに作成します。

JavaScriptとは違い、PHPのコードはWordPressのエディター内に記述しても作動しません。

ですから、外部にコードを記述したPHPファイルを新しく作り、それをエディター内より呼び出す動作が必要となります。

このファイルを作成し、サーバーにアップロードするのが1つ目の作業です。

2、ショートコードを使って固定ページよりコードを呼び出す

ファイルが作成出来たら、あとは投稿画面よりショートコードを使ってPHPのコードを呼び出し実行するだけ。

記事一覧を表示するコードが記述されたPHPファイルはサーバー上に存在しているので、ショートコードを使えばいつでもどこでも呼び出すことが出来ます。

この手法はなにかとつかえる場面が多いんですよ。覚えておいて損はないと思います。

それでは早速実際やるべきことを見ていきましょう。

記事一覧を表示させるPHPファイルを作成

先ほど簡単に紹介した通り、まずは記事一覧を表示させるPHPファイルを作成し、サーバーにアップロードしましょう。

ファイル名は何でもOKですが、ここでは「sitemap.php」として説明していきます。

追記:「sitemap」というファイル名によるエラーが確認されましたので、以降ファイル名だけ任意の名前に変えてご利用ください。

空のファイルを作ったら、下記のコードを記述してください。

<?php
$categories = get_categories('parent=0');
foreach($categories as $category) :
   echo '<h2>' . $category->cat_name . '</h2><ul>';
   query_posts('showposts=100&cat=' . $category->cat_ID);
      while(have_posts()) :
         the_post();
         echo '<li><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></li>';
      endwhile;
   wp_reset_query();
   echo '</ul>';
endforeach;
?>

これがカテゴリー別に記事一覧を表示させるコードです。

簡単に言うと、カテゴリー名、記事URL、記事タイトルを自動で取得し、ブラウザに出力する内容となっています。

ちなみに、2行目にある「get_categories()」のパラメータ(括弧内)を空白にすることで、子カテゴリーまで細分化して表示させることも出来ます。

そうしたい場合、2行目はこんな感じに書き換えてください。

$categories = get_categories();

これで「sitemap.php」が完成しました。

あとはこのファイルをサーバーにアップロードしましょう。場所は「公開フォルダ」→「wp-content」→「themes」→「各自使用しているテーマ」内の直下です。

ショートコードを使ってPHPファイルを呼び出す

ここまで来たらあと一歩。

ショートコードを使って先ほどアップロードしたPHPファイルを呼び出します。

ですが、その前に1つやっておきたいことが…。

ショートコードを使うためには「functions.php」に下記のコードを記述しておく必要があるんです。

function my_php_Include($params = array()) {
   extract(shortcode_atts(array('file' => 'default'), $params));
   ob_start();
   include(STYLESHEETPATH . "/$file.php");
   return ob_get_clean();
}
add_shortcode('original_php', 'my_php_Include');

これは言うなれば、ショートコードで好きなPHPファイルを呼び出すための準備をするためのコードです。

ちなみに、7行目「add_shortcode()」の1つ目の引数「original_php」は、任意の名前をつけてもらって構いません。後でショートコードを使う際のキーとなってきます。

これですべての準備が整いました。

あとは任意の場所(エディター内など)にショートコードを記述するだけ。呼び出し方はこんな感じ。

サイトマップ ショートコード

これがPHPファイルを呼び出すショートコードです。

ご覧の通り、「file=’sitemap’」の形で任意のPHPファイルを呼び出す仕組みとなっています。

この形を利用すれば、今後またオリジナルで作成したPHPファイルを、いつでもどこでも呼び出すことが出来ます。

例えば固定ページに表示させたいなら、こんな風にショートコードを一行書くだけ。

記事一覧表示

先ほど「sitemap.php」に記述したコードが実行されてカテゴリー別記事一覧が表示されます。

エディター上では分かりませんが、ブラウザで見ることでちゃんと表示されているはずです。プレビューで確認してみてください。

ちなみに今回は、取得したサイト名を単純なリスト形式で並べてあります。

デザインは各自CSSを使って変更してみてくださいね!

Amazonおとなセレクト
食の逸品はこちら
Amazonおとなセレクト
食の逸品はこちら