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

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

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

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

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

記事中にプラグイン無しで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」で記事の下のソーシャルボタンと全く同じものの設置で良ければ