_s(underscores)を2カラムレイアウトにする

_s(underscores)は有効化した直後のレイアウトはこのようになっています。

ready-for-underscores-19

1カラムというか、レイアウト自体がなにもCSSによって設定されていません。こちらを既存のCSSを適応してレイアウトを変更してみましょう。

デフォルトで用意されているレイアウトは2種類

デフォルトで用意されているレイアウトは2種類あります。【左コンテンツ・右サイドバー】もしくは【左サイドバー・右コンテンツ】のどちらかです。このレイアウトにしてくれるCSSがlayoutというフォルダに入っています。前者レイアウト用はcontent-sidebar.css、後者レイアウト用はsidebar-content.cssですね。わかり易いファイル名で助かります。

では、今回は例として【左コンテンツ・右サイドバー】content-sidebar.cssを利用してレイアウトを変更してみようと思います。

CSSはfunctions.phpから読み込みます

以前こちらの記事でも触れていますが、functions.phpに読み込みたいCSSを記載していきます。

FontAwesomeのCSSを設定した後に加えて書いていきましょう。

content-sidebar.cssの場所はlayouts/content-sidebar.cssですね。layoutsというフォルダの中にcontent-sidebar.cssが入っています。

そして、今回は以前のFontAwesomeのCSSとは違い、テーマ内のファイルにアクセスさせることになります。その際に便利なのがget_template_directory_uri()という関数です。こちらの関数は有効化しているテンプレートディレクトリのURIを取得します。簡単に言えばテーマフォルダへのパスをこちらの関数で示すことができます。

例としてこちらを見てみましょう。FonAwesomeのCSSを記述した下にあるJavaScriptを読み込んでいる部分になります。こちらで使われているのがget_template_directory_uri()です。jsフォルダはテーマ内に置いてありますので、get_template_directory_uri()を使うと簡単にテーマ内ファイルへのパスを書くことができます。

では、書いてみましょう。

このように書けば良いということになります。この部分の全体を見てみるとこうなります。

レイアウトを確認してみましょう

では、保存してレイアウトが変更されているか確認してみましょう。

content-sidebar-layout

このように、左にメインコンテンツ、右にサイドバーというレイアウトに変更されましたね。

デベロッパーツールでもcontent-sidebar.cssをちゃんと読み込んでいることが確認できます。

dev-tools

まとめ

レイアウトが2カラムになったことで、少しはホームページのように見えてきましたかね?まだ、完璧なテキストサイトなので、徐々にカスタマイズしていく方法を記事にしていこうと思います。