【WordPress】画像付で子ページの一覧が挿入できるプラグイン「child pages shortcode」のショートコード設定とカスタマイズ

WordPressの固定ページは通常投稿などとは切り離されて管理されるので、サイドバーやトップに表示しているリンクから辿るということになるので、サイトの中でガラパゴス化しやすいコンテンツですが、テンプレートを各々設定できる利点があることと、時系列管理ではないので埋もれにくいという利点もあります。

とはいえ、企業のサイトなどでは固定ページ化して表示する項目がある程度決まっていますが、一般的なサイトではリンクや一覧でつながっていないと見てもらえる機会が少なくなってしまう可能性があります。

これを解消するためのプラグインが「child pages shortcode」になります。概要については

ショートコードを使用してアイキャッチ画像付きの子ページ一覧を表示するプラグイン「child-pages-shortcode」

を参照ください。

ここでは、このプラグインで行えるショートコードのカスタマイズとデザインの変更などについて紹介します

ショートコードのパラメーターと設定

基本となるショートコードは[child_pages]です。

この中にいろいろな要素を含めることで、様々な表示を行うことができます。公式サイトではパラメーターを「””」で囲むようにしてありますが、不具合が出る場合には「””」をなしにすると動作します。私の環境では「””」なしで動作しています。

1. id=親固定ページID・・・通常は親子関係を作った固定ページの一番親部分などにショートコードを入れて子ページの一覧をつくる方法が一般的ですが、このパラメーターを使用することで、全く別の記事や固定ページに指定した親固定ページIDの子ページ一覧を表示することができます
2. width=幅や割合
   1. 本文の幅に占める割合で指定すると50%で２列、25%で４列と言う風に設定できます。表示するブラウザの幅やデバイスの幅に合わせて自動的に調整されるので便利なのですが、実際の表示を確認しながら調整することが必要です
   2. 本文の幅を指定したpx数で表示します。表示するブラウザの幅やデバイスの幅に関わらず決まった幅で表示するので拡大縮小させたくない場合には便利な設定方法です
3. size=画像サイズ・・・表示するアイキャッチ画像のサイズを設定します
   1. thumbnail・・・WordPressの管理画面「設定」→「メディア」で設定したサムネイルのサイズで表示されます
   2. midium・・・WordPressの管理画面「設定」→「メディア」で設定した中のサイズで表示されます
   3. large・・・WordPressの管理画面「設定」→「メディア」で設定した大のサイズで表示されます
   4. fullsize・・・アップロードしたままの画像サイズで表示されます
4. disabled_excerpt_filters=1・・・これを追加すると概要や記事の先頭○文字分の表示がなくなります

CSS（デザイン）の変更

デザインの変更は基本的にCSSの調整と同じです。

CSSを使ったサイトのデザイン変更はブラウザの基本機能で簡単にできる（WordPress　×　GoogleChrome）

上記のページでCSSのセレクタなどを調べて調整します。