/ / / 【WordPress】「続きを読む」リンクの追加およびボタン化の方法

【WordPress】「続きを読む」リンクの追加およびボタン化の方法

2016053001

よそ様のブログを閲覧しているとトップページの本文抜粋の後ろによく見かける「続きを読む」リンクないしボタン。今回は、その実装方法をご説明して参ります。基本的には記載したソースコードのコピペでこと足ります。

「続きを読む」リンクの実装

使用テーマ内のfunctions.phpに下記ソースコードを追記してください。

// 本文抜粋の末尾に「続きを読む」リンクを追加
function new_excerpt_more($more) {
   return '...<a class="readmore" href="'. esc_url( get_permalink() ) . '">' . '>>続きを読む' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

フィルターフック<excerpt_more>を使用し、テンプレートタグ<the_excerpt()>による本文抜粋取得時、末尾に「続きを読む」リンクを付随するようにしています。<excerpt_more>については下記リンクをご参照ください。

実装完了後のリンクデザインは下記のようになります。

2016-05-30_12h52_20

なおリンク文字列を変更したい場合は、ソース内の<‘>>続きを読む’>部分を任意の内容に変更してください。これにて「続きを読む」リンクの実装は完了です。

「続きを読む」リンクのボタン化

続いて、先ほど実装したリンクのボタン化を実装して参ります。使用テーマ内のstyle.cssに下記ソースコードを追記してください。

.readmore {
   display: inline-block;
   *display: inline;
   zoom: 1;
   font-size: 14px;
   color: #fff !important;
   background-color: #444;
   text-align: center;
   text-decoration: none;
   padding: 6px 20px;
   margin: 20px -15px 0 0;
   box-sizing: border-box;
   float: right;
}
.readmore:after {
   content: '';
   display: block;
   clear: both;
}
.readmore:hover {
   color: #fff;
   background-color: #DA4453;
   text-decoration: none;
}

.readmore {…}>が通常時のボタンスタイルの定義。<.readmore:hover {…}>がボタンオンカーソル時のボタンスタイルの定義です。

実装完了後のボタンデザインは下記のようになります。

2016-05-30_12h53_22

ボタンデザインをカスタマイズしたい場合は、下記プロパティをよしなに変更してください。

プロパティ
  • font-size : 文字の大きさ
  • color : 文字色
  • background-color : ボタンの背景色
  • text-align  文字列の水平位置(left/center/rightから選択)
  • text-decoration : 文字列の装飾。下線の表示有無など
  • padding : ボタン内の空白の間隔
  • margin  ボタンそのものの位置間隔
  • float  ボタンの右/左寄せ(left/right/noneから選択)

ちなみに<float>による右/左寄せを指定した場合、後ろに続く要素が<float>指定した位置(左右どちらか)の反対側に回り込みます。ですので、回り込ませたい要素の末尾(逆に言えば回り込ませたくない要素の手前)で<clear>を使用し、回り込みを解除させる必要があります。そのための記述が<.readmore:after {…}>となります。

モバイル表示時の右/左寄せ解除

デフォルトでは<float:right>により「続きを読む」ボタンを右寄せ表示していますが、テーマによってはモバイルブラウジング時にデザインが崩れる場合があるかと思います。

その際ボタンの右寄せを解除したければ、style.cssに下記ソースコードを追記してください。

@media (min-width: 1px) and (max-width: 540px) {
   .readmore {
      float: none;
      margin: 10px 0;
      width: 100%;
   }
}

float>による右寄せを解除し、<width>を100%とすることでボタン横幅を親要素に表示できる最大幅に設定しています。

するとモバイルブラウジング時、下記のように表示されます。

2016-05-30_12h57_40

<@media screen and (max-width: 540px){…}>と記述していますが、これはブラウジング時の最大幅が540px以下の場合に{}で括られたスタイルを適用するという意味合いです。ですので、もっと[小さい/大きい]画面の場合にモバイル用のスタイルを適用したければ、<540px>の部分を任意の数値に置換してください。

まとめ

いかがでしょうか。「続きを読む」リンクないしボタンを実装することで、ユーザビリティが若干アップするかと思います。ご参考までに。

にほんブログ村 漫画ブログへ
↑ランキングバナーをクリック頂けると励みになります。
この記事をシェアする
このブログをフォローする