固定ページの中に、例えばお店のお知らせ記事の一覧や関連の記事一覧を載せたい時ってありますよね。今回は、特定のカテゴリーの記事一覧を固定ページにショートコード入力だけで表示させる方法をご紹介します。表示件数も制御できるので、知っていると意外と便利なテクニックです。
WordPress5.0以上になるとGutenberg（グーテンベルグ）というブロックエディタが標準搭載されています。以前のクラシックエディタに慣れていた方からすると、UIと操作方法が大きく変更されていて、不便に感じる方も少なくないでしょう。弊社カスタマーサポートにもエディターの仕様に関する問い合わ...
固定ページに動的なページを記載する方法
静的な固定ページに動的なページをいれるためには下記の方法があります。
1. プラグインで固定ページ内にphpが使えるようにする
2. phpファイルを作成して固定ページ内にインクルードさせる
1.の方法には、「runPHP」などがありますが、誰でもPHPコードが書けるというのは、セキュリティのリスクが高くなります。加えて、1文字間違うだけで真っ白な画面（500エラー）になってしまうので、あまりおすすめできません。
今回は2.のphpファイルを作成してインクルードし、ショートコードを用いて実現する方法をご紹介します。
phpファイルの作成
まずphpファイルを作成します。
numberposts=〇に表示させる件数を、category=〇にはカテゴリーIDを,入れてください。
<div>
<?php $posts = get_posts('numberposts=10&category=8'); global $post; ?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php endforeach; endif; ?>
</div>
ただしこのままでは、スタイルが全くない状態となりますので、一覧全体を包むdivタグや、リスト部分になるpタグに対して適当なスタイルで整えると良いかと思います。
<ul class="list">
<?php $posts = get_posts('numberposts=10&category=8'); global $post; ?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; endif; ?>
</ul>
作成しましたら、FTPで下記のフォルダに「sample.php」などで保存します。
（例：GENESISを使用中の場合)：〜/wp-content/themes/genesis_tcd103/）
functions.phpを編集
次に、固定ページ内でphpが使えるようにするために、functions.phpに下記のコードを追記します。
Wordpressの管理画面より「外観」→「テーマ編集」より編集できます。
追加場所は<?php ?>内であればどこでもよいですが、分かりやすいところに追記するようにします。
function Include_my_php($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
include(get_theme_root() . '/' . get_template() . "/●●●");
return ob_get_clean();
}
add_shortcode('myphp', 'Include_my_php');
※●●●は、上記《phpファイルの作成》にて作成したファイル名が入ります。上記の例であれば「sample.php」と記述して下さい。
表示したい記事にショートコードを記述
記事一覧を表示したい投稿・固定ページの記事内のphpを読み込ませたい箇所にショートコードを記述します。
[myphp file=’test’]
※ファイル名がtest.phpの場合
下記のように固定ページ内で特定のカテゴリーを一覧表示することができます。
さらに、「カスタムCSS」機能のあるテーマではテーマオプションの「カスタムCSS」にスタイルを追加すると便利です。
今回は下記のようにCSSを設定しました。
.list li{
list-style-type:none !important;
list-style-image:none !important;
margin: 5px 0px 5px 0px !important;
}
.list li{
position:relative;
display: block;
padding: 5px 0px 5px 30px;
background: #ddd;
color: #444;
border-radius:15px 0px 0px 15px;
}
.list li:after{
content:'';
display:block;
position:absolute;
width:14px;
height: 14px;
top:7px;
left:5px;
background: #fff;
border-radius: 10px;
}
このようにデザインして固定ページに紹介することができます。
TCDへのお問い合わせでもたまにある内容ですので、よければご活用ください。
テーマファイルのカスタマイズについてはサポートの対象外となります。万が一、カスタマイズによって不具合が生じましても弊社では責任を負いかねますのでご了承ください。カスタマイズに際しては、必ずバックアップをご用意の上お客様の責任において実施して頂きますようお願い申し上げます。また、function.phpは記述を誤るとWPへのログインができなくなる不具合を起すこともありますので、十分にご注意ください。
