ガジェニュー

~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
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

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

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

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

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

Loading Facebook Comments ...

Message

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