Simplicityのヘッダー・タイトル横にウィジェット追加して広告設置

head20150429

WordPressのテーマSimplicityにはカスタマイズボタンによりヘッダーのブログタイトル右側へSNSフォローボタンを設置できます。
でも、SNSボタンは欲しくない。だけど何も無いと右側が寂しい・・・。
ということでヘッダーへウィジェットエリアを作りバナーを表示しました。

スポンサーリンク

ウィジェットエリアの追加方法

まずは、Simplicityの子テーマのfunctions.phpへコードを追加するので、必ずバックアップをとって下さい!

comments 余談ですが、
stinger5への、これと同じ解説をしてる方のコードで
私は画面が真っ白になり、phpの編集からでは元に戻らないし管理画面を開くことはおろかバックアップ・プラグインも真っ白で開けなくなりました。
サーバーのファイルマネージャーから該当phpを開き、追加したコードを削除することで元に戻りましたが初めてのホワイトアウトでしたので
かなり焦りました。(^^;)

Simplicity child: テーマのための関数 (functions.php)へ以下のコードを追加します。

次にSimplicityの親テーマのSimplicity1.6.0: ヘッダー (header.php)へ以下のハイライト部分を追加。

挿入する場所が分かりやすいように前後のソースも記載してますが
追加するのは6と7行目部分だけです。

外観ウィジェットを開くと新しく追加された
ad-header-widgetが確認できました。
作成したウィジェット

ヘッダーへバナーを貼ってみましょう。

 定番バナーサイズ468×60で解説します。

完成したヘッダーはこのようになります。
ヘッダー完成図

サイズが違ったり、何も設定しないでバナーだけ貼るとレイアウト崩れを起こすので気を付けて下さい。

外観ウィジェットから左側の利用できるウィジェットからテキストを選択してad-header-widgetへドラッグ&ドロップします。

テキストエリアへ468×60のバナーコードをペーストして保存。

バナーの位置調整とタイトルにぶつかる幅では非表示にするCSSを追加。

7行目のtop: 35px;では高さ位置を変更することができます。

9行目max-width: 1120pxでは横幅が1120px以下になると、私の場合はタイトルとバナーが被さるためスマホ対策も含め非表示としています。
ご自身の環境でブラウザを横に伸縮させてブレークポイントを探ってみて下さいね。

以上!お疲れ様でした♪(^^)/

次回は、このウィジェットエリアを利用した
複数のアフィリエイト・サービス・プロバイダ(ASP)の広告でもローテーションさせる方法を解説します。

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る