固定ページと個別ページでサイドバーを使い分ける方法

WordPressブログ

今回は固定ページと個別ページで違うサイドバーを使う方法を紹介します。例えばこのブログのようにTwentyTwelveのテーマを使っている場合にはWordPressの「外観」⇒「ウィジェット」と進むとサイドバーが3つ程設定できるようになっていますよね。

サイドバー-1

普通はこの「メインサイドバー」を利用してサイドバーを表示しますが、固定ページと個別ページではサイドバーの内容を変えたいという場合、例えばアドセンス広告の貼り付けを固定ページと個別ページで分けたいという場合とかね。

まあ、色々使える場面があるかも知れませんので解説していきます。

子テーマに「sidebar-2.php」を作成する

まずは2つ目のサイドバーを使えるようにしておきましょう。ロリポップの場合で説明するとロリポップFTPで「wp-content」⇒「themes」⇒「child(私の場合の子テーマ)」と進み、この中にファイルを作成します。

サイドバー-2

ファイルを作成したら「sidebar-2.php」という名前だけ付けて「保存」しておきます。内容は後で記述します。

サイドバー-3

名前を付けて「保存」できたらロリポップでの作業は終了です。

新しいサイドバーを使えるようにする

それではWordPressに戻って、WordPressの管理画面から「外観」⇒「テーマの編集」をクリック。すると画面右に先ほど作成した「sidebar-2.php」というファイルが表示されている事を確認して下さい。

サイドバー-4

これは開かずにおいておき、まずは普通の「サイドバー (sidebar.php)」を開きます。子テーマに「サイドバー (sidebar.php)」がない場合は子テーマに追加するか親テーマ「(私の場合は)TwentyTwelve」を選択して「サイドバー (sidebar.php)」を探します。

サイドバー-5

親テーマの「サイドバー (sidebar.php)」を見つけたら内容を全部コピーして再び子テーマに戻ります。

それではコピーした「サイドバー (sidebar.php)」の記述を先ほど作成した「sidebar-2.php」に貼り付けします。この中にはこのような記述があると思います

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary -->
<?php endif; ?>

「sidebar-2.php」ではここの「’sidebar-1′ 」という記述を「’sidebar-2′ 」と書き換えて下さい(2箇所)。これで準備は完了です。「sidebar-2.php」はこんな感じになっていますね。

サイドバー-6

固定ページにはサイドバー2を使ってみる

では実際に固定ページでは新しく作成したサイドバー2を利用してみましょう。まずはウェイジェットを追加しておきましょう。今度は「メインサイドバー」ではなくて「フロントページウェイジェットエリア(TwentyTwelveの場合)」というのを開いて使いたいウィジェットを追加。

サイドバー-7

ウィジェットを追加したら「外観」⇒「テーマの編集」をクリックして「固定ページテンプレート (page.php)」を開きます。子テーマに固定ページテンプレートが無いという場合は子テーマに追加しておきましょう。

固定ページテンプレートの一番最後の部分にこのような記述があります。

<?php get_sidebar(); ?>
<?php get_footer(); ?>

ここの「sidebar()」という部分の()の中に「”2″」を入れます。半角です。

<?php get_sidebar("2"); ?>
<?php get_footer(); ?>

つまりこれで固定ページでは「サイドバー2」を呼び出してねって事になります。後は保存をして終了です。

上手くできない場合は数字が全角になっていないか確認してみて下さいね。

コメント

  1. はなこ より:

    返信ありがとうございます!
    指摘いただいた通りに編集したところ、無事直りました!!
    本当にありがとうございます!助かりました。

  2. しげぞう より:

    はなこ様

    返信ありがとうございます。やはり個別ページと固定ページで表示が変わるのがおかしいですね。CSSに原因がればどのページも同じ表示になるはずです。という訳でこれは固定ページのファイルに原因があるかなと思います。多分個別ページのcontent.phpではなくて、固定ページcontent-page.phpじゃないかと思います。

    はなこ様のcontent-page.phpは若干カスタマイズしてあると思います(記事タイトルと画像の位置を変えてる?)。その時に別の部分を気付かずに1部削除したとかそんな感じのミスではないかなと思いました。

    で、一度content-page.phpの記述をまるっとコピペしてメモ帳などに貼り付けておきます(失敗してもまた元に戻せるように)。

    コピーできたら親テーマのcontent-page.phpをコピーして子テーマのcontent-page.phpに貼り付け。つまりcontent-page.phpだけ一度初期化する感じになります。これで保存してブログを表示させてから「Ctrl」と「F5」を一緒に押してリロード(再読込み)して確認してください。

    これで元に戻るならcontent-page.phpが原因だったという事になります。content.phpと名前が似ているので間違わないようにやってみてください。

    それでも上手く行かない場合には再度コメント頂けると助かります。

  3. はなこ より:

    返信ありがとうございます。ブログテーマはtwentytwelveです。

    よろしくお願いします。

  4. しげぞう より:

    はなこ様

    コメントありがとうございます。普通サイドバーやサイトの幅の変更をミスった時にサイドバーが下に落ちます(カラム落ち)。ただ、幅をミスったという場合は固定ページだけでなく個別ページも同じようになるはずなんです。なのでもしかしたら別の原因があるのかもしれませんので、もしよかったらブログのテーマとURLを教えてもらえると助かります。コメント公開時にはURLは削除します。

  5. はなこ より:

    こんにちは。こちらのサイトを参考に、ワードプレスでブログを始めたのですが、分らないところがあり質問をさせていただければと思います。

    サイドバーについてですが、固定ページのサイドバーが個別記事のように右側に表示されず、記事内容の下に表示されてしまって直し方が分りません…。

    初心者なので初歩的な質問かもしれませんが、教えていただけるととっても助かります…!
    よろしくお願いします。

  6. しげぞう より:

    乃風様

    コメントありがとうございます。その時だけ表示されるコンテンツという感じだと思うのですが、これはちょっと複雑かもしれませんし、できたとしても隠しテキスト的な部分ってちょっとスパムっぽい感じもするかしれません。

    それよりもその商品の紹介用のページを1商品につき1ページずつ作ってレビュー記事とした方が良いと思います。商品名とか商品名+口コミみたいなキーワードで検索する方もいると思いますので、検索経由での訪問者を増やす事ができる可能性があります。

  7. 乃風 より:

    しげぞう博士様

    記事を書いたそのページ(ページA)に、サイト内リンクで、別のページ(ページB)に飛ばす場合、飛ばしたその時だけ「ページB」が表示されるようにすることはできますでしょうか? つまり、「ページB」は、私のサイト内にある「最近の投稿」や「カテゴリー」内では表示されないページのことです。

    過去に書いた私の記事で、商品説明が妙に長いのがあるので、そういった商品説明部分を切り離して、格納できればいいなと思いました。どうでしょうか?

  8. しげぞう より:

    乃風様

    返信ありがとうございます。えっとですね、A8さんの広告は広告コードの下に1px(見えない小ささ)の画像が挿入されていて、広告画像の下に画像があるのでその分1つ改行されて余白ができてしまいます。

    ちょっと無理やりですが、スタイルシートで余白をカットします。

    先ほど同様にサイドバーの靴の広告の部分、「ウェジェット」⇒「テキスト」と進み「テキスト」の内容を以下のように書き換え。

    <div class="side-yohaku">
    ここに靴の広告コード
    </div>

    それで保存して次にスタイルシートに以下の記述を追加。

    .side-yohaku {
      margin-bottom: -40px;
    }

    これで一度試してもらえますか?

  9. しげぞう より:

    乃風様

    コメントありがとうございます。サイドバーの広告を中央に寄せるのはスタイルシートで可能ですが、その前にやることがあります。サイドバーの広告はウェイジェットの「テキスト」を追加してあると思うのですが、そのテキストの中身を次のようにして下さい。スタイルシートではなくてウェイジェットです。

    <div class="ad-side">
    ここに広告のコード
    </div>

    「ここに広告のコード」という文字を消して使いたい広告コードに書き換えて下さい。これで「テキスト」の内容を保存します。

    それができたら今後はスタイルシートで次の記述を追加します。

    .ad-side {
    text-align:center;
    }

    追加できたら保存して完了です。ブログを表示させて確認をしてみて下さい。まずはこれでやってみて下の余白はできてから調整してみますので、またコメント下さい。

タイトルとURLをコピーしました