前回はStinger7のトップページにnendのネイティブアドを1つだけ組み込みましたが、今回は2つ以上を組み込む方法です。
前回はこれです
Stinger7のトップページにnendのネイティブアドを組み込む
nendの設定
まずnendの管理ページで新規広告枠を作成します。
今回作成する広告枠は
- 広告のタイプ:ネイティブアド
- 広告画像選択:正方形の小さい広告画像
- 広告表示数:2~5ヶ所
です。
広告枠を作成したら、広告のレイアウトをします。
Easy Ad EditorとProfessional Ad Editorが選べますが、Professional Ad Editorを選びます。
このエディタを使って広告用HTMLを作成します。
Stinger7の記事一覧のフォーマットに合わせて広告タグを入れていきます。
もしStingerのレイアウトを独自にカスタマイズしていなければ、↓このままコピーしてエディタに貼り付ければOKです。
<dl class="clearfix"> <dt><a href="{{CLICK_URL}}" target="_blank"><img src="{{SMALL_SQUARE_IMAGE}}"></a></dt> <dd> <h3><a href="{{CLICK_URL}}" target="_blank">{{AD_DEFINE_TAG:ptn=1,deco=2}}{{SHORT_TEXT}}</a></h3> <div class="blog_info "> <p><span class="pcone"><i class="fa fa-tags"></i>{{PROMOTION_NAME}}</span></p> </div> <div class="smanone2"> <p>{{LONG_TEXT}}</p> </div> </dd> </dl>
できたら「広告コードを作成する」を押します。
広告コードが表示されます。
広告を1箇所組み込む場合と異なり、コードが2種類あります。
この2つの広告コードは後ほど利用します。
Stinger7の方の設定
広告画像を入れたいので、Stinger7の設定でサムネイルを表示していない場合はONに。
Stingerで修正・作成するファイルは4つ。両方とも子テーマのディレクトリ(themes/stinger7child)に保存します。
- nend-ad1.php(新規作成)
- nend-ad2.php(新規作成)
- itiran-thumbnail-on.php(修正)
- footer.php(修正)
nend-ad1.phpを新規作成
ファイルを新規作成して、nendの管理画面で出力されたコード(広告掲載位置用コード)をそのまま貼り付けます。
貼り付けたらファイル名をnend-ad1.phpにして、子テーマのディレクトリ(themes/stinger7child)に保存。
↓こういうコードです。必ず自分のコードを貼り付けてください。
<script type="text/javascript"> var nend_params = {"media":xxxx,"site":xxxxxx,"spot":xxxxxx,"type":10,"oriented":1}; </script>
nend-ad2.phpを新規作成
ファイルを新規作成して、nendの管理画面で出力されたコード(広告読み込み用コード)をそのまま貼り付けます。
貼り付けたらファイル名をnend-ad2.phpにして、子テーマのディレクトリ(themes/stinger7child)に保存。
↓こういうコードです。
<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>
itiran-thumbnail-on.phpを修正
/themes/stinger7にあるファイル(itiran-thumbnail-on.php)を子テーマの方(themes/stinger7child)にコピーして、こちらを修正します。
このファイルが記事一覧のファイルです
記事をカウントする変数($count)を使って、
・変数が1の時(1件目と2件目の記事の間)
・変数が5で割り切れる時(5件目と6件目の間、10件目と11件目の間、15件目と16件目の間・・・・)
に広告を表示するようにしています。
この設定だと、トップページの表示件数を増やしている場合に6個以上の広告が組み込まれる場合があります。広告が5個までになるように調整してください。
修正した行は2行目、29行目の2ヶ所。
<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?> <dl class="clearfix"> <dt><a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumbnail' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> <?php endif; ?> </a></dt> <dd> <h3><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h3> <div class="blog_info <?php st_hidden_class(); ?>"> <p><i class="fa fa-clock-o"></i> <?php the_time( 'Y/m/d' ); ?> <span class="pcone"><i class="fa fa-tags"></i> <?php the_category( ', ' ); ?> <?php the_tags( '', ', ' ); ?> </span></p> </div> <div class="smanone2"> <?php the_excerpt(); //抜粋文 ?> </div> </dd> </dl> <?php if ($count == 1 || $count % 5 == 0) { include ('nend-ad1.php'); } ?> <?php endwhile; else: ?> <p>記事がありません</p> <?php endif; ?> </div>
footer.phpを修正
/themes/stinger7にあるファイル(footer.php)を子テーマの方(themes/stinger7child)にコピーして、こちらを修正します。
</body>タグの前に、先ほど作成したnend-ad2.phpを読み込む行を追加します
<?php wp_footer(); ?> <?php include ('nend-ad2.php'); ?> </body></html>
以上で修正完了、これで広告が表示されるはずです。
確認は必ずスマホで行ってください。パソコンならブラウザのユーザーエージェントをスマホにすればOKです。
広告表示の最大は5個です。6個以上設定すると広告は表示されません。
もし不具合が発生した場合は、
themes/stinger7child/itiran-thumbnail-on.php
と
themes/stinger7child/footer.php
をサーバから一旦削除してください。これで広告を組み込む前の状態に戻ります。
間違っている箇所がないかよーく確認してみて下さい。
Comment
いつも拝見させていただいてます。
私の場合FTP接続で中身をみてもthemes/stinger7childというフォルダがないようです。
新しくthemesの中にstinger7childを作成すれば問題ないものでしょうか?
説明不足ですいません。
stinger7childはSTINGERの公式サイトからダウンロードできます。
「STINGER7子テーマ」というやつです
http://wp-fun.com/dl/
こちらをダウンロードして、FTPでthemesにアップロードしてください。
アップロード後、stinger7childの方のテーマを適用して作業を進めてください。
回答ありがとうございます。
うまくいきました。大変参考になりました。
差し出がましいですが、
記事のはじめの方でファイル名がnend-ad1.php nend-ad2.phpとなっていますが、ad-nend1.php ad-nend2.phpが正しいファイル名かと思われます。
ありがとうございました。
ファイル名の間違いのご指摘、どうもありがとうございます!
該当箇所を修正いたしました
[…] Stinger7のトップページにnendのネイティブアドを2つ以上組み込む(コドモとアプリ) […]
いろいろ調べてたどり着きました!
とても参考になりました、ありがとうございます♪
コメントありがとうございます
お役に立ててよかったです!