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

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

Simplicityの子テーマを使います

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

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

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

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

http://wp-simplicity.com/downloads/child-theme/

こちらの

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

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



新規追加
 をクリック

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

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

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

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

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

子テーマのfunctions.php

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

子テーマのstyle.css

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

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

この部分に1行足して

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

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

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

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

ここに、



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

ここに

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

表画面を見ると、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Amazon sponsored link] WordPressデザイン 関連本
兎本美佳

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

コメント

  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;
      }

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

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

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

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

  6. はし より:

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

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

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

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

トップへ戻る