Twenty Fifteen のデザイン

ヘッダーとサイドバーが融合し、スクロール固定を採用

ヘッダーと視認できる部分はなく、サイドバーがヘッダーになっています。header.php の中にサイドバーが含まれるつくりです。このサイドバー部分に、コンテンツ以外のものは全て表示させる構造になっています。サイトタイトル、ナビゲーションメニュー、ウィジェットが全てここにきます。
サイドバーは一番下までスクロールすると固定されます。

スペースいっぱいの大きなアイキャッチ

Twenty Fifteen には大きなアイキャッチ（サムネイル）が表示されます。推奨サイズは 幅 825px に高さ 510px です。このサイズの画像をアイキャッチとして用意すれば、Twenty Fifteen のレイアウトにきれいに表示されます。
これまでアイキャッチの画像に 1208px × 540px の画像を使っていたんですが、このサイズの画像だとスペースいっぱいに表示されませんでした。
また、新たに 1208px × 540px のアイキャッチをアップロードしたら、コンテンツのスペースをはみ出して表示されてしまいました。縮小されずにそのままのサイズで表示されているようです。
色々なサイズで試してみましたが、以下のようになりました。

新規にアップロードした画像に関しては、推奨サイズにしておいた方がよさそうです。既にアップロード済みの画像がうまくはまらないので、なんとか最適化されるようにしたいものです。

主なパーツの幅やサイズ

Twenty Fifteen のカスタマイズ

Twenty Fifteen の背景や色の変更、ウィジェットやメニューの設定についてです。

Twenty Fifteen のカラーパターン変更

Twenty Fifteen には、予め 6 つのカラーパターンが用意されています。カスタマイズ画面から選択することで変更できます。

ヘッダー画像の変更

メインメニューの設定

メニューといえばヘッダーの上か下に配置されることが多いのですが、Twenty Fifteen には明確なヘッダー部分がなく、ナビゲーションメニューもサイドバーに表示されます。
デザイン・レイアウト的にはウィジェットを追加するのとなんの違いもありませんが、メニューでは階層を指定でき、また今回メニューに補足説明を追加できるようになっています。
さらにソーシャルメニューというものが用意されていて、ソーシャルメディアの URL をメニューに追加すると、ソーシャルアイコンとして自動的に表示されるようになっています。

メニューに補足説明を追加する方法

外観 > メニューから設定できます。このメニュー設定のページを開いた状態で右上の【表示オプション】をクリックすると、以下のようなメニューが表示されます。【詳細メニュー設定を表示】の右端にある【説明】にチェックをいれると、メニューの中に詳細を入力するボックスが表示されます。

ソーシャルメニューの設定

初めから用意されているメニューは 2 つ、メインメニューとソーシャルメニューです。中でもソーシャルメニューには、ソーシャルリンクを追加することで、自動的にソーシャルアイコンとして表示をしてくれるようになっています。
対応しているソーシャルメディアは以下の通り。RSS や Feedly などが使えないのは残念でした。

(1) ソーシャルアイコン用のメニューを追加

外観 > メニューから設定できます。メニューの名前を決めて【メニューを作成】をクリックします。

(2) 作成したメニューの中にリンクを追加

リンクのタブを開き、ソーシャルメディアの URL を入力し、【メニューに追加】をクリック。

(3) ソーシャルリンクメニューとして表示させる

必要なメニューを追加したら、【メニュー設定】のところで【ソーシャルリンクメニュー】にチェックを入れます。するとサイドバーにソーシャルアイコンが表示されます。

ウィジェットの設定

ウェイジェットを追加できるエリアはサイドバーのみです。ヘッダー部分にサイトタイトルが表示され、その下にメニュー、ソーシャルメニューが続き、その下からがウィジェットエリアになります。
カスタマイズ方法はこれまで通りで特筆すべき点はありません。

Twenty Fifteen の構造

PHP ファイルの中身をちょっと見てみたいと思います。
まずは header.php です。いきなり id=”sidebar” となっています。その下からヘッダー部分が始まり、サイトタイトルとサイトディスクリプションを出力するタグが配置されています。
その下はサイドバーが出力されるようになっていますね。

<div id="page" class="hfeed site">
	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
	<div id="sidebar" class="sidebar">
		<header id="masthead" class="site-header" role="banner">
			<div class="site-branding">
				<?php
					if ( is_front_page() && is_home() ) : ?>
						<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
					<?php else : ?>
						<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
					<?php endif;
					$description = get_bloginfo( 'description', 'display' );
					if ( $description || is_customize_preview() ) : ?>
						<p class="site-description"><?php echo $description; ?></p>
					<?php endif;
				?>
				<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
			</div><!-- .site-branding -->
		</header><!-- .site-header -->
		<?php get_sidebar(); ?>
	</div><!-- .sidebar -->
	<div id="content" class="site-content">

sidebar.php を見てみると、ナビゲーションメニューがここに配置されていますね。このナビメニューの中にはメインメニューとソーシャルメニューの 2 つが配置されていることが分かります。
そして、ナビゲーションメニューの後にウィジェットが来ています。

<?php
/**
 * The sidebar containing the main widget area
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) || is_active_sidebar( 'sidebar-1' )  ) : ?>
	<div id="secondary" class="secondary">
		<?php if ( has_nav_menu( 'primary' ) ) : ?>
			<nav id="site-navigation" class="main-navigation" role="navigation">
				<?php
					// Primary navigation menu.
					wp_nav_menu( array(
						'menu_class'     => 'nav-menu',
						'theme_location' => 'primary',
					) );
				?>
			</nav><!-- .main-navigation -->
		<?php endif; ?>
		<?php if ( has_nav_menu( 'social' ) ) : ?>
			<nav id="social-navigation" class="social-navigation" role="navigation">
				<?php
					// Social links navigation menu.
					wp_nav_menu( array(
						'theme_location' => 'social',
						'depth'          => 1,
						'link_before'    => '<span class="screen-reader-text">',
						'link_after'     => '</span>',
					) );
				?>
			</nav><!-- .social-navigation -->
		<?php endif; ?>
		<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
			<div id="widget-area" class="widget-area" role="complementary">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</div><!-- .widget-area -->
		<?php endif; ?>
	</div><!-- .secondary -->
<?php endif; ?>

Twenty Fifteen のカスタマイズがうまくできない場合

Twenty Fifteen では色々なカスタマイズができますが、その中でも色の設定があります。サイドバーと背景色と文字色を自由に設定できます。いくつかのパターンも用意されているので、そこから選択することもできます。
しかし、プラグインの Head Cleaner を有効化していると、不具合を起こして色の変更ができませんでした。他にも相性の悪いプラグインがあるかもしれませんね。
カスタマイズがうまく反映されない場合は、プラグインが原因となっているケースが多いです。プラグインが問題を起こしているかな？　と思った時は、一旦すべて停止させて、1 つ 1 つ有効化していくとどのプラグインが悪さをしているのか確認できます。怪しいと思ったらプラグインをチェックしてみてくださね。

JetPack とは？

Jetpack とは WordPress のプラグインです。非常にたくさんの機能（モジュールと呼ばれています）が備わったプラグインで、もはや WordPress には必須のプラグインと言ってもいいでしょう。ソーシャルプラグインの実装や、アクセス解析、便利なウィジェットの追加などが一手に行えます。
その数あるモジュールの中の 1 つに、ウィジェットの表示/非表示を設定できる機能があります。このモジュールを有効にするだけで、ウィジェット管理画面からウィジェットの表示/非表示を簡単に細かく設定できます。
＞ Jetpack のダウンロードはこちらからできます。

Jetpack の Widget Visibility を使用して、ページごとにウィジェットをカスタマイズ

Jetpack には多くのモジュールがありますが、今回使用するのは Widget Visibility です。

(1) Widget Visibility を有効化

Jetpack の設定画面で Widget Visibility を有効化します。

(2) ウィジェット設定画面で、必要なウィジェットを全て追加する

条件に関わらず、全ページのサイドバーやフッターに、まずは全てのウィジェットを追加します。表示させたいウィジェットや特定のページでのみ表示させたいウィジェット、逆に特定のページでのみ非表示にしたいウィジェットなど、全てです。

(3) 公開状態で、ウィジェットの表示/非表示を個別に設定

Widget Visibility を有効化していれば、ウィジェットに【 公開状態 】というボタンが表示されているはずです。この【 公開状態 】をクリックすると、ウィジェットの表示/非表示の条件を設定することができます。

実践例）フロントページで特定のウィジェットを非表示にしてみる

試しに設定してみたいと思います。事例で使用しているのは Twenty Thirteen をベースにカスタマイズしたテーマです。サイドバーに追加するウィジェットの 1 つを、フロントページでのみ非表示にしたいと思います。

(1) サイドバーにウィジェットを追加する

まずは表示/非表示に関わらず、必要なウィジェットを全て追加します。今回使用しているウィジェットは以下の 5 つです。

(2) ウィジェット管理画面から表示や非常時を設定する

それではウィジェットの表示/非表示を設定していきましょう。今回は先ほど追加した 5 つのウィジェットの内、アドセンス広告のテキストウィジェットをフロントページで非表示にしてみたいと思います。
テキストウィジェットの【 公開状態 】をクリックして、以下の様に設定の上保存しました。

つまり……

という設定です。それではフロントページへ行って表示を確認してみましょう。

実際にアドセンス広告が非表示になっていました。これでフロントページだけ非表示にする設定ができました。
他にも、特定のカテゴリーページやタグページ、特定の固定ページでウィジェットの表示をカスタマイズすることができます。

選択するだけの簡単操作で、ウィジェットを自由にカスタマイズできる

いかがでしたでしょうか？　とても簡単にウィジェットの表示をカスタマイズできると思います。PHP の知識を今から覚える必要はありません。FTP からテーマを直接編集する必要もありません。ダッシュボードからいつでも簡単に設定できてしまいます。
ショートカットできるものはショートカットして、より重要度の高いタスクに時間を割けるようにしましょう。
ちなみに、Jetpack は他にも様々な機能（モジュール）を備えていて、とても便利なプラグインになっています。繰り返しになりますが、WordPress をインストールしたなら、即座に入れるプラグインの 1 つです。必ずインストールしておきましょう。

そもそもパンくずリストとは？

パンくずリストとは、ウェブサイトのページの階層を分かりやすく示すリストのことです。このブログの投稿でも、カテゴリーがパンくずリストとして表示されるようにしました。

投稿の場合は、カテゴリーをリスト表示させるのが一般的です。一方固定ページの場合は、親ページと子ページという関係性がある場合にパンくずリストを使って階層表示させることができます。
パンくずリストは SEO 的にも実装した方がよいようです。SEO で大事なことの 1 つは、検索エンジンクローラーができる限りページを巡回してくれることです。その巡回頻度を増やすためにパンくずリストが有効なわけです。

パンくずリストを出力してくれるタグ

投稿カテゴリーのパンくずリスト

カテゴリーをリスト表示させるには以下を追記します。

<a href="<?php bloginfo('url'); ?>">TOP</a>&nbsp;>&nbsp;
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, '&nbsp;>&nbsp;'); ?>
<?php the_title(''); ?>

どこに追加すればいいのかは後ほど・・・。

固定ページのパンくずリスト

企業のコーポレートサイトなどは、固定ページのパンくずリストを追加したいと思うでしょう。その場合は以下を追記します。

<a href="<?php echo get_option('home'); ?>">TOP</a>&nbsp;>&nbsp;
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a>&nbsp;>&nbsp;
<?php } ?>
<?php the_title(''); ?>

どこに追加すればいいのかはこの次で・・・。

パンくずリストの追記場所

Twenty Thirteen の場合を例に説明していきたいと思います。パンくずリストは基本的にページのヘッダーの下辺りに配置されます。なので、【 header.php 】のナビゲーションメニューの下に追記したいと思います。
基本的には上記のタグを記載していくのですが、それぞれ表示場所が異なるので、その使い分けを指定します。具体的には、トップページでは非表示。投稿ページではカテゴリーのパンくずリスト。固定ページでは階層のパンくずリストが表示されるようにします。条件分岐タグを利用します。

<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php get_search_form(); ?>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
/* ▼ パンくずリストを追記 ▼ */
<div id="breadcrumbs">
<?php if ( is_single() ) : ?><!-- 投稿ページでの表示を指示 -->
<a href="<?php bloginfo('url'); ?>">TOP</a>&nbsp;>&nbsp;
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, '&nbsp;>&nbsp;'); ?>
<?php the_title(''); ?>
<?php endif; ?>
<?php if ( is_page() ) : ?><!-- 固定ページでの表示を指示 -->
<a href="<?php echo get_option('home'); ?>">TOP</a>&nbsp;>&nbsp;
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a>&nbsp;>&nbsp;
<?php } ?>
<?php the_title(''); ?>
<?php endif; ?>
</div><!-- #breadcrumbs -->
</header><!-- #masthead -->
<div id="main" class="site-main">

Twenty Thirteen の場合は CSS でパンくずリストをきれいに整える

Twenty Thirteen の場合、ただ header.php に追記しただけでは端の方に表示されます。ブラウザの左端です。そこで、コンテンツの幅に合うようにレイアウトを整えたいと思います。

#breadcrumbs {
margin: 30px auto 0;
max-width: 1040px;
position: relative;
}

Twenty Thirteen の場合は横幅の指定が必要です。デフォルト通りであれば、最大 1040px にしましょう。これでレスポンシブデザインにも対応できます。

参考にさせて頂いたサイト

ありがとうございました。

まずはじめに、固定ページのテンプレートとは？

固定ページとは WordPress のページ作成タイプの 1 つです。ブログのような時系列での投稿とは違い、時間軸とは独立したページを作成できます。階層構造を持っていて、いわゆるホームページのページに近い役割があります。
WordPress の「投稿」はブログ、「固定ページ」はホームページという感じで認識しておくといいと思います。
そして、この固定ページは、ページごとに異なるレイアウトを適用できる、テンプレートというものを追加できます。このテンプレートの数だけ、レイアウトを用意することができ、ページ A にはテンプレート A、ページ B にはテンプレート B のように使い分けることができます。

Twenty Twelve の固定ページテンプレートの場合

例えば、WordPress のデフォルトテーマの 1 つである Twenty Twelve には、以下のような 3 つのテンプレートが備わっています。

そして、固定ページごとに、このテンプレートを選ぶことができます。

Twenty Thirteen には固定ページテンプレートがない

しかし、Twenty Thirteen にはこのテンプレートがありません。固定ページのレイアウトは、サイト全体のレイアウトと共通したものになります。Twenty Thirteen のレイアウトは、ワンカラムか、右サイドバーの 2 カラムの 2 パターンです。ですので、2 カラムの設定にしていた場合は、「投稿」も「固定ページ」も共通して 2 カラムになります。

実践：ワンカラムのテンプレートを追加する

それでは、この Twenty Thirteen に固定ページのテンプレートを追加したいと思います。追加するのはワンカラムのテンプレートです。なぜワンカラムのテンプレートを追加するのか？　それは、固定ページごとに、ワンカラムと 2 カラムのレイアウトを選べるようにするためです。
前提として、Twenty Thirteen の基本の設定を 2 カラムにしておきます（これはサイドバー（副ウェジェットエリア）にウィジェットを 1 つでも追加すれば、自動的に 2 カラムになります）。
この場合、通常固定ページも 2 カラムになってしまうのですが、そこにワンカラムのテンプレートを用意することで、2 カラムとワンカラムを使い分けることができる、というわけです。

Twenty Thirteen の固定ページへテンプレートを追加する方法

(1) 固定ページテンプレート（page.php）を複製する

まずは、デフォルトの固定ページのテンプレートに該当する PHP ファイル（page.php）を探して、複製します。

(2) 複製した PHP ファイルの名称を変える

複製したファイルに名前をつけてください。今回はワンカラムのページテンプレートにするので【 onecolumn-page.php 】としました。

(3) 複製した PHP ファイルを編集する

onecolumn-page.php のファイルを以下の様に書き換えます。変更点は 2 点。冒頭のテンプレートの説明部分の書き換えと、下部のサイドバー出力の PHP タグの削除です。

/* ▼ Template Name と Description を追記 ▼ */
<?php
/**
* Template Name: ワンカラムテンプレート
* Description: A Page Template that no sidebar
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post -->
<?php comments_template(); ?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #primary -->
/* 下から 2 行目の get_sidebar というタグを削除 */
<?php get_footer(); ?>

(4) 専用の CSS セレクタを指定する

複製したファイルの CSS を個別に指定できるように、専用のセレクタを追加します。onecolumn-page.php の <article> 〜 </article> の間を囲みます。今回は <div> で囲みましたが、もっとスマートな方法があるかもしれません。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
/* ▼ 新たに任意のセレクタ（class）を追記 ▼ */
<div class="one-column">
<header class="entry-header">
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
/* 〜省略〜 */
<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->
</div>/* ちゃんと閉じるのも忘れずに */
</article><!-- #post -->

固定ページを確認してみましょう

固定ページの編集画面を確認してみましょう。【ページ属性】を見てみると、【テンプレート】という項目が表示されています。

これで、デフォルトテンプレートか追加したワンカラムテンプレートを選べるようになります。ワンカラムテンプレートのレイアウトを変更したい場合は、スタイルシートで追記したセレクタを使った指定を行えば OK です。先ほどの例で言うと、ワンカラムテンプレートの横幅を広げたいときは以下のようにします。

.one-column .entry-header,
.one-column .entry-content,
.one-column .entry-summary,
.one-column .entry-meta {
 padding: 30px 150px;
}

Twenty Thirteen では、副ウィジェットエリアに何かウィジェットを追加していないと、デフォルトテンプレートでもワンカラム表示になるのでご注意ください。

スタイルシート（子テーマ）への記述内容

全てに共通する記述

html {
 overflow: auto;
}
body {
 overflow: hidden;
}
@media screen and (min-width: 600px) {
 .site {
  overflow: visible;
 }
}

横幅を広げたい部分に関する記述

#example {
 margin-right: -500%;
 margin-left: -500%;
 padding-right: 500%;
 padding-left: 500%;
}

Twenty Twelveの基本となるパーツのセレクタはこちら

注）グローバルメニューのセレクタについて

グローバルメニューのデザインを指定しているセレクタは、上記の id や class 以外にもいくつもあります。メニューをどのようにカスタマイズしているかで、指定すべきセレクタが変わってくるようです。
特に Twenty Twelve のグローバルナビメニューは、上下に 1px のボーダーが引かれていますが、実は上記の 2 つのセレクタでは、このボーダーまで横に伸ばすことができません。
ボーダーも横に伸ばしたい場合は、以下のセレクタを、左右のマージン、パディングともに引き延ばす必要があります。

デフォルト状態のグローバルナビメニュー

デフォルト状態のグローバルナビは、作成した固定ページへのリンクが順番に表示されるようになっています。1460 行目からの記述にマージンやパディングを追記すると、ボーダーも含めて横幅を広げることが可能です。

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* 〜省略〜 */
 .main-navigation ul.nav-menu,
 .main-navigation div.nav-menu > ul {
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  display: inline-block !important;
  text-align: left;
  width: 100%;
  margin-right: -500%;
  margin-left: -500%;
  padding-right: 500%;
  padding-left: 500%;
 }
}

カスタムメニューで変更した場合のグローバルナビメニュー

カスタムメニューで独自のメニューを作成し、グローバルナビに適用させた場合は、上記のセレクタ以外にも以下のセレクタが使えます。

#menu-global-nav {
 margin-right: -500%;
 margin-left: -500%;
 padding-right: 500%;
 padding-left: 500%;
}

Twenty Twelveでの注意点とは？

Twenty Eleven の記事でもお伝えしたように、基本的な考え方は変わりません。なので、別に Twenty Eleven でなくても Twenty Twelve でなくても使えるテクニックです。
ただ、Twenty Twelve の場合はデフォルトの CSS で影響で、うまくいかず、ちょっとした工夫が必要になります。
以下は上記設定の考え方になりますので、興味のある方はどうぞ・・・。

グローバルナビゲーションメニューだけ広がらない

Twenty Eleven の場合と同じようにスタイルシートを記述した場合、グローバルメニューの部分がブラウザいっぱいに広がってくれません。以下のようにある範囲までしか広がらないのです。

その範囲はというと、どうやら【 .site 】というセレクタで指定されている部分のようです。

なぜ、グロナビはサイトの範囲内までしか横に広がってくれないのか？

その原因はスタイルシートに記述されている【 overflow 】の値にありました。デフォルトでは以下のように記述されています。

/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* 〜省略〜 */
 .site {
  margin: 0 auto;
  max-width: 960px;
  max-width: 68.571428571rem;
  overflow: hidden;
 }

この【 overflow 】ははみ出た部分をどうするか、ということを指定しています。デフォルトの指定は【 hidden 】なので、はみ出た部分は非表示になります。つまりこれが原因で横に広がった部分が表示されず、サイトの範囲内に収まったように見えていたわけです。
この部分を表示させるには、【 overflow 】の値を【 hidden 】から【 visible 】へ変更する必要があります。これで、グローバルナビゲーションメニューも左右横にちゃんと広がってくれます。

カスタムフィールドを使用して、任意のCSSファイルを適用させる

カスタムフィールドを使います。カスタムフィールドは投稿や固定ページの編集画面に表示されています。表示されていない場合は、左上の【表示オプション】を開いて、【カスタムフィールド】にチェックを入れてみてください。投稿エディタの下にカスタムフィールドという項目が表示されるはずです。

ここのカスタムフィールドに、個別の外部CSSファイルを読み込ませます。手順は以下の通りです。

１．functions.php に必要事項を追記

子テーマに作成した functions.php で構いません。以下の内容を追記してください。ちなみに、子テーマに functions.php を作成する場合はこちらを参照のこと。

/* カスタムフィールドで外部CSSを複数読み込み */
function include_custom_css(){
	if(is_single()||is_page()){
	if($css = get_post_meta(get_the_ID(), 'includeCSS', true)){
	echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"{$css}\" />\n";
						}
					}
				}
add_action('wp_head','include_custom_css');

２．子テーマ内にCSSファイルを作成

まずは分かりやすいように、CSSというディレクトリ（フォルダ）を作成しておきましょう。そして、そのディレクトリの中に任意のファイル名でCSSファイルを作成します。例えば以下のような感じです。

３．カスタムフィールドを追加

１．の作業を行うと、カスタムフィールドの【名前】の部分に【includeCSS】という選択が表示されているはずです。まずはこれを選択します。選択肢がない場合は、新たに【includeCSS】を追加入力してください（確か古いバージョンのWordPressの場合、直接入力だった気がします……）。

そして、【値】の部分に、CSSファイルまでの絶対パスを記載します。先ほど作成したCSSファイル（new-style.css）の場合、絶対パスは以下のようになります。

上記２点を入力したら、【カスタムフィールドを追加】をクリックします。これで、このページには new-style.css に記載したスタイルが適用されるようになります。

スタイルを記述する際の注意事項

新たに作成したスタイルシート（この例では new-style.css）に、スタイルを記述する際にはちょっとした注意が必要です。例えば Twenty Eleven の場合、任意のページの見出し２の色を赤に変えるには、new-style.css に以下のように記述必要があります。

.entry-content h2 {
	color: red;
}

単純に h2 とだけ書いて指定しても変化がありません。親テーマのスタイルシートの方で【 .entry-content h2 】と記載されているので、同じように記載して上書きする必要があります。このように、該当すると思われる id や class を指定してみても変化がない場合は、親テーマでどのように指定されているかをチェックしてみると、正しい記述方法が分かると思います。
Twenty Eleven 以外のテーマを使っている場合でも、同様に親テーマのスタイルシートを元に、新たに指定しなおしてみてください。これで全てのページのスタイルを簡単に自由に変更することができるようになります。

参考サイト

ありがとうございました！

フロントページ用の固定ページに、別の固定ページのコンテンツを表示させる方法

ここでは、フロントページ（トップページ）のみで使用する、他とはレイアウトの違うページを作成したいと思います。基本的には WordPress の固定ページ 1 ページの中に、2 つ分の固定ページを表示させる方法というわけですね。上記の図で言うと、固定ページ①がフロントページ用に用意した固定ページ、固定ページ②は別の固定ページで、内容だけを呼び出しているという感じです。それでは具体的な作業手順です。

手順

１．新たにテンプレートファイルを作成

フロントページ用のテンプレートフィアルを作成します。テンプレートファイルとは、固定ページを作成する際に「ページ属性」という部分にある「テンプレート」という項目です。テンプレートを選ぶことで固定ページのレイアウトを変えることができます。
Twenty Eleven の場合、「デフォルトテンプレート」・「サイドバーテンプレート」・「ショーケーステンプレート」の 3 つが用意されています。
オリジナルのテンプレートファイルを作成する方法は、こちらの記事「固定ページのテンプレートにオリジナルを追加・作成する方法」にまとめています。

固定ページのテンプレートにオリジナルを追加・作成する方法

この記事に従って、サイドバーテンプレートをベースにしたテンプレートを新たに追加してください。

２．フロントページ用の固定ページ①を作成

フロントページ（トップページ）に表示させるための固定ページを作成します。固定ページ①に該当するページです。他の言い方をすると、別の固定ページの内容を抽出したいページ、もしくは【手順１】で作成したオリジナルのテンプレートを適用したいページということです。
通常通り固定ページを作成し、「ページ属性」の「テンプレート」の部分で、必ず【手順１】で作成したテンプレートを選んでください。

３．基本となる固定ページ①に表示させたい固定ページ②を作成

固定ページ①の任意の場所に表示させる固定ページ②を作成します。通常通り固定ページを作成して、保存してください。この時のポイントは記事のタイトルです。今回はタイトルで固定ページを認識させますので、重複タイトルは絶対に避けてください。

４．テンプレートファイルに固定ページ②を表示させるタグを挿入

【手順１】で作成したテンプレートファイルを書き換え、固定ページ② が表示されるようにします。以下のコードを追記してください。

<?php // 指定の固定ページの本文を抽出
$my_post = get_page_by_title ( 'フロントページ' );
echo apply_filters ( 'the_content', $my_post -> post_content );
?>

<?php // 指定の固定ページの本文を抽出
$post = get_page_by_title ( 'フロントページ' );
echo apply_filters ( 'the_content', $post -> post_content );
?>

<?php // 指定の固定ページの本文を抽出
$my_post = get_page_by_title ( 'フロントページ' );
echo apply_filters ( 'the_content', $my_post -> post_content );
?>

今回はページタイトルを使って固定ページ②の内容を抽出しています。先ほど「サンプルページ」とタイトルを設定していましたので、2 行目はそのまま「サンプルページ」となります。このタグをどこに記載すればいいかと言うと……

<?php
/**
* Template Name: サブページ
* Description: A Page Template that adds a sidebar to pages
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header(); ?>
<!-- ▼ 固定ページを抽出するタグを挿入 ▼ -->
<div id="lead">
<?php // 指定の固定ページの本文を抽出
$my_post = get_page_by_title ( 'フロントページ' );
echo apply_filters ( 'the_content', $my_post -> post_content );
?>
</div>
<!-- ▲ 固定ページを抽出するタグを挿入 ▲ -->
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<!-- サイドバーのタグは削除しています -->
<?php get_footer(); ?>

固定ページ②を表示させたい場所は、ヘッダーと固定ページ①のコンテンツの間なので、上記の位置にタグを挿入します。id は lead としましたが、ここは任意で割り振ってください。また、レイアウトの関係上、サイドバー出力タグは削除しています。これで固定ページ①を表示させると、固定ページ②の内容も表示されるようになります。

５．ページのレイアウト・デザインを整える

固定ページ①上に表示されている固定ページ②には、通常のスタイルシートが適用されていません。そこで、この部分に関するスタイルは別途指定しましょう。上の例では【 id=”lead” 】と割り振ったので、【 #lead h2 】や【 #lead ul 】のように指定していきます。
また、今のままだとサイドバーは表示されていません（タグを削除したため）。仮にタグを削除しなかったとしても、固定ページ①の下に配置されてしまいます。でもサイドバーはサイドに表示させたいわけです。このままではいけません。
最も簡単な方法は、Twenty Eleven Theme Extensions というプラグインを使う方法です。このプラグインを使うことによって、通常はサイドバーが表示されないTwenty Elevenのデフォルトテンプレートにも、サイドバーを表示してくれます。設定は、

です。これで、サイドバータグを削除した状態でも、サイドバーを表示してくれます。左右のレイアウト変更は、通常通り

にて行えます。

特定の固定ページを色々な条件の元表示させることも可能

今回は固定ページ用のテンプレートを作成し、そこに特定の固定ページを表示させました。しかし、固定ページを表示させるタグの使い方（手順４）を理解しておけば、表示させる位置は自由です。条件分岐タグを使って表示・非表示を切り替えてもいいですし、他のテーマファイルにのみ表示させることもできます。
ぼくがよく使うカスタマイズでは、全ページに問い合わせフォームを表示させるというものがあります。問い合わせフォーム用の固定ページを 1 つ作成し、その固定ページを全てのページに表示させるわけです。
固定ページを表示させる【手順４】のタグを、【 single.php 】に書き込みます。場所は loop の後がいいと思います。すると、どこのページからも問い合わせフォームにすぐアクセスできる状態になるわけです。問い合わせフォームの編集も元となる固定ページを編集すれば全てに変更が適用されるので簡単で便利です。
ぜひ今回の使い方をマスターして欲しいと思います。

参考にさせて頂いたサイト

ありがとうございました！

基本的にこれらのテンプレートのうち、どれかを使えば事足りるとは思いますが、中にはちょっと違うレイアウトのテンプレートが欲しいと思う場合もあるでしょう。
特に、〝トップページのみ〟他のページとは違ったレイアウトにしたいと思う事は少なくないのではないでしょうか？　かく言うぼくも、トップページのみレイアウトや表示を変えたいと思った事が多々あります。そんな時は条件分岐タグを使うのも１つの方法ですが、テンプレートファイルを新たに作成し、別のレイアウトを表示してくれる方法を使うのも手です。
この記事では、そんなテンプレートファイルの作り方を説明していきます。

事例）Twenty Eleven の場合

テンプレートファイルとは？

ここでは、WordPress のデフォルトテーマである Twenty Eleven を例に取って見て行きます。Twenty Eleven には３種類のテンプレートがありました。デフォルトテンプレート・サイドバーテンプレート・ショーケーステンプレートの３つです。これら３つのテンプレートを呼び出すファイルは次の３つです。

これらのファイルを開いてみてください。ショーケーステンプレートは結構複雑で、何が書かれているのかよく分かりませんが、デフォルトとサイドバーテンプレートは、結構スカスカで、簡単な作りになっているのが分かると思います。
ですが、その全ての元になっているのはデフォルトテンプレートです。よく見てみると、デフォルトテンプレートとサイドバーテンプレートの違いは、サイドバー呼び出すタグがあるかないかの違いだけです。

デフォルトテンプレート

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>
		<div id="primary">
			<div id="content" role="main">
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', 'page' ); ?>
					<?php comments_template( '', true ); ?>
				<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #primary -->
<!-- サイドバーのタグなし -->
<?php get_footer(); ?>

サイドバーテンプレート

<?php
/**
 * Template Name: Sidebar Template
 * Description: A Page Template that adds a sidebar to pages
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>
		<div id="primary">
			<div id="content" role="main">
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', 'page' ); ?>
					<?php comments_template( '', true ); ?>
				<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #primary -->
<?php get_sidebar(); ?><!-- サイドバーのタグあり -->
<?php get_footer(); ?>

Twenty Eleven に新たにテンプレートを追加したい場合は、サイドバーテンプレートを活用すると簡単です。

(1) テンプレートファイルを複製する

まずは、サイドバーテンプレートを複製します。ファイル名は適当に付けてください。ここでは、【 sub-page.php 】としておきます。複製したファイルは子テーマのテーマフォルダにアップロードしましょう。

(2) テンプレートであることを認識させる

複製したファイルを開くと以下のようになっています（サイドバーテンプレートと同じ内容）。このファイルを新しいテンプレートと認識させるのはとても簡単です。冒頭部分の【 Template Name: Sidebar Template 】という部分に新しい名前を付けるだけです。【 Sidebar Template 】の部分ですね。ここは日本語でもOKです。

<?php
/**
 * Template Name: サブページ ←ここの名前を任意に変更するだけ！
 * Description: A Page Template that adds a sidebar to pages
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
get_header(); ?>

これで一旦固定ページ作成画面を見てみましょう。新しいテンプレートが認識されているはずです。

新しいテンプレート用のスタイルシートを適用する

新しく追加したテンプレートには、一部適用されないスタイルシートがあります。例えば、今回はサイドバーテンプレートを複製しましたが、サイドバーテンプレートにしか適用されないスタイルは、新しいテンプレート（ここではサブページテンプレート）に適用されません。そのため、サイドバーの位置が横ではなく、コンテンツの下にきているはずです。
新しいテンプレートだけにスタイルを適用させたい場合は、以下のように書くと便利です。

/* ファイル名の sub-page.php のみに適用させるスタイル */
.page-template-sub-page-php p {/*サブページの p タグの文字色は全て赤色になります。*/
	color: #f00;
}

もしくは、カスタムフィールドを使って、該当する固定ページのみに適用される専用スタイルシートを、新たに追加する方法もあります。
また、テンプレートに割り振られている id 自体を、新しく書き換えてもいいです。しかし、そうすると全てのスタイルをいちから適用し直さなくてはならなくなるので面倒です。

WordPress を使う本当の目的は
デザインスキルを身に付けることではない

また、完全にオリジナルのテーマを作るというのも非効率です。ぼくたちは WordPress のテーマを自作できるスキルを身につける必要はないのです。自社のイメージに合わせて、全体のカラーを整えたりレイアウトを整えたりできればいいわけです。
ですので、WordPress のテーマを 1 から作るのではなく、既にあるテーマを自分好みにカスタマイズできるようになれば十分なのです。そして、そのために必要なスキルや知識、テクニックなどは実はそんなに多くありません。中でもスタイルシートを変更する方法を身に付ければ、ある程度自分の好きなデザインにしていくことができます。
そこで、なるべく時間を書けずに Twenty Eleven のスタイルシートを変更し、Twenty Eleven をベースとしたオリジナリティのある WordPress サイトをつくろう！　ということで、あるマニュアルを作成しました。それがこちら。

WordPress のデフォルトテーマである Twenty Eleven の CSS の変更方法に特化したマニュアルです。ただし、これは Twenty Eleven のスタイルシートの内容を解説したものではありません。逆引きマニュアルとなっているように、「○○を変更したい場合は、●●を変更すれば OK」ということが瞬時に分るようにしたマニュアルです。
2013 年 2 月時点で 30 項目の変更箇所を記載しています。例えば「ヘッダーの高さを変更したいな〜」と思た場合、目次をざっと探して 9 番目の項目をクリックすると、該当ページへジャンプします。後はそこに書かれているスタイルの書き方をコピペして、好きな高さを指定すれば OK です。簡単ですよね？
そのような項目を、ヘッダー・グローバルナビゲーションメニュー・コンテンツ部分などに分けて、30 項目に渡って掲載しています。さらにこのマニュアルは、今後も変更内容を追加していく予定です。

Twenty Elevenを使う３つの理由

2013 年現在、WordPres sのデフォルトテーマの最新版は Twenty Twelve です。Twenty Eleven は 1 つ前のタイプのテーマです。
なぜ、Twenty Eleven を使うのでしょうか？

理由１）シンプルでカスタマイズ性が高い

Twenty Eleven はとてもシンプルな作りです。かつ、サイドバーも右・左と選べますし、フッターにも最大３つまでウィジェットを追加できます。つまり基本的なレイアウトは管理画面から簡単に変更できます。
また、デザインはシンプルかつ基本的なパーツはそろっているため、ビジネス上必要なコンテンツを見せるためのデザインが簡単にできます。タイトル・画像・ナビゲーションメニュー・サイドバー・フッターなど、これらの基本的なパーツを簡単に管理画面から編集することができます。
また、ある程度テーマファイルの中身も把握すれば、より自由にコンテンツを見せることも可能です。

理由２）新たに他のテーマのCSSを理解する時間がもったえない

CSS も基本的なことは一緒です。例えば文字の大きさを指定したければ【font-size】を使います。そこに違いはありません。ですが、id や class といった CSS セレクタの指定の仕方は、テーマごとに異なります。ですので、テーマが変われば改めて CSS の中身を把握しなければならず、そこに時間がかかります。
Twenty Eleven に関して今まで時間をかけてきていますので、今から更なる時間をかけて別のテーマの中身を理解するのは非効率です。Twenty Eleven はアップデートも繰り返されているテーマですのでまだまだ使えます。Twenty Twelve も魅力的ですが、こちらの分析・解析は他の専門家に任せて、ぼくたちは慣れ親しんだテーマを使いましょう。

理由３）情報が多い

これも理由 2 と似たような感じですが、Twenty Eleven はリリースされてから時間が経っているため、ネット上に関連情報が多いというのが挙げられます。また WordPress のデフォルトテンプレートであるため、やはり情報が多い。
他のテーマの場合、カスタマイズ方法を調べてみても、たいして情報が出てこない場合が多いでしょう。Twenty Elevenなら、デフォルトテーマということもあり、色んな人が使い方やカスタマイズの方法を公開してくれています。なので、時間短縮にもなりますし、調べる労力が減り、効率もよくなります。

無駄な時間を省いて、効率よくカスタマイズを

以上、Twenty Eleven を使う理由を挙げてみました。結局のところ、インターネットを使ったマーケティングに WordPress を使っていくとなると、最も重要なことはコンテンツをつくることです。質・量ともに重要です。この一番重要な部分に時間と力を注ぎ、その他の部分はできるだけ簡単に、効率よくできるようにしようというのが、このマニュアルの趣旨です。
「時は金なり」なんて言われますが、実際は「時は金よりも貴重」です（お金は失っても取り戻せますが、時間は失ったら失ったままですからね……）。ぜひ、作業の効率化を図って、ビジネスを成長させていってください。
＞ ダウンロードはこちらの専用ページから、無料でできます。

記事の中にMoreタグを挿入した場合

More タグというのがあります。このタグを挿入すると、そのタグより前の文章だけが抜粋され、それ以降は「続きを読む」になります。記事の一覧ページやアーカイブページなどでは抜粋表示となり、個別投稿ページで全文表示となります。

ビジュアルエディタの場合）

テキストエディタの場合）

この場合、「続きを読む→」に class が割り振られます。自動的に。それがこちら。

ですので、この class に文字色や背景・画像などを指定すれば「続きを読む→」を自由にデザインできます。具体的なスタイルシートの書き方についてはのちほど。

Moreタグを使わず、常時抜粋表示になるようにテンプレートをカスタマイズしている場合

WordPress には、抜粋表示用のタグが用意されています。それがこちら。

<?php the_excerpt(); ?>

このタグを使えば、記事は抜粋表示になります。
このタグを使った、記事一覧の抜粋表示の方法についてはこちら。

トップページを抜粋記事の一覧表示にする-WordPress Twenty Eleven篇-

このカスタマイズを行えば、いちいち記事ごとに More タグを指定しなくても、一定の文字数で自動的に抜粋表示してくれます。しかしこの場合、先ほどのような特定の class が割り振られません。【 more-link 】という class を指定しても、何も変化しないのです。
ではどのように指定すればいいのでしょうか？

「続きを読む」にclassを追加する方法

この編集は親テーマの functions.php を編集する必要がありそうです。該当箇所は以下の部分。

function twentyeleven_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

<a> タグの中に class を指定すれば OK です。

function twentyeleven_continue_reading_link() {
return ' <a class="任意のセレクタを指定" href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

他にも、<a> タグの外を、<span> や <div> で囲っても OK です。

function twentyeleven_continue_reading_link() {
return ' <div class="任意のセレクタを指定"><a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a></div>';
/* </a>の後を必ず閉じるのを忘れないように！ */

<span> で囲むとインライン扱いなので、抜粋記事に続くように「続きを読む→」が表示されます。

<div> で囲むとブロック要素になるため、抜粋記事と「続きを読む→」が改行されて別段落として表示されます。

functions.phpを編集する場合の注意点

本来、テーマのカスタマイズは、子テーマをつくって編集するのが望ましいのですが、functions.php の場合はそうはいかない場合があります。親テーマと同じ内容を子テーマに記載すると、エラーが発生してサイトが表示されなくなるのです。
そのため、親テーマで既に記述されている内容を編集する場合は、親テーマの functions.php を直接編集する必要があります。そうなると、テーマのアップデートをした際に編集内容が元に戻ってしまいますので注意してください。

「続きを読む→」の編集テクニック

以上の方法で、「続きを読む→」をデザインするための下準備は整いました。あとはスタイルシートで編集をするだけです。

「続きを読む→」をスタイルシートでデザインする方法

指定した class に背景や文字色、余白などを指定していけば OK です。以下にサンプルを載せておきます。（functions.php の続きを読むの部分を <div> タグで囲った場合）

スタイルシートの記述例）

/* 続きを読む */
.read-more a {
 float: right;
 width: 100px;
 padding: 0.3em 1em;
 color: #eee;
 background: #000;
 border: 1px solid #666;
}

実際の表示）

「続きを読む→」の文言や矢印を変更する方法

「続きを読む」は「続きを読む」と表示されています。またその後の「→」も矢印のままです。これを好きな言葉に変更してみましょう。この変更は functoins.php を直接編集します。「Continue reading」と書かれている部分を好きな言葉に変更できます。

function twentyeleven_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'もっと読む！（好きな言葉に置き換え） <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

矢印に関しては、HTML の特殊文字用コード（&rarr;）で記述されていますので、他のコードにしてもいいですし、消し去っても OK。その他の記号をそのまま記述して大丈夫です。

「続きを読む→」を画像にする方法

テキストではなく画像で表示させたい場合も、functions.php を直接編集します。テキストに該当する部分を消して、画像指定の <img> タグを使えば OK です。画像は絶対パスで指定しましょう。（Moreタグでの抜粋表示の場合は無効です。）

functions.phpの記述）

function twentyeleven_continue_reading_link() {
return ' <div class="read-more"><a href="'. esc_url( get_permalink() ) . '">' . __( '<img src="絶対パスで画像のURLを指定" alt="続きを読む" />', 'twentyeleven' ) . '</a></div>';

スタイルシートの記述例）

/* 続きを読む */
.read-more {
float: right;
}
/* マウスポインタを合わせると、光ったようになります */
.read-more:hover {
filter: alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
}

実際の表示）