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

2014-12-15

stop_121514_014934_PM
今まで、「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」で記事の下のソーシャルボタンと全く同じものの設置で良ければ

<?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

関連記事

  • この記事を書いた人
  • 最新記事

Tatsuya Yabe

常に何かを考えていないとバカになると思う、だから常に何かを考えてる。 日々の生活に常に思考を。ということで書いています。

-WordPress
-, , , ,

Copyright© ガジェニュー , 2023 All Rights Reserved.