comment 0

「LINEで送るボタン」をjetpackを使わずにスッキリと設置

WordPressで作成しているこのブログに「LINEで送るボタン」を設置した。
jetpackの共有設定を使えば、簡単に追加できる。

設置方法|LINEで送るボタン

共有設定_‹_ココロクロニクル_—_WordPress

しかし、これを使用するとiPhone画面でソーシャルボタンが散らばって表示されて、あまり好きになれない。
そこでブログテーマを修正して設置した。
現在使用中のブログテーマ「Moka」は、もともとシェアボタンを表示できるようになっている。

3.3. Share Buttons (Twitter, Google+, Facebook, Pinterest)

In the next theme option you can activate share buttons for Twitter, Google+, Facebook and Pinterest. Optional you can choose to show the buttons on the blog front page and on single posts or on single posts only.

引用元: Moka WordPress Theme Documentation | Elmastudio.

だからこの部分に手を加えれば、設置できるはず。
アレコレの知識がない情弱なので、テーマをいじるのはこわかったけれど、バックアップをとっといてコピペすれば復活できるだろうと思い乗り越えた。
tumblrのテーマ変更で、こういう作業を繰り返すウチ、抵抗感が小さくなったおかげだろう。

WordPressの「テーマ編集」を開くと、ズラッと並ぶテンプレート一覧。
その中に「share.php」を発見。
名前的にこれだろうあたりをつけて開くとビンゴ!

<?php
/**
* Share buttons for posts and pages
*
* @package Moka
* @since Moka 1.0
*/
?>

<div class=”share-btn”><?php _e( ‘Share’, ‘moka’ ); ?></div>
<div class=”share-links-wrap”>
<ul>
<li class=”twitter”><a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”horizontal” data-url=”<?php the_permalink(); ?>” data-text=”<?php the_title(); ?>” data-lang=”<?php bloginfo(‘language’); ?>”><?php _e(‘Tweet’, ‘moka’) ?></a></li>
<li class=”gplus”><g:plusone size=”medium” href=”<?php the_permalink(); ?>”></g:plusone></li>
<li class=”fb”><iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true”></iframe></li>
<li class=”pinit”><?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ ); ?>
<a href=”http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>” class=”pin-it-button” count-layout=”horizontal” >Pin It</a></li>
</ul>
</div><!– end .share-links-wrap –>

このあたりにLINEが公開してくれているコードをコピペすればなんとかなるんじゃなかろうか。

設置方法|LINEで送るボタン

ということでコピペ。
ついでに頻度が低いと思われる「Pinterest」のボタンも削除。

<?php
/**
* Share buttons for posts and pages
*
* @package Moka
* @since Moka 1.0
*/
?>

<div class=”share-btn”><?php _e( ‘Share’, ‘moka’ ); ?></div>
<div class=”share-links-wrap”>
<ul>
<li class=”twitter”><a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”horizontal” data-url=”<?php the_permalink(); ?>” data-text=”<?php the_title(); ?>” data-lang=”<?php bloginfo(‘language’); ?>”><?php _e(‘Tweet’, ‘moka’) ?></a></li>
<li class=”gplus”><g:plusone size=”medium” href=”<?php the_permalink(); ?>”></g:plusone></li>
<li class=”fb”><iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true”></iframe></li>
<span>
<script type=”text/javascript” src=”//media.line.me/js/line-button.js?v=20140127” ></script>
<script type=”text/javascript”>
new media_line_me.LineButton({“pc”:false,”lang”:”ja”,”type”:”a”});
</script>
</span>
</ul>
</div><!– end .share-links-wrap –>

結果からいうと、というか結果しか理解できていないが大成功。

iPhoneでの表示

LINEで送るiPhone

 

スッキリと収まり良く表示されている。
※パソコンでは表示されない

今のところ順調で問題は起きていないけれど、念のためEvernoteに保存したオリジナルのバックアップは保存しておこう。

Moka」に興味のある方はコチラをどうぞ!

Moka WordPress Theme | Elmastudio

 

Write your message here...