広告の表示方法

特に知りたいのは、その広告はスクリプトで動作しているのか定形を貼り付けているのかでしょうか？

スクリプトで動作しているものは、あらかたその親になる要素(広告エリア)のサイズとかも見て、表示していたり(Googleの広告かはそうです)、独自に要素を挿入しつつ表示したり(ifrmae型等)といろいろあります。

htmlの定形を貼り付けているだけなら、PCとスマホとそれぞれの内容を用意しておいて、使い分けるだけですけれども。今時は、たいていデータを広告のサーバー等に問い合わせてそれを表示するというやり方かとは思うんですが、結局それはどのように書かれているか、どのように出力するのかで必要な内容が異なる可能性もあります。

完全レスポンシブがoffなら、is_mobileで、調べて広告エリアを大小それぞれ分岐させるだけかと思います。
完全レスポンシブがonの場合は、is_mobileが動作しないかも知れないので、PHPだけではちょっと困難な場合もあるかも知れません。

わいひら　さん
Hidekichi さんいつもありがとございます。

上の書き込みだけでは、詳しい現在の状態がちょっとわからないので該当箇所のURLを貼り付けていただいていいでしょうか。

恥ずかしながら現在お見せ出来るような状態ではないのですみません。

＞完全レスポンシブがoffなら、is_mobileで、調べて広告エリアを大小それぞれ分岐させるだけかと思います。

完全レスポンシブはOFFの状態でした。
広告は忍者アドでスクリプトになっていると思います。

以下のサイトをみて何とか簡単にできないものかと（汗・・・
http://delaymania.com/201507/wordpress/wordpress-is-mobile/

ただ、functions.phpをいじる場合どの部分を書き換えたり追記したりすればよいのか分かりまん。

function is_mobile(){
  $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' // Other iPhone browser
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

そして、下記の記述をテンプレートファイル内に入れます。

<?php if (is_mobile()) :?>
スマホで表示したいものをここに入れる
<?php else: ?>
パソコンで表示したいものをここに入れる
<?php endif; ?>

とありますがこれをどのファィルにどこの箇所に入れたら良いものなのかも分かりまん。

もし上の書き方で出来るのであれば引き続きご指導お願いします。

> これをどのファィルにどこの箇所に入れたら良いものなのかも分かりまん。

どこにどのように入れたいのかがわからないと何とも言えないので、その辺りを詳しく書いて下さい。

phpでやるなら、

<?php if (is_mobile()) :?>
スマホで表示したいものをここに入れる
<?php else: ?>
パソコンで表示したいものをここに入れる
<?php endif; ?>

方法的にはこんな感じです。

jQueryでやるなら元のPHPはそのままにできるので、動作可能なものであればjQueryで挿入するほうが何かと便利かも。方法的には同じような感じです。jQueryはis_mobileにあたるものがバージョンアップで廃止されたので、自力で入れる必要があります。

参考: Simplicityを少し改造してみた part16 jQueryでモバイル判別 bodyにmobile classを挿入

Hidekichi さんありがとございます。
分かりずらい説明で申し訳ありまんでした。

広告を侵入したい箇所は2点あります。
１．トップページの一覧に表示される記事リストの真ん中に1点。
２．シングルページのＨ２の見出しの下に1点。
以上。

jQueryでもPHPでもどちらでも良いのですが簡単な方が良いです。（スミマセン）

よろしくお願いします。

■1について

サンプル: 子要素の真ん中に何かしら挿入 | codepen

サンプルでは、同一idを複数含めると上手く動作しなかったので、便宜上#listが.listに変更されています。
各.listのアイテム数を数えて、その間に何かしらを挿入すると言うものです。

PHPでは、予め子要素(.entry)の数がわかっていれば良いのですが、ページングされているためにそのページでいくつ子要素が表示されているかわかれば、それを計算してその真ん中にあたる時に挿入するという感じでしょうか。

jQueryの場合は、既に子要素は表示されているので、アイテム数はその時々に数えればよく、.list(本来は#list)の子要素数を調べて、単純に2で割るわけですが、1つしかアイテムが無いような場合などは半端が出るので、それらを切り上げ(Math.ceil)してます。

切り捨てする場合は、Math.floor、四捨五入はMath.roundです。
例えば、アイテム数を計算して、0.5が出た場合、

Math.ceil(0.5) = 1
Math.floor(0.5) = 0
Math.round(0.5) = 1

こんな感じになります。2で割っているので、たいてい今回は0.5単位で半端が出るかと思いますが(3なら1.5、7なら3.5など)、これらは結局、目的の場所の上に出すか下に出すかです。

例えば3つ子要素がある時、

1つ目のアイテム
2つ目のアイテム
//A
3つ目のアイテム

1つ目のアイテム
//B
2つ目のアイテム
3つ目のアイテム

こういう(A,B)2種類の場合が考えられます。3/2=1.5ですから、切り捨てれば1、上げれば2と理解してもらえると思います。ただし、切り捨ての場合は、子要素が1つしかない場合に問題が出ます。

挿入の箇所は、「子要素:nth-of-type(n)」としてその後に何かしらを入れています。このnの部分がどの位置かを示しています。例えば3であればnはサンプルでは2になります。切り捨てるなら1でしょう。
子要素が1つしかない場合に、2で割ると、0.5になり、切り上げなら、nは1でその後に何かしらが入りますが、切り捨てた場合は0、つまり0番めのというのはなんだよって事になって何も表示されないのです。

なので、広告のことですから、切り捨ての場合でも1つしか子要素がない場合は、ifなどを使って、必ずMath.ceilを利用するか、nth-of-typeではなく、「子要素の前に挿入」と言う処理をそれだけしないといけません。

if ( countChild < 2 ) {
  //1つしかアイテムがないときの処理
} else {
  //それ以外(サンプルでMath.ceilをMath.floorに変更の時)
}

切り上げの場合は必ず何かしらの子要素がある下に入るので、これらは考慮する必要はありません。

■2については、シングルページの場合は、bodyに.pageとクラスが付くので、目的のH2が記事内と言う事なら、

if ( $("body").hasClass("page") ) {
  $("#th-content").find("h2").first().after (
    //挿入するもの
  )
}

こんな感じのものを追加したらイケると思います。サンプルで言う所の、「//各.listに対しての処理」の前にでも書けばよいのではないでしょうか。

さて、1、2を通して挿入するスクリプトがどういったものであるかも問題点ですが、基本的には、

var ads = "広告コード";

として、指定しておき、上記2のスクリプトを流用すれば、

var ads = "広告コード";  //モバイル判別のものは最後の方に書いてます

if ( $("body").hasClass("page") ) {
  $("#th-content").find("h2").first().after(ads);
}

こんな感じでしょうか。何かしらスタイルする場合は、

$("#th-content").find("h2").first().after("<div class='test'>"+ads+"</div>");
などとして、ブロックで囲むこともできます。挿入する広告のコードなりスクリプトがどういうものかにもよりますが、たいていこんな感じで挿入はできると思います。

で、元々の希望では、モバイルの時とそれ以外で分けたいということでしたが、サンプルに、ウチのブログのモバイルチェック(Simplicityを少し改造してみた part16 jQueryでモバイル判別 bodyにmobile classを挿入)を入れたので、Chrome等で、デベロッパーツールを開き、fullページ表示すればモバイルの時に挿入アイテムの背景が赤から青になるのがわかるかと思います。

これは見た目だけcssで変えています。

で、判別方法としては、bodyタグにmobileがある場合はモバイル広告を表示すると言うことなので、

var ads;
if ( $("body").hasClass("mobile") ) {
  ads = "<div class='insert'>モバイル</div>";
} else {
  ads = "<div class='insert'>PC</div>";
}

このようにしておけば、adsと言う変数名は同じで、中身が条件によって変わるコードができます。それを各挿入する要素に対して入れるわけです。

これらが一応、サンプルの全容ですが、はたしてこれで上手く行くのかどうかは実際のスクリプトを入れて試してないのでわかりません。が、上手く行くんじゃなかろうかと。
忍者adのどれを想定されているのかがわからないので、確かな情報ではないんですが、何かしら位置を決めるタグを入れておいて、それをスクリプトで書き換えて広告を出しているようなものを見たので、そのスクリプトをbodyタグ下あたりに入れる場合は、wordpressの方で、入れておく方が良いのかもしれません。

jQueryでも入れられますが、jQueryは読み込むタイミングの問題があるので、広告表示用のスクリプトはSimplicityのlib/scripts.phpを参考に、またwp_enqueue_script()とかも調べて、正しくbody下に入れられるようにしておけば、広告位置のタグを入れるだけで自動的に動作するかと思います。

javascriptを挿入するタイプではない場合は、僕のサンプルだけで動作すると思いますけれども、その広告コードがどうなっているかが一番気になる所です。

Hidekichi さん大変詳しくありがとございます。
返信遅れて申し訳ありまでした。（win10にしてからネットに繋がらない＆すぐ切断される）
まだ不安定のままなんですが
single（投稿記事)の中に広告を入れるのは成功しました。

トップ記事の一覧に広告を入れるのはまだ成功出来ていませんが
とりあえずPCを安定させてからゆっくり挑戦しようと思います。
その時はまたまたご指導の程宜しくお願いします。

トップの記事の部分はわかりにくかったら、普通にウィジェットのインデックスミドルあたりにPC用とモバイル用のそれぞれの広告ウィジェットを入れてとかではダメですかね？

Hidekichiさんへ
返信が随分と時間を経っていたため書き込みさせて頂きました。
この件につきましてはもう少しお時間をくださいよろしくお願いします。

わいひらさん
Hidekichiさんいつもありがとございます。
この件につきまして大変時間がかかってしまい申し訳ございません。

今更なんですがやっと自分なりに分かった事が２つ３つあり解決できました。

現在2.1.7のバージョンを使わさせて頂いています。
トップページの一覧中に広告732pxを入れています。
スマホから見ると広告が縮小されず半分ちょい位に削られて表示されてしまいます。

忍者アドセンスだと反映されないけど他の広告だときちんと縮小されて表示されてました。

忍者アドセンスは強制的に縮小されないように表示されるみたいです。
（いじると規約違反になる可能性もあるかも）

もう一つはSimplicityにスマホとPCでの広告を分ける機能が標準装備されていたと言う事です。
恥ずかしながら知りませんでした。
気づいたのは
wordpressの管理画面からカスタマイズしていてトップ(home)を表示した時と個別記事を表示した時に
Simplicityの設定画面が変わること知りませんでした。
ここで細かくスマホとPC用の広告設定が出来たっていう事です。

まとめると
１．忍者アドセンスの728pxの広告は強制的に縮小出来ない。
２．管理画面のカスタマイズから細かく設定できる。

以上で無事解決できました。