ワードプレス、Stinger3のテンプレをカスタマイズしたので、メモ。

特定の固定ページを作って、その固定ページの下にプラグインなしで、特定のカテゴリの記事一覧を表示させるカスタマイズです。

順を追ってメモしてありますが、結局やらなくていい作業もあったりするので、一応最後まで全部読んでから作業にとりかかってください。

また、わたしも自分のstinger3のテンプレですでにカスタマイズしてある部分をカスタマイズしてあったり、バージョンが違うと、いろいろ違う部分もあるかもしれないので、あらかじめご了承ください。

そして、あくまで自分のための覚え書きなので、質問されてもよくわからんところ多数だと思うので、おかしくなっても大丈夫なように、必ずバックアップとって、自己責任でお願いします。おかしくなったから、直してって言われても無理ですよ!!

記事のうち特定のカテゴリの一覧を表示させるカスタマイズ

まず、投稿一覧の中から特定のカテゴリに属する一覧を表示させるカスタマイズをしました。参考にさせていただいたのは、こちらの記事。

 [WP]WordPress で固定ページに記事一覧を出力する方法のまとめ

この中で、2番目に書かれている、「固定ページに特定のカテゴリの記事を10件表示」のタグを利用します。

子テンプレで固定ページテンプレート (page.php)を作成

わたしは、子テンプレを作ってカスタマイズしているので、まず、固定ページの子テンプレがなかったので、作成します。

作成した子テンプレを確認すると、一番下が、

となっています。

タグの貼り付けとカテゴリID修正

6行目のループ終了と、8行目の</div>の間に、先ほどの「「固定ページに特定のカテゴリの記事を10件表示」のタグ」を貼り付けます。

その際、2行目のcat=1の部分の1というのがカテゴリIDで、どのカテゴリを表示させるかというのを制御しています。ここを表示させたいカテゴリの番号に修正します。

カテゴリIDは、管理画面で該当カテゴリの編集ページを開くと、ブラウザのURL部分にURLが表示されますが、そのURLで、「tag_ID=」のあとに表示されるのがカテゴリIDです。

サムネイルつき一覧を表示させる

これでうまく稼働していれば、固定ページを見ると、下の方に、ドットがいくつか並んだ状態になっていると思います。

これを記事下の関連記事のテンプレを使って、もうちょっと見栄えよくしていきたいと思います。

単一記事の投稿(single.php)というテンプレートを開いて、記事下の関連記事コードを確認します。

この部分が関連記事出力部分なので、先ほどのループ出力内にはりつけます。

体裁を整える

これでも出力されていますが、ちょっと、デザインがおかしくなっています。

なので、まず、dlの上下をdivタグで囲みます。

挿入するとこうなります。

これでもまだおかしいので、もう一つ上のdivもつけます。6行目のループ終了のあとに、これを付け加えて、

41行目のphp end if のあとにこれを付け加えます。

結果、こうなる。

これで、全固定ページの直下に指定したカテゴリの記事一覧が表示されてるはずです。多分。

特定の固定ページに表示させる

さらに、この記事一覧を全固定ページにではなく、特定の固定ページに表示させるカスタマイズです。

参考にさせていただいたのは、こちらの記事です。ありがとうございます!

 wordpressで特定のページのみに条件分岐して「特定の要素」を表示させる方法

このタグを使います。

もしかすると、別テンプレにしなくてもできる方法があるのかもしれませんが、タグの書き方がよくわからんので、とりあえず、先ほど作った記事一覧のタグを別テンプレ化します。

そうですね、たとえば、これをhogehoge.phpというphpファイルにして、子テンプレフォルダにアップロードします。

そうすると、先ほどのタグを利用して、固定ページaboutにhogehogeファイルを表示させようとすると・・・

となります。

これを先ほどのテンプレ部分に突っ込むと、

となります。

これで、多分完成。

これを使って表示させたのが、こちら。

 高品質!格安プラセンタをこだわり商品研究所がオリジナル商品化!夢見るプラセンタ特徴まとめ