私はワードプレス(テーマ:賢威7)でブログを書いています。今日自分のブログを訪れてくれた人になりきって自分のブログを眺めてみました。そうすると記事の下にある「←前の記事(PREV)/次の記事(NEXT)→」というところがダサくて、こりゃークリックしてもらえないわ!って感じなことに気付きました。

そこで今回はこの「←前の記事(PREV)/次の記事(NEXT)→」というところを画像(サムネイル)付きにカスタマイズしてみました。


スポンサーリンク

PREV/NEXTの記事リンクはコピペだけで簡単!

とりあえず、変更前と変更後のイメージを見てみましょう。

変更前

う~ん、ダサい。魅力ない。

変更後

おー見やすい。ちょっとクリックしてみたくなる。

ちなみにスマホだとこう↓

うん、わかりやすい。イイ。



スポンサーリンク


やることは2つだけ

1.base.cssに貼りつける

ワードプレスの管理画面で、【外観】→【テーマの編集】→【base.css】を開いて、一番下に以下のコードをそのままコピペして変更を保存してください。

2.single.phpに貼りつける

ワードプレスの管理画面で、【外観】→【テーマの編集】→【single.php】を開いて、以下のコードをそのままコピペしてください。ただ、コピーする場所がちょっと難しい。貼りつける場所を下のほうで説明したので確認してください。

貼りつける場所

賢威7であれば下で選択した部分の$next_link ~ <?php } という部分があるので、これは今までの「次の記事/前の記事」の古いバージョンなので削除しちゃいます。

※削除する部分に注意!

削除するのは$next_link ~ <?php } の部分だけです。下の選択範囲をよく見て注意して削除してください。

 

次に今削除した部分の少し上に</div><!--article-body-->という部分があるのでそのすぐ上に先ほどのコードをそのままコピペして変更を保存します。

以上!

これで無事終了です。表示を確認してみてください。

私も今日変更したばかりなので、この変更によってアクセス数などがどんなふうに変化するのか、追跡してみたいと思います。いずれ報告できればと思います。ではまた!^^

 

スポンサーリンク