記事タイトルの上に広告を表示する・wordpressテーマSTINGER3

 wordpressテーマSTINGER3には、広告表示用のウィジェットが付いている。

 でも、広告の位置は決められた場所になってしまう。

 ウィジェットを利用しないでSTINGER3の好きな位置に広告を配置しよう。

 今回は記事の上に広告を表示してみる。




バックアップ用のツールを用意しよう

 phpをいじるので、バックアップは必ず取ろう。

 まず必要なのは、文字コード(UTF-8BDMなし)と改行コード(LF)を指定して保存できるテキストエディタ。

 Windows付属のメモ帳などはだめ!

 いろいろとフリーソフトが出ているので使い勝手の良いものを選ぼう。

wordpressテーマSTINGER3の記事タイトルの上に広告を表示する

1、【外観】⇒【テーマの編集】⇒【単一記事の投稿 (single.php)】をクリック。

 他のテーマの場合もほぼ同じ。

 単一記事の投稿 (single.php)をカスタマイズする。

2、マウスを右クリックして、すべて選択。

3、コピー。

4、テキストエディタに貼り付け、元のphpを保存しておく。

5、<?php get_header(); ?>の下に以下の記述を貼り付ける。

<!--▼記事ページのみ表示-->
<div class="ad10">
<?php if(is_single()): ?>
<!--▼スマートフォンのみ表示-->
<?php if (wp_is_mobile()) :?>
ここに広告コード
<?php endif; ?>
<!--▲スマートフォンのみ表示-->
<!--▼PCのみ表示-->
<?php if (!wp_is_mobile()) :?>
ここに広告コード
<?php endif; ?><!--▲PCのみ表示-->
<?php endif; ?>
</div>
<!--▲記事ページのみ表示-->

6、【ファイルを更新】をクリック。

記述(コード)の説明

<div class="ad10"></div>

 広告コードの配置をスタイルシートで決めるための記述。

 ad10は英数字なら何でもOK。

 わかりやすいものを設定しよう。

<?php if(is_single()): ?><?php endif; ?>

 記事のページだけに表示したい場合の条件分岐の記述。

<?php if (wp_is_mobile()) :?><?php endif; ?>

 モバイルだけに表示したい場合の条件分岐の記述。

<?php if (!wp_is_mobile()) :?><?php endif; ?>

 モバイルに表示したくない場合の記述。

<!-- -->

 コメント、ブログには表示されない。

スタイルシートの設定

1、【外観】⇒【テーマの編集】⇒【スタイルシート (style.css)】または【smart.css】 をクリック。

 wordpressテーマSTINGER3の場合、PC用のスタイルシートは【スタイルシート (style.css)】。

 モバイル用は【smart.css】。

 別々に設定する。

2、マウスを右クリックして、すべて選択。

3、コピー。

4、テキストエディタに貼り付け、元のphpを保存しておく。

5、スタイルシートの最後に.ad10 {}でスタイルを指定する。

例)
/*---------------------------------
広告
--------------------------------*/
 .ad10{ margin: 10px 20px 30px 40px;}

 この記述だと広告を表示したブロックの[上][右][下][左]に隙間が出来る。

 上10px、右20px、下30px、左40px、といった感じ。

6、【ファイルを更新】をクリック。

他のテーマでも基本は同じ

 今回はSTINGER3で説明したけど、他のテーマでも記事タイトルの下に広告などを表示する方法はほぼ同じだ。

 【単一記事の投稿 (single.php)】をカスタマイズする。

 広告だけでなく、定型文なども同じ方法で入れることが出来る。