Shortcodes Ultimateの投稿一覧のレイアウトを変更する
Shortcodes Ultimateの投稿一覧とは
Shortcodes Ultimateの「投稿」メニューを使うと、ショートコードで投稿を一覧表示することができます。カテゴリー指定も可能でアイキャッチ画像や抜粋も表示できるので非常に便利です。
![Shortcodes Ultimateの「投稿」メニュー](http://www.nishi2002.com/wp-content/uploads/2017/07/2017-07-16-14-35-11.jpg)
ただし、初期設定のデザインでは見出しやアイキャッチ画像が微妙なレイアウトになってしまう場合もあります。たとえば、Lightningでは次のようになります。
![Lightningで投稿を一覧表示した例](http://www.nishi2002.com/wp-content/uploads/2017/07/2017-07-16-14-37-40.jpg)
それほど悪く見えないかもしれませんが、見出しとアイキャッチ画像が重なっているのが気になります。BizVektorでは次のようになります。
![BizVektorで投稿を一覧表示した例](http://www.nishi2002.com/wp-content/uploads/2017/07/2017-07-16-14-39-00.jpg)
かなり微妙です。ただ、ショートコードで投稿を一覧表示できる手軽さは大きなメリットなので、レイアウトを修正して対処できれば、と思います。
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フォルダに保存されたテンプレート](http://www.nishi2002.com/wp-content/uploads/2017/07/2017-07-16-14-43-42.jpg)
このtemplatesフォルダをテーマフォルダにコピーすればカスタマイズできます。典型的には子テーマフォルダに保存することになるでしょう。
![子テーマにテンプレートをコピー](http://www.nishi2002.com/wp-content/uploads/2017/07/2017-07-16-14-49-27.jpg)
これで子テーマにコピーしたテンプレートが読み込まれます。その確認として、子テーマにコピーしたテンプレートの一部を削除してみましょう。反映されるかの確認です。ここではdefault-loop.phpを開いてh2タグを削除しています。
![テンプレートの一部を削除してみる](http://www.nishi2002.com/wp-content/uploads/2017/07/2017-07-16-14-51-34.jpg)
削除が反映されれば成功です。ここでは、見出しが消えたので、このテンプレートが使われていることがわかります。
![テンプレートの変更が反映される](http://www.nishi2002.com/wp-content/uploads/2017/07/2017-07-16-14-55-40.jpg)
反映されていることが確認できれば、元に戻して、あとは自由にカスタマイズすれば大丈夫です。こんな感じにも変更できます。
![Shortcodes Ultimateの投稿一覧のカスタマイズ例](http://www.nishi2002.com/wp-content/uploads/2017/07/2017-07-16-15-06-23.jpg)
微調整になるので詳細手順は省略しますが、テンプレートの中身はテーマのテンプレートと同じような命令構成なので自由に変更してみてください。興味がある方はご連絡ください。