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

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

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

使い方やインストール方法はこちらのページにあります。
ショートコードで子ページ一覧即製!Child Pages Shortcodeの使い方 | WordPressブログ作ってみる?

 

 

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

[child_pages size="post-thumbnail"]

サムネイル付きの小ページブロックの幅はデフォルトで 50% で2列で表示されることにになります。
ブロック幅はパラメータで指定できますが、固定なのでスマホで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表示の際はブロック2列、スマホ表示の際はブロック1列となります。

 

1件のコメント

  1. ピンバック:WordPressの固定ページに子ページの一覧を出す

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です