Sango1.4.1以降でインフィード広告を複数設置する方法をまとめるよ！

SANGOといえば、WordPressの有料テーマの中でもストークやAFFINGERと共に利用者の多い人気テーマだと思う。今日はその利用者の方に向けたかなり限定的な話。

インフィード広告を設置する方法を書きます。SANGOは結構アップデートの度に内部コードを書き換えるので、ネット上に載っている情報が古くなっていて導入に困っている人もいるのでは？と。

まぁ、この僕の情報も古くなりそうな気もしないでもないですが、とりあえず見た限りでは現在の内部コードが結構シンプルになっているのでこれが完成形だと信じて、そこにインフィード広告を載せる方法を教えます。

シンプルに1つだけ表示させたり、1つの広告を複数ヶ所で表示させたり、2種類の広告コードにわけたり…色々と用途があると思いますが、面倒くさいのでコピペで出来るようにしました。では参りましょう。

SANGO良いよ！WordPressのテーマを買い漁った結果

SANGOもそうですが、最近はDIVERやJINなど次々と良さそうなテーマが出てくるので、海外のthemeforestで100個近いテーマを購入しても日本で使うのはなんか違う…と思っていた僕としては嬉しい限り。(1つ約40ドル×100＝4000ドル…。ひゃー！)

やっぱり日本製のテーマは日本人が使いやすいようになっているし、海外のテーマに比べて“軽さ”重視で作ってくれているのが良い。海外のテーマってどっちかっていうと重くてもゴージャスなのが好まれるみたいで。ブログ大国日本はシンプルで読みやすさ重視(知ってる？世界中にある37%が日本語ブログだったのだよ！)

…という事で海外に比べてちょっと値段が高いけど、日本の有料テーマを購入するようになった。

が、やはり浮気者である事は変わらず、日本のテーマでも乗り換えまくっていて、読者さんからアカウント乗っ取られたのか！？と心配される程、WordPressのテーママニアであり、WordPressのテーマを弄るのが好きなのである。

海外サーバーで海外テーマ使用の激重・黒歴史時代→日本サーバー最強・アルバトロス→ハミングバード→ストーク→スワロー…と、浮浪した結果、僕が現在使って気に入っているのはSANGOという有料テーマです。

SANGOを使っている理由はただ1つ

SANGO

SANGO｜心地良さを追求したWordPressテーマ

WordPressテーマSANGOのデモページです。…

なぜなら、軽いから。もう一度言おう。軽いから！SEOはちょっと弱めでストーク使っている時に比べてげっそりとアクセス減った（All in One SEO Packを辞めたのもデカい）けど、それでもこのテーマは良い。

(※やっぱりAll in One SEO Packが使いたくなってSANGO辞めました。最初のテーマはやっぱりストークを激推しする)

比較サイトの検証では結局スピードは同等と評価されてるし、実際ツール使って測定すると同じぐらいの軽さって評価出てる。

が！実際iPhoneとかiPadとかAndroidのスマホ、タブレット全部総動員してテストしてみたけど、体感スピードがやっぱりSANGOはチョッ速！なのだ。ストークもいいし他のテーマもモチロン有料なだけあってどれ買っても正解だと思うけど、速さ大好きな僕にはSANGOが正義！

サクサク表示される。だから数ある運営に関わっているサイトをSANGOに乗り換え始めているのだけれど、面倒くさいのは、そう。広告の貼り直しだ。

新しいWordPressテーマを導入すると必ず通る道

広告の貼り付けに関してはプラグインを使っていた時もあったけど重くなるから手動でやるようになった。その中で一番面倒くさいのはこいつ。インフィード広告。

ウィジェットに載せるタイプはまだいい。大体の有料テーマには標準で簡単に広告を貼れるようにしてくれている。だからウィジェットさえ保存しておけばテーマを乗り換えたとしても簡単に再設置出来る。

だけど、インフィード広告は、その広告自体がまだ新しいのもあって各テーマは標準でというよりも、自己責任でカスタマイズしてね？っていう方針を取っている所も多い。

そしてSANGOもそのスタイルを取っているわけです。だからある程度自分で調べねばならない。

ただ、このSANGOというWordPressのテーマはアフィリエイト募集をしていないにも関わらず売れていまして、その実力は本物。結構熱心なサルワカ読者でSANGOフォロワーなブログ運営者さんがいらっしゃるのです。

SANGO利用者のあなたならマサオカさんをご存知…

マサオカブログ

マサオカブログ

FOLLOW ME!!…

その代表がマサオカさん。恐らくSANGOのカスタマイズに置いてマサオカさんという方のブログにお世話になっている人がほとんどでしょう？SANGOの子テーマ作って販売しちゃっているぐらいだから、SANGO愛が凄いよね！

いやー助かる。本当にこういう人柱に支えられて成り立っているのだなぁ。うん。ありがとうございます。

さて、このマサオカさんですが当然ながらインフィード広告を載せる方法についても解説をしてくれています！僕も購入当初はマッハで参考にさせてもらいましたよ。つくづくありがとうございます。

…ですが、SANGOのアップデート1.4によってインフィード広告を載せるページが大幅にコード書き換えられちゃったんですよね。簡略化の為に。もちろん、それに対して完成コードをコピペしてね！ってマサオカさんは対応をしてくれているんですが、それは以前のコードでしてSANGOの簡略化が反映されていない。

それでも全く問題ないんですが、どうせならコードはシンプルな方がいいと思う僕は色々なサイトをネットサーフィンして周りまして、現在のSANGOのコードに広告を載せる方法を3つ手に入れました。

それを公開しますので良ければお使いくださいませ。

SANGOにインフィード広告を載せるコード

僕のクセでついつい話が長くなってしまうので、解説はさておき、なげーよ！と言われる(すでに思われている)前にコード貼っておきます。post-grid.phpに貼り付ければそのまま使えます。

1つの広告(3番目に表示)

<?php if (have_posts()){if( is_sidelong() ): ?><div class="sidelong cf"><?php while (have_posts()) : the_post();sng_sidelong_card();endwhile;?></div><?php else : ?><div class="cardtype cf"><?php$ads_infeed = '3';$ads_infeed_count = '1';?><?php while (have_posts()) : the_post(); ?><?php if($ads_infeed_count == $ads_infeed){?><article class="cardtype__article"><!-- 広告コードをここに貼る -- ></article><?php}$ads_infeed_count++;?><?php sng_normal_card(); ?><?php endwhile; ?></div><?php endif;sng_page_navi();} else {get_template_part('content', 'not-found');}wp_reset_query();?>

1つの広告コードで複数の広告表示(3,9番目に表示)

<?php if (have_posts()){if( is_sidelong() ): ?><div class="sidelong cf"><?php while (have_posts()) : the_post();sng_sidelong_card();endwhile;?></div><?php else : ?><div class="cardtype cf"><?php$ads_infeed = array(3,9);$ads_infeed_count = '1';?><?php while (have_posts()) : the_post(); ?><?php$ads_disp = in_array($ads_infeed_count, $ads_infeed);if($ads_disp){?><article class="cardtype__article"><!-- 広告コードをここに貼る -- ></article><?php}$ads_infeed_count++;?><?php sng_normal_card(); ?><?php endwhile; ?></div><?php endif;sng_page_navi();} else {get_template_part('content', 'not-found');}wp_reset_query();?>

2つの広告コードで2つの広告表示(3,9番目に表示)

<?php if (have_posts()){if( is_sidelong() ): ?><div class="sidelong cf"><?php while (have_posts()) : the_post();sng_sidelong_card();endwhile;?></div><?php else : ?><div class="cardtype cf"><?php while (have_posts()) : the_post(); $count++; ?><?php if($count == 3): ?><article class="cardtype__article"><!-- 広告コード1をここに貼る -- ></article><?php elseif($count == 9): ?><article class="cardtype__article"><!-- 広告コード2をここに貼る -- ></article><?php endif; ?><?php sng_normal_card(); ?><?php endwhile; ?></div><?php endif;sng_page_navi();} else {get_template_part('content', 'not-found');}wp_reset_query();?>

新旧コード比較解説

では、応用が効くようにちょこっとだけ解説していきましょう。

元々、SANGOの1.3.3まではこんなコードでした。

1.3以前のpost-grid.php

<?php if (have_posts()){ //記事あり //(1)横長の場合if( (!wp_is_mobile() && get_option('sidelong_layout') && is_home() && is_front_page() )|| (wp_is_mobile() && get_option('mb_sidelong_layout') && is_home() )|| (!wp_is_mobile() && get_option('archive_sidelong_layout') && is_archive() )|| (wp_is_mobile() && get_option('mb_archive_sidelong_layout') && is_archive() ) ): ?><div class="sidelong cf"><?php while (have_posts()) : the_post(); ?><article class="sidelong__article"><a class="sidelong__link" href="<?php the_permalink() ?>"><p class="sidelong__img"><img src="<?php echo featured_image_src('thumb-160'); ?>" alt="<?php the_title(); ?>"></p><div class="sidelong__article-info"><?php if(!get_option('remove_pubdate')):?><time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time><?php endif; ?><h2><?php the_title(); ?></h2></div></a><?php newmark();//newマーク ?></article><?php endwhile; ?></div><?php sng_page_navi(); ?>  <?php else : //(2)カードタイプの場合?><div class="cardtype cf"><?php while (have_posts()) : the_post(); ?><article class="cardtype__article"><a class="cardtype__link" href="<?php the_permalink() ?>"><p class="cardtype__img"><img src="<?php echo featured_image_src('thumb-520'); ?>" alt="<?php the_title(); ?>"></p><div class="cardtype__article-info"><?php if(!get_option('remove_pubdate')):?><time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time><?php endif; ?><h2><?php the_title(); ?></h2></div></a><?php if(!is_archive()) output_catogry_link();//カテゴリーを出力newmark();//newマーク?></article><?php endwhile; ?></div><?php sng_page_navi(); ?><?php endif; //ENDカードタイプ} else {//記事なしget_template_part('content', 'not-found');}wp_reset_query();?>

まぁ、シンプルですがトップページに吐き出すコードが全部書いてありますね。なのでインフィード広告を挿入するのも比較的簡単だったのです。マサオカさんのブログにも書いてありますが、ストークが採用している方法をまるごと応用してSANGOに適応が出来ました。それが1.4のコードになるとガラリと姿を変えます。

1.4以降のpost-grid.php

<?php if (have_posts()){ //(1)横長の場合if( is_sidelong() ): ?><div class="sidelong cf"><?php while (have_posts()) : the_post();sng_sidelong_card();endwhile;?></div><?php else : //(2)カードタイプの場合?><div class="cardtype cf"><?php while (have_posts()) : the_post();sng_normal_card();endwhile;?></div><?php endif;sng_page_navi();} else {//記事なしget_template_part('content', 'not-found');}wp_reset_query();?>

み、短っ！！だいぶスマートになりました。その理由は吐き出すコードを別のファイルひとまとめにして色々と使いまわしが出来るようにしたためです。

横長のタイプ

sng_sidelong_card();

通常のカードタイプ

sng_normal_card();

これね。吐き出す部分はここにあるよーと。指定する事にした。すると困った。正直な所、インフィード広告はコイツらが持っている要素に広告コードを挟んでいるからデザインに馴染むのであって、その文字列が消えてしまっては、このコードを見てもわからない人はちんぷんかんぷん。

一緒にまとまっているコード

<?php while (have_posts()) : the_post();sng_normal_card();endwhile;

しかも、phpの呼び出しをひと纏めにしている為、なんとなーくルールがわからない人が切り貼りして適応出来るもんじゃなくなっている。↑これはまぁ、わかりやすく書けば、

独立したコード

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

こういう事です。それで1列目と2列目の間に広告コードを差し込まねばならない。でも1.4以降のコードは呼び出しが一緒になっている為、普通に間に広告コードを差し込んでもエラーが吐き出されてしまう。

…ま、でもこんな事理解しなくてもいいんですよ。とりあえず自分で手直しする場合は<?php :?>足そうね！って事です。それと<article class="cardtype__article">で広告を囲む。あと広告の出現場所変えたい時は3,9の数字を適時変えてあげればいいだけです。

先程紹介した3番目の「2つの広告コードで2つの広告表示(3,9番目に表示)」ってのは広告の効果のデータを取りたい時とか、1つのサイトに二人以上の広告を載せたい時に使います。そうでない場合は、1番目と2番目で事足りると思います。同じ広告コードでも吐き出される広告は別の広告が出ますし。

まとめ

えー、以上です。すごーくニッチな話題なので、必要としている人がいるかどうかわかりませんが、とりあえず僕の周りでブログを始めた人はだいぶ手こずっているみたいなので、ここに書き残して置こうと。

一応、通常カードの方しか載せてないけど大丈夫でしょう。やる事は一緒ですし。

それと少しでもデータを軽くするためにコメントアウトは削除してます。こういうコツコツ小さい事の積み重ねがブログの高速化に繋がるはずなのです！！

では最後にわかる人にはわかる魔法の呪文を唱えて今回の記事を終わりにしようと思います。

ではでは、SANGOを使っているあなたにだけわかってもらえる記事でした。参考になったなら幸いです。