WordPress Child Pages Shortcode のレスポンシブ対応

こちらのブログの更新だいぶ久しぶりとなってしまいました。ネタは作業しながら溜めてはいるのですが、なかなか業務しながらコンスタントに更新するのは難しいですね。。。

さて、Wordpress のプラグインの紹介です。
ショートコード「Child Pages Shortcode」は、Wordpress 上で子ページの一覧をサムネイル付きで表示してくれます。

使い方やインストール方法はこちらのページにあります。

WordPressブログ作ってみる?

 

19 Posts

ショートコードで子ページ一覧即製！Child Pages Shortcodeの使い方

ワードプレスのプラグイン、Child Pages Shortcodeは簡単なショートコードで固定ページの子ページ一覧をサクサク作れる便利なプラグインです。このChild Pages Shortcodeの基本的な使い方、属性で見映えを調整する方法、カスタムフィールドでカスタマイズする方法を解説しました。

以下のショートコードを投稿記事に記述するだけで、小ページ一覧がサムネイル付きで表示されるので、とても便利です。（自分はサムネイルのサイズは post-thumbnail が好きです）（以下は［ ］を全角にしています）

[child_pages size="post-thumbnail"]

サムネイル付きの小ページブロックの幅はデフォルトで 50% で2列で表示されることにになります。
ブロック幅はパラメータで指定できますが、固定なのでスマホで２列表示になった場合、ブロック幅が狭くなり縦長のカッコ悪い表示になってしまいます。

CSSで切り換える方法が王道だとは思いますが、うまくいかなかったので、直接 php をいじってPCとスマホで表示される幅を切り換えるようにしました。

child-pages-shortcode/child-pages-shortcode.php のプラグイン編集画面を開き、private function get_template() の中の以下の行を切り換えるようにします。

$html .= '<div id="child_page-%post_id%" class="child_page" style="width:%width%;max-width:100%;">'; 

この際に、wp_is_mobile()　関数を使いスマホからのアクセスを判断します。

if (wp_is_mobile()) {
    $html .= '<div id="child_page-%post_id%" class="child_page" style="width:100%;max-width:100%;">';
} else {
    $html .= '<div id="child_page-%post_id%" class="child_page" style="width:%width%;max-width:100%;">';
}

として、スマホの場合は width を 100% にします。

これで、PC表示の際はブロック２列、スマホ表示の際はブロック１列となります。