Stinger7のトップページにnendのネイティブアドを2つ以上組み込む

Stinger7のトップページにnendのネイティブアドを2つ以上組み込む

前回はStinger7のトップページにnendのネイティブアドを1つだけ組み込みましたが、今回は2つ以上を組み込む方法です。

前回はこれです
Stinger7のトップページにnendのネイティブアドを組み込む

nendの設定

まずnendの管理ページで新規広告枠を作成します。
今回作成する広告枠は

  • 広告のタイプ:ネイティブアド
  • 広告画像選択:正方形の小さい広告画像
  • 広告表示数:2~5ヶ所

です。
Stinger7のトップページにnendのネイティブアドを2つ以上組み込む

広告枠を作成したら、広告のレイアウトをします。
Easy Ad EditorとProfessional Ad Editorが選べますが、Professional Ad Editorを選びます。

Stinger7のトップページにnendのネイティブアドを2つ以上組み込む

このエディタを使って広告用HTMLを作成します。

Stinger7のトップページにnendのネイティブアドを2つ以上組み込む

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のトップページにnendのネイティブアドを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' ); ?>
    						&nbsp;<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

  1. elbeth より:

    いつも拝見させていただいてます。
    私の場合FTP接続で中身をみてもthemes/stinger7childというフォルダがないようです。
    新しくthemesの中にstinger7childを作成すれば問題ないものでしょうか?

    • inafuku より:

      説明不足ですいません。
      stinger7childはSTINGERの公式サイトからダウンロードできます。
      「STINGER7子テーマ」というやつです
      http://wp-fun.com/dl/

      こちらをダウンロードして、FTPでthemesにアップロードしてください。
      アップロード後、stinger7childの方のテーマを適用して作業を進めてください。

  2. elbeth より:

    回答ありがとうございます。
    うまくいきました。大変参考になりました。
    差し出がましいですが、
    記事のはじめの方でファイル名がnend-ad1.php nend-ad2.phpとなっていますが、ad-nend1.php ad-nend2.phpが正しいファイル名かと思われます。

    ありがとうございました。

  3. inafuku より:

    ファイル名の間違いのご指摘、どうもありがとうございます!
    該当箇所を修正いたしました

  4. […] Stinger7のトップページにnendのネイティブアドを2つ以上組み込む(コドモとアプリ) […]

  5. イーグン より:

    いろいろ調べてたどり着きました!
    とても参考になりました、ありがとうございます♪

    • inafuku より:

      コメントありがとうございます
      お役に立ててよかったです!

タイトルとURLをコピーしました