【3分でわかる】WordPress-HTMLとCSSでウィジェットエリアを簡単に追加する方法

自分が使ってるテーマのウィジェットが少ない!追加できないの??

この悩みをお持ちの方いませんか?

結論 : できます。しかも結構簡単に。

今日はそのウィジェットエリアの追加方法について紹介していきます。

ウィジェットエリアについて

ダッシュボード⇒外観⇒カスタマイズ⇒ウィジェット

の順で見ていくとこんな画面が

ウィジェットエリアってこんな感じで設定できて、ブログのレイアウト整えるのには必須のツールです。

自己紹介書いたり、SNS設置したり、広告貼ったりとまあ色々と用途はある訳です。

アドセンス自動広告の暴走

僕が今回ウィジェットエリアを追加した理由はこれです。

自動広告の暴走。

なんじゃこれは、ヘッダーの枠の間にうまいこと挟まっている。。。

僕のスワロー使っている友人は自動広告でもこんなことにはならなそうだったのですが、僕のはこれ消してみても丁度ヘッダー下に表示されないということがありました。

そして仕方ないレスポンシブでも追加するか。。。と思ったのに

僕が使用しているスワローはかなりウィジェットエリアが多く設定されていて使いやすいのですが、ヘッダー下という箇所は設定されていませんでした。

そこで自動広告の代わりにヘッダー下にウィジェットエリアを追加し、レスポンシブ広告を貼ることにしました。

HTMLとCSSの追加手順

まず

ダッシュボード⇒外観⇒テーマエディター

に移ります。

ここで注意!なにかでバックアップを取っておくなり、子テーマで編集するなりして必ず元の状態に戻せるようにしておいてください。

まずfunction.php.をいじります。

どこでもいいので下のコードを入れてください。

ちなみに上の物はウィジェットで追加したもののタイトルが表示されなくなり、下は通常設定通りタイトルが表示されます。

//ウイジェット追加register_sidebar(array( 'name'=>'ヘッダー下ウイジェット(タイトルなし)', 'id'=>'header_widget_no_title', 'description' => 'タイトルは反映されません。', 'before_widget' => '<div class="header-widget clearfix">', 'after_widget' => '</div>', 'before_title' => '<p style="display:none">', 'after_title' => '</p>', ));register_sidebar(array( 'name'=>'ヘッダー下ウイジェット(タイトルあり)', 'id'=>'header_widget', 'before_widget' => '<div class="header-widget clearfix">', 'after_widget' => '</div>', 'before_title' => '<p class="header-widget-title">', 'after_title' => '</p>', ));

こんな感じです。僕はレスポンシブ広告のみ貼りたかったのでタイトルなしを追加しました。

次に挿入したい場所今回はheaderなのでheader.php. を開きます。

フッターに挿入したい人はfooter.php.

そして以下をウィジェットエリアを表示したい場所に置いてください。

<?php dynamic_sidebar('header_widget_no_title'); //ヘッダー下ウィジェット(タイトルなし) ?><?php dynamic_sidebar('header_widget'); //ヘッダー下ウィジェット(タイトルあり) ?>

 

僕の場合はヘッダーすぐ下だったので</header>の下に追加するだけでしたが

他の部分にウィジェット追加したい場合は正しい場所に表示されるかを新しいタブを開いてカスタマイズ画面を確認しながら作業するといいと思います。

このようにウィジェット管理画面に表示され、変更が確認できれば作業完了です。

まとめ

いかがでしょうか。

CSSとか苦手だよーーって方も割と簡単に設定できるので是非試してみてください。

本日はこれで失礼します。

おすすめオンライン英会話ランキング

  • レアジョブ英会話
    4.5



    無料体験ではカウンセリングを受けられる上に講師と教材の質がとにかく高い。
    まずは自分のレベルを知るために体験レッスンを受けてみてはいかがでしょうか。

  • ネイティブキャンプ



    体験レッスンはなんと7日間無料。
    そしてその場でレッスンの一日の受講上限なし。時間がある方は一日に何コマも受けられる上に、レッスン時間は5分から30分まで自分で選ぶことができます。アウトプットにおすすめ!

  • DMM英会話
    3.5

    世界中の先生と会話できるというのが強みです。DMM英会話にはネイティブコースという、ネイティブとのレッスンを予約できるコースもあります。
    無料体験レッスンでは通常料金でネイティブの先生の授業も取れるので是非試してみてください!

広告