WordPress

簡単コピペで「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」を取り出し、子テーマへ置きます。

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

CHECK
ワードプレス(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はエックスサーバーやMixhostとの相性も抜群です。

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

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

 

参考になれば幸いです。

関連記事一覧

人気上昇中の記事

1

タブレットはとても便利ですが、なかなかうまく使いこなせていない人が多いです。   そこで今回は、タブレットの使 ...

2

WordPress(ワードプレス)でブログをはじめたい・・・けど、何がどう必要なのかわからない。 ワードプレスは夢があり ...

3

タグ管理マネージャー2とは、WING AFFINGER5専用の「プラグイン」です。   はや私のなかでは「最高 ...

4

ブログを始める人の中には、「副業」目的の方も多いでしょう。   しかし、いざ始めてみたは良いものの・・。 &n ...

5

サイト運営しているとサイトのスピードなど・・気になりますよね。 サイト表示のスピードがあまりにも遅いと閲覧者はサイトを「 ...

6

WiMAXが終了するようですね。 WiMAXといえばポケットWiFiですが、これは商品名ではなく規格のひとつであることは ...

7

「ポケットWiFiってなんだろう…。」 「ポケットWiFiってどうやって使うの?」 「ポケットWiFIって便利なの?」 ...

-WordPress

Copyright© HAYAMIZ Blog , 2018 All Rights Reserved.