ここでは、WordPressの好きなページに「カテゴリー別の記事一覧」を表示させる方法を紹介します。
例えば、固定ページを使ってサイトマップを自作するときに便利。カテゴリー別に分類できるので、雑記ブログでも分かりやすくまとめることが出来ると思います。
プラグインは使用せず、ほぼコピペのみで使えるのでぜひ試してみてください!
WordPressでカテゴリー別に記事一覧を表示させる手順
何も考えず紹介する手順通りにやることで実装できますが、web制作初心者からするとおそらく意味が分からないと思うので、簡単に流れを説明しておきます。
- 記事一覧を表示させるコードを記述したPHPファイルの作成
- ショートコードを使って固定ページよりコードを呼び出す
やることは大きく分けてこの2つです。
1、記事一覧を表示させるコードを記述したPHPファイルの作成
まずは記事一覧を表示させるコードの作成をします。
WordPressのサイトはいくつものPHPファイルによって構成されているんですが、今回はそこに「記事一覧を表示させるコードを記述したPHPファイル」を新たに作成します。
JavaScriptとは違い、PHPのコードはWordPressのエディター内に記述しても作動しません。
ですから、外部にコードを記述したPHPファイルを新しく作り、それをエディター内より呼び出す動作が必要となります。
このファイルを作成し、サーバーにアップロードするのが1つ目の作業です。
2、ショートコードを使って固定ページよりコードを呼び出す
ファイルが作成出来たら、あとは投稿画面よりショートコードを使ってPHPのコードを呼び出し実行するだけ。
記事一覧を表示するコードが記述されたPHPファイルはサーバー上に存在しているので、ショートコードを使えばいつでもどこでも呼び出すことが出来ます。
この手法はなにかとつかえる場面が多いんですよ。覚えておいて損はないと思います。
それでは早速実際やるべきことを見ていきましょう。
記事一覧を表示させるPHPファイルを作成
先ほど簡単に紹介した通り、まずは記事一覧を表示させるPHPファイルを作成し、サーバーにアップロードしましょう。
ファイル名は何でもOKですが、ここでは「sitemap.php」として説明していきます。
空のファイルを作ったら、下記のコードを記述してください。
<?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を使って変更してみてくださいね!