好きなもの、好きなだけ、盛り合わせ

ヘッダー下をウィジェットで管理!ワードプレスカスタマイズ!

   

ブログ運営をしていると、ついついやりたくなるカスタマイズ!僕もまた「カスタマイズしたい病」が発生してしまいました…!

もう、ヘッダー下のスペースをなんとかしたくて体がかゆくてたまりません。今はこのスペースに広告(アドセンス)を掲載しているんですが、なんだか物足りなくて。

  • 人気記事を表示したり
  • 大きいバナーを表示したり

いろんなことができますよね。ただ、普通にカスタマイズをしても面白くない。せっかくなら、「イイね!」と言われたい。そして、閃きました。

サイドバーウィジェットみたいに汎用性があって管理が楽になるカスタマイズ。これで決まりです。

CAUTION

ワードプレス限定のカスタマイズです!バックアップを取ってからお試しください!

ウィジェットで管理するメリット

これ実は、ずっとやりたかったんですよ。ウィジェットだと、配置を気軽に変えることができるし、管理が楽になると思ったので。

表示と非表示の切り替えも簡単だし、スマホでも操作ができます。あ、ウィジェットってこんなやつです。

widget

 

  • カテゴリ非表示にしようかな?
  • アーカイブの配置変えようかな?

など、専門知識がなくても気軽にカスタマイズすることができます。では、実際にカスタマイズ方法をご紹介してみます。

function.php(ファンクション)カスタマイズ

まずは、function.phpをカスタマイズします。ウィジェットエリアを管理画面に追加する方法は様々ありますが、Stinger5(6や7も?)のコードがシンプルでおすすめです。

ちょっと長いですが、僕はこんな感じにカスタマイズしました。Stinger5(6や7も?)ユーザーはコピペでいけると思います。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )
register_sidebars(1,
    array(
    'name'=>'サイドバーウイジェット',
    'before_widget' => '<ul class="%2$s"><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'description' => '「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンス用336px',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<p style="display:none">',
    'after_title' => '</p>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用300px',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<p style="display:none">',
    'after_title' => '</p>',
    ));
//ここから追加
register_sidebars(1,
    array(
    'name'=>'ヘッダー下ウイジェット(タイトルなし)',
    'description' => 'タイトルは反映されません。',
    'before_widget' => '<div class="header-widget clearfix">',
    'after_widget' => '</div>',
    'before_title' => '<p style="display:none">',
    'after_title' => '</p>',
    ));
register_sidebars(1,
    array(
    'name'=>'ヘッダー下ウイジェット(タイトルあり)',
    'before_widget' => '<div class="header-widget clearfix">',
    'after_widget' => '</div>',
    'before_title' => '<p class="header-widget-title">',
    'after_title' => '</p>',
    ));

▲下の2つが追加したコードです。

  1. タイトルがページに反映されないタイプ
  2. タイトルがページに反映されるタイプ

の両方を追加してみました。これだけで、ウィジェッドが使えるようになります。

widget-4

POINT

他のテーマをお使いの方はコードが違うはずなので、テーマに合わせて微調整してみてください。既存のコードと重複しないように注意しましょう!

header.php(ヘッダー)カスタマイズ

次に、header.php(ヘッダー)をカスタマイズします。こちらもやり方は簡単で、ウィジェットを追加したい箇所に下記のコードを記述するだけ。

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : //ヘッダー下ウィジェット(タイトルなし) ?>
<?php endif; ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : //ヘッダー下ウィジェット(タイトルあり) ?>
<?php endif; ?>

先ほどの「5番目」と「6番目」のウィジェットを追加する…というコードです。僕はこんな感じになりました。

</header>
<div id="wrapper">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : //ヘッダー下ウィジェット(タイトルなし) ?>
<?php endif; ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : //ヘッダー下ウィジェット(タイトルあり) ?>
<?php endif; ?>
POINT

先ほどのコードのパターンなので、先ほどのコードを微調整した場合はこちらのコードも微調整してみてください!

style.css(スタイルシート)カスタマイズ

最後にstyle.css(スタイルシート)をカスタマイズします。

/*--------------------
 ヘッダー下ウィジェット
--------------------*/
.header-widget{
	padding: 10px 0;
}
.header-widget-title{
    margin: 5px 0;
}

▲最低限これだけ追加すれば問題ないかと思います。ここら辺はお好みで修正してみてください。

ヘッダー下ウィジェットに追加してみる

では、実際にどんな感じになるか見てみましょう。人気記事は別記事でご紹介しているので、良かったらチェックしてみてください。

まずは、Googleアドセンスの表示を確かめてみます。通常のアドセンスは3つまでしか掲載できないので、他の場所から移動させます。

widget-5

 

すると、こんな感じで表示されます。

header-ad-1

 

タイトル(文字)を非表示にするには、「タイトルなし」の方のウィジェットに追加します。

widget-7

 

すると、こんな感じでタイトル(文字)なしで広告が表示されます。

header-ad-2

 

もちろん、普通にウィジェットとして使えるので、他のものも追加できます。

widget-8

 

こんな感じでしっかりと反映されます。

widget-9

POINT

Stinger5(6や7も?)の場合、「検索マーク」が画面右上に絶対配置されますが、コードを修正すれば問題ありません。

/* 検索フォーム */
#side aside #search {
	margin: 20px 0;
	position: relative;
	width: 100%;
}

▲こちらのコードの「#search」より前のコードを削除してください。

/* 検索フォーム */
#search {
	margin: 20px 0;
	position: relative;
	width: 100%;
}

▲こうなればOKです。

まとめ

サイトデザインを衝動的に変えたくなってしまう方にとって、ウィジェットでの管理はかなり相性が良いはず!

カスタマイズをするのは簡単ですが、管理をするのは面倒くさい…そんなお悩みをお持ちの方はぜひお試しあれ!

カテゴリー WordPressカスタマイズ

注目 【dマガジン】初回31日間無料で180誌以上の雑誌が読み放題!

注目 失敗なし!au・docomoからmineo(マイネオ)へのMNP方法!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

この記事が気に入ったらいいね!しよう

最新情報をお届けします

この記事を書いた人:シェフ

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

閉じる

CLOSE

アーカイブ

CLOSE