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

公開日: 更新日: Wordpress



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

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

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

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

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

アドセンス広告のある/なしでこんなに表示速度が変わるんですねぇ・・・を実感

Wordpress
最近私のマイブームとなっているWordpressのオリジナルテーマ作成。【ha-Basic】(haはひまあーと […]

いじめなどで精神的に参った!となった時に一番聞きたくないアドバイス

日記・雑記
至って個人的な意見です。 いじめに遭ったら誰かに相談を!! 何か悩んでいたら誰かに相談を!! ってニュースなど […]

【WordPress】サブディレクトリにインストールしたサイトのFeedをルートのFeedに含める方法を内製化する方法はない?

Wordpress
考えに考えた挙句、結局長いタイトルになってしまいました(笑)。 マルチサイト環境でないWordpress(マル […]

WordPressでアイコンフォント(Font Awesome)が表示されなくてハマったときの対処

Wordpress
今回のオリジナルテーマ作成で1つハマったことがあります。それはアイコンフォント(Font Awesome)の表 […]

レモン酢が案外簡単でおいしかった

日記・雑記
そろそろ高血圧対策しないと(いったい何歳なの?)・・・で何でも載ってるインターネットで調べたら、レモンの皮に含 […]

オリジナルテーマに変更しました

サイト作成日記
は、はやい~~!!作った甲斐があったってもんです。 このサイト立ち上げ前に見つけた「White Tiger」と […]

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

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

アドセンス広告のある/なしでこんなに表示速度が変わるんですねぇ・・・を実感

Wordpress
最近私のマイブームとなっているWordpressのオリジナルテーマ作成。【ha-Basic】(haはひまあーと […]

いじめなどで精神的に参った!となった時に一番聞きたくないアドバイス

日記・雑記
至って個人的な意見です。 いじめに遭ったら誰かに相談を!! 何か悩んでいたら誰かに相談を!! ってニュースなど […]

【WordPress】サブディレクトリにインストールしたサイトのFeedをルートのFeedに含める方法を内製化する方法はない?

Wordpress
考えに考えた挙句、結局長いタイトルになってしまいました(笑)。 マルチサイト環境でないWordpress(マル […]

WordPressでアイコンフォント(Font Awesome)が表示されなくてハマったときの対処

Wordpress
今回のオリジナルテーマ作成で1つハマったことがあります。それはアイコンフォント(Font Awesome)の表 […]

レモン酢が案外簡単でおいしかった

日記・雑記
そろそろ高血圧対策しないと(いったい何歳なの?)・・・で何でも載ってるインターネットで調べたら、レモンの皮に含 […]

オリジナルテーマに変更しました

サイト作成日記
は、はやい~~!!作った甲斐があったってもんです。 このサイト立ち上げ前に見つけた「White Tiger」と […]

ね!いい方法だと思いませんか??記事一覧を表示するプラグインもいろいろありますけどそれだとせっかくの【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で非表示にすればいいんでしょうけど、都度指定するのもなぁ・・・

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

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)