ショートコードでカスタム投稿の新着情報一覧表示を作ってみる wordpress

NO IMAGE

皆さんこんばんわ。
最近飼いウサギと戯れすぎて外に出てないttaisonです。

さて、今回はwordpressで新着記事の一覧表示をショートコードで作る
ということですが、一覧表示の機能は最近のテーマを使用する場合、付随してることが多い機能です。

じゃあ何で作るのか?って話になるんですけど、みなさん。
テーマに付いてる新着一覧表示だと、思い通り表示できずにヤキモキした事ありませんか?

例えば、テンプレートテーマでサイト制作する場合。
新着の表示機能はあっても、カスタム投稿の新着表示機能が付いてない。なんて事があります。

こんな時に

「投稿タイプ分けたい!新着一覧表示もタイプごとに表示したい!」

とか言われるとテンプレで実装できないので、汗だくでgoogle検索を始めることになるわけです。

まあ、プラグイン使えば手取り早いかもしれないけど、なるべく外部プラグインで干渉させたくないんですよね。
プラグインも更新止まったらそれまでだし、、、

という訳で本日は、プラグインを使わずショートコードを使ったカスタム投稿の一覧表示を作ってみようと思います。

便利屋のショートコードを使って作成

固定ページに直接phpを書いて作成することも出来ますが、セキュリティ上あまり良くないので、ショートコードを使って作成します。

そもそもショートコードってなんぞや?って話を始めると長くなりそうなのでざっくり言いますと、

名前を付けたプログラムを、設置した場所に呼び出してくれる便利屋

みたいなものです。
プログラムを準備しておいて、設置場所で簡単に動作させましょう。って便利な機能ですね。

以下は実際に固定ページに記述するショートコードです。

[newsinfo cat="" num=""]// newsinfoがプログラム名 
//catとnumについては、後のプログラムで説明します。

固定ページ側はこれだけの記述で済んじゃいますが、当然これだけでは動きません。

呼び出し対象になるプログラムが必要になります。
なのでまず、呼び出し対象になるプログラムをfunction.php内に記述していきましょう。

言うより動けってことで早速作っていきます。

新着一覧表示プログラムを作成する前に下準備

まず大前提に表示するカスタム投稿がないといけません。

という訳でプラグイン使ってササッと作っちゃいましょう。
冒頭の前言撤回してますが気にせんで下さい 汗

ここでは、Custom Post Type UIというプラグインを使います。

このプラグインは設定項目が(というより表示名や項目数が)コロコロ変わるので細かくは表記しません。

個人的にはKotoriさんのブログ記事がわかりやすかったので、載せておきます。
記事に表示されているCunstom Post UIの管理画面画像は変わっている可能性があるので、自分の画面と設定項目を照らし合わせてみてください。

重要なのは以下の設定です。

  • 投稿タイプ作成
  • タクソノミー追加でカテゴリーとなるタクソノミーを追加する

タクソノミーというのは、とりあえずここではカテゴリーと思ってもらって問題ないです。
気になる方は、wordpress codex参照。

とりあえず例として、上記を以下のような設定で構成してみます。

  • 投稿タイプ = info
  • タクソノミー(カテゴリー) = cat

以下の設定をすることで、土台が出来上がりました。

いよいよ本題のプログラム作っていきましょう

では、実際にfunction.phpにプログラムを書いていきましょう。
余談ですが、function.phpは記述間違いがあると、更新時に画面が真っ白になります。
その場合はftpソフトからfunction.phpを取り出して間違えた部分を修正したら元に戻るので、慌てず修正しましょう。

※最近だと、wordpressにエラーチェック機能が付いたので、間違ってた場合、警告を出してくれます。
便利な時代になったもんだ。

function getNewInfo($atts) {
	extract(shortcode_atts(array(
		"num" => '',	//最新記事リストの取得数 二つとも固定ページ側でも指定可能
		"cat" => ''	//表示する記事のカテゴリー指定
	), $atts));
	global $post;
	$oldpost = $post;
	$myposts = get_posts('post_type=info&numberposts='.$num.'&order=DESC&orderby=post_date&taxonomy=cat&term='.$cat);
	$retHtml='<ul class="news_list">';//クラス名は各要素、好きなものを付けて下さい。
	foreach($myposts as $post) : 
	$cat = get_the_terms();//タクソノミーの中の項目、タームを取得する
	$catname = $cat[0]->cat_name;
	$catslug = $cat[0]->slug;
		setup_postdata($post);
		$retHtml.='<li>';
		$retHtml.='<span class="news_date info_list">'.get_post_time( get_option( 'date_format' )).'</span>';
		$retHtml.='<span class="news_title"><a href="'.get_permalink().'">'.the_title("","",false).'</a></span>';
		$retHtml.='</li>';
	endforeach;
	$retHtml.='</ul>';
	$post = $oldpost;
	wp_reset_postdata();
	return $retHtml;
}
add_shortcode("newsinfo", "getNewInfo");//newsinfoは、ショートコードの名前 getNewInfoは関数名

8行目のget_postsでパラメータに基づき、投稿データを配列作成します。
パラメータがカッコの中に入ってるやつですね。

11行目にあるコメント内にタームっていう言葉があると思います。
このタームは先ほどカスタム投稿で作成したタクソノミーcatの中身にあたる項目、いわゆるカテゴリー項目となります。(カスタム投稿記事で「sea」というカテゴリー項目を作成したら、それはタームにあたります)
これを取得することで、カテゴリーごとの表示を可能にするのです。

なんでわざわざターム取得?ってとこなんですけど、Custom Post UIでカスタム投稿タイプを作成すると、今回のようにタクソノミーの追加がカテゴリーの代わりになるので、実際のカテゴリーが作れなかったんです。

なので、上記で対応することにしたんですけど、もしカテゴリー指定するやり方があれば逆に教えてください。汗

そして上記のプログラムをざっくりまとめると(いつもざっくりですみません)、

  1. shortcode_attsで項目にデフォルト値を設定
  2. $postを一時的に$oldpostに入れとく(処理が終わるまで待機
  3. $mypostで取得したい情報を指定
  4. $retHtmlで固定ページに表示する内容を指定
  5. 最後に上書きしたpostに復元処理かけて$retHtmlを返す

こんな感じ。
初見だとコードがごちゃっとして何がなんやらって感じですが、やってることは意外と単純です。

さあ、ここまできたら後一息です!

最後に固定ページにショートコードを指定して完成

さあ、仕上げの時間だ。

最後に新着一覧を表示したい場所に以下のショートコードを指定して完了。

[newsinfo cat="sea" num="5"]

ショートコード内にある内容を紐解くと、カテゴリー「sea」の記事を5つ表示する。
といった感じです。

このコードはカスタマイズすることで、並び順など投稿に関することを柔軟に指定することが可能です。
最近のwordressはエラー保存を止めてくれる機能もデフォルトで付いているので、思いっきりカスタマイズしてみましょう!

、、、自己責任で 笑

より良い新着一覧表示のコーディングを目指して、、、

ちなみに今回のコードは、同じ要領でphpを書いてショートコードを設置すると、一覧表示を量産できます。
が、この記法をコピーして投稿タイプ分増やす。なんてことやると、function.phpがエライことになるので、ホドホドにしときましょう。

複数の投稿タイプ新着をもっと効率良く表示できるプログラムはないものか。
色々試行錯誤して見つけたいと思います。

なんかいいやり方あったら、、、教えて下さい 笑

こちらの記事も読まれています

wordpressのファイルアップロード上限を変更して大きいサイズのファイルを投稿する... こんばんわ、ttaisonです。 最近この名前も飽きてきたから変えようかな、、、読みづらいし。 さて、今日はWordpressの投稿にまつわる問題。 Wordpressで作ったホームページやブログで、大きな容量のファイルをアップロードしたい時があるとします。 例えばお店のチラシ画像・...
WordPressのアップロード画像サイズを自動調整してくれるプラグインImsanity... こんばんわ、taisonです。 wordpressでサイトを制作して納品完了したあと、お客様からよくいただく言葉があります。 「画像アップロードに時間がかかるんだけど」 「画像がアップロードできない」 「管理画面が重たくなってきた」 制作側からすると意外と盲点なんですが、画像をアッ...
2018年はサンクスページなし!?contact form7でサンクスページを作らずアナリティクスで... こんばんはtaisonです。 最近仕事で「wordpressのお問い合わせフォームでコンバージョンの計測をしたいからサンクスページを作って」と久しぶりに言われたので、それについて応用も兼ね、ご紹介したいと思います。 コンバージョン計測に必要になる作業 まずContact Form 7でコンバー...
WordPressでjQueryが動かない!問題なく動作させるために設定する対策方法... こんばんわ。taisonです。 唐突ですが、 「WordpressでjQueryのライブラリを追加したい!」てこと、 結構ありませんか? スライダー機能がしょぼいから後入れのライブラリで対応したい、 トップへ戻るボタンを追加したい、、などなど。 結構jQueryのコード・ライ...

wordpressカテゴリの最新記事