レスポンシブでないWordPressサイトのアドセンスをPCとスマホに分ける方法-1

アドセンスもスマホ対応しなければ・・・

2008年に作成して、そこそこ稼いでくれているアドセンスサイトがある。
25ページで毎月¥4000~5000。PVは1日2000~3000。
スマートフォンの本格的対応をしたい。
変更要件は次の通り。

【変更前】
・WordPressのテーマは独自作成(非レスポンシブ)
・プラグイン「Quick Adsense」でアドセンスを貼り付け
・プラグイン「WPtouch」でスマホ対応
・アドセンスはPCとスマホで同じものを表示(スマホで見るとはみ出してしまう)

【変更したい点】
・スマホではスマホにあったサイズのアドセンスを表示したい
・スマホでは記事の中ほどにもアドセンスを表示したい
・PCのアドセンスのサイズは変えたくない

Quick Adsense でのスマホ対応は?

最も簡単なのが「Quick Adsense」の設定でPC用コードとスマホ用コードに分けられることだが、そんな気の利いた機能はなーい。
(別のプラグインがあるかもしれないが、見つけられなかった)
「Quick Adsense」のコードを入れるボックスで場合分けできないかググってみたが、それも無理なようだ。

ということは「Quick Adsense」とはおさらばね。
独自テーマのテンプレに入れ込むしかないか。

single.php にアドセンスコードを挿入

<?php while ( have_posts() ) : the_post(); ?>

の前後にQuick Adsenseで指定していたアドセンスコードを入れてみる。

→PCではアドセンス表示OK
→スマホでは表示されない!

これはWPtouchのテンプレート内で使われている「wptouch_the_post()」が「the_post()」と同じく、投稿内容のみを取得する関数だからであろう。

ゆえに「wptouch_the_post()」の前後にもアドセンスコード(スマホ用)を入れてやればOKということになるのだが・・・

それだと文中のアドセンスはどうする?

文中のアドセンスに対応するために

これは結局、記事中の最適な場所に

<!--more-->

を挿入して、それをアドセンスに置き換える方法しかなさそうだ。

スマホ画面の1ビューにアドセンスは1つという規約だからね。
それは記事によっていちばんいい場所を指定してやるしかない。
記事数も今のところ少ないし。

WPtouchのfunctions.phpに

add_filter('the_content', '~');

などなどを追加するパターン。

待てよ、同じするなら

記事前後のアドセンスもadd_filterですればいいのでは?
functions.phpだけを修正すればいいだけになるではないか。
そうしよう。

ということで、スマホ対応としては
WPtouchのディフォルトテーマのfunctions.phpに、次のように追加した。

add_filter('the_content', 'AdsenseTag');
function AdsenseTag($content) { 
$adTags = <<< EOF
(スマホ用アドセンスコード 記事上用)
EOF;

$adTags2 = <<< EOF
(スマホ用アドセンスコード 記事中用)
EOF;

 $adTagsBottom = <<< EOF
<p style="border-bottom:1px dotted #CCC;"> </p>
(スマホ用アドセンスコード 記事下用)
EOF;

$content = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags2, $content);
$content = str_replace('
 
', '', $content);
$content = str_replace('
', '
', $content);

 return $adTags . $content . $adTagsBottom;
}

但し、WPtouchをアップデートすると消えてしまうので、都度追加する必要あり。

とりあえずできたけど・・・

こうするならもっといいやり方がありそうだ。
それはまたあらためて。

jQueryのCrossSlideで表示する写真を差し替える方法(WordPress)

CrossSlideの写真の指定

jQueryのCrossSlideで表示する写真はJavaScript内で直接指定できるし、その方が簡単である。

が、WordPressサイトの場合は、

・管理画面の「外観-ヘッダー」でヘッダー画像を複数枚アップロードする
 →「アップロードした画像」に追加される

・「ランダム」を選ぶ

とすると、「アップロードした画像」を対象としてCrossSlideしてくれるように設定できる。
(参考:WordPress実験中! » ヘッダー画像のスライドショー

このときの写真を差し替える方法は以下の通り。

※ユーザーに引き継ぐと、自分で差し替えてもらえる

「ヘッダー画像を削除」ボタンは要注意

「アップロードした画像」の削除したい写真を選択して「ヘッダー画像を削除」をクリックしても、その写真を削除したことにはならない。

そのときのヘッダー画像が、ヘッダー画像でなくなるだけのようだ。
「アップロードした画像」にも残ったまま。
これではCrossSlideの対象から外れてくれない。

メディアライブラリーで削除

従って、「メディア-ライブラリ」でその画像を完全に削除するしか方法がない。
こうするとさすがに「アップロードした画像」からも外れてくれる。

※同じ写真をヘッダー以外でも使っている場合は表示されなくなるので別途対応が必要

アップロードは「外観-ヘッダー」からが便利

新規にCrossSlideに加えたい写真は、「外観-ヘッダー」からアップロードする。
ここからアップロードするとメディアライブラリーで見たときに「 – ヘッダー画像」という注釈が付くのでわかりやすくなる。
(メディアライブラリーからアップロードすると付かない)

もちろん、「メディア-ライブラリ」からアップロードして、それを選択する方法でもよい。

最後に、「外観-ヘッダー」の「ランダム」を選択すると差し替え完了。

まとめ

CrossSlideの写真をWordPressのヘッダーのランダム指定しているときの差し替え方法

・削除する画像はメディアライブラリーで

・追加は「外観-ヘッダー」でアップロードすると便利

・「ランダム」を指定して完了

(WordPress3.9で確認)

さくらのレンタルサーバーのルートディレクトリーにWordPressを自動インストールできなかった

ディレクトリー名のボックスに何も入力せずに進もうとしたら、エラーが出て進めなかった。

独自ドメイン直下に導入したかったので、手動でWordPressファイルをアップロードしてインストールした。
(それが当サイト)