「あとで読む」Pocketを登録してみた&設置してみた

PHP

「あ、このページ、後で読もうっと(^-^)o」

というとき。

普段からChromeを使っているので、とりあえずスマートフォンでブックマーク→自宅PCのChromeからモバイルのブックマークを開いて→さっき登録したサイトを表示…とやっていたのですが…。

ページを登録して「あとで読む」サービス「Pocket」というのがあるようなので、登録してみました。

Pocketに登録してみたキッカケ

そもそも「Pocket」に興味を持ったのが、こちらのページ。

STINGER5のカスタマイズ記事を沢山扱っていて、ここのところ参考にさせていただいていたサイトさんです。

このページを見て自分も「あとで読む」ボタンを設置してみたいと思ったのと、そもそも普段「あとで読む」をスムーズにできるサービスや機能が無いかなぁと思っていたので良い機会でした。

さっそく登録

Pocketのサイトから登録します。

「Google+アカウント」を持っていれば、連携させてログインすることもできるようです。

メールアドレスで登録する場合、「メールで登録」を押して、氏名やメールアドレスを入力します。

pocket-top

自分の場合、見ていたキャリコさんのPocketリンク設置の記事にある「あとで読む」をクリックして、

read-it-later

メールアドレスでPocketに登録して、

pocket-login

そのまま「あとで読む」に登録されました。

pocket-read-it-later

Chrome拡張機能

PCのブラウザとして「Chrome」を使っている場合、拡張機能で見ているページをすぐに「あとで見る」に登録する「Save to Pocket」というのがあります。

chrome-ext-save-to-pocket

「Save to Pocket」をインストールすると、Chromeの右上に「Pocket」のアイコンが表示され、「あとで読みたい」と思ったページでクリックすると、直ちに登録してくれます。

chrome-pocket

既に登録されているページの場合、アイコンが赤くなっているので分かります。(登録直後に赤くなるだけでした(^-^;)

Androidの「Pocket」アプリ

Android、iOS向けにアプリがあります。

同じアカウントを登録しておくことで、「あとで読む」を共有できます。

外ではスマートフォンで「あとで読む」登録。

休憩時間にはタブレットで「あとで読む」を開く。

家に帰ったらのんびり「あとで読む」を開く。

そんな使い方が出来ます。

 

さて、Androidの「Pocket」をインストールすると、「共有…」メニューに「Pocket」が表示されます。

chrome-menu

「Pocket」を選べば、すぐに「あとで読む」に登録されます。

share-pocket

今まで「共有…」メニューをあまり使っていなかったので知りませんでしたが、最後に使った「共有」のアイコンが表示されるので、次からはそのアイコンを押すだけで「あとで読む」に登録できます。

chrome-share-icon

アプリ「Pocket」を起動すれば、「あとで見る」に登録してある一覧が表示されます。

android-pocket

STINGER5の記事に「あとで読む」を付けてみる

STINGER5の記事タイトルのところに、「あとで読む」ボタンをつけてみました。

popozure-later

参考にしたキャリコさんのところと同じく、「single.php」の更新日を表示している辺りに追加します。

[2015/11/02追記]※「Pocket」のカウントの取得にはWordPressプラグイン「SNS Cache Count」を利用しています。こちらのプラグインを有効にするとカウントも表示されます。

ちゃんと登録もできました。

popozure-read-it-later

FontAwesomeが有効ならPocketアイコンが使えます

[2015/11/02追記]

STINGER5では「FontAwesome 4.0.3」というウェブフォントが使用出来るように設定されています。

具体的には header.php に指定があります。

記事を投稿した頃にはpocketのブランドアイコンが無かったため、参考にしたキャリコさんのところと同じく似たアイコン「check-square」を使用していました。

「FontAwesome 4.4」で「Amazon」や「pocket」などのアイコンが追加されているので、FontAwesome 4.4以降を指定している場合、pocketのブランドアイコンで表示させることができます。

header.phpにあるFontAwesomeの指定がを、4.4に変更します。(子テーマを作っている方は、そちらで修正することを推奨します。)

上の single.php の修正例の「<i class=”fa fa-check-square”></i>」となっている部分を、

「<i class=”fa fa-get-pocket”></i>」に変更します。

 

これで、さらにそれっぽくなります。

pocket-read-it-later

まとめ

今までは「ちょい読みしたい」「あとで読みたい」というものもブックマークを使っていました。

基本的にブックマークには「困った時の参考にしたい」ものなどを登録しているので、「ちょい読み」したいものまで登録していると、ごちゃごちゃしてきてしまいます。

Pocketにはタグ機能もあるので、また読みたくなりそうなものには、タグを付けておくと探しやすくなります。

いざというときのためにしっかり登録するブックマークと、「あ、あとで読もう」と気軽に登録するPocketで上手く使い分けられると便利そうです。

 

この記事で追加したとおり、投稿日のところの「あとで読む」からPocket登録と、このページを「あとで読む」に登録できます。(下のシェアボタンからも登録できます。)

どんな動作をするか確認がてら登録していただけると幸いです。

コメント

  1. 昨日は追記のご連絡ありがとうございました。早速、追記された記事を拝見し 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のアイコンの方が「それっぽい」ので、そのプラグインのバージョンアップか、定義を書き換えて治ると良いですね(^-^;

  2. […] 「あとで読む」Pocketを登録してみた&設置してみた | ぽぽづれ。 STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法 | キャリコ […]

タイトルとURLをコピーしました