「あ、このページ、後で読もうっと(^-^)o」
というとき。
普段からChromeを使っているので、とりあえずスマートフォンでブックマーク→自宅PCのChromeからモバイルのブックマークを開いて→さっき登録したサイトを表示…とやっていたのですが…。
ページを登録して「あとで読む」サービス「Pocket」というのがあるようなので、登録してみました。
Pocketに登録してみたキッカケ
そもそも「Pocket」に興味を持ったのが、こちらのページ。
[link url=”http://calico.xyz/2014/12/12/pocket-3/”]
STINGER5のカスタマイズ記事を沢山扱っていて、ここのところ参考にさせていただいていたサイトさんです。
このページを見て自分も「あとで読む」ボタンを設置してみたいと思ったのと、そもそも普段「あとで読む」をスムーズにできるサービスや機能が無いかなぁと思っていたので良い機会でした。
さっそく登録
Pocketのサイトから登録します。
「Google+アカウント」を持っていれば、連携させてログインすることもできるようです。
メールアドレスで登録する場合、「メールで登録」を押して、氏名やメールアドレスを入力します。
[link url=”https://getpocket.com/”]
自分の場合、見ていたキャリコさんのPocketリンク設置の記事にある「あとで読む」をクリックして、
メールアドレスでPocketに登録して、
そのまま「あとで読む」に登録されました。
Chrome拡張機能
PCのブラウザとして「Chrome」を使っている場合、拡張機能で見ているページをすぐに「あとで見る」に登録する「Save to Pocket」というのがあります。
「Save to Pocket」をインストールすると、Chromeの右上に「Pocket」のアイコンが表示され、「あとで読みたい」と思ったページでクリックすると、直ちに登録してくれます。
既に登録されているページの場合、アイコンが赤くなっているので分かります。（登録直後に赤くなるだけでした(^-^;）
Androidの「Pocket」アプリ
Android、iOS向けにアプリがあります。
[link url=”https://getpocket.com/android/?ep=1″]
同じアカウントを登録しておくことで、「あとで読む」を共有できます。
外ではスマートフォンで「あとで読む」登録。
休憩時間にはタブレットで「あとで読む」を開く。
家に帰ったらのんびり「あとで読む」を開く。
そんな使い方が出来ます。
さて、Androidの「Pocket」をインストールすると、「共有…」メニューに「Pocket」が表示されます。
「Pocket」を選べば、すぐに「あとで読む」に登録されます。
今まで「共有…」メニューをあまり使っていなかったので知りませんでしたが、最後に使った「共有」のアイコンが表示されるので、次からはそのアイコンを押すだけで「あとで読む」に登録できます。
アプリ「Pocket」を起動すれば、「あとで見る」に登録してある一覧が表示されます。
STINGER5の記事に「あとで読む」を付けてみる
STINGER5の記事タイトルのところに、「あとで読む」ボタンをつけてみました。
[link url=”http://calico.xyz/2014/12/12/pocket-3/”]
[link url=”http://smart-phone.783783783.com/2014/12/11/stinger5-customize-poket/”]
参考にしたキャリコさんのところと同じく、「single.php」の更新日を表示している辺りに追加します。
[2015/11/02追記]※「Pocket」のカウントの取得にはWordPressプラグイン「SNS Cache Count」を利用しています。こちらのプラグインを有効にするとカウントも表示されます。
[php title=”single.php 変更前” start-line=”35″ decode=”true”] <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>
</div>[/php]
[php title=”single.php 変更後” start-line=”35″ mark=”8-10″ decode=”true”] <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 style=”color:#ee4056;”> <i class=”fa fa-check-square”></i></span>
<a href=’http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>’ onclick=”window.open(this.href, ”, ‘height=300, width=600, menubar=no, toolbar=no, scrollbars=yes’); return false;”>あとで読む</a><?php if(function_exists(‘get_scc_pocket’)) echo ‘(‘.get_scc_pocket().’)’; ?>
</span></p>
</div>[/php]
ちゃんと登録もできました。
FontAwesomeが有効ならPocketアイコンが使えます
[2015/11/02追記]
STINGER5では「FontAwesome 4.0.3」というウェブフォントが使用出来るように設定されています。
具体的には header.php に指定があります。
[php title=”header.php” start-line=”47″ decode=”true”]<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”>[/php]
記事を投稿した頃にはpocketのブランドアイコンが無かったため、参考にしたキャリコさんのところと同じく似たアイコン「[icon name=”check-square” class=”” unprefixed_class=””]check-square」を使用していました。
「FontAwesome 4.4」で「[icon name=”amazon” class=”” unprefixed_class=””]Amazon」や「[icon name=”get-pocket” class=”” unprefixed_class=””]pocket」などのアイコンが追加されているので、FontAwesome 4.4以降を指定している場合、pocketのブランドアイコンで表示させることができます。
header.phpにあるFontAwesomeの指定がを、4.4に変更します。（子テーマを作っている方は、そちらで修正することを推奨します。）
[php title=”header.php” start-line=”47″ decode=”true”]<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>[/php]
上の single.php の修正例の「<i class=”fa fa-check-square”></i>」となっている部分を、
[php title=”single.php” start-line=”43″ decode=”true”]<span style=”color:#ee4056;”> <i class=”fa fa-check-square”></i></span>
<a href=’http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>’ onclick=”window.open(this.href, ”, ‘height=300, width=600, menubar=no, toolbar=no, scrollbars=yes’); return false;”>あとで読む</a><?php if(function_exists(‘get_scc_pocket’)) echo ‘(‘.get_scc_pocket().’)’; ?>[/php]
「<i class=”fa fa-get-pocket”></i>」に変更します。
[php title=”single.php” start-line=”43″ decode=”true”]<span style=”color:#ee4056;”> <i class=”fa fa-get-pocket”></i></span>
<a href=’http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>’ onclick=”window.open(this.href, ”, ‘height=300, width=600, menubar=no, toolbar=no, scrollbars=yes’); return false;”>あとで読む</a><?php if(function_exists(‘get_scc_pocket’)) echo ‘(‘.get_scc_pocket().’)’; ?>[/php]
これで、さらにそれっぽくなります。
まとめ
今までは「ちょい読みしたい」「あとで読みたい」というものもブックマークを使っていました。
基本的にブックマークには「困った時の参考にしたい」ものなどを登録しているので、「ちょい読み」したいものまで登録していると、ごちゃごちゃしてきてしまいます。
Pocketにはタグ機能もあるので、また読みたくなりそうなものには、タグを付けておくと探しやすくなります。
いざというときのためにしっかり登録するブックマークと、「あ、あとで読もう」と気軽に登録するPocketで上手く使い分けられると便利そうです。
この記事で追加したとおり、投稿日のところの「あとで読む」からPocket登録と、このページを「あとで読む」に登録できます。（下のシェアボタンからも登録できます。）
どんな動作をするか確認がてら登録していただけると幸いです。
「add_filter(‘the_content’,’○○○’)」で記事に割り込みをしているもので、記事の先頭に何かを付けるタイプのものは同じ現象がありそうです。
