ひろみのみ

IT、コーチング、人材紹介・派遣で働いてきました。ITに関する記事(Qtが多くなってしまいました)や、コーチングスキル、転職のこと、個人的な体験や最近購入したものなどを不定期に更新しています。

WordPress

STINGER5にソーシャルボタン3種を追加する方法(投稿記事)

投稿日:2015年5月29日 更新日:

先日、STINGER5で、トップページに
Pocket、feedly、LINEの3種類のソーシャルボタンを追加する方法を書きました。

続きの記事で、投稿記事にボタンを追加する方法を説明します。

基本的には、トップページにソーシャルボタンボタンを追加する方法と同じなのですが、一部修正する場所があります。

スポンサーリンク

sns-top.phpに追加したソースコードをコピーする

WordPress管理画面にログインをします。
そして、「外観」⇒「テーマの編集」と選択をします。
(ここまでは、トップページと同じ)

sns-top.phpをクリックして、ファイルを表示します。

このサイトの sns-top.php の内容です。(正確にいうと、pocketとはてなの位置が逆になっています。わかりやすくするために変えていますのでご了承ください。)

<div class="sns">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php echo home_url(); ?>" data-text="<?php bloginfo( 'name' ); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo home_url(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php bloginfo( 'name' ); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
      <li>
        <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>
      <li>
        <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.hirominomi.com%2Ffeed%2F%E3%80%80'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
      </li>
      <li>
	<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://www.hirominomi.com/wordpress/wp-content/uploads/2015/05/line.png " width="40" height="auto" alt="LINEで送る" /></a>
      </li>
    </ul>
  </div>

13行目から22行目までが、Pocket、feedly、LINEで送るボタンを追加したコードです。

この、13行目から22行目までをコピーします。

sns.phpを開いて編集する

画面の右側にある、 sns.php(赤で囲われているところ) をクリックして、ファイルを表示します。

SNSボタンカスタマイズ画像1(投稿)※クリックすると画像が大きく表示されます。

先ほどコピーしたものを、貼り付けます。

貼り付ける位置は、↓の12行目と13行目の間です。

<div class="sns">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
    </ul>
  </div>

feedlyボタンとLINEで送るボタンは、トップ画面と同じもので大丈夫です。

Pocketボタンを投稿記事用に編集します。

Pocketボタンを編集する

投稿記事のタイトルを表示するように、ソースコードの14行目に
data-save-url=”<?php get_permalink(); ?>
を追加します。

      <li>
	<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="<?php get_permalink(); ?>"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
      </li>

追加すると、上記のようになります。(このままコピペしても使えます)

これで、Pocketボタンの編集は終了です。

以上で、Pocket、feedly、LINEで送るの、ソーシャルボタン3種の追加は終了です。

-WordPress
-,

執筆者:


comment

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

関連記事

stinger5サムネイル画像

STINGER5を使う5つの理由

WordPressにはいろいろなテーマがあります。 このサイトでは、「STINGER5」という無料のテーマを使わせて頂いています。 STINGER5との出会いは偶然でした。 私が、STINGER5を使 …

Chromeエラー画面

WordPressプラグイン TablePressが動作しない訳

久しぶりのITネタです。 WordPressのプラグイン「TablePress」。 簡単にテーブルが作成できる便利なプラグインです。 テーブルを作成するだけでなく、並べ替えができたり、検索ができたりと …

SNSボタンサムネイル

STINGER5にソーシャルボタン3種を追加する方法(トップページ)

最初から、STINGER5では、Facebook、Twitter、Google+、はてなブックマークの4種類のソーシャルボタンが表示されるようになっています。 このサイトでは、Pocket、feedl …

プロフィール画像

外資系IT企業、日系シンクタンクで、SEとして働いた後、コーチング専業会社に就業。転職エージェントを経て、IT業界に出戻りしました。

これまで数百名と面接してきた経験と、自分自身の経験をベースにITエンジニア向けの情報を発信しています。少しずつですが情報を更新中。

その他にもリクエストがあれば、お問い合わせフォームからお願いします。