簡単コピペで「Simplicityテーマ」でヘッダー用のウィジェットを作り広告を張る方法

わたしが運営しているブログのワードプレス(Wardpress)のテーマは「Simplicity」です。

名前が示すようにとてもシンプルでかつSEO対策もされており、テーマといえばSimplicity!というくらい扱いやすいテーマです。

今回は、タイトルが示すように「Simplicity」テーマのヘッダー部分へ追加のウィジェットを作成し、広告を貼りたい場所へ張る方法をご紹介します。

Simplicityのヘッダー部分とは

ヘッダーとは、説明すると専門的になってしまうので省略しますが、ブログをパッと見て頂いたとき、タイトルなどがある部分を指します。

わたしのブログの場合、でかでかと画像で「HAYAMIZ Blog」と書いてありますね。

その部分をヘッダーとおもっていただいて構いません。

上図が示す部分がヘッダー部分ということですね。

ここの部分にウィジェットを追加し、広告を掲載してみようと思います。

おおまかな流れ

設定方法のサマリーを記載します。

・function.php、header.phpを子テーマにコピー

・function.php、header.php、スタイルシートへそれぞれコードを追記

・ad-header-widgetへコードを貼り付け

・完成!

では、詳細を説明します。

設定方法

<注意>
functions.phpやheader.phpの設定を誤るとコードの処理の際エラーが発生し、真っ白画面になってしまうこともあります。
事前にfunctions.php、header.php、スタイルシートはエラーになってしまった際の保険に必ずバックアップをしておいてください。
真っ白になってしまった際は、これらのバックアップしておいたファイルを上書きすることで設定前の状態に戻せます。

まずは親テーマから「functions.php」を取り出し、子テーマへ置きます。

テーマについての説明は下記記事で紹介しています。ご参考にどうぞ。

ワードプレス(Wordpress)の親テーマ子テーマってなに?についてお答えします
ワードプレスでブログを運営する際、自分の好きなテーマを選ぶのですが、「親テーマ」、「子テーマ」といったキーワードを見かけると思います。 今回は親...

これは「外観」「テーマの編集」とたどれば編集できるのですが、初回のみ、FTPクライアントソフトなどを用いて直接ファイルを置かなければなりません。

エックスサーバーでの利用例です。クライアントソフトの使い方こそは異なりますが、たどるべき場所と移動するべき場所は共通です。

スポンサーリンク

functions.phpをコピーする

まず下記を参考にパスをたどります。赤字で示した部分は運営者ごとで変わる部分です。私の場合はhayamizbg.netが入ります。

/ドメイン名/public_html/wp-content/themes/

たどりましたら、下図のようになります。

simplicity2とSimplicity2-childのフォルダーが同時見えていればOKです。

まずは、Simplicity2フォルダーをクリックしてます。すると、Simplicity2のフォルダー内が表示されるので、下図の赤枠部分が示す「functions.php」をコピーします。

一つ上の階層にもどり、Simplicyty2-childフォルダーへ行きます。

さきほどコピーしたfunctions.phpをsimplicity2-childのフォルダー内へ置きます。下図のようになればOKです。

これでファイルの準備が完了しました。

functions.phpの設定

ワードプレスのダッシュボードから「外観」「テーマの編集」とたどります。

編集するテーマが「Simplicity2-child」になっていることを必ず確認してください!

テーマの確認が終了したら、テンプレートの項目より、「テーマのための関数 functions.php」をクリックします。

そして、下図が示すように、コードがすでに書かれている場合、最終行に以下の記述を貼り付けます。下図はすでにウィジェットを追加するためのコードを追加した状態です。

//ヘッダーへウィジェットエリア追加
register_sidebar(array(
‘name’ => ‘ad-header-widget’ ,
‘id’ => ‘header-right’ ,
‘before_widget’ => ‘<div class=”ad-header-widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
));

コードの入力が完了したら、「ファイルの更新」をクリックし、設定を反映します。

header.phpの設定

次にテーマヘッダー(header.php)を設定します。ワードプレスの「外観」「テーマの編集」にheader.phpの項目がない場合、functions.phpのときと同様に子テーマへおいてください。

header.phpでは下記の2行を追加します。

<!– ヘッダーへウィジェット追加 –>
<?php dynamic_sidebar(‘header-right’); ?>

一行目は特に動作するコードではないですが、コードの説明をしているためなので、入れておくと後でわかりやすいです。

そして、header.phpはコード書く場所が決まっています。今回の場合は下記が示すようにコードの間へ置くようにしてください。

<div class=”alignright top-sns-follows”>
<?php if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
<?php get_template_part(‘sns-pages’); //SNSフォローボタンの呼び出し?>
<?php endif; ?>
</div>
<!– ヘッダーへウィジェット追加 –>
<?php dynamic_sidebar(‘header-right’); ?>
</div><!– /#h-top –>
</div><!– /#header-in –>
</div><!– /#header –>
</header>

図で示すとこのようになります。

設定ができましたら、「ファイルを更新」をクリックして、設定を反映します。

スタイルシートの設定

設定も大詰めです。最後にスタイルシートに下記のコードを追記します。

最終行にコードを書き込むのがわかりやすいでしょう。

/* header 広告—————————- */
.ad-header-widget {
position: absolute;
left: 26px;
width: 468px;
height: 60px;
top: 15px;
}

上記のコードのうち、「left:」と「top:」でウィジェットで設定した広告などの表示の調整を行います。今回は左側に広告を掲載する場合なので、上のコードの例で説明すると、

left: 左から26ピクセル目に画像表示をさせる

top: 上から15ピクセル目に画像を表示させる

としています。

これを、右側でやりたい場合は、leftをrightとすることで、右側から○○ピクセルといった設定も可能です。

右から30ピクセル、上から40ピクセルを起点に広告を配置したい場合のコードは

/* header 広告—————————- */
.ad-header-widget {
position: absolute;
right: 30px;
width: 468px;
height: 60px;
top: 40px;
}

となります。

ウィジェットで広告コードの貼り付け

張りたい広告のコードをASPなどからコピーしてください。今回は468×60の広告を例にしています。

ワードプレスのダッシュボードから「外観」「ウィジェット」とたどるとおなじみの画面に「ad-header-widget」が追加されているはずですので、そこへブログの環境に合わせたウィジェットを追加してください。

わたしの場合、モバイルサイトからのアクセスの際は表示させたくなかったので、「[S]パソコン用テキストウィジェット」を使用しています。

広告コードのタグを<div align=”left”></div>で挟んでください。

これは左側へよせるコードですが、右側へ寄せたい場合はleftをrightに書き換えればOKです。

これでタイトルヘッダーに広告を表示させる設定は完了です。

下図のように広告を掲載することができました。

おわりに

タイトルヘッダーに広告を表示させる設定方法をまとめました。

今回は、広告としていますが、工夫しだいで、画像掲載したりすることも可能ですので、いろいろ試してみるのも楽しいですね。

Simpicitiyは本当に使いやすく、また、エンジニア心をくすぐるテーマでもあります。

Simplicityはエックスサーバーとの相性も抜群です。

本格運用を目指している方はぜひエックスサーバーへの検討をしてみてください。

試用期間が10日あり無料で使用できます。10日間は仮契約期間でもあるので、この間に検証して、今後契約するか検討してみるのもよいでしょう。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

ちなみに本ブログはエックスサーバーを使用しています。とても軽快で大満足です!

ご参考になれば幸いです。

千葉県在住のはやと申します。
職業がら執筆業務を主としており、文章の作成には興味がありました。私は色々なかたから、技術的なことを教わり今に至ります。そういった感謝の意味もこめて本ブログでは「痒いところに手が届く」をモットーに、何か皆さまの手助けになればと思い、日々精進しております。

記事は参考になりましたか。
クリック頂けると幸いです。

スポンサーリンク
トップへ戻る