もう訪問者を逃がさない！Gushの投稿日横にPocketのあとで読むリンクを追加する方法
BIBOlってますか？ジョニーです。(@jony073)
今日はブログ記事を検索から読みに来てくれた方のユーザビリティ工場を意識して記事投稿日の横に『あとで読む』ボタンを設置しようと思います。
せっかく検索などで記事までたどり着いてくださった読者の方が何らかの都合でネット環境から離れなくてはならない状況になったり、検索かたたどり着いたものの時間の都合により今は読めない状況になってしまって記事が読めなくなってしまう方に、もう一度記事を読んでいただくためPoketのあとで読むを設置しておくことで、ユーザビリティの向上につながると思うので設置方法をBiBoっておきます。
Poketの『あとで読む』のリンクの設置
Poketの『あとで読む』リンクの設置は簡単です。single.phpへ記述するだけで設置ができます。作業をする前にしっかりバックアップを取ってから行いましょう。
『Poket』アイコンを『Font Awesome』から使用
Font Awesomeへアクセスし、画面上のメニューより『Icons▼』をクリック
検索窓に『Pocket』と入力します
検索結果が表示されるので『get-Pocket』をクリック
画面下部にPocketのアイコンフォントのhtmlが表示されるのでテキストエディタ等にメモしておく
single.phpへコードを記述する
今回はジョニーの使用しているGush4に以下のコードを記述していきます。
外観⇒テーマの編集⇒single.phpへ進む
single.phpの投稿時間等が記述されている以下の『■■■』の部分にコードを挿入する
挿入するコード
|
1 2 |
<span style="color:#ee4056;"><i class="fa fa-bookmark"></i></span> <a href='http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>' onclick="window.open(this.href, 'PCwindow', 'menubar=no, toolbar=no, scrollbars=yes'); return false;">あとで読む</a> |
コードを挿入する場所
|
1 2 3 |
<!--ループ開始--> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <p class="date-time"><i class="fa fa-pencil-square-o"></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-refresh"></i>' , $mtime; ?>■■■</p> |
完成コード
|
1 2 3 4 |
<!--ループ開始--> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <p class="date-time"><i class="fa fa-pencil-square-o"></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-refresh"></i>' , $mtime; ?> <span style="color:#ee4056;"><i class="fa fa-bookmark"></i></span> <a href='http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>' onclick="window.open(this.href, 'PCwindow', 'menubar=no, toolbar=no, scrollbars=yes'); return false;">あとで読む</a></p> |
コードを挿入したら『ファイルを更新』をクリック
これで『Pocket』のあとで読むリンクの追加は完成です。
どうですか？ちょっとそれっぽくなったでしょ？
まとめ
Pocketのあとで読むリンクが記事の一番上にあると便利だと思います。っていうかジョニー自身が他のブログを読ませていただいているときに、あとで読むボタンを探してしまった経験もあり記事の投稿日の横にあればなぁと思ったことがきっかけでした。この作業の参考にさせて頂いたのはキャリコ(@calicocatxyz )さんの以下の記事です。Stingerのカスタマイズ記事が中心でいつも勉強させていただいています。
ブログのカスタマイズはもちろん見た目の良さも重要ですが、それよりもユーザビリティを考えた見やすくて操作し安いブログ作りが一番重要だと思います。どんだけ参考になる記事を書いていてもその記事が見つけにくかったりブログ自体が操作しにくかったら読者の方はすぐに『戻るボタン』か『閉じるボタン』を押して去って行ってしまいます。
ユーザビリティを考えたブログ作りを意識して楽しくカスタマイズしていきましょうね。
