記事の詳細

前回の投稿から二十日以上空いて二度目の投稿になります、網干と申します。
今回は、WordPressの固定ページにショートコードでカテゴリー記事の一覧を表示する方法を掲載します。
本記事を参考にすることで、下記のようなページを表示することができます。
page_mod_01

[2016/09/27 追記]
本記事のプログラムを使用して、新着記事に「NEW」の文字を追加する記事を追加しました!

category_itiran_update_icat3WordPressの固定ページにショートコードでカテゴリー記事の一覧を表示して指定期間内の記事タイトルに文字列を追加する方法
プログラムの初歩的なミスで一時間ほど唸っていました、網干です。PHPで変数に代入した数値を使って計算を行った際に、正常に計算されないバグに1時間ほど悩んでいまし...

なぜ固定ページに記事の一覧を表示するためにショートコードを記述するのか?

通常、WordPressの固定ページにphpスクリプトを記述しても機能しません。
そのため「phpスクリプトを使用して固定ページにカテゴリー記事の一覧情報を載せたい!」と考えても実現できません。
別途プラグインをインストールすれば、固定ページでphpスクリプトを機能させることも可能ですが、
今回はプラグインをインストールせずに、ショートコードを使って固定ページにカテゴリー記事の一覧を表示する方法を掲載します。

ショートコードはどうやって使うのか?

ショートコードとは、複雑なプログラムを短いコードで動作させることができる機能です。
functions.phpにプログラムを登録することで、投稿記事に短いコードを記述するだけで登録したプログラムを動作させることができます。
一般的には”[xxx]”のように定義した名前をブラケット(大括弧)で囲って使用します。

functions.phpに記事一覧表示のプログラムを仕込む

functions.phpに下記のコードを記述します。

コードの7行目で”num” => ‘2’と指定しているのは表示する記事数、
コードの8行目で”cat” => ’12’と指定しているのは表示するカテゴリーの番号になっています。
そのため、コードを実行するとカテゴリー番号12の最新記事を二つ表示することになります。

※カテゴリーの番号は下記の手順で確認できます。
1. [投稿]→[カテゴリー]のカテゴリー項目をクリックする
ショートコードの参考画像01

2. カテゴリーの編集画面のURLに記載された”tag_ID=xx”の”xx”部分がカテゴリー番号になります
ショートコードの参考画像02

functions.phpに記述する内容は以上になります。
上記のコードで下記の順にデータが取得できます。

1. サムネイル画像
2. 投稿年月日
3. タイトル
4. 本文(抜粋)

さらに、上記のプログラムにHTMLタグを加えて構造を整えることで、
自由なスタイルでカテゴリー記事の一覧を表示することができます。

なお、今回の記事一覧を表示するために設定したスタイルは下記になります。
※WordPressのテーマによってCSSの影響範囲が変わるので、下記コードを貼り付けても正しく表示されない場合があります。

サムネイル画像はどのように取得しているのか?

サムネイル画像は下記のコードにて取得しています。

get_the_post_thumbnailタグの使い方に関しては下記の記事を参考にしてください。
http://wpdocs.osdn.jp/テンプレートタグ/get_the_post_thumbnail

ショートコードを使用して固定ページに特定のカテゴリーの記事一覧を表示する

プログラムの仕込みは完了しました、さっそく使ってみましょう。
使い方は非常に簡単で、固定ページに下記のコードを記述するだけでカテゴリー一覧を表示できます。

実際に使ってみると…
※下記の画像は別サイトで実行した際の表示例になります。
page_mod_01

このように表示されます。
記事にサムネイル画像が設定されている場合は表示されて、設定されていない場合は何も表示しません。
スタイルが簡素ですが、カテゴリー記事の一覧がしっかりと表示されています。

更に、このコードは呼び出し側で「記事の表示数」と「カテゴリーの種類」を変更することができます。
例えば、記事の表示数を三つにして、カテゴリー番号の5を表示したい場合は下記のように指定します。

これで固定ページに自由なスタイルでカテゴリー記事の一覧を表示することが可能になります。

効率的なコードを探して、より使いやすいプログラムを作りましょう

いかがでしたか?
…と偉そうに終わらせようとしましたが、今回紹介したコードはもっと良い組み方があると思います。
というのも、私自身PHPやWordPressの経験が1か月もないため、かなり初歩的な内容になっていると思います。
間違いがございましたらコメントをお願い致します。

今回紹介したプログラムの参考にさせていただいたサイト様は下記になります。
http://labrid.jp/wp/snipet/wp-sc-list/

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

お知らせ

平成28年度補正予算 小規模事業者持続化補助金

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

ページ上部へ戻る