「あ、このページ、後で読もうっと(^-^)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のブランドアイコンが無かったため、参考にしたキャリコさんのところと同じく似たアイコン「check-square」を使用していました。
「FontAwesome 4.4」で「Amazon」や「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登録と、このページを「あとで読む」に登録できます。（下のシェアボタンからも登録できます。）
どんな動作をするか確認がてら登録していただけると幸いです。
コメント
[…] 「あとで読む」Pocketを登録してみた＆設置してみた | ぽぽづれ。 STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法 | キャリコ […]
昨日は追記のご連絡ありがとうございました。早速、追記された記事を拝見し header.php の記述を 4.4.0 のものに修正し、 single.php で「<i class=”fa fa-check-square”></i>」となっている部分を「<i class=”fa fa-get-pocket”></i>」に変更したのですが、私の環境ではフォントが表示されませんでした。取り急ぎ、報告までご連絡させていただきました。
でーさんさん、コメントありがとうございます。
FontAwesome4.4の記述はちゃんとされていたようですが、何かかしらのプラグインでFontAwesome4.1.0を使用しているらしく、そちらに上書きされている状態のようです。
どうせならpocketのアイコンの方が「それっぽい」ので、そのプラグインのバージョンアップか、定義を書き換えて治ると良いですね(^-^;