私はワードプレス（テーマ：賢威7）でブログを書いています。今日自分のブログを訪れてくれた人になりきって自分のブログを眺めてみました。そうすると記事の下にある「←前の記事（PREV）／次の記事（NEXT）→」というところがダサくて、こりゃークリックしてもらえないわ！って感じなことに気付きました。
そこで今回はこの「←前の記事（PREV）／次の記事（NEXT）→」というところを画像（サムネイル）付きにカスタマイズしてみました。
スポンサーリンク
PREV／NEXTの記事リンクはコピペだけで簡単！
とりあえず、変更前と変更後のイメージを見てみましょう。
変更前
う～ん、ダサい。魅力ない。
変更後
おー見やすい。ちょっとクリックしてみたくなる。
ちなみにスマホだとこう↓
うん、わかりやすい。イイ。
スポンサーリンク
やることは２つだけ
１．base.cssに貼りつける
ワードプレスの管理画面で、【外観】→【テーマの編集】→【base.css】を開いて、一番下に以下のコードをそのままコピペして変更を保存してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | /*-------------------------------- PREV NEXT ---------------------------------*/ #prev_next{ width:100%; margin: 36px 0 24px; padding:0; display: table; } #prev_next #prev, #prev_next #next{ width: 50%; padding:30px 10px 10px; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid; display: table-cell; position:relative; text-decoration:none; } #prev_next #prev p, #prev_next #next p{ font-size:90%; line-height:1.5; } #prev_next #prev:hover, #prev_next #next:hover{ background-color: rgba(238,238,238,0.7); } #prev_next #prev{ border-right:#ccc 1px solid; } #prev_next #prev_title, #prev_next #next_title{ font-size:90%; top:-1em; position:absolute; border: 1px #ccc solid; background:#fff; text-align: center; padding:3px; color:#666; } #prev_next #next_title{ right:10px; } #prev_next #prev img, #prev_next #next img{ margin:0 auto; } #prev_next #prev_no, #prev_next #next_no{ width: 50%; height:140px; padding:0 10px; display: table-cell; } #prev_next #prev_no{ border-right:#ccc 1px solid; } #prev_next_home{ margin:0 auto; background-color: #39f; border: solid 9px #fff; width: 100px; height:100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; box-shadow: 0 0 0 3px #39f; -webkit-box-shadow: 0 0 0 3px #39f; -moz-box-shadow: 0 0 0 3px #39f; text-align:center; } #prev_next_home:hover{ background-color: rgba(0,0,255,0.7); } #prev_next_home i{ color:#FFF; margin:10px auto ; font-size:60px; } /*-- ここまで --*/ /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (max-width: 780px) { } /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (min-width: 380px) { } /*media Queries PCサイズ ----------------------------------------------------*/ @media only screen and (min-width: 780px) { /*-- ここから --*/ /*-------------------------------------- 768px PREV NEXT --------------------------------------*/ #prev_next #prev, #prev_next #prev::before, #prev_next #prev::after, #prev_next #next, #prev_next #next::before, #prev_next #next::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } #prev_next #prev_title, #prev_next #next_title{ padding:3px 10px; } #prev_next #next_title{ right:10px; } #prev_next #prev img{ float:left; margin-right:10px } #prev_next #next img{ float:right; margin-left: 10px; } /*-- ここまで --*/ } |
２．single.phpに貼りつける
ワードプレスの管理画面で、【外観】→【テーマの編集】→【single.php】を開いて、以下のコードをそのままコピペしてください。ただ、コピーする場所がちょっと難しい。貼りつける場所を下のほうで説明したので確認してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!-- 前の記事 次の記事 --> <div id="prev_next" class="clearfix"> <?php $prevpost = get_adjacent_post(false, '', true); //前の記事 $nextpost = get_adjacent_post(false, '', false); //次の記事 if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき ?> <?php if ( $prevpost ) { //前の記事が存在しているとき echo '<a href="' . get_permalink($prevpost->ID) . '" title="' . get_the_title($prevpost->ID) . '" id="prev" class="clearfix"> <div id="prev_title">PREV</div> ' . get_the_post_thumbnail($prevpost->ID, array(100,100)) . ' <p>' . get_the_title($prevpost->ID) . '</p></a>'; } else { //前の記事が存在しないとき echo '<div id="prev_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i> </div></a></div>'; } if ( $nextpost ) { //次の記事が存在しているとき echo '<a href="' . get_permalink($nextpost->ID) . '" title="'. get_the_title($nextpost->ID) . '" id="next" class="clearfix"> <div id="next_title">NEXT</div> ' . get_the_post_thumbnail($nextpost->ID, array(100,100)) . ' <p>'. get_the_title($nextpost->ID) . '</p></a>'; } else { //次の記事が存在しないとき echo '<div id="next_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i> </div></a></div>'; } ?> <?php } ?> </div> |
貼りつける場所
賢威7であれば下で選択した部分の$next_link ～ <?php } という部分があるので、これは今までの「次の記事／前の記事」の古いバージョンなので削除しちゃいます。
※削除する部分に注意！
削除するのは$next_link ～ <?php } の部分だけです。下の選択範囲をよく見て注意して削除してください。
次に今削除した部分の少し上に</div><!--article-body-->という部分があるのでそのすぐ上に先ほどのコードをそのままコピペして変更を保存します。
以上！
これで無事終了です。表示を確認してみてください。
私も今日変更したばかりなので、この変更によってアクセス数などがどんなふうに変化するのか、追跡してみたいと思います。いずれ報告できればと思います。ではまた！＾＾
