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

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

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

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

リンクがどこにもなく、単独ページばかりの集まりでは、何よりせっかく訪問した方に失礼、ではコツコツリンクを張る作業をしますか・・・を解消できる、設定なしに子ページの一覧を表示するWordpressプラグイン「child-pages-shortcode」の紹介です。

を参照ください。

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

スポンサーリンク



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

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

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

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

CSS(デザイン)の変更

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

私のスキルが上がっているのか、最初からそうだったのか不明ですが、ちょっとしたデザイン変更だったら案外簡単に行うことができることが分かりました。もちろんCSSを触るのは素人ですから素人なりに基礎的な部分を紹介できたらと思います。

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

トップへ戻る