三十路!

1_2_1

Digipress テーマ(WordPress)『MAGJAM』で、記事中に複数のアドセンスを導入する方法。(PC とスマートフォンはタグ切り替え。)

Digipress テーマ(WordPress)『MAGJAM』で、記事中に複数のアドセンスを導入する方法。(PC とスマートフォンはタグ切り替え。)

準備

疲れた。忘れないうちにφ(..)メモメモ まず、function.php に直接書き込むと Update の度に消去されてるので専用のプラグイン導入。(DigiPress のテーマはアップデート本当に多いんで。)

Code Snippets
Developer: Shea Bunge
Price: Free
  • Code Snippets Screenshot
  • Code Snippets Screenshot
  • Code Snippets Screenshot
  • Code Snippets Screenshot

これは、function.php を直接いじらなくていいようにしてくれる便利プラグイン。

広告

モアタグ

まずは、モアタグにアドセンス反応するようにする。もちろん、PC とスマートフォンはタグを切り替えるよ。PCにはでっかい広告(サイズ指定)、スマホにはちっさい広告(レスポンシブ)な!

/* moreタグ直後にアドセンスを表示 */
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
 if (is_mobile_dp()) {
 $adTags = 
<<<EOF
<div class="more_pr_area">
<p style="text-align: center;"><strong>広告</strong></p>
スマートフォン用のアドセンスコード
</div>
EOF;
 } else {
 $adTags = 
<<< EOF
<div class="more_pr_area">
<p style="text-align: center;"><strong>広告</strong></p>
PC 用のアドセンスコード
</div>
EOF;
 }
 $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
 $contentData = str_replace('<p></p>', '', $contentData);
 $contentData = str_replace('<p><br />', '<p>', $contentData); 
 return $contentData;
}

こんな感じ。is_mobile_dp() がキモ。この関数で PC or スマートフォンを判断してるわ。DigiPress のテーマなら多分他のテーマも大丈夫と思うけど。もしきちんと動かなかったらすまんで! CSS も一応書くけど、『MAGJAM』のおいさんのテーマの環境で調整してるから! そこのところよろしゅ。

.more_pr_area {
 margin: 20px auto;
 padding: 0 0 10px;
 background-color: #F5F8FA;
 position: relative;
 text-align: center;
 overflow: hidden;
}
.more_pr_area p {
 margin: 0 0 -30px !important;
}

こんな感じかな。これで記事中に1個はアドセンス導入できるようになったね! 次にショートコードを作ってアドセンスを任意の場所につけるよにする。これはショートコードを任意で埋め込む形式。めんどくさいけど、自動だとね? 広告だらけになるページもあるだろうし。そもそも、人気のないページに広告たくさんつけても(ry

っていう話ですわ。

広告




ショートコード

function showads($contentData)
{
$content = do_shortcode( $contentData);
 if (is_mobile_dp()) {
 $content = 
<<<EOF
<div class="showads">
<p style="text-align: center;"><strong>広告</strong></p>
<div class="showads2">
スマートフォン用のアドセンスコード
</div></div>
EOF;
 } else {
 $content = 
<<< EOF
<div class="showads">
<p style="text-align: center;"><strong>広告</strong></p>
<div class="showads2">
PC 用のアドセンスコード
</div></div>
EOF;
 }
 return $content;
}
add_shortcode('showads', 'showads');

こんな感じ。CSSね。

/*ショートコードshowadsのCSS*/
.showads {
 margin: 20px auto;
 padding: 0 0 10px;
 background-color: #F5F8FA;
 position: relative;
 text-align: center;
 overflow: hidden;
}
.showads p {
 padding: 0px;
}
.showads2 {
 margin-top:-60px;
}

あとは、アドセンスを表示したい所に

【showads】

を埋め込むだけ。【】は [] に書き換えてなうまく記事に貼れなかった。広告が表示されるwww あとは

AddQuicktag
Developer: various
Price: Free

にショートコード登録しとけばちょっとは楽になる。辞書登録するのもありかもね!

最後に

色々イジイジしてたらかなり CSS のコードが増えてたわ。

コメント歓迎やで!(匿名可)

*

Return Top