Twentyfifteenからテーマ作成-サイドバーをカスタマイズ


WordPressのテーマ、Twentyfifteenは画面の左側に固定されたサイドバーの中にヘッダが格納されているため、メニューなどの画面遷移情報を左に集約し、右側のコンテンツを上下ギリギリまで表示させることができます。
またスペースも充分とられているので、ブログなど読み物に特化したサイトはとても見やすくなると思います。

しかし、サイドバーのコンテンツが最後まで来るとスクロールがピタッと止まる動作が好きになれず。
また自分のテーマでは、上部に木目メニューをつけるのを最初から決めていたのでサイドバーからヘッダを出したいし。
あと、サイドバーを右にして、スクロールバーを含めコントロールは右側に集約したい。

ということで、以下の点をカスタマイズすることにしました。

サイドバー固定を止めてスクロール可能にする
ヘッダをサイドバーから分離する
サイドバーを右側に移動する

サイドバー固定を止めてスクロール可能にする

サイドバーのスクロールを制御するには、position:fixed を使います。
twentyfifteenのサイドバーのCSSはこれ。

・・・fixedがない :はて?:

functions.php で設定してるのかなと思いましたが、そのようなモノは確認できず。

こういった、ソースを探しても見つけられない場合は、いつもFirefoxの機能拡張Firebugを使います。
すると、

という設定が表示されました。
element.style というこことはJavaScriptで設定してるってことですね。

ありました。jsフォルダの中の function.js
そこに // Sidebar scrolling. という設定を発見。

まるっと削除してやったわ。 :笑:

ヘッダをサイドバーから分離する

一般的なテーマでは、ヘッダ情報は header.php に、サイドバー情報は sidebar.php に格納されています。
しかしTwentyfifteenはサイドバーの中にヘッダがあります。

ファイルを見ると、header.php の最後で sidebar.php を読み込んでいるので、header.php はヘッダでもあり、サイドバーでもあり、ということになります。

私が目指しているのは一体化しているメニュー情報とヘッダ情報を分離することなので、サイドバーのクラス secondarysidebar から外します。

まずは header.php の最後

これを

と1行加えて、sidebar.phpの最後

これを

に変更します。

そしてブレイクポイント「Desktop Small 955px」で class=”sidebar” の幅を100%にします。

twentyfifteenの

これを以下に変更。サイドバーの役割が secondary に移動するため、一部設定を sidebar から secondary に移動します。

恐ろしくズレるので、site-headersecondary をお好みの位置に変更します。

「ヘッダのクラス名が sidebar 」というのもどうかと思いますが :笑: クラス名変更が面倒なのでやってません。

サイドバーからヘッダを分離

以上でヘッダの位置は変更できましたが、メニューはまだサイドバーにあります。
これを上部に移動したいところですが、自分の場合は「移動」せずに「複製」しました。

なぜかというと、移動のみだと画面の横幅が狭くなった際に表示されるトグルメニューからメニューが消えてしまうのです。
メニューもレスポンシブ対応にして表示するなら移動でもいいと思いますが、自分はトグルに格納することにしました。つまり、

ヘッダ( sidebar )のメニューはPCで表示、スマホで非表示
サイドバー( secondary )のメニューはPCで非表示、スマホで表示

これを実装する手順ですが、header.php のこの場所に

sidebar.phpから複製したデータに新規クラス名を指定して組み込みました

style.cssでは新規クラス head-navigation に対し、モバイル幅で非表示に

Desktop Small 955pxのときに表示

逆にサイドバーのメニューは非表示に

とすると意図する表示になりました。
縦並びメニューを横並びにするなどのカスタマイズは通常通りです。

サイドバーを右側に移動する

CSS3だといろんなアイディアが出てくるんだなぁと感嘆した作業です。

まずサイドバーが表示されるのはブレイクポイント「Desktop Small 955px」からなので、このスタイルを変更していきます。
が、混乱するので前述のサイドバー分離をなかったことにして、まっさらのTwentyfifteenから始めます。

これを以下に変更するとサイドバーが右に移動します。

続いて site-content を左に移動。

これを

とすると、画面に不思議な区切りが表示されます。 :まじ?:

サイドバーを右に移動

薄い線がありますがFirebugで見ても contentborder の設定はなし。
影かとも思ったけど box-shadow の設定もなし。

しょうがないのでstyle.cssにある border-leftborder-rightbox-shadow を片っ端から確認。
そして以下の設定を見つけました。

body:before のセレクタをつけて、body が始まる前に29.4118%の空き(= sidebar と同じ幅)があり、全体に影をつけています。
これは、モバイル幅のスタイルから画面が広がりサイドバーを表示する際に、content はそのまま移動させずに body 自体をずらして空きを作る、という趣旨だと思われます。

なんか body +セレクタっていろいろ応用できそうですね。

感心しつつも、自分のテーマではサイドバーを右にしたので折角の最新テクニックは影ともども削除しました。 :んべ~:

その他の背景付けとかメニューは従来の方法でカスタマイズしました。