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

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

Simplicityの子テーマを使います

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

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

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

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

Simplicityの子テーマ

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

wp-simplicity.com

こちらの

ダウンロード をクリック。保存した、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デザイン”]