サイドバー固定の概要

ブログの構造はだいたいメインコンテンツのカラムとサイドバーの組み合わせになっています。メインコンテンツがサイドバーよりも長い場合、スクロールしていくと後半ではサイドバーが見えなくなってしまいますよね。なので、今までのサイトの構成は以下のような感じでした。
しかしここ最近このサイドバーが固定されているブログをよく見かけませんか？　固定と言っても、最初からサイドバーが固定されているわけではありません。
スクロールするとしばらくはサイドバーも一緒にスクロールされるんですが、これ以上サイドバーも先がないよ、となった段階でサイドバーのみスクロールが停止されます。その後はメインカラムだけが下へ下へとフッターまでスクロールされていきます。

※クリックして拡大できます。
これを実装する方法としては jQuery を使うのが王道らしいです。しかしよく分かっていないのと、検索で調べてみても結局うまくいかなかったので、プラグイン頼みで探してみました。そしたらとても使いやすいプラグインを発見しました。

ワードプレスプラグイン：Standard Widget Extensions

＞ Standard Widget Extentions
このプラグインを使えば、スクロールに応じたサイドバーの固定を簡単に取り入れることができます。ちなみに、現時点でこのブログは WordPress のデフォルトテーマ Twenty Thirteen をベースにデザインしています。Twenty Thirteen の場合はちょっとテーマの編集が必要になるとのことだったので、その辺もご紹介します。

プラグインのインストール

まずはプラグインのインストールから。

いずれかの方法でプラグインをインストールし、有効化してください。

プラグインの設定画面

プラグインの設定方法が掲載されているサイトがあります。
＞ 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 を書き換える

テーマを一部編集する必要があります。テーマを編集は必ず子テーマを作成した上で行ってください。

【重要】WordPressテーマをカスタマイズするなら子テーマを作れ！

子テーマフォルダを作成したら、テーマの設定画面で子テーマを有効化してください。そして、子テーマフォルダの中に親テーマの 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 を指定してください。

これで Twenty Thirteen のサイドバーのスクロールを停止させることができます。

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

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

投稿の場合は、カテゴリーをリスト表示させるのが一般的です。一方固定ページの場合は、親ページと子ページという関係性がある場合にパンくずリストを使って階層表示させることができます。
パンくずリストは 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 では、副ウィジェットエリアに何かウィジェットを追加していないと、デフォルトテンプレートでもワンカラム表示になるのでご注意ください。

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 よろしく！

重要ポイントはレイアウトと配色

サイトリニューアルの参考にしたサイト

― バズ部
― Goosehouse
― FUTURITY
これらのサイトからレイアウトや配色を参考にし、その通りにしました。配色に関しては好みもありますし、リニューアル前も黄色をメインとした配色だったので、黄色をメインとした配色のサイトでいい感じのものはないかということで探した結果です。レイアウトに関してはビジネス上うまくいっているところのサイトを参考にしました。

まだまだリニューアルは途中

とりあえず最低限整えてテーマを変更しました。多くの人は完成という状態にしてからリリースすると思いますが、今回のリニューアルはまだまだ穴だらけです。自社サイトなので納期の影響がないというのもありますが、リリースして、実際に運営してからでないと気付かない点というのもたくさんあります。なので、ある程度でリリースして一般の目にさらすことが重要だと考えています。今回もその考えに則って公開しました。
起業で大事な考え方の 1 つに「Ready Fire Aim」というのがあります。「構え！　打て！　狙え！」という感じです。狙ってから打つのではなく、打ってから狙う。つまり、売ってから狙いを定めるというわけです。起業初期の頃はとくに、あれこれ考えて準備を万全にしてから売るよりも、まずとりあえず売ってみて、それから改善していくことが大事なわけです。
サイトの公開に関しても同じように言えます。大企業でも、ウェブサービスのリリース直後は不具合やトラブルで炎上することがよくありますよね。大企業でもそういうもんです。使ってみないと内輪だけの感覚では分からないことがたくさんあるので、とりあえずリリースという精神は大事だと思います。

① 次のwordpressは3.6と聞いていますが、デフォルトテーマがそれにともないまた変わるそうです。このままtwentyelevenをつづけてもいいのでしょうか。それともwordpressのバージョンがあがれば、テーマもかえたほうがいいのでしょうか。

さて、早速ですが回答です。

Twenty Eleven 使い続けることで何か実害が出るとは思えません。WordPress のバージョンが変わっても、テーマも合わせて変更する必要はないでしょう。特にビジネスに使われている場合は、新しいテーマの内容を把握することに時間を割くより、もっと重要なことに時間を使った方が賢明です。
以下、根拠などを説明してますので、興味があればどうぞ。

WordPress 3.6 の新テーマ Twenty Thirteen を使うべき人、そうでない人

ぼくが WordPress 3.6 の新しいテーマ Twenty Thirteen について知ったとき、「また新しいテーマか〜…やばいな」と思ってしまいました。何がやばいかと言うと、また新しいテーマに興味を持って行かれてしまうのではないか、という点です。
WordPress ユーザーとして、新しいテーマが出たら、そりゃ試してみたくもなります。どんなカスタマイズ機能が備わっているのか確認してみたくもなります。でも、たぶん趣味の範囲を出ないのです。残念ながら、自己満足でしかないのです。
もし、あなたがウェブデザイナーで WordPress ベースのサイトを作っている人なら、WordPress の使い方を教えている人なら、WordPress の専門家と名乗っている人なら、こういった最新情報はいち早く押さえておく必要があるでしょう。
しかし、そうでないのならテーマについての知識や使い方を把握するのは、本業とはかけ離れた行為です。新しいテーマの使い方を身につけたからといって、売上が上がるわけでも、お客さんの満足度が上がるわけでもありません。
確かに、ウェブデザインにも流行がありますし、テーマはサイトのユーザビリティや印象を決める重要な要素なので、訪問者視点に立って考えた場合、変更した方がいいという判断になることもあるでしょう。ただ、正直テーマの見直しより、もっと重要な点を見直した方がいいのではないか、というケースがほとんどだと思います。

テーマの変更は最重要事項ではない

つまりそういうことです。テーマを変更するかどうかは、結局立場や好みの問題です。Twenty Twelve がリリースされたときも、Twenty Eleven と比べて正直使いにくいなと感じました。なのでぼくは Twenty Eleven を使い続けています。
それよりも見直すべき点は、ウェブサイトから見込み客を集める仕組みがあるかどうかという点です。具体的には訪問者のメールアドレスや連絡先などを取得する仕組みがあるかどうか。あるならその反応率を上げるにはどうしたらいいか、などです。
これはデザイン云々よりも、サイト上で何（どんなコンテンツ）を提供しているか？　訪問者にその価値がどのように伝わっているのか？　メッセージが訪問者の注意をつかんでいるのか？　などを検討した方がいいということです。
その方が見込み客の獲得につながりますし、結果的に売上に貢献するでしょう。

でも Twenty Thirteen も気になる・・・
その場合はテストサイトで試験運用を

そう、それはしょうがないですよね。気になるものは気になります。Twenty Thirteen を見てみましたが、今までのデフォルトテーマとはだいぶイメージが違いますよね。エキセントリックというか・・・派手です。今まではモノトーンでしたし。最近流行のフラットデザインを意識しているのかな？　という感じもします。
どうしても気になってしまう場合は、別途テーマ確認用の WordPress サイトを立ち上げてみるといいと思います。今の WordPress サイトにすぐ Twenty Thirteen を適用するのではなく、別のサイトで Twenty Thirteen の使い心地を確認してみたり、カスタマイズしてみたりをやっておくと。それで Twenty Eleven よりもいいと感じたらテーマの以降に踏み切ってみると、、、。
でもそこに時間を割くのなら、他にもっと大切なことがあると思いますよ（ほとんどの場合）、というのがぼくの意見になります。