Shortcodes Ultimateの投稿一覧のレイアウトを変更する

Shortcodes Ultimateの投稿一覧とは

Shortcodes Ultimateの「投稿」メニューを使うと、ショートコードで投稿を一覧表示することができます。カテゴリー指定も可能でアイキャッチ画像や抜粋も表示できるので非常に便利です。

ただし、初期設定のデザインでは見出しやアイキャッチ画像が微妙なレイアウトになってしまう場合もあります。たとえば、Lightningでは次のようになります。

それほど悪く見えないかもしれませんが、見出しとアイキャッチ画像が重なっているのが気になります。BizVektorでは次のようになります。

かなり微妙です。ただ、ショートコードで投稿を一覧表示できる手軽さは大きなメリットなので、レイアウトを修正して対処できれば、と思います。

Shortcodes Ultimateでは投稿一覧に使うテンプレートをカスタマイズできます。

Shortcodes Ultimateの投稿一覧のテンプレートカスタマイズ

投稿一覧のテンプレートはShortcodes Ultimateプラグインのtemplatesフォルダに保存されています。具体的には次のフォルダです。

wp-content/plugins/shortcodes-ultimate/templates

保存されているテンプレートは次のとおりです。

• templates/default-loop.php - 投稿ループ
• templates/teaser-loop.php - サムネイルとタイトルの記事ループ
• templates/single-post.php - シングル投稿テンプレート
• templates/list-loop.php - 記事のタイトルとリスト

このtemplatesフォルダをテーマフォルダにコピーすればカスタマイズできます。典型的には子テーマフォルダに保存することになるでしょう。

これで子テーマにコピーしたテンプレートが読み込まれます。その確認として、子テーマにコピーしたテンプレートの一部を削除してみましょう。反映されるかの確認です。ここではdefault-loop.phpを開いてh2タグを削除しています。

削除が反映されれば成功です。ここでは、見出しが消えたので、このテンプレートが使われていることがわかります。

反映されていることが確認できれば、元に戻して、あとは自由にカスタマイズすれば大丈夫です。こんな感じにも変更できます。

微調整になるので詳細手順は省略しますが、テンプレートの中身はテーマのテンプレートと同じような命令構成なので自由に変更してみてください。興味がある方はご連絡ください。