Twenty Fifteen はかなりシンプルに、ブログとしての役割を追求したテーマになっているようです。またスマホやタブレットでも非常に見やすくなっています。
このテーマで特に面白いと感じたのは、ヘッダーとサイドバーが一緒になっている点ですね。いわゆるグローバルナビゲーションはサイドバーに、ヘッダーに画像をアップしてもサイドバーに表示されます。フッターもクレジットのみなので、ちょっと物足りなくかじるかもしれません。
本当にブログとしてコンテンツを見るために必要なことだけをとことん追求した感じで、読みやすくなっています。ですが、まだ当分は浸透しなさそうなデザインな気がします。好きなデザインではあるんですが、今のところ Twenty Thirteen が一番ユーザビリティが良いかなと思いますし、ビジネス的にマネタイズしやすいレイアウトだと思います。でも使ってみようかとも思っています……。
さて、前置きはここまでにして、Twenty Fifteen の機能についてもまとめてみたいと思います。
Twenty Fifteen のデザイン
2 カラムのレイアウトとなっていて、コンテンツとサイドバーのみです。レスポンシブデザインになっているので、タブレット、スマートフォンだとレイアウトが変わります。
ヘッダーとサイドバーが融合し、スクロール固定を採用
ヘッダーと視認できる部分はなく、サイドバーがヘッダーになっています。header.php の中にサイドバーが含まれるつくりです。このサイドバー部分に、コンテンツ以外のものは全て表示させる構造になっています。サイトタイトル、ナビゲーションメニュー、ウィジェットが全てここにきます。
サイドバーは一番下までスクロールすると固定されます。
スペースいっぱいの大きなアイキャッチ
Twenty Fifteen には大きなアイキャッチ（サムネイル）が表示されます。推奨サイズは 幅 825px に高さ 510px です。このサイズの画像をアイキャッチとして用意すれば、Twenty Fifteen のレイアウトにきれいに表示されます。
これまでアイキャッチの画像に 1208px × 540px の画像を使っていたんですが、このサイズの画像だとスペースいっぱいに表示されませんでした。
また、新たに 1208px × 540px のアイキャッチをアップロードしたら、コンテンツのスペースをはみ出して表示されてしまいました。縮小されずにそのままのサイズで表示されているようです。
色々なサイズで試してみましたが、以下のようになりました。
| 825 × 825 | 左右はちょうど、上下が切れる |
|---|---|
| 825 × 250 | 上下左右ともにちょうど表示される |
| 690 × 510 | 上下はちょうど、左右が足りない |
| 1250 × 510 | 上下はちょうど、左右が切れる |
| 1648 × 1020（推奨サイズの 2 倍） | 上下左右ともにちょうど |
| 412 × 255（推奨サイズの半分） | そのままのサイズで表示 |
新規にアップロードした画像に関しては、推奨サイズにしておいた方がよさそうです。既にアップロード済みの画像がうまくはまらないので、なんとか最適化されるようにしたいものです。
主なパーツの幅やサイズ
サイドバー width：248px
アイキャッチサイズ：825px × 510px
Twenty Fifteen のカスタマイズ
Twenty Fifteen の背景や色の変更、ウィジェットやメニューの設定についてです。
Twenty Fifteen のカラーパターン変更
Twenty Fifteen には、予め 6 つのカラーパターンが用意されています。カスタマイズ画面から選択することで変更できます。
外観 > カスタマイズから編集可能です。
また、自分で好きな色に設定することもできます。
ヘッダー画像の変更
ヘッダー画像を変更すると、サイドバーの背景が変わります。サイズは 954 × 1300 ピクセルを推奨するとのこと。まぁサイドバーだと縦長くなりますので当然そうなりますよね。
メインメニューの設定
メニューといえばヘッダーの上か下に配置されることが多いのですが、Twenty Fifteen には明確なヘッダー部分がなく、ナビゲーションメニューもサイドバーに表示されます。
デザイン・レイアウト的にはウィジェットを追加するのとなんの違いもありませんが、メニューでは階層を指定でき、また今回メニューに補足説明を追加できるようになっています。
さらにソーシャルメニューというものが用意されていて、ソーシャルメディアの URL をメニューに追加すると、ソーシャルアイコンとして自動的に表示されるようになっています。
メニューに補足説明を追加する方法
外観 > メニューから設定できます。このメニュー設定のページを開いた状態で右上の【表示オプション】をクリックすると、以下のようなメニューが表示されます。【詳細メニュー設定を表示】の右端にある【説明】にチェックをいれると、メニューの中に詳細を入力するボックスが表示されます。
ソーシャルメニューの設定
初めから用意されているメニューは 2 つ、メインメニューとソーシャルメニューです。中でもソーシャルメニューには、ソーシャルリンクを追加することで、自動的にソーシャルアイコンとして表示をしてくれるようになっています。
対応しているソーシャルメディアは以下の通り。RSS や Feedly などが使えないのは残念でした。
- CodePen
- Digg
- Dribbble
- Dropbox
- Flickr
- GitHub
- Google+
- Path
- Polldaddy
- Skype
- StumbleUpon
- Tumblr
- Vimeo
- WordPress
- YouTube
(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 つ有効化していくとどのプラグインが悪さをしているのか確認できます。怪しいと思ったらプラグインをチェックしてみてくださね。
条件分岐タグを使えばそれができます。指定した固定ページのみで表示させたりフロントページ（トップページのこと）だけで非表示にしたり。この条件分岐タグはウィジェットに限らず、コメントやヘッダーなど、WordPress のどのパーツやどのページでも使えます。
この条件分岐タグをウィジェットに適用する場合、Widget Logic というプラグインを使うと便利でした。ただ、便利とは言っても条件分岐タグのことをある程度理解しておかなければ設定ができませんでした。
しかし、本日紹介するプラグインの Jetpack を使えば、条件分岐タグの知識がなくても、ウィジェットの表示/非表示を好きなようにカスタマイズできます。
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 つです。
- テキスト（GoogleAdSence広告）
- Custom Fields Search
- WordPress Popular Posts
- 最近の投稿
- My Category Order
- テキスト（GoogleAdSence広告）
(2) ウィジェット管理画面から表示や非常時を設定する
それではウィジェットの表示/非表示を設定していきましょう。今回は先ほど追加した 5 つのウィジェットの内、アドセンス広告のテキストウィジェットをフロントページで非表示にしてみたいと思います。
テキストウィジェットの【 公開状態 】をクリックして、以下の様に設定の上保存しました。
つまり……
という設定です。それではフロントページへ行って表示を確認してみましょう。
実際にアドセンス広告が非表示になっていました。これでフロントページだけ非表示にする設定ができました。
他にも、特定のカテゴリーページやタグページ、特定の固定ページでウィジェットの表示をカスタマイズすることができます。
選択するだけの簡単操作で、ウィジェットを自由にカスタマイズできる
いかがでしたでしょうか？ とても簡単にウィジェットの表示をカスタマイズできると思います。PHP の知識を今から覚える必要はありません。FTP からテーマを直接編集する必要もありません。ダッシュボードからいつでも簡単に設定できてしまいます。
ショートカットできるものはショートカットして、より重要度の高いタスクに時間を割けるようにしましょう。
ちなみに、Jetpack は他にも様々な機能（モジュール）を備えていて、とても便利なプラグインになっています。繰り返しになりますが、WordPress をインストールしたなら、即座に入れるプラグインの 1 つです。必ずインストールしておきましょう。
これをプラグインで簡単に実装することができましたので紹介します。
サイドバー固定の概要
ブログの構造はだいたいメインコンテンツのカラムとサイドバーの組み合わせになっています。メインコンテンツがサイドバーよりも長い場合、スクロールしていくと後半ではサイドバーが見えなくなってしまいますよね。なので、今までのサイトの構成は以下のような感じでした。
しかしここ最近このサイドバーが固定されているブログをよく見かけませんか？ 固定と言っても、最初からサイドバーが固定されているわけではありません。
スクロールするとしばらくはサイドバーも一緒にスクロールされるんですが、これ以上サイドバーも先がないよ、となった段階でサイドバーのみスクロールが停止されます。その後はメインカラムだけが下へ下へとフッターまでスクロールされていきます。
※クリックして拡大できます。
これを実装する方法としては jQuery を使うのが王道らしいです。しかしよく分かっていないのと、検索で調べてみても結局うまくいかなかったので、プラグイン頼みで探してみました。そしたらとても使いやすいプラグインを発見しました。
ワードプレスプラグイン：Standard Widget Extensions
＞ Standard Widget Extentions
このプラグインを使えば、スクロールに応じたサイドバーの固定を簡単に取り入れることができます。ちなみに、現時点でこのブログは WordPress のデフォルトテーマ Twenty Thirteen をベースにデザインしています。Twenty Thirteen の場合はちょっとテーマの編集が必要になるとのことだったので、その辺もご紹介します。
プラグインのインストール
まずはプラグインのインストールから。
- プラグイン画面の新規追加からプラグイン名で検索してインストール
- プラグインサイトから zip ファイルをダウンロードし、プラグインの管理画面からアップロード
- プラグインサイトからダウンロードした zip ファイルを解凍し、サーバーから plugin のディレクトリへアップロード
いずれかの方法でプラグインをインストールし、有効化してください。
プラグインの設定画面
プラグインの設定方法が掲載されているサイトがあります。
＞ Standard Widget Extensions [日本語公式]
このような設定画面になっています。
サイドバーが下までいくとスクロールが停止しフッターまではその位置のままで固定させる設定は【 Sticky Sidebar 】の部分を【有効】にしてください。【詳細オプションを表示】をクリックするとより細かい設定項目が表示されます。
WordPress ディフォルトテーマの設定方法
詳細はこちらに書かれておりました。【詳細オプションを表示】をクリックして説明されている設定を行ってください。
＞ デフォルトテーマ用設定集
メインカラムやサイドバーの ID を指定する必要があります。またレスポンシブデザインにも対応していて、指定した幅（width）以下では無効化させることもできます。記載されているのは、ワードプレスのデフォルトテーマである Twenty Forteen、Twenty Thirteen、Twenty Twelve になります。
Twenty Thirteen の設定方法
Twenty Thirteen の場合はテーマの編集が必要になります。詳細はこちらに書かれています。
＞ Twenty Thirteen and Standard Widget Extensions
英語ですが雰囲気で分かると思います。念のためこちらにもまとめておきます。
１．まずはサイドバーを表示させる
Twenty Thirteen の場合はウィジェットエリアが 2 つ用意されていますが、サイドバーに対応しているのは【幅ウィジェット】の方です。このエリアに何もないとサイドバーは表示されず、何かウィジェットを配置するとサイドバーが表示される仕組みになっています。
２．sidebar.php を書き換える
テーマを一部編集する必要があります。テーマを編集は必ず子テーマを作成した上で行ってください。
子テーマフォルダを作成したら、テーマの設定画面で子テーマを有効化してください。そして、子テーマフォルダの中に親テーマの Twenty Thirteen から【sidebar.php】をダウンロードしてください。
sidebar.php の 17 行目を以下のように編集します。
<?php /** * The sidebar containing the secondary widget area * * Displays on posts and pages. * * If no active widgets are in this sidebar, hide it completely. * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ if ( is_active_sidebar( 'sidebar-2' ) ) : ?> <div id="tertiary" class="sidebar-container" role="complementary"> <div class="sidebar-inner"> /* 17行目を変更 */ <div id="mysidebar" class="widget-area"> <?php dynamic_sidebar( 'sidebar-2' ); ?> </div><!-- .widget-area --> </div><!-- .sidebar-inner --> </div><!-- #tertiary --> <?php endif; ?>
sidebar.php を書き換えたら、子テーマフォルダ内にアップロードしましょう。
３．Standard Widget Extentions の ID 設定
Standard Widget Extentions の設定画面へ行き、以下のように ID を指定してください。
| メインカラムの ID | primary |
|---|---|
| サイドバーの ID | mysidebar |
| ウィジェットのクラス名 | widget |
| 次の幅以下で無効化 | 999 |
これで Twenty Thirteen のサイドバーのスクロールを停止させることができます。
]]>そもそもパンくずリストとは？
パンくずリストとは、ウェブサイトのページの階層を分かりやすく示すリストのことです。このブログの投稿でも、カテゴリーがパンくずリストとして表示されるようにしました。
投稿の場合は、カテゴリーをリスト表示させるのが一般的です。一方固定ページの場合は、親ページと子ページという関係性がある場合にパンくずリストを使って階層表示させることができます。
パンくずリストは SEO 的にも実装した方がよいようです。SEO で大事なことの 1 つは、検索エンジンクローラーができる限りページを巡回してくれることです。その巡回頻度を増やすためにパンくずリストが有効なわけです。
パンくずリストを出力してくれるタグ
投稿カテゴリーのパンくずリスト
カテゴリーをリスト表示させるには以下を追記します。
<a href="<?php bloginfo('url'); ?>">TOP</a> >
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' > '); ?>
<?php the_title(''); ?>
どこに追加すればいいのかは後ほど・・・。
固定ページのパンくずリスト
企業のコーポレートサイトなどは、固定ページのパンくずリストを追加したいと思うでしょう。その場合は以下を追記します。
<a href="<?php echo get_option('home'); ?>">TOP</a> >
<?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> >
<?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> >
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' > '); ?>
<?php the_title(''); ?>
<?php endif; ?>
<?php if ( is_page() ) : ?><!-- 固定ページでの表示を指示 -->
<a href="<?php echo get_option('home'); ?>">TOP</a> >
<?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> >
<?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 を追記 ▼ */ <?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> 〜 </article> の間に <div class=”one-column”> 〜 </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 では、副ウィジェットエリアに何かウィジェットを追加していないと、デフォルトテンプレートでもワンカラム表示になるのでご注意ください。
]]>Twenty Thirteen を選んだ理由
1 番の理由はレスポンシブデザインへの対応です。Twenty Eleven もそれなりに対応していましたが、まだまだ荒削りな感じがありました。デフォルトテーマの最新版は Twenty Fourteen なのですが、個人的に左詰めのレイアウトが好みでなかったのと、モデルにしているサイトに似せたカスタマイズを行うには適さなかったこともあり、Twenty Thirteen を採用しました。
Twenty Thirteen はブログに適したデザインですので、企業のコーポレートサイトなどには適さないテーマだと思っていますが、このようなコンテンツサイトには適していると思います。WordPress のデフォルトテーマも、Twenty Fifteen がもうすぐそこまで来ていますし、Twenty Thirteen を使うのもいつまでか分かりませんが、今後は Twenty Thirteen のカスタマイズ情報も残していけたらと思います。
Twenty Eleven もバージョンが古くなってきた
Twenty Thirteen がリリースされた当初、ぼくは以下のように言っていました。
Twenty Eleven 使い続けることで何か実害が出るとは思えません。WordPress のバージョンが変わっても、テーマも合わせて変更する必要はないでしょう。特にビジネスに使われている場合は、新しいテーマの内容を把握することに時間を割くより、もっと重要なことに時間を使った方が賢明です。
しかし、Twenty Eleven が WordPress を新規インストールした際に含まれなくなっている点や、今後 Twenty Eleven のバージョンアップもなくなっていくだろうことを考えると、次世代のテーマにそろそろ移行した方がいいと考えました。バージョンアップがないとセキュリティが不安になるからです。
今後も新しいテーマがリリースされるでしょう。その度に変えるというのは時間の無駄ですが、Twenty Ten や Twenty Eleven は、そろそろ世代交代の時期にあるのかもしれません。いつまでも Windows XP を使い続けるわけにはいかないのと同じですね。Twenty Eleven ありがとうございました！ そして Twenty Thirteen よろしく！
重要ポイントはレイアウトと配色
リニューアルをするに当たって、考慮したのは 2 点しかありません。それはレイアウトと配色です。そして、そのどちらにおいても、ウェブ上に公開されている既存のサイトからパクりました。これが素人がウェブデザインで失敗しない秘訣です。
もちろん、相手の権利を侵さない範囲でですが、オリジナリティを出そうとして構成を考えたり、自分のセンスで配色したりするとほぼ失敗します。ですので「これいいな」というサイトを発見したら、極力パクりましょう。
モラルがうんたらと気になりますか？ あなたがプロのデザイナーならそうでしょう。しかし、ちょっと自社サイトを自分でつくりたい、個人ブログを自分でつくりたいという人なら、そこにこだわるよりコンテンツの中身にこだわるようにしましょう。
サイトリニューアルの参考にしたサイト
― バズ部
― Goosehouse
― FUTURITY
これらのサイトからレイアウトや配色を参考にし、その通りにしました。配色に関しては好みもありますし、リニューアル前も黄色をメインとした配色だったので、黄色をメインとした配色のサイトでいい感じのものはないかということで探した結果です。レイアウトに関してはビジネス上うまくいっているところのサイトを参考にしました。
まだまだリニューアルは途中
とりあえず最低限整えてテーマを変更しました。多くの人は完成という状態にしてからリリースすると思いますが、今回のリニューアルはまだまだ穴だらけです。自社サイトなので納期の影響がないというのもありますが、リリースして、実際に運営してからでないと気付かない点というのもたくさんあります。なので、ある程度でリリースして一般の目にさらすことが重要だと考えています。今回もその考えに則って公開しました。
起業で大事な考え方の 1 つに「Ready Fire Aim」というのがあります。「構え！ 打て！ 狙え！」という感じです。狙ってから打つのではなく、打ってから狙う。つまり、売ってから狙いを定めるというわけです。起業初期の頃はとくに、あれこれ考えて準備を万全にしてから売るよりも、まずとりあえず売ってみて、それから改善していくことが大事なわけです。
サイトの公開に関しても同じように言えます。大企業でも、ウェブサービスのリリース直後は不具合やトラブルで炎上することがよくありますよね。大企業でもそういうもんです。使ってみないと内輪だけの感覚では分からないことがたくさんあるので、とりあえずリリースという精神は大事だと思います。
なので、痛い目を見る前に、、、素人でも十分活用できる最低限の知識をまとめておきたいと思います。ぼく自身はワードプレスの知識も PHP の知識もない中手探りで使い出しました。HTML や CSS の当然わからりませんでした。それでも必要と思われる情報は全てネットで調べ、実際に触ってみる中で、ある程度体系化された状態で WordPress を理解するに至りました。
別にウェブデザイナーなどの専門家を目指すわけではないぼくたちに必要な最低限の理解を得ることができると思います。
まず始めに、これはどんな人のためのものか？
前述のように、WordPress や PHP などの専門性を高めたいと思っている人のものではありません。WordPress を使ってネットでの集客やセールス力をアップさせたいと思っている社長・起業家、個人事業主、マーケターやウェブ担当者のためのものです。
目的はあくまで売上アップ。そのために必要なカスタマイズが出来る程度に WordPress を活用できればいいと考えている人のためのものです。
また、ある程度知識のある玄人向けのものでもありません。WordPress を使い始めた方。WordPress を今まで何となくで使ってきた方。PHP に関して全然知識のない方のためのものです。
加えて、ウェブサイトの基本である、HTML や CSS の知識はある程度あることを前提に進めていきます。
では、早速いきたいと思います。
まずはWordPressにおける PHP の機能的な役割について
正直 PHP の本質を理解しているとは思ってませんが、ぼくがイメージしているのはこんな感じです。
サーバー上にある段階では、PHP ファイルはあくまでもレシピや材料としてだけの存在です。
実際にぼくたちが見ているウェブサイト（PHP で作られた WordPress などのサイト）は、ぼくたちがアクセスするまで基本的に存在していないようなものです。注文するまでは料理が出てこないのと一緒です。ぼくたちがアクセスして初めて、ウェブサイトとして形作られます。
オムライスが食べたい！（トップページが見たい）と注文（アクセス）すると、コックさん（これは何に該当するだろうか？）がレシピ（PHP で書かれた指示内容）を元に必要な材料（ヘッダー・本文・サイドバー・フッターなどの PHP ファイル）を揃え、オムライスとして調理・盛りつけ（CSS などでのレイアウト・デザインの構成）をして、ぼくたちの前に運ばれてきます（HTML ウェブサイトの表示）。
アクセスされる度に 1 回 1 回 HTML サイトを構成している・吐き出している、みたいな説明をよく見かけますが、それはつまり、ぼくたちがアクセスして初めて HTML ウェブサイトが構成されているわけです。
だからこそ、アクセスした人や表示するページなどの条件によって、細かくコンテンツを変えていくことができるわけですね（1 ページ目はヘッダー画像を表示するが、2 ページ目以降は表示させない、とか）。そして、そのために表示が遅くなる、というのがデメリットでしょう。
こういった作業をサーバーとやり取りしたりとか、なんかよく分かりませんが複雑なことをしているようですが、イメージとしてはこんな感じだと思います。
WordPress テーマの構造を PHP 的に把握する
WordPress のテーマファイルを覗いてみると、主に 2 種類の PHP ファイルがあります。この 2 つのタイプのファイルの関係性を把握しておけば、どこをカスタマイズしたらどう変化するのか、希望通りのカスタマイズをするためには、どこを変更したらいいのか、ということが分ってくるようになります。
その 2 つのタイプとは、
・ウェブサイトの材料となる PHP
WordPress のテーマで具体的に見てみると、以下のようなファイル名で分類できます（Twenty Thirteen のファイルを参考にしていますが、他もほぼ同じのはずです）。
- index.php（フロントページ）
- single.php（投稿ページ）
- page.php（固定ページ）
- tag.php（タグの検索結果一覧ページ）
- category.php（カテゴリーの検索結果一覧ページ）
・・・などなど。
- header.php（ヘッダー部分）
- content.php（コンテンツ部分）
- sidebar.php（サイドバー部分）
- comments.php（コメント部分）
- footer.php（フッター部分）
・・・などなど。
レシピの具体例
例えば、こちらの【 single.php 】というファイルを開くと、以下のようになっています。
<?php /** * The template for displaying all single posts * * @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(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php twentythirteen_post_nav(); ?> <?php comments_template(); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
結構内容はスカスカで簡単そうに見えますよね。どういう材料をどういう順番で、どういう条件で表示させるかが書かれています。
ざっくりと、1 〜 10 行目までがヘッダー、12 〜 25 行目までがコンテンツ、27 行目がサイドバー、28 行目がフッターの順番で構成されています。そしてヘッダーの部分は【 header.php 】を呼び出します。
吐き出す、と言った方が正しいですかね。。。同じようにサイドバー部分は【 sideber.php 】、フッター部分は【 footer.php 】を吐き出します。
コンテンツ部分はちょっと複雑になってます。【 single.php 】は比較的シンプルですが、他のレシピ系のファイルを見るとこの部分は条件分岐タグなどを用いて、色々な条件によって表示方法を変えられるようになっているみたいです。
材料の具体例
一方、材料となるファイルの例として【 header.php 】を見てみましょう。
<?php /** * The Header template for our theme * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ ?><!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) & !(IE 8)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <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"> <button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button> <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', 'menu_id' => 'primary-menu' ) ); ?> <?php get_search_form(); ?> </nav><!-- #site-navigation --> </div><!-- #navbar --> </header><!-- #masthead --> <div id="main" class="site-main">
こちらも色々複雑な感じがしますが、実は PHP の理解というより、HTML の理解の方が必要です。めっちゃ単純化すると、、、以下のような基本的な HTML サイトの構造になっていることが分かります。
<html> <head><!-- 21行目 --> <title></title><!-- 24行目 --> </head> <body><!-- 33行目 -->
そして、【 footer.php 】を見てみると分かるんですが、</body> や </html> があって、ちゃんとサイトが閉じられた構造になっていることが確認できます。
また、ところどころに PHP タグが見られるのは、決まった情報を呼び出すための便利なタグとして使われています。
例えば、24 行目に <title> タグで挟まれた PHP タグを見つけることができると思います。通常、HTML だけで書いたサイトは、ここにタイトルを書くわけですね。テキストで。それがサイトのタイトルとして認識され、SEO 上も重要視されるわけです。
ですが、WordPress を始め、CMS ではこのタイトルを管理画面側で設定しますよね。直接 PHP ファイルに書き込んだりはしません。管理画面側からいつでも変更ができます。
つまり、このタグが管理画面で設定したタイトルを、この場所に吐き出してくれる、というわけです（アクセスすると、タイトルが文字として認識される）。
他にも、ブログの URL を吐き出してくれるタグや、ブログの投稿者名を吐き出してくれるタグとか、たくさんあります。
むしろ重要なことは、どんな HTML 構造になっていて、id や class などのセレクタは何と指定されているのか、というようなことを把握することでしょう。これを確認できるようになっておけば、スタイルシートのどの部分を変更すれば、デザインやレイアウトを変えられるのか、予想がつきますからね。
サイトの構造を把握するための便利な目印
HTML でページをつくる時は、1 つのファイルに <html> から <head>、その中の meta 情報、<body> と、全てを盛り込んで作っていきますよね。なので分かりやすいとは思います。ですが、WordPress はパーツごとにファイルが異なります。なので、全体の構成を把握するには、複数のファイルを確認しないといけません。
そこで、目印になるのが補足説明。これです。
</div><!-- #primary -->
Twenty Thirteen や、WordPress のデフォルトテーマシリーズには必ず似た様な表記があります。これは、基本タグを閉じる部分に書かれています。上でちょっと説明したように、【 header.php 】に書かれている <body> タグは、【 footer.php 】の中の </body> タグで閉じられています。
同じように、<div id=”＊＊＊”> みたいに始まる要素が、別のファイルで閉じられている場合があります。同じファイル内で閉じられていたとしても、ごちゃごちゃしているので見つけにくくなっています。
そこで、上記の様な補足説明の出番です。例に上げた説明書きは、</div> で閉じられていますよね。そして、#primary と書かれている。つまり、「<div id=”primary”> から始まる部分はここまでです」という意味になります。
これを理解しておけば、複雑でごちゃごちゃした WordPress のテーマファイルでも、なんとなく構成や、何が書かれているかを予想することができると思います。
あとは、ブラウザでソースコードを表示させたり、Firefox の Firebug などのアドオンを使って、サイトを分析すれば、だいぶ理解できるんじゃないかと思います。
まとめ：結局は HTML で好きなようにカスタマイズできる
では、ここまでの長い話をどのように活用すればいいのでしょうか？ それは、構造の把握にあります。結局のところ、ウェブサイトは HTML で書かれていて、レイアウト・デザインは CSS によって決められています。なので、何か追記したい、デザインを変えたいと思ったときは、基本的に HTML と CSS で対応可能です。
ただ、どこに追記したら、サイトのどのページのどの部分に表示されるのか？ もしくは、固定ページを変更したいが、どのファイルを変更したらいいのか？ ということが分かりにくいので、このような話をしました。
この PHP についてのイメージを持っておけば、かなりカスタマイズの自由度が高まると思います。ぜひ参考にしてみてください。
同じサイト内であっても、別のページに飛ばされたりすると離脱率が上がり売上が下がります。これはすでに実証されている事実です。なので、商品（サービス）を売るページは、できるだけ無駄なリンクを削除し、シンプルに１つの商品を説明する専用ページである必要があります。
WordPress には固定ページという機能があります。この固定ページは商品紹介ページを作成するのに適していますが、グローバルメニューやサイドバー、フッターメニューなどを排除することができません。
Twenty Twelve を使うと全幅テンプレートというのがあり、グローバルメニュー以外の無駄なリンクを排除することができます。しかし、それでもグローバルメニューやヘッダーまでは基本的に排除できません。そこで、ヘッダーもフッターもサイドバーも排除したセールス専用のワンカラムのテンプレートを作成したいと思います。
つまりセールスレターやランディングページを作ろう！ ということ
このページの呼び方はプレゼンページとかセールスページとか勝手に名付けていますが、決して販売目的に限りません。一般的な言い方としては、ランディングページ・セールスレターなどでしょうか。見積もり依頼、資料請求、サンプル請求、予約など、見込み客に何かアクションを起こしてもらうためのページということです。
こういった目的のページは、ワンカラムにするというのがセオリーです。インターネット上で、お客さんを獲得したいと考えている全ての人は、会社紹介や事業内容を説明した一般的なホームページとは別に、このようなセールスページを用意するようにしましょう。そして、売りたいものはそこで売るのです。
WordPressでは異なるレイアウトのページを表示させることができる
例えばこちらのページ。このページは無料の PDF レポートを紹介しているページですが、WordPress の固定ページを使って作成しています。Twenty Eleven のサイドバーテンプレートです。
このサイトではサイドバーテンプレートを使用すると、他とはレイアウトが変わります。ヘッダーはなく、フッターも別のパターンになります。サイドバーもこのテンプレート専用の内容になっています。
Twenty Eleven には、元々サイドバーテンプレートやデフォルトテンプレート、ショーケーステンプレートといった、レイアウトの違うテンプレートが用意されています。この内サイドバーテンプレートを応用して、レポートの請求という目的のために無駄を省いたシンプルなページを作成しました。
なぜ、固定ページを使うのか？
それは編集がしやすいからです。WordPress のエディタを使えるので、文字の入力や画像の挿入が簡単にできます。タグ打ちが苦手な人でもビジュアルエディタを使えば、文字色や太さなどの変更も簡単です。そのため固定ページを使うことにしました。
手順
- 必要なファイルを複製する
- テンプレートファイルを書き換える
たったこれだけです。これだけで、無駄な情報を削除したセールス専用ページ（プレゼン専用ページ）を作成することができます。ランディングページにも使えます。WordPress のデフォルトテーマである Twenty Eleven を使って作成したページはこのような感じです。
１．必要なファイルを複製する
テーマは Twenty Eleven を使用します。まずはセールスページ用のテンプレートファイルを作成しましょう。固定ページ用のテンプレートを追加する方法は、こちらの「固定ページのテンプレートにオリジナルを追加・作成する方法」にまとめています。
簡単にまとめておくと、以下の３つのファイルを複製して、ファイル名を変更します。例えば、sideber-page.php を複製して、ファイル名を sales-page.php などとします。そして、これらのファイルを子テーマにアップすれば OK です。
| 親テーマのファイル | 子テーマにアップ | |
| sidebar-page.php | 複製してファイル名変更 → | sales-page.php |
| header.php | 複製してファイル名変更 → | header-2.php |
| footer.php | 複製してファイル名変更 → | footer-2.php |
２．テンプレートファイルを書き換える
複製したファイルを書き換えます。３つのファイルがありますので、それぞれ以下のように書き換えてみます。
(1) sales-page.phpの変更
- テンプレートファイル名の指定
- 出力するヘッダーを header-2.php に指定
- サイドバー出力タグを削除する
- 出力するフッターを footer-2.php に指定
<?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('2'); ?><!-- ()の中に数字を追加 -->
<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('2'); ?><!-- ()の中に数字を追加 -->
(2) header-2.phpの変更
- 初期状態で73から始まるサイトタイトル部分（hgroup）を削除
- 初期状態で78行目から始まるヘッダー画像を削除
- 初期状態で115行目から始まる検索窓を削除
- 初期状態で128行目から始まるグローバルナビゲーションを削除
<body <?php body_class(); ?>> <div id="page" class="hfeed"> <header id="branding" role="banner"> <!-- 73行目からのサイトタイトルを削除 --> <!-- 78行目からのヘッダー画像を削除 --> <!-- 115行目からの検索窓を削除 --> <!-- 128行目からのナビゲーションを削除 --> </header><!-- #branding --> <div id="main">
(3) footer-2.phpの変更
- 初期状態で17行目から始まるフッターサイドバー（フッターウィジェット）の出力部分を削除
- 初期状態で25行目から記載されているクレジット等の表記を自由に変更
特定商取引法に関する表記やプライバシーポリシー（個人情報保護方針）へのリンクを記載するのが一般的
<?php /** * The template for displaying the footer. * * Contains the closing of the id=main div and all content after * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ ?> </div><!-- #main --> <footer id="colophon" role="contentinfo"> <!-- 17行目からのフッターサイドバー（ウィジェット）を削除 --> <!-- ▼ 25行目からの記述を自由に変更 ▼ --> <div id="site-generator"> <?php do_action( 'twentyeleven_credits' ); ?> <!-- ▼ 今回はこの部分を追記 ▼ --> <p><a href="">特定商取引法に関する表記</a>｜<a href="">プライバシーポリシー</a>｜Copyright © ＊＊＊＊＊ All Right Reserved.</p> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a> </div> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>
これで、固定ページでコンテンツを作成する際に、新たに作成したテンプレート（この例ではセールスページテンプレート）を選べば、header-2.php と footer-2.php の内容が適用されるようになります。
今回は、これら２つのファイルのほとんどの記述を削除したので、実際は本文の内容くらいしか表示されません。また、お好みで好きなようにヘッダーとフッターの表示をカスタマイズすることもできます。その時は PHP とかあまり気にせず、HTML の要領でタグや文字を記述すれば OK です。
セールスページのスタイルシートも変更したい場合
ページ専用のスタイルシートを適用したい場合、いくつか方法があります。ぼくがよく使う方法は、そのページ専用の外部スタイルシートを読み込ませる方法です。サーバー上に別の CSS ファイルを用意して、そこで一括変更してしまおうというわけです。指定したページ以外のスタイルを変えることなく、そのページデザインの変更が可能です。
方法についてはこちらの「WordPressでページごとに別のスタイル（外部CSS）を適用させる方法」にまとめていますので、チェックしてみてください。
タイトルを非表示にしたい場合
ページタイトルは以外と邪魔になります。ページの冒頭、いわゆるヘッドライン（キャッチコピー）の部分に表示させたい言葉というのは、最も重要な部分です。理由は割愛しますが、この最も重要な部分を最も効果的に見せるためには、ページタイトルをそのままヘッドラインにするのは都合が悪いです。自由度が制限されるからです。
ですので、ページタイトルは非表示にして、ヘッドラインは本文に直接書くことをオススメします。
タイトルを非表示にする方法には次の２つを押さえておきましょう。
１．スタイルシートで display: none; を指定する
スタイルシートを使って表示を隠してしまう方法です。上記の「ページごとにスタイルを適用させる方法」を使って、まずはセールスページ専用の CSS ファイルを用意します。そこに以下のように書けば OK です。
.entry-title {
display: none;
}
２．phpのテーマファイルを用意してタイトル部分を削除する
これはちょっと知識が必要になります。詳しいことは割愛しますが、固定ページのコンテンツは、content-page.php というファイルが出力しています。このファイルを開くと、h1 といったタグや、タイトルを出力するタグなどが書かれているのを発見できると思います。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"><!-- ▼ この部分がタイトルを出力 ▼ --> <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-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <footer class="entry-meta"> <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
つまり、この記述を削除してしまえばタイトルは表示されなくなります。
ただし、この content-page.php は、全ての固定ページに適用されてしまうので、タイトル部分の記述を削除すれば、セールスページだけでなく、全ての固定ページのタイトルが表示されなくなってしまいます。そこで、セールスページテンプレート専用に、content-page.php と同じ役割のファイルを作成し、この新たに作成したファイルを適用させる必要があります。
手順は以下の通りです。
(1) content-page.php を複製しファイル名を変更する
content-page.php を複製しファイル名を変更します。ファイル名で変更するのはハイフン以降です。【 content 】と書かれている部分は変更しないように注意してください。例えば、【 content-sales.php 】と変更します。
(2) content-sales.php に記述されているタイトル部分を削除する
１．で作成した content-sales.php を開き、タイトルタグを削除します。結果的に以下のようになります。
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- ヘッダー・タイトル部分のタグを削除 --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <footer class="entry-meta"> <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
削除した後は、このファイルを子テーマフォルダにアップしてください。
(3) sales-page.php を使用した場合は、content-sales.php を出力するように変更する
今度はセールスページテンプレート用のファイルである sales-page.php（先ほど作ったテンプレートファイルです）を開きます。元々サイドバーテンプレート用のフィイルを複製して作ったものなので、記事本文に該当する部分では content-page.php を出力するように記述されています。この部分を content-sales.php を出力するように書き換えます。具体的には18行目のタグで、【 page 】の部分を【 sales 】に書き換えれば OK です。
<div id="primary"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'sales' ); ?><!-- pageの部分をsalesに書き換える --> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary -->
以上で、セールスページテンプレートを使用した場合タイトルが表示されなくなります。この方法を使えば、セールスページテンプレート独自の内容を表示させたり、逆に非表示にさせたりできますので、WordPress カスタマイズの応用テクニックとして覚えておくといいと思います。
]]>例えばトップページだけ別のスタイルにしたいとか。
そんな時は、コンテンツに直接スタイルを適用することもできます。<span> とか <div> タグを使って、特定の部分だけデザインを変更することもできます。
でも、それをいちいちやっていると面倒です。「このページの見出し２（H2）は、全て赤文字にしたい！」と思ったとしても、見出し２が出て来るたびに <span> を使ってスタイルを指定しなくてはならなくなります。そんなの面倒ですよね。なので、「このページの見出し２は全て赤文字」というスタイルを一括で指定できるようにします。
カスタムフィールドを使用して、任意の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ファイルを作成します。例えば以下のような感じです。
∟ CSS（フォルダ）
∟ new-style.css（ファイル）
３．カスタムフィールドを追加
１．の作業を行うと、カスタムフィールドの【名前】の部分に【includeCSS】という選択が表示されているはずです。まずはこれを選択します。選択肢がない場合は、新たに【includeCSS】を追加入力してください（確か古いバージョンのWordPressの場合、直接入力だった気がします……）。
そして、【値】の部分に、CSSファイルまでの絶対パスを記載します。先ほど作成したCSSファイル（new-style.css）の場合、絶対パスは以下のようになります。
http://ドメイン.com（WordPressのあるディレクトリ）/wp-content/themes/子テーマ/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 以外のテーマを使っている場合でも、同様に親テーマのスタイルシートを元に、新たに指定しなおしてみてください。これで全てのページのスタイルを簡単に自由に変更することができるようになります。
参考サイト
ありがとうございました！
]]>
つまり、ヘッダーの後に、ヘッダーと同じ幅でワンカラムのコンテンツがあり、その後サイドバー付きの 2 カラムのコンテンツが表示されるというレイアウトです。かつトップページのみこのレイアウトにし、あとは一般的な 2 カラムの構成にしたかったのです。
テンプレートファイルに直接 HTML で書いてしまえば単純に解決するわけですが、それだと編集が面倒だなと思いました。できればワンカラムも２カラムも、どちらのコンテンツも WordPress の管理画面上で編集できるようにしたかったのです。
また、ウィジェットでも追加できるのですが、ウィジェット管理画面にはエディタが付いていないので、タグや画像の挿入が面倒になってしまいます。なので、固定ページを２つ用意して、それぞれが 1 ページにワンカラムと 2 カラムに分かれて表示されるようにしたかった、というわけです。
フロントページ用の固定ページに、別の固定ページのコンテンツを表示させる方法
ここでは、フロントページ（トップページ）のみで使用する、他とはレイアウトの違うページを作成したいと思います。基本的には WordPress の固定ページ 1 ページの中に、2 つ分の固定ページを表示させる方法というわけですね。上記の図で言うと、固定ページ①がフロントページ用に用意した固定ページ、固定ページ②は別の固定ページで、内容だけを呼び出しているという感じです。それでは具体的な作業手順です。
手順
- 新たにテンプレートファイルを作成
- フロントページ用の固定ページを作成
- 基本となる固定ページ①に表示させたい固定ページ②を作成
- テンプレートファイルに固定ページ②を表示させるタグを挿入
- ページのレイアウトを整える
１．新たにテンプレートファイルを作成
フロントページ用のテンプレートフィアルを作成します。テンプレートファイルとは、固定ページを作成する際に「ページ属性」という部分にある「テンプレート」という項目です。テンプレートを選ぶことで固定ページのレイアウトを変えることができます。
Twenty Eleven の場合、「デフォルトテンプレート」・「サイドバーテンプレート」・「ショーケーステンプレート」の 3 つが用意されています。
オリジナルのテンプレートファイルを作成する方法は、こちらの記事「固定ページのテンプレートにオリジナルを追加・作成する方法」にまとめています。
この記事に従って、サイドバーテンプレートをベースにしたテンプレートを新たに追加してください。
２．フロントページ用の固定ページ①を作成
フロントページ（トップページ）に表示させるための固定ページを作成します。固定ページ①に該当するページです。他の言い方をすると、別の固定ページの内容を抽出したいページ、もしくは【手順１】で作成したオリジナルのテンプレートを適用したいページということです。
通常通り固定ページを作成し、「ページ属性」の「テンプレート」の部分で、必ず【手順１】で作成したテンプレートを選んでください。
３．基本となる固定ページ①に表示させたい固定ページ②を作成
固定ページ①の任意の場所に表示させる固定ページ②を作成します。通常通り固定ページを作成して、保存してください。この時のポイントは記事のタイトルです。今回はタイトルで固定ページを認識させますので、重複タイトルは絶対に避けてください。
４．テンプレートファイルに固定ページ②を表示させるタグを挿入
【手順１】で作成したテンプレートファイルを書き換え、固定ページ② が表示されるようにします。以下のコードを追記してください。
<?php // 指定の固定ページの本文を抽出 $my_post = get_page_by_title ( 'フロントページ' ); echo apply_filters ( 'the_content', $my_post -> post_content ); ?>
Tecking さんからのご連絡により、コードを修正しました。上記と、これ以降に出てくるコードは修正済みです。
修正前
<?php // 指定の固定ページの本文を抽出 $post = get_page_by_title ( 'フロントページ' ); echo apply_filters ( 'the_content', $post -> post_content ); ?>
修正後
$post を &my_post へ変更。
<?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 の後がいいと思います。すると、どこのページからも問い合わせフォームにすぐアクセスできる状態になるわけです。問い合わせフォームの編集も元となる固定ページを編集すれば全てに変更が適用されるので簡単で便利です。
ぜひ今回の使い方をマスターして欲しいと思います。
参考にさせて頂いたサイト
ありがとうございました！
]]>