stinger plus2

【WordPress】STINGER PLUS2で記事エリア下部の広告を横並びにしたり、スポンサーリンクの文字を表示させる!

こんにちは。
ぷるぷる(@pluplu2)です

今回は新テーマSTINGER PLUS2に移行した方向けの、
記事下広告を横並びにする方法です!

ちなみにSTINGER8の場合は以下の記事をご参考ください。
【WordPress】STINGER8で記事下のアドセンスを横並びにする方法

内容としては上記の記事とほとんど変わらないのですが、
微妙に変わっている箇所があるので、お気を付けください。

なお、既にアドセンス等の広告設定をしていることを前提としています。
まだ設定をしていない場合は、設定を先にしてください。
設定方法がわからない場合は、以下の記事をご参考ください。

【WordPress】STINGER8でGoogle AdSense設置する!(STINGER PLUS2対応)
ぷるぷる(@pluplu2)ですGoogleAdsenseの承認があったので、設置をしていきたいと思います。設置する場所は様々あるとは思いますが、とりあえず、簡単な場所から!今回は、「サイドバー」と「記事下」の設置です。【2017年7月1日...

横並びにするとアドセンスが上手く表示されない場合は、
コチラを参照ください。

【Google Adsense】アドセンスが表示されない場合の対処法
たまーにコメントでいただくことがあります。それは、アドセンスを横並びにすると、アドセンスが消えた!!ということです。ここで言うアドセンスの広告は、投稿した記事の下にある広告を指しています。なお、使用しているテーマは「stinger8」です。...
スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント!キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

記事エリアの幅を広げる!

横並びにする場合は、デフォルトの状態ですと、
記事エリアの幅が狭くて、うまく横並びに表示されません。
そのため、まずは記事エリアの幅を広くしてください。

記事エリアの拡大は以下の記事をご参考ください。

【WordPress】STINGER8で記事エリアの横幅を広げる方法【簡単】(STINGER PLUS2対応)
STINGERのデフォルト状態だと記事エリアの幅が少し狭いとは思いませんか?今回は記事エリアを広げる方法です。今まではいろいろなところを調整しながらやらなければならなかった記事エリアの横幅の変更ですが、STINGER8では簡単に変更すること...

ちなみにこの記事を書いた時点では、
全体の横幅を1200pxに設定しております。

この幅が小さいとうまくいかない場合があるので、
ご注意ください。

ウィジェットに追加したテキストにclass名を付ける!

ウィジェットに追加したテキストに、
『underad』というclass名を付けます。

なお追加するのは、記事下なので、
「広告Googleアドセンス用336px」です。

<div class="underad">
【コピペした広告コード】
</div>

style.cssにコードを追記する!

以下のコードをstyle.cssに追記します。

.underad{
	float:left;
	margin-left:40px !important;
	margin-bottom:40px !important;
}

これで横並びになったはずですが、
2つ表示されている広告の右側が少し下がっているはずです。

これは、元々縦に並んでいたため、上下の広告がくっつかない様に、
padding-topが効いているためです。

横並びにする場合は、上下に並んでいないため、
このpadding-topは必要がないため消していきます。

st-ad-on.phpを編集する!

STINGER PLUS2は便利といえども、
やはり、自分の思い描くデザインにするには、
PHPファイルを編集しなければなりません。

<?php //固定ページ用の広告読み込み
global $wp_query;
if( is_single() or is_page() && !is_front_page() ){
	$postID = $wp_query->post->ID;
	$koukoku_set = get_post_meta( $postID, 'koukoku_set', true );
	if ( isset( $koukoku_set ) && $koukoku_set === 'yes' ){ //広告非表示の場合 ?>

	<?php }else{ ?>

		<?php //広告読み込み
		if( is_single() || ( is_page() && ( trim($GLOBALS['stdata100']) !== '') ) ){ ?>
			<div class="adbox">
			<p>スポンサーリンク</p>
				<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
				<?php if ( st_is_mobile() ) { //スマホの場合 ?>
				<?php } else { //PCの場合 ?>
					<div style="padding-top:10px;">
						<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
					</div>
				<?php } ?>
			</div>
		<?php } ?>

        
	<?php } ?>

<?php }else{ //投稿と固定ページ以外 ?>

		<?php //広告読み込み
		if( is_single() || ( is_page() && ( trim($GLOBALS['stdata100']) !== '') ) ){ ?>
			<div class="adbox">
				<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
				<?php if ( st_is_mobile() ) { //スマホの場合 ?>
				<?php } else { //PCの場合 ?>
					<div style="padding-top:10px;">
						<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
					</div>
				<?php } ?>
			</div>
		<?php } ?>

<?php }

【st-ad-on.php】ファイルの真ん中あたりと下部に、
【<div style=”padding-top:10px;”>】というコードがあります。
左右の広告のずれを直すためには、
このpadding-topを消すか、または、0に変更します。

子テーマを使用しているため、
消してしまっても構わないのですが、
消す場合は、必ず<div>は残しましょう。

編集後はこのようになります。

<?php //固定ページ用の広告読み込み
global $wp_query;
if( is_single() or is_page() && !is_front_page() ){
	$postID = $wp_query->post->ID;
	$koukoku_set = get_post_meta( $postID, 'koukoku_set', true );
	if ( isset( $koukoku_set ) && $koukoku_set === 'yes' ){ //広告非表示の場合 ?>

	<?php }else{ ?>

		<?php //広告読み込み
		if( is_single() || ( is_page() && ( trim($GLOBALS['stdata100']) !== '') ) ){ ?>
			<div class="adbox">
			<p>スポンサーリンク</p>
				<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
				<?php if ( st_is_mobile() ) { //スマホの場合 ?>
				<?php } else { //PCの場合 ?>
					<div style="padding-top:0px;">
						<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
					</div>
				<?php } ?>
			</div>
		<?php } ?>

        
	<?php } ?>

<?php }else{ //投稿と固定ページ以外 ?>

		<?php //広告読み込み
		if( is_single() || ( is_page() && ( trim($GLOBALS['stdata100']) !== '') ) ){ ?>
			<div class="adbox">
				<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
				<?php if ( st_is_mobile() ) { //スマホの場合 ?>
				<?php } else { //PCの場合 ?>
					<div style="padding-top:0px;">
						<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
					</div>
				<?php } ?>
			</div>
		<?php } ?>

<?php }

これで、きちんと以下の図の様に表示されたはずです。

スポンサーリンクの文字を表示させる方法

文字を表示させる場合は、
子テーマにある「st-ad-on.php」のファイルを編集します。

【<div class=””adbox””>】の下あたりに、
【<p>スポンサーリンク</p>】というコードを追記します。完成したコードは以下の様になります。

<?php //固定ページ用の広告読み込み
global $wp_query;
if( is_single() or is_page() && !is_front_page() ){
	$postID = $wp_query->post->ID;
	$koukoku_set = get_post_meta( $postID, 'koukoku_set', true );
	if ( isset( $koukoku_set ) && $koukoku_set === 'yes' ){ //広告非表示の場合 ?>

	<?php }else{ ?>

		<?php //広告読み込み
		if( is_single() || ( is_page() && ( trim($GLOBALS['stdata100']) !== '') ) ){ ?>
			<div class="adbox">
			<p>スポンサーリンク</p>
				<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
				<?php if ( st_is_mobile() ) { //スマホの場合 ?>
				<?php } else { //PCの場合 ?>
					<div style="padding-top:0px;">
						<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
					</div>
				<?php } ?>
			</div>
		<?php } ?>

        
	<?php } ?>

<?php }else{ //投稿と固定ページ以外 ?>

		<?php //広告読み込み
		if( is_single() || ( is_page() && ( trim($GLOBALS['stdata100']) !== '') ) ){ ?>
			<div class="adbox">
				<p>スポンサーリンク</p>
				<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
				<?php if ( st_is_mobile() ) { //スマホの場合 ?>
				<?php } else { //PCの場合 ?>
					<div style="padding-top:0px;">
						<?php get_https://plu-plu.net/wp-admin/post.php?post=509&action=edit#template_part( 'ad' ); //アドセンス読み込み ?>
					</div>
				<?php } ?>
			</div>
		<?php } ?>

<?php }

13行目と32行目に追記しております。

スポンサーリンクの色を変更し、文字を中央にする方法

「スポンサーリンク」文字を中央にする場合は、
下記のコードをスタイルシートに入力します。

.adbox p{
      text-align: center;
      color:#666;
      margin-bottom:1px;
}

これで中央になったはずです。

広告の設定はなかなかややこしかったりするので、
何かわからないことなどがありましたら、
お気軽にコメントくださーい!

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!

私が使用したおすすめの本はこちらです。

コメント

  1. nao より:

    はじめまして。
    stinger plus2にて、記事下ウィジェットのアドセンス広告を横並びにしたくてここにたどり着きましたが、この記事通りにやってみましたがアドセンスが右寄りになってしまいます。中央に寄せたいのですがアドバイスをいただけませんか?あと、スポンサーリンクの文字とアドセンスの隙間(余白)を無くしたいのですが… 宜しくお願い致します。

    • ぷるぷるぷるぷる より:

      nao さん

      コメントありがとうございます。
      アドセンスが右寄りになってしまうとのこと件ですが、一応自分で新たにstingerplus2をダウンロード・インストールし、デフォルトの状態のもので当記事の方法を試してみましたが、ちゃんと中央に寄りました。
      これに関しては、naoさんのサイトを確認してみないと原因がわからないです。
      サイトを教えていただければ、確認してみます。

      またスポンサーリンクの隙間をなくすのであれば、style.cssに追記した【adbox p】の【margin-bottom:1px;】を【margin-bottom:0px】に変更すれば隙間がなくなると思いますよ~