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

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

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

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

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

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. しげぞう 投稿作成者

    乃風様

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

  2. 乃風

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

  3. 乃風

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

  4. しげぞう 投稿作成者

    乃風様

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

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

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

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

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

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

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

  5. 乃風

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

  6. 乃風

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

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

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

  7. しげぞう 投稿作成者

    乃風様

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

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

  8. しげぞう 投稿作成者

    乃風様

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

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

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

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

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

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

  9. 乃風

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

  10. 乃風

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

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

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

  11. 乃風

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

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

  12. しげぞう 投稿作成者

    乃風様

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

  13. 乃風

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

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

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