_s(underscores)は有効化した直後のレイアウトはこのようになっています。
１カラムというか、レイアウト自体がなにもCSSによって設定されていません。こちらを既存のCSSを適応してレイアウトを変更してみましょう。
デフォルトで用意されているレイアウトは２種類
デフォルトで用意されているレイアウトは２種類あります。【左コンテンツ・右サイドバー】もしくは【左サイドバー・右コンテンツ】のどちらかです。このレイアウトにしてくれるCSSがlayoutというフォルダに入っています。前者レイアウト用はcontent-sidebar.css、後者レイアウト用はsidebar-content.cssですね。わかり易いファイル名で助かります。
では、今回は例として【左コンテンツ・右サイドバー】のcontent-sidebar.cssを利用してレイアウトを変更してみようと思います。
CSSはfunctions.phpから読み込みます
以前こちらの記事でも触れていますが、functions.phpに読み込みたいCSSを記載していきます。
/**
* Enqueue scripts and styles.
*/
function olein_scripts() {
wp_enqueue_style( 'olein-style', get_stylesheet_uri() );
wp_enqueue_style( 'olein-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'olein-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'olein_scripts' );
FontAwesomeのCSSを設定した後に加えて書いていきましょう。
content-sidebar.cssの場所はlayouts/content-sidebar.cssですね。layoutsというフォルダの中にcontent-sidebar.cssが入っています。
そして、今回は以前のFontAwesomeのCSSとは違い、テーマ内のファイルにアクセスさせることになります。その際に便利なのがget_template_directory_uri()という関数です。こちらの関数は有効化しているテンプレートディレクトリのURIを取得します。簡単に言えばテーマフォルダへのパスをこちらの関数で示すことができます。
wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
例としてこちらを見てみましょう。FonAwesomeのCSSを記述した下にあるJavaScriptを読み込んでいる部分になります。こちらで使われているのがget_template_directory_uri()です。jsフォルダはテーマ内に置いてありますので、get_template_directory_uri()を使うと簡単にテーマ内ファイルへのパスを書くことができます。
では、書いてみましょう。
wp_enqueue_style( 'olein-layout-content-sidebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );
このように書けば良いということになります。この部分の全体を見てみるとこうなります。
/**
* Enqueue scripts and styles.
*/
function olein_scripts() {
wp_enqueue_style( 'olein-style', get_stylesheet_uri() );
wp_enqueue_style( 'olein-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
wp_enqueue_style( 'olein-layout-content-sidebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );
wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'olein-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'olein_scripts' );
レイアウトを確認してみましょう
では、保存してレイアウトが変更されているか確認してみましょう。
このように、左にメインコンテンツ、右にサイドバーというレイアウトに変更されましたね。
デベロッパーツールでもcontent-sidebar.cssをちゃんと読み込んでいることが確認できます。
まとめ
レイアウトが２カラムになったことで、少しはホームページのように見えてきましたかね？まだ、完璧なテキストサイトなので、徐々にカスタマイズしていく方法を記事にしていこうと思います。
