ガジェニュー

~iPhone・格安スマホとか~

【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

      2016/01/21    後で読む

stop_121514_014934_PM
今まで、「Quick AdSense」というプラグインを使用して文中に置いた「more」タグを置換することによって記事の中にAdSenseのレスポンシブユニットを設置していたのですが、文中に「Poket」と「はてブ」のボタンを付けたいなぁと思い色々いじっているうちに「QuickAdSense」だとやりたいことができない!ということが分かりました。

そのため、今回はプラグインを使わずに「more」タグを「AdSense」+「ソーシャルボタン」に置き換える形でのカスタマイズを行いました。

ということでやり方などを書いていきます。辿り着くまではちょっと時間はかかりましたがやること自体は簡単でした。

↓↓このような形で「ソーシャルボタン」とAdSenseが入るようになりました。

SPONSORED LINKS

記事中にプラグイン無しでAdSenseとソーシャルボタンを

今回のカスタマイズに関しては、「single.php」の記載を変更することで、記事内の「more」タグの内容を記載のものに置き換える当方法でやります。

「Quick AdSense」では、置き換えるコードとしてはPHPが動かず、ソーシャルボタンに設置する記事のURLを取得するプログラムが動かないために、このような形でのカスタマイズをすることしました。

記事中にソーシャルボタンを置きたいなと思った理由

これは単純です。

このブログは、PVの7割以上がスマホからです。スマホだと記事を読んでいる途中で、ネットサーフィンをやめきゃいけないタイミングって以外とあると思うんです。

スマホはスキマ時間に使う場合が多いですよね。

「読んでる途中なのに、もう時間が!」とか、「ちょっと読んだけど面白そうだからあとでじっくり見るか。」という需要が多いかなと個人的に思ったからです。

だから文中、特に導入文の直ぐ後にソーシャルボタンを置いておくことはユーザーにとってやさしいかも。ということで勉強がてら設置してみることにしました。

プラグイン無しで「more」タグを置換するための手順

「single.php」の下記の部分をかきかえればOKです。

<?php the_content(); ?>

この部分でPHPの命令を使って記事の情報をデータベースから引っ張ってきて表示をするような形になっています。

その部分を下記のように書き換えます。

<?php if(strpos(get_the_content(),'id="more-')) :
global $more; $more = 0;
the_content(''); ?>
<!-- この部分に、SNSボタンと、AdSenseコードを貼り付けます。 -->
<?php $more = 1;
the_content('', true );
else : the_content();
endif; ?>

コンテンツ内に「more」タグが含まれている場合は、「この部分に…」の部分のコードを表示ということですね。

これだけでOKです。デザインに関しては自分で好きなように変更を加えてください。

ちなみに自分の場合は、記事の下で使っているボタンから、「Poket」「はてブ」だけ選んで設置することにしました。

コードはこんな感じ。

 <?php if(strpos(get_the_content(),'id="more-')) :
global $more; $more = 0;
the_content(''); ?>
<div class="atode">この記事を後で読む</div>
<div class="sns">
<ul class="clearfix">
<!--はてブボタン-->  
<li class="hatebu">       
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink();?>"><i class="fa fa-hatena"></i><span class="icon-hatebu">はてブ</span></a>
</li>
<!--ポケットボタン-->      
<li class="pocket">
<a href='http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>' onclick="window.open(this.href, 'PCwindow', 'menubar=no, toolbar=no, scrollbars=yes'); return false;"><span class=" icon-pocket"></span>Pocket</a></li>
</ul>
</div> 
<div style="text-align:center">SPONSORED LINKS<br>
  AdSenseのコード
</div>
<?php $more = 1;
the_content('', true );
else : the_content();
endif; ?>

ちなみに、「STINGER5」で記事の下のソーシャルボタンと全く同じものの設置で良ければ

<?php get_template_part('sns'); ?>

を記載すればテンプレートの「sns.php」を読み込んでもらえるので簡単にやりたいのであればこちらを使うのもいいでしょう。

自分の場合は必要でないものは記載したくなかったので今回は直書きです。

時間があれば別名で例えば「sns-mid」とかを作って、それを読み込ませるのもありだなと思っているので後でチャレンジしてみようかな。

以上。

まとめ

今回のカスタマイズは簡単に出来て、しかもプラグインを1つ使わないということができたので結構満足です。きっと少しだけ、ページの表示速度も早くなった気がする。。。

見た目と、設置するボタンの種類に関してはちょっと時間を見てカスタマイズするようにできるといいかなーと。

ま、今回オシマイです。

てな感じで。

関連記事
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

☆おまけ☆
参考にさせていただいた方の著書ということで感謝の意味を込めて宣伝^^

参考サイト
http://mbdb.jp/hacks/entry-ease-divide-output.html

 - STINGER5, WordPress , , , ,

  関連記事

images_111114_064856_PM
カエレバをアイコンフォントを使ってカスタマイズ(SVGファイルもあるよ)

以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホ …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

icon_1r_192
【アクセス数報告】2015年5月のPVとアフィリエイトの収益とか

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

photo-express-for-google-tb
Picasa and Google Plus ExpressからPhoto Express for Googleに変更しました。【WordPressプラグイン】

前に書いたエントリーで利用していたプラグインがGoogleの認証方法の変更によっ …

icon_1r_192
【アクセス数報告】2015年2月のPVとアフィリエイトの収益とか

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

sum1
カエレバのCSSカスタマイズ

今回はカエレバのカスタマイズを行いました。カエレバといえば、商品のアフィリエイト …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です