«

»

12月 29

wordpress プラグイン WPtouchで広告を挿入する

WPtouchですがiphoneなどのスマフォで最適な表示にしてくれる人気のプラグインです。
(20141229現在、wordpress4.1 WPtouch 3.6.3で検証済みです。)

結構使っている人は、多いと思います。やはりスマフォでアクセスが最近は、多くなっているしそれによるgoogleアドセンスなども有効に機能することが私のブログサーバでは、証明されています。

ブラウザtop10-horz

上のブラウザ(トップ10)は、当ブログのアクセスです。これを見るとスマフォからのアクセスは、ざっくりですが約10%となってます。

リピート率などはわかりませんが10人に一人はスマフォからのアクセスということになってます。

重要な顧客に合わせて最適な表示をさせるのは、やはり必要ですね。

またGOOGLEアドセンスの集計等詳しいところは恥ずかしいので見せられませんが下記のようにページビュー数は、デスクトップと携帯端末等は、ほぼ同じくらいになっています。

google_adsence

ということで必要性がとてもあると思いこちらのWPtouchプラグインをインストールしています。

アドセンス広告ですが、有料のPRO版であれば管理画面からの設定でアドセンス情報を入力でき、バージョンアップしても引き継がれるため問題ないのですが無料版では、設定画面のコア設定→カスタムコードから広告を入れることが出来るようです.

しかし、意図したところに広告が入らないため、どうせやるなら効果的な場所に広告を配置したいと考え、直接ファイルに追加しなければいけません。ただ、それなりの効果もありますので面倒くさがらずに行います。

以下備忘録として記述しておきます。

ファイルについては、以下の2つのファイルに追加します。

header-bottom.php(トップページ、個別の記事のページどちらにも反映)

single.php(個別の記事のみに反映される)

サイト上の位置については、ブログの構成等で最適な位置があるかもしれませんが当方は、この位置に表示しています。

WPtouch WPtouch2 WPtouch3

一番左は、トップページです。

真ん中の写真は、投稿記事のトップページです。

それぞれの表題の上に広告が来るようにしています。

そして一番右の写真は、投稿記事のトップページのサムネイル画像と本文の間に入るようにしています。

まず一つ目の記事の挿入です。

これについては、wp-content/plugins/wptouch/themes/bauhaus/default/header-bottom.phpです。

~~~~中略~~~~
        <?php if ( bauhaus_should_show_search() ) { ?>
        <div id="search-dropper">
                <div id="wptouch-search-inner">
                        <form method="get" id="searchform" action="<?php wptouch_bloginfo( 'search_url' ); ?>/">
                        </form>
                </div>
        </div>
        <?php } ?>

<?PHP /* <---------------------------  wptouch google adsence code ------------------------->       */  ?>
<div style="margin-top : 3px"></div>
<div align="center">
<script type="text/javascript"><!--
google_ad_client = "グーグルアドセンスコード";
/* スマホトップ画面用 */
google_ad_slot = "??????";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<?PHP /* <---------------------------  wptouch google adsence code ------------------------->       */  ?>


        <?php do_action( 'wptouch_advertising_top' ); ?>

        <?php if ( is_home() ) { ?>
                <?php if ( function_exists( 'foundation_featured_slider' ) ) { ?>
                        <?php foundation_featured_slider(); ?>
                <?php } ?>
        <?php } ?>
~~~~中略~~~~

続いて記事ごとのページにも挿入したいと思います。

wp-content/plugins/wptouch/themes/bauhaus/default/single.phpです。

~~~~中略~~~~
                                <div class="post-page-content">
                                        <?php if ( bauhaus_should_show_thumbnail() && wptouch_has_post_thumbnail() ) { ?>
                                                <div class="post-page-thumbnail">
                                                        <?php the_post_thumbnail('large', array( 'class' => 'post-thumbnail wp-post-image' ) ); ?>
                                                </div>

<?PHP /* <---------------------------  wptouch google adsence code ------------------------->       */  ?>
<div> <br> </div>
<div align="center">
<script type="text/javascript"><!--
google_ad_client = "グーグルアドセンスコード";
/* スマホトップ画面用 */
google_ad_slot = "??????";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<?PHP /* <---------------------------  wptouch google adsence code ------------------------->       */  ?>


                                        <?php } ?>
                                        <?php wptouch_the_content(); ?>
                                        <?php if ( bauhaus_should_show_taxonomy() ) { ?>
                                                <?php if ( wptouch_has_categories() || wptouch_has_tags() ) { ?>
~~~~中略~~~~

それぞれ内容について変更して上記の場所に挿入するとすぐに反映されているので自分のスマフォ等で確認しながら実施してください。またgoogleAdsenceも自分のものを使用してください。

注意しなくては、いけないのは、グーグルアドセンスは、一つの記事(画面)に3つまでしか広告を載せることが出来ません。

当方は、投稿記事の最下部にも広告をデフォルトで入れているのでスマフォで見る場合は、それが反映されているので記事の最上部、本文の上の2つ設定しています。合計で3つになります。

必ずスマフォ、PCでの画面表示を確認して4つ以上表示されていないかを確認してください。

これでPCサイトスマフォどちらにも対応できます。参考にしてみてください。

*****************************************************************************

応援をお願いします。

ブログランキング・にほんブログ村へ
にほんブログ村

スポンサーリンク