今回も、STINGER5のカスタマイズ記事です。
普段スマホでネットサーフィンをしていて、記事の上の方に「Poket」の後で読むボタンを設置しているブログをチラホラと見かけました。
実際にスマホでネットサーフィンをする時は、隙間の時間をつかって情報収集してたりすると思います。時間が無かったりするとあまり真剣に記事を読まずに離れてしまったりがありると思います。そんな時に、タイトル付近に「Poket」のボタンがあると、その時に時間がなくても後で気が向いた時に読めたりするので便利だなと。
記事の一番下まで行かないとSNSボタンは出てこないサイトも多いのですが、「Poket」に関しては上部にもリンクがあると利便性が高いと思ます。
そこで、今回はSTINGER5で日付・更新日が表示される部分にPoketの後で読むボタンを追加する方法をメモっていきます。
日付・更新日の横にPoketの後で読むボタンを追加する方法
今回のカスタマイズはタイトルの直下にある、日付や、更新日が入るバーのような部分にポケットのボタンを設置します。
該当の部分に関しては「single.php」にありますので見て行きましょう。
<div class="blogbox">
<p><span class="kdate"><i class="fa fa-calendar"></i>
<time class="entry-date" datetime="<?php the_time('c') ;?>">
<?php the_time('Y/m/d') ;?>
</time>
<?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i> ' , $mtime; ?>
</span>
</p>該当の部分はこちらになっています。「blogbox」というdivの中に、日付や、更新日が入っているのでその後ろにPoketのボタンを追加していきます。
<div class="blogbox">
<p><span class="kdate"><i class="fa fa-calendar"></i>
<time class="entry-date" datetime="<?php the_time('c') ;?>">
<?php the_time('Y/m/d') ;?>
</time>
<?php if ($mtime = get_mtime('Y/m/d')) echo ' <i class="fa fa-repeat"></i> ' , $mtime; ?>
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><span class=" icon-pocket"></span>?後で読む</a>
</span>
</p>
</div>こんな感じで書き換えればOKです。
また、このままだとリンクの色がデフォルトの青になってしまったので、「Poket」ぽくないということで、追加でこちらを「style.css」に追加しました。
.blogbox a {
color: #ff1493;
text-decoration: none;
}また、今回はアイコンフォントを他の部分で使用しているものから引っ張ってきて使っています。
上記のコードをコピーして使う場合は、下記のようにstyle.cssにアイコンフォントの記載をする必要があります。
使用しない場合は上記コード内の「icon-pocket」の部分のspanタグは消してしまってもOKです。
/*-----------------------------
アイコンフォント用
------------------------------*/
@font-face {
font-family: 'icomoon';
src:url('./fonts/icomoon.eot?jb9kfn');
src:url('./fonts/icomoon.eot?#iefixjb9kfn') format('embedded-opentype'),
url('./fonts/icomoon.woff?jb9kfn') format('woff'),
url('./fonts/icomoon.ttf?jb9kfn') format('truetype'),
url('./fonts/icomoon.svg?jb9kfn#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-pocket:before {
content: "\e603";
}
以上です。
まとめ
今回のカスタマイズに関しては、前回SNSボタンのコードを使いまわさせて頂きました。
ボタンのコードを流用することで結構簡単に導入することが出来ました。
しっかりと、「Poket」ボタンを上部に設置することで、ちょっとだけユーザーさんの利便性をあげられるかなと思っています。
簡単に出来る部分ですので是非試してみてくださいね。
てな感じで。
参考させていただいたサイト
