【Simplicity編】トップページだけに表示するウィジェットエリアを作る

この記事は約6分で読めます。
この記事は最終更新日から3年経過しています。内容が古い可能性があります。

トップページの投稿一覧の上に「あいさつ」のような文章を表示させたくて、前回はtwentyfourteenのトップページ用にウィジェットエリアを作りました。今回は私の周りでじんわりブームになっているテーマSimplicityに同じように「あいさつ」のような文章を表示させるトップページウィジェットエリアを作る方法について書きます。

スポンサーリンク

Simplicityの子テーマを使います

Simplicityの子テーマについて書きます。既に子テーマを使っている時は次へ飛んでください。

Simplicityについては「テーマSimplicityはアフィリエイトサイトの他すべてのサイトにいい!」こちらを見ていただけるとどんな感じにいいか分かっていただけるかと思います。アフィリエイトに向いたテーマですがアフィリエイトをしなくてもスッキリとしたデザインで管理画面から色々設定できるのでアフィリエイトサイト以外のあらゆるサイトにとって良いテーマだと思います。そんなこんなで私の周りではこのSimplicityがじんわり流行しています。

カスタマイズをする場合はSimplicityそのものではなく、子テーマをインストール&有効化してそちらを使うようにします。

子テーマはSimplicityのサイトからダウンロードできるので、

Simplicityの子テーマ
テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。 というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。 それ

こちらの

ダウンロード をクリック。保存した、simplicity-child20150920a.zip (2015…あたりは更新によって変わります)を

ダッシュボード 外観>テーマ をクリックして、



新規追加
 をクリック

テーマのアップロード をクリック

先ほど落としたzipファイルを指定して今すぐインストールをクリックします。

有効化 をクリックします。今までSimplicityでサイトをつくってきていた場合は、テーマが変わるために外観>カスタマイズから指定した内容をもう一度指定する必要がありますのでご注意ください。

Simplicityの子テーマにトップページメイン用ウィジェットを追加する

やることはぼほtwentyfourteenのときと同じです。

子テーマのfunctions.php

if (function_exists('register_sidebar')){
    register_sidebar(array(
        'before_widget' => '<div class="top_main_widget" id="%1$s">'."\n",
        'after_widget' => '</div>'."\n",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
        'name' => 'トップメイン',
        'id' => 'top_main_widget'
    ));
}

を追加します。twentyfourteenの時に較べてタグやclassをシンプルに(twentyfourteenのとき、いらないものがあったかも(^_^;)しました。

子テーマのstyle.css

.top_main_widget {
  background-color:#eee;
  padding:10px;
  margin-bottom:10px;
}

を追加します。Simplicityの場合、メインの枠の中にしかトップページメインウィジェットエリアを入れる事ができなかったので(あるいは私の力不足)、投稿一覧と区別できるように背景にちょっと色を入れてみました。

親テーマSimplicityから home.php を子テーマにコピーして、ファイルを開き、

<?php //トップページ用 ?>
<?php get_header(); ?>

<?php get_template_part('list') ?>

<?php get_footer(); ?>

この部分に1行足して

<?php //トップページ用 ?>
<?php get_header(); ?>

<?php dynamic_sidebar('top_main_widget'); ?>

<?php get_template_part('list') ?>

<?php get_footer(); ?>

このようにします。dynamic_sidebar(‘top_main_widget’) でこの場所にトップページメインウィジェットを表示します。

ダッシュボードでトップメインに追加する文言を指定する

これでダッシュボード 外観>ウィジェット を見ると、

このように トップメイン というウィジェットエリアが追加されています。

ここに、



利用できるウィジェット
 から テキスト をドラッグ&ドロップして

ここに

トップメインに表示したい内容を入力して、保存 をクリック

表画面を見ると、

「ごあいさつ」が追加されました(^^)/

Simplicityに元々入っている before-main.php で表示してみる

このカスタマイズについて検索しているときに、

Simplicity ウィジェットスペースの追加

というページを見つけました。before-main.phpというものが最初から入っているみたいです。これを使って、先ほどのメインウィジェットを表示してみました。

ウィジェットが2カ所出てしまうと変なのでhome.phpからは先ほど追加した行を削除しておきます。

子テーマフォルダに before-main.php というファイルが入っているので開きます。

<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
?>

このように何も入っていないのですがこれを

<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。

dynamic_sidebar('top_main_widget');

?>

こんな風に dynamic_sidebar(‘top_main_widget’) というトップメインウィジェットを表示するコードを追加します。

これで表画面を見てみると、

こんな感じに横幅いっぱいのウィジェットで表示されました(^^)/。

Simplicityでウィジェットを追加するときにトップに大きく出したければこんな風に出すこともできますね。あ、しかしこのコードだと

どのページの頭にも表示されてしまうので、トップページだけに表示したければ before-main.php の追加した部分を

if (is_front_page()){
    dynamic_sidebar('top_main_widget');
}

このように トップページだったら表示する というコードにするといいと思いますこれで先ほどのページを表示すると、

トップページ以外にはウィジェットが表示されなくなりました。

先ほどhome.phpにはこのif文を入れませんでしたが、それはhome.phpはトップページでしか利用しないファイルなのでif文を書かなくても必ずトップページだからでした。

もしhome.phpに入れたのと同じ場所にトップページ以外の時もウィジェットを表示したかったら index.php,category.php,single.php,page.php(もしかして他にもあるかも)などのファイルを親テーマのSimplicityからコピーしてきて dynamic_sidebar(‘top_main_widget’) を表示する行を追加します。

[amazon_searchlink search=”WordPressデザイン”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPressテーマ全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. […] RYUS blogさんの記事を参照させていただきました。感謝します。 […]

  2. 倉橋 泰祐 より:

    はじめまして、コメント失礼いたします。

    まさしくSimplicityでトップページだけにお知らせを表示したく、ここ二日くらい悩んでいたのですが、こちらの記事を参考にさせて頂き、やりたいことが実現できました。しかもこの方法だと更新の際、ダッシュボードからできるので本当に助かります。

    一言、お礼を申し上げたくコメントさせていただきました。

    • 兎本美佳兎本美佳 より:

      倉橋さん、おはようございます。
      記事が役立ったということが分かってとてもうれしいです(^^)/。これからもいろいろ書いていきますのでご愛読いただけたら幸いです!

  3. […] トップページだけに表示するウィジェットエリアを作るーSimplicity編 […]

  4. miho.s より:

    はじめまして。
    Wordpressを使い始めたばかりで表示方法を悩んでいたところでした。
    こちらの記事を参考にして少しづつですけど前に進めそうです。
    トップページに「ごあいさつ」が表示された時は嬉しくて声が出ちゃいました(≧▽≦)
    ただ背景に色を付けるだけが反映されないです・・・。
    スタイルシートへの書き込みしているつもりですけど上手くいかないです。
    どこで間違えているんでしょうか?
    本当に初心者で申し訳ないのですが
    宜しくお願いします。

    • 兎本美佳兎本美佳 より:

      miho.sさん、こんにちは。トップページにごあいさつ、ご利用いただきありがとうございます。
      背景の色が反映されないということですが、使っている子テーマのstyle.cssに

      .top_main_widget {
      background-color:#eee;
      padding:10px;
      margin-bottom:10px;
      }

      といれてあれば色は変わると思うのですが。。。子テーマのstyle.cssでなくて違うファイルにしてしまっていないかとかないでしょうか?

      それでもだめだったら

      .top_main_widget {
      background-color:#eee;
      padding:10px;
      margin-bottom:10px;
      }

      のように頭の空白をとってもらうと治るかもしれません(最近ちょっと空白で問題が起こってます)。

      あと、それでもダメでしたら

       'before_widget' => '
      '."\n",

      のように直接色を指定しちゃうとかいかがでしょうか?

  5. […] トップページだけに表示するウィジェットエリアを作るーSimplicity編トップページの投稿一覧の上に「あいさつ」のような文章を表示させたくて、前回はtwentyfourteenのトップページ用にウィジェットエリアを作りました。今回は私の周りでじんわりブームになっているテーマSimplicit … 続きを読む トップページだけに表示するウィジェットエリアを作るーSimplicity編 →ryus.co.jp […]

  6. はし より:

    まさしくこの方法が知りたくてたどり着きました。
    おかげで、想い描いていたスペースが実現できそうです!
    本当にありがとうございました!

    • 兎本美佳兎本美佳 より:

      はしさん、こんにちは!記事がお役に立てたようで、お知らせいただきとてもうれしいです(^^)/。コメントありがとうございました。

  7. […] トップページだけに表示するウィジェットエリアを作るーSimplicity編トップページの投稿一覧の上に「あいさつ」のような文章を表示させたくて、前回はtwentyfourteenのトップページ用にウィジェットエリアを作りました。今回は私の周りでじんわりブームになっているテーマSimplicit … 続きを読む トップページだけに表示するウィジェットエリアを作るーSimplicity編 →ryus.co.jp […]

  8. […] トップページだけに表示するウィジェットエリアを作るーSimplicity編トップページの投稿一覧の上に「あいさつ」のような文章を表示させたくて、前回はtwentyfourteenのトップページ用にウィジェットエリアを作りました。今回は私の周りでじんわりブームになっているテーマSimplicityに同じように「あい […]

  9. 渋谷 より:

    シンプルで大変参考になりました。ありがとうございます。

  10. エイキチ より:

    参考にさせていただきました。
    探していた方法に、やっと出会いました。
    ありがとうございます。

  11. […] トップページだけに表示するウィジェットエリアを作るーSimplicity編|ゆうそうとITブログ […]

  12. […] トップページだけに表示するウィジェットエリアを作るーSimplicity編より引 […]

  13. […] トップページだけに表示するウィジェットエリアを作るーSimplicity編トップページの投稿一覧の上に「あいさつ」のような文章を表示させたくて、前回はtwentyfourteenのトップページ用にウ […]