0 Shares

もう訪問者を逃がさない!Gushの投稿日横にPocketのあとで読むリンクを追加する方法

ジーンズのPocket

BIBOlってますか?ジョニーです。(@jony073)

今日はブログ記事を検索から読みに来てくれた方のユーザビリティ工場を意識して記事投稿日の横に『あとで読む』ボタンを設置しようと思います。

せっかく検索などで記事までたどり着いてくださった読者の方が何らかの都合でネット環境から離れなくてはならない状況になったり、検索かたたどり着いたものの時間の都合により今は読めない状況になってしまって記事が読めなくなってしまう方に、もう一度記事を読んでいただくためPoketのあとで読むを設置しておくことで、ユーザビリティの向上につながると思うので設置方法をBiBoっておきます。

スポンサーリンク

Poketの『あとで読む』のリンクの設置

Poketの『あとで読む』リンクの設置は簡単です。single.phpへ記述するだけで設置ができます。作業をする前にしっかりバックアップを取ってから行いましょう。

『Poket』アイコンを『Font Awesome』から使用

Font Awesomeへアクセスし、画面上のメニューより『Icons▼』をクリック
poketアイコンフォント

検索窓に『Pocket』と入力します
Pocket検索

検索結果が表示されるので『get-Pocket』をクリック
get pocket

画面下部にPocketのアイコンフォントのhtmlが表示されるのでテキストエディタ等にメモしておく
アイコンフォントget

single.phpへコードを記述する

今回はジョニーの使用しているGush4に以下のコードを記述していきます。

外観⇒テーマの編集⇒single.phpへ進む
外観からテーマ編集へ進む

single.phpの投稿時間等が記述されている以下の『■■■』の部分にコードを挿入する

挿入するコード

コードを挿入する場所

完成コード

コードを挿入したら『ファイルを更新』をクリック
single.phpを更新

これで『Pocket』のあとで読むリンクの追加は完成です。

リンク追加比較画像

どうですか?ちょっとそれっぽくなったでしょ?

まとめ

Pocketのあとで読むリンクが記事の一番上にあると便利だと思います。っていうかジョニー自身が他のブログを読ませていただいているときに、あとで読むボタンを探してしまった経験もあり記事の投稿日の横にあればなぁと思ったことがきっかけでした。この作業の参考にさせて頂いたのはキャリコ(@calicocatxyz )さんの以下の記事です。Stingerのカスタマイズ記事が中心でいつも勉強させていただいています。

ブログのカスタマイズはもちろん見た目の良さも重要ですが、それよりもユーザビリティを考えた見やすくて操作し安いブログ作りが一番重要だと思います。どんだけ参考になる記事を書いていてもその記事が見つけにくかったりブログ自体が操作しにくかったら読者の方はすぐに『戻るボタン』か『閉じるボタン』を押して去って行ってしまいます。

ユーザビリティを考えたブログ作りを意識して楽しくカスタマイズしていきましょうね。

この記事が気に入ったら
いいね ! しよう

Twitter で