固定ページの子ページ一覧を表示する方法:プラグイン利用orプラグインなし

この記事のURLとタイトルをコピーする

Photo by Glenn Carstens-Peters on Unsplash

唐突に「このブログに 中の人のつぶやき というコンテンツを追加したい」と思いました。またその方法について、色々考えると固定ページで書くしかないのでは!ということになりました。つまり、固定ページで親ページを作ってそこにコンテンツを追加していけばいいのでは、と。しかし固定ページには親子関係を一覧で表示するという機能は最初からはついていないので子ページの一覧を表示する方法について考えてみました。

プラグインを使えば、簡単に実現できる

最初に「固定ページの子ページを表示する」ということを思いついたとき、あれ?そういう機能って最初から入っているよね?と思いました。というのもLightningというテーマをよく使っていて、そのテーマの推奨プラグインVK All in One Expansion Unitが入っている状態が多いからなのでした。VK All in One Expansion Unitを入れると、固定ページの下部に

このようにオプションとして子ページ一覧の表示があり、チェックをすれば

こんな感じに 親ページを表示すると 赤枠に親ページのコンテンツ、青枠に子ページの一覧 が表示されます。

うん、これでいいいいんですが。。。このブログの問題点がそれを阻むのです。

このブログの問題点スピード、を考えるととれる手段は…

このブログの問題点はスピードが遅いということです。ブログを始めたころ何も考えずに、ブログに書いたネタを実現するためにこのWEBサイトに記事で使ったプラグインを入れたり、JavaScriptを直接読み込ませたりしていました。今は色々と知恵も付いたのでそういうことはしていないのですが。その結果、ページの表示がとっても遅いという結果になっています。

中の人のつぶやきは投稿的なコンテンツなので通常なら投稿で書くべきですが、このブログはIT情報の発信がメインなので、ちょっとしたつぶやきを同じ投稿に入れると色々と除外しないといけないことが多くなりややこしいなと思いました。そういった場合、カスタム投稿タイプを作るということも考えるのですが、それもちょっと中の人のつぶやきを書くためにカスタム投稿タイプというのも重い、と思ってじゃ、固定ページで書いていけばいいよね!ということになったのでした。

というページの表示速度に問題ありということがあるためVK All in One Expansion Unitさえ入れれば一覧は表示できるということがわかっても、新しいプラグインをこれ以上追加したくはないと思いました。

ということで、固定ページの一覧を表示するカスタマイズをプラグイン無しですればいいじゃないかと思いました。

スラッグを指定して子ページの一覧を表示するショートコード

ということで、子ページの一覧を表示するショートコードを作りました。

まずは WordPress Codex で、

関数リファレンス/get page children

get_page_childrenという関数を見つけました。これを使って、スラッグを指定して子ページの一覧を表示するショートコードを作ってみました。

コードはこちら

今回は nakanohito というスラッグの固定ページの子ページ一覧を表示する、という目的のみがあったためデフォルトのスラッグを nakanohito としました。それだけだと面白くないので、ショートコードの引数としてスラッグを指定すればそのスラッグの子ページ一覧を表示するようにしてあります。

例えば、

こんな感じに2つの親子関係の固定ページがあったとき、ショートコードで

このように書けば、

nakanohitoスラッグの子ページ一覧が表示され、

このように、parent_page=表示したい親固定ページのスラッグを指定すれば、

このように指定した親固定ページの子ページ一覧が表示されます。

このショートコードは、子テーマのfunctions.phpに追加するか、code snippetsプラグインを入れてある場合は、このコードを追加するかあるいは、ファイル(固定ページ子ページ一覧表示ショートコード.code-snippets)をダウンロード&解凍後code snippetsでインポートして有効化すると利用することができます。

ウィジェットエリアに表示したかったので件数も指定できるようにした

実際にこのショートコードをこのWEBサイトに入れてみたときに「ウィジェットエリアにも表示したいな」と思いました。ショートコードなのでそのまま表示させることもできるんですが、件数を限定していなかったということに気づきました。

ということで件数が限定できるコードを追加しました。

maxという引数を追加して、何も指定してなければ全件(99999とかにしておけばそれ以上はないかなーと)表示され、指定しれあればその件数分だけ表示されるというようにしました。

つまり、

このように指定して表示すれば、

指定した件数分だけのリンクが表示されます。

インポート用のzipファイルはこちら(固定ページ子ページ一覧表示ショートコード件数あり.code-snippets)になります。先ほどのコードとfunction名が同じなので、お使いになる場合はこちらもしくは先ほどのコードのどちらか片方だけをお使いください。

ということでこのブログの「中の人のつぶやき」をひっそりと公開しました

ということでこのブログの「中の人のつぶやき」をひっそりと公開しました。

ご利用ありがとうございます。こちらは中の人のつぶやきの場所です。 こういうのは本来は「投稿」ですべきなんですが、このサイトは投稿がメイ...

本当にひっそりと、公開しています。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。