【Word Press】テーマ「Travelify」のカスタマイズ~ヘッダーに広告ウィジット追加編

旅行記ブログで使用するテーマ「Travelify」

今回はヘッダーに広告用のウィジェットを自作で追加する作業

試行錯誤の末、
ようやく解決したのでその手順をまとめます
(これはテーマに関係なく流用できるかも)

本日のお題

  • Word Pressテーマ「Travelify」のヘッダーに広告用のウィジェットを自作で追加
  • 配信広告はGoogle AdSenseのためサイズは320×50を採用

使用するWord Pressテーマ

Travelify

<はじめてのインストールの参考記事はこちら>

いじる必要のあるPHPファイル

【親テーマ】
  • 1.「header-extensions.php」
    注)子テーマでは反映しなかったので親テーマのPHPファイルを直接いじる
     ┗ ヘッダー内をいじるにはこのPHPファイル。第一階層にある「header.php」ではないので注意

    【ファイルの所在】

    ドメイン/wp-content/themes/travelify/(library/structure/header-extensions.php

【子テーマ】
  • 2.「functions.php」
     ┗ ウィジェットを作成するコード
  • 3.「style.css」
     ┗ 位置や枠のサイズなどを調整するコード

    【ファイルの所在】

    ドメイン/wp-content/themes/travelify-child/(それぞれのPHPファイル)

<参考にさせていただいた賢人の記事>

もうこの通り、必要に応じて自分のサイト構造に当てはめて変更すればOK

設定ポイント

細かい手順は上述の参考記事をご覧ください。こちらではあくまでポイントのみ

1.「header-extensions.php」ファイルの場合

  • 80行目「<div class=”container clearfix”>」の前に「<?php dynamic_sidebar(‘header-right’); ?>」を挿入→保存

Word Press ヘッダーに新たに広告用ウィジェット追加

2.「functions.php」ファイルの場合

  • 指定されたコードを適当な場所に挿入
  • idの部分には自分で分かりやすい文字列に変更( ‘id’ => ‘header-center’ ,)→保存
  • Word Press管理画面左メニュー>外観>ウィジェットに「ad-header-widget」が追加されているか確認

Word Press ヘッダーに新たに広告用ウィジェット追加

Word Press ヘッダーに新たに広告用ウィジェット追加

3.「style.css」ファイルの場合

  • 指定されたCSSコードをコピペ
  • 右からの位置(right:)、トップからの位置(top:)、枠のサイズ(width:、height:)を自分のサイトに合わせて微調整→保存
    注意)「height(高さ)」を指定するとなぜかGoogle配信の広告が大きくはみ出すの高さ指定は省略

Word Press ヘッダーに新たに広告用ウィジェット追加

参考:Google Adsenseの「広告サイズに関するガイド

主なものは5種類

300×250「レクタングル(中)」
336×280「レクタングル(大)」
728×90「ビッグバナー」
300×600「ハーフページ」
320×100「モバイルバナー(大)」※モバイルのみ

今回は上記のなかでヘッダーに適切なサイズの広告が無かったので「320×50」で落ち着いてます

■枠から広告がはみ出す場合

広告コードの「data-ad-format=”auto”」の「auto」を「rectangle」に変更すると枠に収まる(ことがある)

<結果>

できた
Word Press ヘッダーに新たに広告用ウィジェット追加

今後の注意点

テーマの更新のたびに親テーマ分だけ手直す必要があります
面倒です
毎度ながら、何故このテーマは子テーマが反応しないのか疑問です。誰か教えてください

以上でございます
今回も勉強になりました。賢人の記事に感謝
ご清聴、ありがとうございました







About tabinomori 353 Articles

地球のふしぎ、世界の絶景をご紹介!旅に役立つお得な情報もお届け!
I’ll let you know a variety of mystery world and breathtaking views in the world ! I tell you the tips of traveling!