【Twenty Fifteenカスタマイズ】レスポンシブにサイドバーのウィジェットを常時表示させる

 テーマTwenty Fifteenにして気になるのが、スマホやタブレットで表示すると唯一のサイドバーが小さくボタン(ブロック)になってしまう事でした。

15footer3

 そのボタンをクリックすれば、メニューやウィジェットが表示されるワケですが、検索してちょいと訪れてくれた人がそこをクリックしてまで別のページを見てくれるとは到底思えません。ということで、サイドバーが隠れてしまうスマホ・タブレットではフッターにその部分を常時表示させるようにカスタマイズした方法です。なるべく簡単に、子テーマを使って、チョコチョコと数箇所変更してできる方法をガチャガチャ試してたら出来ました。

子テーマにfooter.phpとsidebar.phpをコピー

 twentyfifteenのテーマフォルダから、footer.phpとsidebar.phpを子テーマのフォルダにコピーします。

sidebar.phpをsidebar-○○○.phpにリネーム

 子テーマにコピーしたsidebar.phpを、sidebar-○○○.phpにファイル名を変更します。

今回は、例として「sidebar-2.php」としたとして話を進めます。

sidebar-2.phpを編集する

 11行目を変更します。

変更箇所の名前は任意ですが、今回は例として「”secondary-footer”」にしています。

footer.phpを編集する

 12行目に一行追加します。

  13行目に一行追加しました。

  sidebar-○○○.phpの「○○○」部分を(”○○○”)に入れています。

子テーマのstyle.cssに追加

 子テーマのstyle.cssにてスタイルを指定します。レスポンシブデザインなので画面幅に合わせて次の記述を追加します。

動作確認

 PCでサイドバーが出ているときは非表示、スマホやタブレットではフッターにサイドバー部分のウィジットなどが出ていれば成功です。

最後にひとこと

 twenty fifteenはサイドバーひとつにウィジット全部突っ込めばいいので、管理がラクですし、合理的だと思います。スタイルも洗練されていて、とても気に入っています。

こちらの記事もどうぞ

“【Twenty Fifteenカスタマイズ】レスポンシブにサイドバーのウィジェットを常時表示させる” への1件の返信

コメントを残す

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