【Simplicity2】メニューの下にウィジェットエリアを作ろう!

たくやきです。

ワードプレスのテーマで【Simplicity2】を利用している方は割とおられると思いますが、既存のカスタマイズではちょっと物足りない部分ってありますよね。

ということで、今回はその内の１つ「メニューの下に枠(ウィジェットエリア)を作りたい!」を実践していきます。

この画像↓の赤ラインの部分ですね。

私もこれができるまでに(必要な情報を得られるまでに)結構時間がかかってしまいました…。

ですのでワードプレス初心者の方でも簡単にコピペで作れるように、コードと参考になったページを載せます!

「メニューの下に枠を作りたい」「ヘッダー下にウィジェットを入れたい」って方向けの記事となります。(2018年に登場したテーマ『Cocoon』でもこの方法が使えます!)

尚、
※バックアップを必ず行ってから実践しましょう。
※カスタマイズは自己責任でお願いします…たくやきもPHPやCSSなどは超初心者なので涙)

①メニュー下、左右に１つずつ枠(ウィジェットエリア)を作る

では早速いってみましょう。ゴールイメージはこの画像です。

まず、子テーマfunction.phpに下記コードをコピペしましょう。

[register_sidebar(array(]←この呪文でウィジェットを入れる枠を作ることができるようですね。

register_sidebar(array(
'name' => 'top_left' ,
'id' => 'top_left' ,
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

register_sidebar(array(
'name' => 'top_right' ,
'id' => 'top_right' ,
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

次に、子テーマbefore-main.phpに下記コードをコピペしましょう。

この呪文で、実際のページのメニュー下にウィジェットエリアが作成されます。
(※子テーマ最初のPHPコード閉じタグの後にペーストしてください。)

<div class="top rss">
<div class="left"><?php dynamic_sidebar('top_left'); ?></div>
<div class="right"><?php dynamic_sidebar('top_right'); ?></div>
</div>

その次に子テーマstyle.cssに下記コードをコピペします。ウィジェットエリアのレイアウトです。
私のような初心者の方であれば特にいじることはないかと思います。

.top.rss .left, .top.rss .right {
display: inline-block;
width: calc((100% - 80px)/2);
vertical-align: top;
margin: 10px;
}
.top.rss ul {
list-style: none;
}
.top.rss li {
margin-bottom: 10px;
line-height: 1.3;
}
.top.rss li:last-of-type {
margin-bottom: 0;
}

さて、ここまできたら一度［外観］→［ウィジェット］を見ていきます。

下記画像のように【top_left】と【top_right】の枠ができましたね。

実際にページを見てみます。

……あれれ⁈なんだか表記されるところがおかしいですね。

ゴールイメージと大分違います。

でも慌てない、これはキャッシュの問題だと思われますので、
お使いのブラウザで［履歴］を一度削除してページを更新すればOKです。

これで完成です!
参考になったページはこちら↓

https://wp-simplicity.com/suport/topic/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%81%AE%E4%B8%8B%E3%81%AB%E7%8B%AC%E8%87%AA%E3%81%AE%E7%9B%B8%E4%BA%92rss%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%97%E3%81%9F%E3%81%84/

②メニュー下、大きな１つの枠(ウィジェットエリア)を作る

左右に１つずつではなく、大きな枠を作りたい!と言う方はここから。

まとめサイトなどでもよく見ます。ゴールイメージはこちら↓

コピペするのは先ほどと同じPHPやCSSです。

最初は子テーマfunction.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'
));
}

次に子テーマbefore-main.phpに下記コードをコピペ

ここでちょっと注意点ですが、この１行のコードは最初のphpタグの中に入れるようにしてください!

先ほどの左右１つずつのエリア作成のときとは違いますよ。
（参考にしたサイトさんが違かったので、表記の仕方も変わってるってことです…）

dynamic_sidebar('top_main_widget');

そして子テーマstyle.cssに下記コードをコピペして終了。

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

実際に見てみると、左右１つずつのときとは違って枠は１つだけです。

テキストを入れて実際のページを表示してみます。

OK!できましたね☆

あとはここにRSSのスプリクトなり、広告を入れれば見た目がかっこよくなりますね!

参考にしたページはこちらです↓

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

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

usortblog.com

記述によっては、トップページだけ枠を作るってこともできるそうなので興味ある方は見ておくといいでしょう!

枠を作ることができましたか?

さて冒頭でも書いたんですが、これらの情報を得るのに私は大分時間がかかりました。

何故かというと…”キーワードを知らなかったから”に尽きます。

そもそも「ウィジェットエリア」なんていう単語すら知らなかったんですから…。

ダッシュボードにも書いてあったりするんですけどね…。意外と知らないことが多くてびっくりです。

「メニュー(ヘッダー)の下に枠を作りたい」「メニュー(ヘッダー)の下に空間を作りたい」

最初はこんな感じの言葉で調べてたんですが、見つからなかったり難しすぎたり…。

私のようなワードプレス超初心者の方が無事にこの記事を見つけられるように祈っております…。な～む～。

おわり。