【WordPress】新着記事をショートコードで任意の場所に表示

   2018/07/05   icon-clock-o読了時間:約7分15秒

私はこのブログのトップページに固定ページを持ってきて、会社概要や修理についての記載をしています。
でもそれだけというのも味気ないし、会社概要の下に新着記事を数件表示したいなーと考えました。
そこで配置したい場所(固定ページのメイン本文内)にショートコードを書いて
そこに最近の投稿記事が表示されるように functions.php をいじってみました。

完成形はこんな感じ

本文のど真ん中にショートコードを書いて、そこに新着記事が出るようにしています。
私は10件表示にしていますが、お好みの件数に変更できます。
新着記事の表示

必ず事前にバックアップを

固定ページやfunctions.phpファイルを編集する前に必ずバックアップを取っておいてください。
特にfunctions.phpのバックアップは大切です。
一番簡単なのは普段お使いのFTPソフトを使ったダウンロードだと思います。
FTPソフトでダウンロード
functions.phpに誤ったコードを記述すると、WordPressにログインできなくなったり、
何にも表示されなくなって真っ白になったり、プラグインが動かなくなったりといった
不具合が起きることがあります。
そんな時にはダウンロードしておいた正常なファイルをアップロードして元の状態に戻してくださいね。
PHPファイルの編集などは自己責任でお願いいたします。

ショートコードとPHPコードを記述しましょう

①使いたいショートコードの名前を決める

私は latestarticle にしていますが、単純にnewとかshintyaku_kijiとか何でもOKです。

②新着記事一覧を表示したい箇所にショートコードを書く

ご自分で決めたショートコードを記述してください。
まだ対応するPHPコードを書いてないので今は何も起きません。
ショートコードを書く

③functions.phpファイルを編集する

WordPressサイドメニューの【 外観 】⇒【 テーマの編集 】
⇒テーマのための関数 (functions.php)を開いてください。

functions.phpのPHPコード内の適当な場所に以下の記述を追加します。
ちなみに私はお借りしてるテーマの記述と混ざらないように
自分が追加するコードは一番最後に書くことにしています。

コード
function getCatItems($atts, $content = null) {
extract(shortcode_atts(array(
“num” => ’10’
), $atts));
global $post;
$oldpost = $post;
$myposts = get_posts(‘numberposts=’.$num.’&order=DESC&orderby=post_date’);
$retHtml='<ul>’;
foreach($myposts as $post) :
setup_postdata($post);
$retHtml.='<li>’.get_post_time(‘Y/m/d’).'<a href=”‘.get_permalink().'”>’.the_title(“”,””,false).'</a></li>’;
endforeach;
$retHtml.='</ul>’;
$post = $oldpost;
return $retHtml;
}
add_shortcode(‘latestarticle’, ‘getCatItems’);
記述のポイント
コード
//関数名はgetCatItems
function getCatItems($atts, $content = null) {
extract(shortcode_atts(array(
//ここの数値を変えれば表示する件数が変わります
“num” => ’10’
), $atts));
global $post;
$oldpost = $post;
$myposts = get_posts(‘numberposts=’.$num.’&order=DESC&orderby=post_date’);
//リスト表示にするためのタグul
$retHtml='<ul>’;
foreach($myposts as $post) :
setup_postdata($post);
//Y/m/d を Y年n月j日 に変えると 『 2015年4月15日 』のような日本語表記になります
$retHtml.='<li>’.get_post_time(‘Y/m/d’).'<a href=”‘.get_permalink().'”>’.the_title(“”,””,false).'</a></li>’;
endforeach;
$retHtml.='</ul>’;
$post = $oldpost;
return $retHtml;
}
//latestarticleの部分はご自分で決めたショートコードに変更してください
//ショートコードlatestarticleでgetCatItems関数を呼び出してね、という命令です
add_shortcode(‘latestarticle’, ‘getCatItems’);

また、上のコードでは出来るだけ幅を取らないように年月日とタイトルのみで1行ずつ表示していますが
コードをちょっと変えれば、リスト(ul,li)ではないタグで囲んで表示を変えたり、
サムネイル(アイキャッチ画像)付きで表示させたりと、お好みで様々な表示が可能です。

④動作を確認する

ショートコードを書いた場所にちゃんと新着投稿記事が出ているか確認してください。
また、WordPress管理画面やプラグインの動作も問題ないか確認しておいてくださいね。
万が一、動作がおかしくなったら、事前に用意したバックアップファイルで
元の状態に戻してから再度慎重に編集してください。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket