WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【White Tiger】テーマで新着記事一覧をショートコードで本文内の任意の場所へ表示できるようにしてみた

公開日: 使い方など

きっかけは、Wordpressのテーマってトップページが固定ページor投稿一覧の選択肢しかなかったこと。

そして私が【White Tiger】テーマでいいなぁと思ったのが記事一覧のタイル表示デザイン。

もちろんトップページ用のテンプレートを編集すればいい話なんですけどそれだと融通が利きにくい(変えるときにはテーマファイルをまたカスタマイズする必要がある)ので私的にはパス!!

そしていろいろな表示がプラグインなどではショートコードで簡単に入れられるのだからそれを使いつつ、【White Tiger】テーマ標準の新着記事一覧もショートコードで入れられれば固定ページのエディタだけで編集でき後々楽なんじゃ?と思ったので実装してみた次第です。

ちなみにそれを使って表示したのがこれ↓↓

[myphp file=’post-list2x5′]

例えばこれをテンプレートカスタマイズで表示しようとすると、この新着記事の上に表示しているものを固定ページの本文で表示していたら、今見ているこの文章はどうやって入れるの?ってことになりますよね?カスタムフィールドの呼び出し?テンプレートに直書きする?などの選択肢がありますけど、どちらもやっぱりめんどくさい!!でショートコード化したのです。

何度でもこの一覧は表示できます。くどいですけど再び

[myphp file=’post-list2x5′]

ね!いい方法だと思いませんか??記事一覧を表示するプラグインもいろいろありますけどそれだとせっかくの【White Tiger】の記事一覧デザインが再現できないですからね。

裏日記といいながら今回もまたまたWordpressネタですけどこれを作る方法をご紹介します。

【White Tiger】テーマで新着記事一覧をショートコードで挿入する方法

テーマ内にある任意のテンプレートを本文内へショートコードで呼び出せるようにする

今回これが実現できたのは以下の参考サイトのおかげです。ありがとうございます。


詳しくは参照いただくとして、テーマのfunctions.phpへ紹介されているコードをそのまま挿入するだけです。

そして使用するショートコードは

[myphp file='テーマの中のファイル名']

です。「テーマの中のファイル名」に今回作成する部品(新着記事)ファイル名を入れればどこにでも表示できちゃうってことです。

テーマ内に新着記事だけを表示するテンプレート(部品)ファイルを作る

通常のテンプレートでは「テンプレート名のコメント」と「ページ全体を表示するためのコード」が必要になりますが、今回のは部品なので必要部分だけあれば大丈夫です。

コードを紹介してもいいのですが手っ取り早くダウンロードしてもらった方が早いのでこちらからどうぞ!

解凍したら「new-post-list.php」というファイルをFTPで【White Tiger】のテーマ内へアップロードしてください。

そして・・・投稿などに上で紹介したショートコードを入れ、「テーマの中のファイル名」へnew-post-listと入れると・・・ほーーーら一覧が表示されます!!うーーん我ながらとても簡単!!

一応表示件数を5件にしてありますので、サイトに応じて調整してください。

※部品のコードは【White Tiger】テーマのテンプレートとして最初から入っている「カテゴリー別新着+新着」テンプレートから必要部分だけを抜き出したものです。

※リスト内のh2タグだけどうしても元のCSSが反映されなかったのでコード内に直書きしてます。

いかがでしょうか??同じことしたい!という方はチャレンジしてみてくださいね。

今後改善すべきこと

この方法で唯一不具合というか不都合があるのが【目次】機能。

【White Tiger】テーマでは最初のh2タグの前へ自動で目次が表示されるようになっています。

この項目のタイトル「今後改善すべきこと」をわざとh2タグにしてみました。すると・・・上へ見事に目次が表示され、しかもhタグに反応して表示されるので目次には新着記事一覧の部分も表示されてしまっています。

まあCSSで非表示にすればいいんでしょうけど、都度指定するのもなぁ・・・

ですので次の目標は今回の方法でショートコードで新着記事を表示しつつ、その内容を目次に含めない、もしくは、任意に目次の表示/非表示が選択できるようにする

とします。気ままにカスタマイズしているのでいつになることやら・・・。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】