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

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

nendのネイティブアドをStinger7の記事一覧(トップページやアーカイブ)に組み込む方法を説明します。ちなみにnendはスマホ向けの広告配信サービスなので、パソコンでは表示されません

nendの設定

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

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

です。
広告表示数を2ヶ所以上にする場合は修正ファイルが異なります。今回は1ヶ所のみの説明です。

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

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

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

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

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

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>

できたら「広告コードを作成する」を押します。

広告コードが表示されます。この広告コードは後ほど利用します。
Stinger7のトップページにnendのネイティブアドを組み込む

広告のステータスが「承認中」の間は広告が表示されないので、承認してもらえるまで気長に待ちましょう。平日だと2〜3日くらいで連絡がきます。休日を挟むと結構待ちます。Stingerには承認された後に組み込みましょう。

Stinger7の方の設定

広告画像を入れたいので、Stinger7の設定でサムネイルを表示していない場合はONに。

Stingerで修正・作成するファイルは2つ。両方とも子テーマのディレクトリ(themes/stinger7child)に保存します。

  • nend-ad.php(新規作成)
  • itiran-thumbnail-on.php(修正)
  • nend-ad.phpを新規作成

    ファイルを新規作成して、nendの管理画面で出力されたコードをそのまま貼り付けます。
    貼り付けたらファイル名をnend-ad.phpにして、子テーマのディレクトリ(themes/stinger7child)に保存。
    ↓こういうコードです。必ず自分のコードを貼り付けてください。

    <script type="text/javascript">
    var nend_params = {"media":xxxx,"site":xxxxxx,"spot":xxxxxx,"type":10,"oriented":1};
    </script>
    <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)にコピーして、こちらを修正します。
    このファイルが記事一覧のファイルです

    1つめと2つめの記事の間に広告を表示する処理を入れます

    記事をカウントする変数($count)を使って、変数が1のとき(1つめと2つめの記事の間)に広告を表示するようにしています。
    修正した行は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) { include ('nend-ad.php'); } ?>
    		 
    	<?php endwhile;
    	else: ?>
    		<p>記事がありません</p>
    	<?php endif; ?>
    </div>
    

    以上で修正完了、これで広告が表示されるはずです。
    確認は必ずスマホで行ってください。パソコンならブラウザのユーザーエージェントをスマホにすればOKです。

    もし不具合が発生した場合は、
    themes/stinger7child/itiran-thumbnail-on.php
    をサーバから一旦削除してください。これで広告を組み込む前の状態に戻ります。
    間違っている箇所がないかよーく確認してみて下さい。

    参考サイト
    WordPresで記事と記事の間(ループ内)に広告を表示する方法 WordPress de SEO をやろう!

Comment

  1. 通りすがり より:

    日本語ドメインで試してみたらできなかったんですが、対応していないということなんですかね?

    • inafuku より:

      ローカル環境でも広告が表示されるので、ドメインはたぶん関係ないと思います。
      サイトの確認はスマホで、あとnendの広告枠のステータスがアクティブになっているかを確認してみてください

  2. 葛葉人形 より:

    itiran-thumbnail-on.php 29行目でnendの広告を挿入するコードですがファイル名間違えてませんか?
    新規作成はnend-ad.phpですが挿入はad-nend.phpになっています。

  3. inafuku より:

    ご指摘ありがとうございます!
    該当箇所を修正いたしました

  4. ポテコ5 より:

    お疲れ様です。

    どうしてもこテーマにこれができません。新規のフォルダを作っても中にコピペできません。どうしたいいのでしょうか?お手数でなければよろしくお願いします。

    • inafuku より:

      子テーマ(stinger7child)はWordpressの設定で有効化されていますか?

  5. ポテコ5 より:

    すみません。できました。ファイルを作成ではなく、フォルダを作成をしてしまっていました。お時間とらせてしまい、申し訳ございません。ありがとうございました。

    • inafuku より:

      ご報告ありがとうございます
      無事動いたようでよかったです

  6. りんた より:

    稲福さま
    wordpress、並びにブログ構築初心者です。頻繁に貴HPを参考にさせていただいております。現在、wordpressの類似テーマSimplicityにて、nendのネイティブアドを掲載すべく奮闘していますが基本的な必要情報が見つからないまま一月以上経過しています。 広告コードは取得できるのですが(簡単エディターで)、wordpress側に実装することが出来ません。

    上記に解説してある、ファイルの新規作成とは、子テーマフォルダーがダウンロードしてあるPC本体で操作後、アップロードするのでしょうか。それともworpress上の「外観>テーマの編集>子テーマを選択」という中から可能なのでしょうか。
    また、親テーマにあるファイル(itiran-thumbnail-on.php)を子テーマの方(themes/stinger7child)にコピーするという操作も、テーマの編集機能からかのうなのでしょうか。

    このような基本的な部分を解説してある情報にたどり着けず、こちらで質問させていただいております。宜しくお願い致します。

    • inafuku より:

      りんたさま

      子テーマへのファイル追加は自分のパソコンで行ってください
      なので・・・

      ファイルの新規作成は自分のパソコン上で行って、ファイルが作成できたらサーバーの子テーマのディレクトリにアップロード

      itiran-thumbnail-on.phpのコピーも親テーマからファイルを一度ダウンロードして、子テーマのディレクトリにアップロード

      です。
      他にご不明な点がありましたら、お気軽にお問い合わせください!

      • りんた より:

        いなふく様

        お忙しい中、大変基本的な質問に対し御丁寧なお返事の程ありがとうございました。

        サーバーは、ブログを立ち上げる際に初期設定を行って以来触れておりませんでした。
        Xサーバーを使用しています。

        いなふく様からのアドバイスを基に、新規作成したファイルをサーバーの子テーマのディレクトリにアップロードしたいのですが、どこに子テーマのディレクトリがあるのか見つけられずにいます。

        再び基本的な質問で大変恐縮ですが、お時間の許す時にお返事いただけると幸いです。

        りんた

        • inafuku より:

          りんた様
          Wordpressをインストールしたディレクトリの
          /wp-content/themes/
          がテーマファイルをインストールするティレクトリです
          ここに子テーマのディレクトリを丸ごとアップすれば、Wordpressの管理画面に子テーマが表示されます

  7. りんた より:

    いなふく様

    お世話になります。wordpressをxサーバーに自動インストールした為、ディレクトリそのものを探せずにおります。XサーバーHPにて、手動インストールの手引きを参照しましたが、把握できませんでした。
    現在の私の状況では、ネイティブアドの設置は難しそうです。ご説明いただいたのに解決できず、すみません。
    アドバイスの程ありがとうございました。

    りんた

    • inafuku より:

      そうですか・・・残念です
      ちなみに、XサーバーのWordPressのディレクトリは
      /home/xsample/example.com/public_html/wp
      みたいです

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