MORIAWASE

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

今日の人気記事です!

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

   

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

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

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

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

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

CAUTION

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

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

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

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

widget

 

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

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

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

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

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

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

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

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

widget-4

POINT

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

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

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

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

POINT

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

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

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

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

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

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

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

widget-5

 

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

header-ad-1

 

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

widget-7

 

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

header-ad-2

 

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

widget-8

 

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

widget-9

POINT

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

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

▲こうなればOKです。

まとめ

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

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

 - WordPress・カスタマイズ

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

最新情報をお届けします