Web筋トレも使っているサーバー!ロリポップを使ってみない?

【コピペOK】SANGOカスタマイズ◇インフィード広告をJavaScriptで表示◇第5回

Sponser Link

Google AdSenseのインフィード広告の貼り方について

4回解説してきました。

【コピペOK】図解◇実例◇インフィード広告の貼り方解説◇STINGER8◇第1回 【コピペOK】図解◇インフィード広告に罫線をCSSで追加する方法◇STINGER8◇第2回 【コピペOK】図解◇実例◇インフィード広告を下にも追加◇STINGER8◇第3回 【コピペOK】STINGER8カスタマイズ◇インフィード広告をJavaScriptで上から3番目に表示◇第4回

今回はインフィード広告の貼り方5回目です。

有料テーマSANGOでのインフィード広告の設置方法です。

前回STINGER8でやったことと同じことをSANGOで説明します。

今回の課題

SANGOのpost-grid.phpを修正して、

JavaScriptで記事一覧ページ(アーカイブ)の

◯番目にインフィード広告を表示させる!

Sponser Link

実例◇当サイト・Web筋トレのインフィード広告

当サイトは有料テーマのSANGOを使用しています。

SANGOは一覧ページを編集するにはpost-grid.phpです。

SANGOは記事の並べ方が『カードタイプ』と『横長タイプ』がありますが、

今回は『カードタイプ』で説明してきます。

理解できれば、『横長タイプ』にも応用可能だと思います。

他テーマだとcategory.phpやarchive.phpが

一覧ページではないかと思います。

他のテーマの方も参考にしてくださいね。

 

それでは、実際にインフィード広告の設置前と後を見てみましょう。

インフィード広告の設置前

インフィード広告を設置後

インフィード広告を3つ設置してみました。

11件の記事と3件のインフィード広告が一覧になっているわけです。

Sponser Link

インフィード広告の作り方の流れ

①Google AdSenseでインフィード広告を作る

②WordPressのプラグインAdvanced Adsでテーマ機能(ショートコード)にする。

③SANGOのpost-grid.phpに追加する。

第1回で①と②は説明しているので、

分からない方は第1回目の記事をご確認ください。

【コピペOK】図解◇実例◇インフィード広告の貼り方解説◇STINGER8◇第1回

今回は③のpost-grid.phpの編集方法を中心に解説していきます。

Sponser Link

①Google AdSenseインフィード広告のレシピ(カードタイプ)

③のpost-grid.phpの編集方法を中心に、、、とは言ったものの、

Google AdSenseでインフィード広告を作る時にレシピが必要になるので、

当サイトのレシピを載せておきます。

ほむほむ

記事タイトルの長さ、画像の周りの余白などはご自分のサイトに合わせて調整くださいね。

グローバルオプションへ

フォントはArialかHelvetica

パディングはすべて0px

イメージ

サイズ1.91:1の幅100%

パディング上5px

パディング右5px

パディング下20px

パディング左5px

見出し

長い

サイズ18px

パディング上10px

パディング右13px

パディング下10px

パディング左13px

説明は非表示

URL

フォント11pxのボールド

パディング上4px

パディング右13px

パディング下0px

パディング左13px

ボタンはそのまま

Sponser Link

③『SANGOのpost-grid.phpに追加する』手順

❶post-grid.phpのphpの編集

❷4番目にインフィード広告を挟み込む

❸7番目、11番目にインフィード広告を追加

❹表示記事件数を11件に変更する

ほむほむ

post-grid.phpは【parts】フォルダの中にありますよ!

親からコピーしてchildに【parts】フォルダを作って

その中に入れて階層を揃えてくださいね。

Sponser Link

❶post-grid.phpのphpの編集

上記はデフォルトのpost-grid.phpです。

前回同様、2箇所に編集を加えます。

①while文の前

②while文の中(ループの中)

ところが、SANGOのphpの書き方が、

ループの開始タグと終了タグが1つに書かれているので、

ループの中に上記を書くことができなくなっています。

なので、まずデフォルトのphpを編集していきます。

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

この部分を、、

//ここに①追加していきます。
<?php
while (have_posts()) :
the_post();
sng_normal_card();
?>
//ここに②追加していきます。
<?php endwhile; ?>

このように開始タグと終了タグを切り離して書き直します。

Sponser Link

❷4番目にインフィード広告を挟み込む

①while文の前

『①while文の前』が完成したソース画像です。

<?php
else : // 2)カードタイプ
?>

のすぐ後に下記を入れます。

<?php
$ads_infeed = '3'; //何番目に表示したいか
$ads_infeed_count = '1';
?>

4番目に入れたいのですが、『3』としてください。

入れたい場所と数字がずれるので、調整してくださいね。

②while文の中(ループの中)

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



//ここに追加する




<?php endwhile; ?>

『//ここに追加する』の部分に下記を追加します。

<?php
if($ads_infeed_count == $ads_infeed){
?>
<article class="ads__feed">
<!--インフィード広告 feed_3番目 ここから-->
<?php the_ad(XXXX); ?>
<!--インフィード広告 feed_3番目 ここまで-->
</article>
<?php
}
$ads_infeed_count++;
?>

これで完成です。

ここまでのpost-grid.php全文(コピペOK)

<?php
/**
* 記事一覧表示は以下の2種類(カスタマイザーから設定)
* 1)横長のタイプ
* 2) 通常のカードタイプ
*/
if (have_posts()){
if( is_sidelong() ): // 1)横長
?>

<div class="sidelong cf">
<?php
while (have_posts()) :
the_post();
sng_sidelong_card();
endwhile;
?>
</div>
<?php
else : // 2)カードタイプ
?>
<?php
$ads_infeed = '3'; //何番目に表示したいか
$ads_infeed_count = '1';
?>

<div class="cardtype cf">
<?php
while (have_posts()) :
the_post();
sng_normal_card();
?>

<?php
if($ads_infeed_count == $ads_infeed){
?>

<article class="cardtype__article">

<?php the_ad(XXXX); ?>


</article>


<?php
}
$ads_infeed_count++;
?>


<?php endwhile; ?>



</div>
<?php
endif;
sng_page_navi();
} else {
// 記事なし
get_template_part('content', 'not-found');
}
wp_reset_query();
?>
Sponser Link

❸7番目、11番目にインフィード広告を追加

3番目に設置するのの応用になります。

インフィード広告を複数掲載したい方のための解説になります。

『①while文の前』

<?php
$ads_infeed = '3'; //何番目に表示したいか
$ads_infeed_count = '1';
?>
<?php
$ads_infeed2 = '5'; //何番目に表示したいか
$ads_infeed_count2 = '1';
?>
<?php
$ads_infeed3 = '9'; //何番目に表示したいか
$ads_infeed_count3 = '1';
?>

4番目=3

7番目=5

11番目=9

と、ずれます(汗)ご調整くださいませ〜

②while文の中(ループの中)

<?php
if($ads_infeed_count == $ads_infeed){
?>

<article class="cardtype__article">

<?php the_ad(XXXX); ?>


</article>


<?php
}
$ads_infeed_count++;
?>

<?php
if($ads_infeed_count2 == $ads_infeed2){
?>

<article class="cardtype__article">

<?php the_ad(XXXX); ?>


</article>


<?php
}
$ads_infeed_count2++;
?>

<?php
if($ads_infeed_count3 == $ads_infeed3){
?>

<article class="cardtype__article">

<?php the_ad(XXXX); ?>


</article>


<?php
}
$ads_infeed_count3++;
?>

これで完成です。インフィード広告が3つ追加されました。

post-grid.php全文(コピペOK)

<?php
/**
* 記事一覧表示は以下の2種類(カスタマイザーから設定)
* 1)横長のタイプ
* 2) 通常のカードタイプ
*/
if (have_posts()){
if( is_sidelong() ): // 1)横長
?>

<div class="sidelong cf">
<?php
while (have_posts()) :
the_post();
sng_sidelong_card();
endwhile;
?>
</div>
<?php
else : // 2)カードタイプ
?>
<?php
$ads_infeed = '3'; //何番目に表示したいか
$ads_infeed_count = '1';
?>
<?php
$ads_infeed2 = '5'; //何番目に表示したいか
$ads_infeed_count2 = '1';
?>
<?php
$ads_infeed3 = '9'; //何番目に表示したいか
$ads_infeed_count3 = '1';
?>
<div class="cardtype cf">
<?php
while (have_posts()) :
the_post();
sng_normal_card();
?>

<?php
if($ads_infeed_count == $ads_infeed){
?>

<article class="cardtype__article">

<?php the_ad(XXXX); ?>


</article>


<?php
}
$ads_infeed_count++;
?>

<?php
if($ads_infeed_count2 == $ads_infeed2){
?>

<article class="cardtype__article">

<?php the_ad(XXXX); ?>


</article>


<?php
}
$ads_infeed_count2++;
?>

<?php
if($ads_infeed_count3 == $ads_infeed3){
?>

<article class="cardtype__article">

<?php the_ad(XXXX); ?>


</article>


<?php
}
$ads_infeed_count3++;
?>
<?php endwhile; ?>



</div>
<?php
endif;
sng_page_navi();
} else {
// 記事なし
get_template_part('content', 'not-found');
}
wp_reset_query();
?>

❹記事の表示件数を変更

3つ広告を追加してプレビューしてみると、

奇数になってしまって、かっこよくありませんね。

 

設定>表示設定 から『1ページに表示する最大投稿数』を

変更します。今回は11投稿にします。

これで記事11件、インフィード3件が表示されるようになったと思います。

プレビューしてみましょう!

ここまでSANGO(カードタイプ)のインフィード広告の貼り方を解説してきました。

綺麗に仕上がりましたでしょうか?

ほむほむ

サイドバーが長くなってしまったな・・と思っていたので、

記事一覧が少し縦長になってバランスがよくなりました。

表示記事数と広告数のバランスなどを考えながら、

ご自分のサイトをブラッシュアップしてくださいね!

 

もし『<?php the_ad(XXXX); ?>????』

と思った方は過去記事でAdvanced Adsをご確認くださいね。

 

ほむほむ

phpやcssを修正するときは大元ではなく。

childにしてくださいね。

そして、バックアップをとっていつでも戻せるようにしてください!

ここまでお付き合いありがとうございました!

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。