VA Social Buzzの前にアドセンス広告を挿入する方法

2017年11月25日2018年1月25日

バイラルメディア風のSNSボタンが設置できるWordPressのプラグイン「VA Social Buzz」を使用しているサイトをよく見かけます。

設置も簡単で見栄えもいいので、ソーシャルでの拡散を狙うようなサイトであれば、ぜひ入れておきたいプラグインです。

簡単に設置できるということで、WordPress初心者の方に非常に優しい作りになっているのですが、あることをしようとするとちょっと面倒なことが起こってしまうのです。

そのあることというのは…

広告が上手く挿入できない…

記事の最後部と「VA Social Buzz」の間にアドセンスなどの広告を挿入しようとすると上手くいかないという問題です。

単純に、記事の最後に広告表示用のスクリプトなどを書いてやれば問題は解決するのですが、もし、これまで書いた記事すべてに一括で広告を挿入するとなると、どうしてもテーマファイルを編集してやらないといけません。

広告を挿入してみる

まず思いついた方法がｊQuery（javascript）で広告をねじ込んでやる方法です。

はじめに結論を言いますと、ｊQueryでは上手く広告が挿入できませんでした。といいますか、広告が表示されないという状況になってしまったのです。

これは何が原因だったかというと、分かりやすく言うと、広告を読み込むタイミングがどうもマズかったようで、エラーが表示されてました。

キャプチャ画像取るの忘れてたので、文章のみの説明になるのですが、どこをどう修正してもｊQueryで挿入する方法は上手くいきませんでした。

フィルターフックで広告をねじ込んで見る

次に行った方法がフィルターフック（add_filter）を使って、本文の最後に広告を挿入するという方法です。このフィルターフックの基本的な使い方については、こちらの記事がビビるくらい分かりやすく書いていました。

「WordPressのフィルターフックで投稿を全て夢オチにする方法と、真面目な使い方」

で、こんな感じのソースを書いてみたわけです。

function vab_before_ins($the_content){
$l_ad = <<<EOF
//ここに広告のタグ
EOF
;

$r_ad = <<<EOF
//ここに広告のタグ
EOF
;

if(wp_is_mobile()){
$ad = <<<EOF
{$l_ad}

EOF
;
}elseif(!wp_is_mobile()){
$ad = <<<EOF
{$l_ad}
{$r_ad}

EOF
;
}

if(is_single()){
$the_content = $the_content.$ad;
}
return $the_content;
}
add_filter('the_content','vab_before_ins');

function vab_before_ins($the_content){

$l_ad = <<<EOF

//ここに広告のタグ

EOF

;

$r_ad = <<<EOF

//ここに広告のタグ

EOF

;

if(wp_is_mobile()){

$ad = <<<EOF

{$l_ad}

EOF

;

}elseif(!wp_is_mobile()){

$ad = <<<EOF

{$l_ad}

{$r_ad}

EOF

;

}

if(is_single()){

$the_content = $the_content.$ad;

}

return $the_content;

}

add_filter('the_content','vab_before_ins');

これをfunctions.phpに追記して、いざ表示させてみると…

ここじゃない…

じゃあ、やっぱりｊQueryでねじ込むしかないかと思い、「VA Social Buzz」のファイルを確認してみると…

va-social-buzz/incs/class-module-core.phpの79行目～81行目

if ( ! is_admin() ) {
add_action( 'wp_enqueue_scripts', array( &$this, 'wp_enqueue_scripts' ), 15 );
add_filter( 'the_content', array( &$this, 'the_content' ) );
}

if ( ! is_admin() ) {

add_action( 'wp_enqueue_scripts', array( &$this, 'wp_enqueue_scripts' ), 15 );

add_filter( 'the_content', array( &$this, 'the_content' ) );

}

ん？add_filterのpriorityが設定されてない。ということは、初期値の10ってことは…

というわけで、先程書いたソースを以下のように変更してみました。

function vab_before_ins($the_content){
$l_ad = <<<EOF
//ここに広告のタグ
EOF
;

$r_ad = <<<EOF
//ここに広告のタグ
EOF
;

if(wp_is_mobile()){
$ad = <<<EOF
{$l_ad}

EOF
;
}elseif(!wp_is_mobile()){
$ad = <<<EOF
{$l_ad}
{$r_ad}

EOF
;
}

if(is_single()){
$the_content = $the_content.$ad;
}
return $the_content;
}
add_filter('the_content','vab_before_ins',1);

function vab_before_ins($the_content){

$l_ad = <<<EOF

//ここに広告のタグ

EOF

;

$r_ad = <<<EOF

//ここに広告のタグ

EOF

;

if(wp_is_mobile()){

$ad = <<<EOF

{$l_ad}

EOF

;

}elseif(!wp_is_mobile()){

$ad = <<<EOF

{$l_ad}

{$r_ad}

EOF

;

}

if(is_single()){

$the_content = $the_content.$ad;

}

return $the_content;

}

add_filter('the_content','vab_before_ins',1);

何が変わったのかというと、最終行の

add_filter('the_content','vab_before_ins');

//priorityを1に設定しました
add_filter('the_content','vab_before_ins',1);

add_filter('the_content','vab_before_ins');

//priorityを1に設定しました

add_filter('the_content','vab_before_ins',1);

この数値が小さいほど優先的に処理がされるようになるので、「VA Social Buzz」の処理が始まる前に先に広告を挿入しているといった形になるわけです。

結果は…

狙った位置に広告が表示されました。先ほどのpriorityの設定ですが、おそらく10より小さい数字であれば「VA Social Buzz」の前に広告が表示されるようになると思います。（検証してませんけど…）

というわけで、「VA Social Buzz」の前に広告やコンテンツなどをねじ込みたい場合は以上のやり方をベースにしてもらえればいいかと思います。

WordPress

賢威にBootstrapを導入する方法

WordPressでChart.jsを使うときの注意点と対処法について

コメント一覧

しんにゃより:
2018年1月24日 10:51 AM
分かりやすくてとても参考になりました！ありがとうございます！
返信