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)】をカスタマイズする。
広告だけでなく、定型文なども同じ方法で入れることが出来る。
コメント