子テーマにあるbefore-main.phpをつかってウィジェットを設置
WordPressで使用しているテーマSimplicity2の子テーマにあるファイルで、メインカラム前、メニュー下に表示される空テンプレートがbefore-main.php。
せっかくあるので何か入れてみたいと思っていたところ、Simplicity2公式サイトのフォーラムで、メチャクチャ簡単にできますよ!とウィジェット設置方法を発見。
これはおもしろそう、と早速お試し。
参考ページ
ヘッダーの下に独自の相互RSSを設置したい
Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › ヘッダーの下に独自の相互RSSを設置したい このトピックには12件の返信、1人の参加
Simplicity2子テーマフォルダ内にあるfunctions.php、before-main.php、style.cssをそれぞれ編集開始。
無事に2つのウィジェット登場!
表示するとこんな感じ。
上画像の青線枠がbefore-main.phpで表示されるエリアで、今回追加したウィジェットを設置した部分。
ウィジェットで簡単に追加できるのは便利!
ただこのままだと、記事ページなど他のページ上にも常に表示になるので、この「before-main.php」の表示をTOPページのみ表示にしてみました。下記がその編集メモ。
編集したメモ
functions.php
//ウィジェットエリア追加
register_sidebar(array(
‘name’ => ‘top_left’ ,
‘id’ => ‘top_left’ ,
‘before_widget’ => ‘<div class=”topwidget_test”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
));
register_sidebar(array(
‘name’ => ‘top_right’ ,
‘id’ => ‘top_right’ ,
‘before_widget’ => ‘<div class=”topmwidget_test”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
));
before-main.php
//ウィジェットトップページのみ表示
<?php
if (is_front_page()){
dynamic_sidebar('top_left');
dynamic_sidebar('top_right');
}
?>
style.css
.topwidget_test {
display: inline-block;
width: calc((100% - 70px)/2);
vertical-align: top;
margin: 5px;
padding: 10px;
background-color: #ffc;
}
コメント