_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を記載していきます。

/**
 * 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-layout

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

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

dev-tools

まとめ

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

書籍を出版しました!

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。