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

今回は固定ページと個別ページで違うサイドバーを使う方法を紹介します。例えばこのブログのように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」を呼び出してねって事になります。後は保存をして終了です。

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

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

固定ページと個別ページでサイドバーを使い分ける方法”に21件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  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. 乃風

    しげぞう博士様

    いつもお世話になっております。そうでしたかー・・・・。じゃ、やめときますね。(^。^)y-.。o○←(諦めるのが早い!)  

    あれからどうしても紹介したい商品に出会い、昨日急きょその記事を作っている時に、今回しげぞう博士がアドバイスしてくれたその方法と同じ方法に、ふと気づき、この方向でもいいな・・・という気持ちになりました。その矢先に本日のコメントを読ませていただきました。なので、この方法で行ってみます。

    ちなみに今回の記事から例のショートコードを搭載してみました。上手く反映されて、なんかうれしかったです。その記事はまだ制作中ですが、とりあえず、このペースでいってみます。ありがとうございました。

  7. しげぞう 投稿作成者

    乃風様

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

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

  8. 乃風

    しげぞう博士様

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

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

  9. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。上手く反映されているようですので、そのままでOKです。また何か分からない部分があればコメント下さい。どうぞよろしくお願い致します。

  10. 乃風

    しげぞうさん、ちょっと気になり、また戻ってきました。さっきの「ウェジェット」→「テキスト」と進み、そこで靴のコードを見たのですが、どこからどこまでが、靴の広告コードなのかが分からず(最後に書き換えて保存した時のと内容がちょっと違っていたので)、色々右往左往した挙げ句、「ウェジェット」→「テキスト」のその「テキスト」に書いてあった靴のコードを丸ごと「」と「」で挟んだのですが、それでよかったのですよね? 

  11. 乃風

    しげぞうさぁーーーーーーーん! うまくいきました。大喜びです! ありがとうございました! 

  12. しげぞう 投稿作成者

    乃風様

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

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

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

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

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

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

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

  13. 乃風

    圧縮されて表示されるのですね。それはよかった。横幅468PXなどのそういった横長の広告は、例えば、話題とか文脈が変わる時に、文中内で使いたいと思ったんです。普通に文中内で使えるのなら、分岐とか、プラグインとか、私もそういうのは気にしないでいきます。ありがとうございました。

  14. 乃風

    しげぞうさん、うまくいきました。うれしかったです。ありがとうございました。*ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

    ただですね、しげぞうさん・・・。2枚もサイドバーに広告を出したら、以前よりも表示速度がかなり落ちました。ただの画像広告だと思っていたのですが、そうじゃないんですね。困ったなぁ~・・・。表示スピードを上げるには、別のプラグインが必要になるんでしたっけ?

    ま、ともあれ、靴の広告の下余白の件、よろしくお願いします。

  15. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。横幅468pxの広告や画像の場合ですが、スマホで横幅100%という設定になっていると思いますので、スマホの横幅に合わせてギュッと圧縮される感じになります。本当は条件分岐をして「PCならこのサイズ」、「スマホならこのサイズ」と2種類の画像や広告を使い分ける方が良いのですが、本文中で条件分岐するためには別途プラグインが必要になるかと思います。

    私も面倒なので使ってませんし、特にそこまで気になるような感じにはなってません(個人的にはですが)。なので、あまり気にしなくても良いかと思います。気になるようであればプラグインを使って条件分岐できるようにする必要があるので、またコメント下さい。どうぞよろしくお願いします。

  16. しげぞう 投稿作成者

    乃風様

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

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

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

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

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

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

  17. 乃風

    何度もすみません、しげぞうさん・・・。広告のことなのですが、横長の横文字の広告、例えば468(横)×60(高さ)の場合、フマフォにはどのように表示されるのでしょうか? そう言った広告を文中内に貼り付ける場合、事前に何等かの設定が必要になるのでしょうか?

  18. 乃風

    しげぞうさん、こんばんは。いつもお世話になっております。ワードプレスのサイドバーに、幅160×高さ600の広告を載せてみたのですが、左端に寄ってしまいます。これを中央に設定することはできるのでしょうか? その方法があるのでしたら、教えてください。これは仮の広告で、今後の為です。

    気に入った広告を見つけ、早速サイドバーのトップに1枚設置したのですが、画像の下が妙に空いているんです。このスペースをバランスよく詰めるにはどうしたらいいのでしょうか?

    上記の事も下記の事も、なんだかよく分からず、カチャカチャと操作しています。よろしくお願いします。

  19. 乃風

    いつもお世話になっております。

    「Akismetウィジェット」を「フロントページウィジェット1」に追加するのではなく、「テキスト」とか「検索」とかを追加すればよかったのですね。今度こそ、うまくいきました。ありがとうございました。

  20. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。ウェジットのページへ行くと左側に「検索」とか「テキスト」など色々と追加できる項目があると思います。「フロントページウェイジェット」の▼をクリックして開き、その中に追加していきます。左にある項目から必要な物をドラッグ&ドロップして「フロントページウィジェット」に追加すればOKです。

  21. 乃風

    いつもお世話になっております。

    「固定ページにはサイドバー2を使ってみる」という記事の直前まではうまくいきました。

    問題はその後からです。ウェイジェットを追加して、「メインサイドバー」ではなくて「フロントページウェイジェットエリア1(私の場合TwentyTwelve)」というのを開いたのですが、上記に明記されているような「テキスト:スポンサードリンク」とか、「検索:サイト内検索」とか、「My Category Order」といったものは一切出てきませんでした。その代りに出てきたのが、「Akismetウィジェット」で、その右の▼を押したら、その直ぐ下に「タイトル:ブロックしたスパム」というのが出てきました。あれこれと操作を繰り返したのですが、やはり分かりませんでした。アドバイスをお願いします。