Simplicityのヘッダーにウィジェットを設置するための方法

24 2月 Simplicityのヘッダーにウィジェットを設置するための方法

Posted at 10:39h in Wordpressカスタマイズ全般 by 数藤圭介

コンテンツエリアの好きな位置にウィジェットを設置できるSimplicityですが、唯一、ヘッダーにウィジェットを配置する機能がありません。

Simplicityはシンプルとはいえ、ヘッダーロゴの右側の空白がもったいないので、Simplicityのヘッダーにウィジェットを設置するための方法を記しました。

修正する場所

1. function.php
2. header.php
3. style.css

テーマを編集する場合は予期せぬ動作をする場合があるので必ずバックアップをしましょう。

1. function.phpの修正

まずは、function.phpに下記のコードを追加します

// added header widget
register_sidebar(array(
     'name' =&gt; 'ad-header-widget' ,
     'id' =&gt; 'header-right' ,
     'before_widget' =&gt; '&lt;div class=&quot;ad-header-widget&quot;&gt;',
     'after_widget' =&gt; '&lt;/div&gt;',
     'before_title' =&gt; '&lt;h3&gt;',
     'after_title' =&gt; '&lt;/h3&gt;'
));

2. header.phpの修正

次に、header.phpに下記の1行を追加します。
挿入場所は間違えないようにしてください。

            &lt;div class=&quot;alignright top-sns-follows&quot;&gt;
              &lt;?php  if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?&gt;
              &lt;?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?&gt;
              &lt;?php endif; ?&gt;
            &lt;/div&gt;

            &lt;!-- header widget --&gt;
            &lt;?php dynamic_sidebar('header-right'); ?&gt;

          &lt;/div&gt;&lt;!-- /#h-top --&gt;
        &lt;/div&gt;&lt;!-- /#header-in --&gt;
      &lt;/div&gt;&lt;!-- /#header --&gt;

3. style.cssの修正

最後に、style.cssに以下のコードを追加します。
width,height,topは挿入したいコンテンツの大きさに合わせて適宜変更してください。
一番下の行は、タブレット幅以下の場合にウィジェットを表示させないためのコードです。

/* +++++ header ad widjet +++++ */
.ad-header-widget {
position: absolute;
right: 0;
width: 468px;
height: 60px;
top: 20px;
}
@media screen and (max-width: 1110px) {.ad-header-widget{display:none;}}

これで作業終了です。

▲右下にヘッダー用のウィジェットができました