PresentNote

抜粋記事の「続きを読む→」をデザインする方法-WordPress Twenty Eleven篇-

Twenty Eleven でトップページやアーカイブページの記事一覧を抜粋表示にした場合、「続きを読む」の表示を変更したいと思ったことはありませんか?
デフォルトでは「続きを読む→」という感じで、テキストと→(矢印)だけです。目立ちませんし、味気ない。まぁこのブログはその味気ないままなんですが、そこは突っ込まないことにして、今回のコンテンツはこの「続きを読む→」のデザインを変更する方法に関してです。

記事の中にMoreタグを挿入した場合

More タグというのがあります。このタグを挿入すると、そのタグより前の文章だけが抜粋され、それ以降は「続きを読む」になります。記事の一覧ページやアーカイブページなどでは抜粋表示となり、個別投稿ページで全文表示となります。

ビジュアルエディタの場合)

テキストエディタの場合)


この場合、「続きを読む→」に class が割り振られます。自動的に。それがこちら。

.more-link

ですので、この class に文字色や背景・画像などを指定すれば「続きを読む→」を自由にデザインできます。具体的なスタイルシートの書き方についてはのちほど。

Moreタグを使わず、常時抜粋表示になるようにテンプレートをカスタマイズしている場合

WordPress には、抜粋表示用のタグが用意されています。それがこちら。

<?php the_excerpt(); ?>

このタグを使えば、記事は抜粋表示になります。
このタグを使った、記事一覧の抜粋表示の方法についてはこちら。

トップページを抜粋記事の一覧表示にする-WordPress Twenty Eleven篇-


このカスタマイズを行えば、いちいち記事ごとに More タグを指定しなくても、一定の文字数で自動的に抜粋表示してくれます。しかしこの場合、先ほどのような特定の class が割り振られません。【 more-link 】という class を指定しても、何も変化しないのです。
ではどのように指定すればいいのでしょうか?

「続きを読む」にclassを追加する方法

この編集は親テーマの functions.php を編集する必要がありそうです。該当箇所は以下の部分。

function twentyeleven_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

<a> タグの中に class を指定すれば OK です。

function twentyeleven_continue_reading_link() {
return ' <a class="任意のセレクタを指定" href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

他にも、<a> タグの外を、<span> や <div> で囲っても OK です。

function twentyeleven_continue_reading_link() {
return ' <div class="任意のセレクタを指定"><a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a></div>';
/* </a>の後を必ず閉じるのを忘れないように! */

<span> で囲むとインライン扱いなので、抜粋記事に続くように「続きを読む→」が表示されます。

<div> で囲むとブロック要素になるため、抜粋記事と「続きを読む→」が改行されて別段落として表示されます。

functions.phpを編集する場合の注意点

本来、テーマのカスタマイズは、子テーマをつくって編集するのが望ましいのですが、functions.php の場合はそうはいかない場合があります。親テーマと同じ内容を子テーマに記載すると、エラーが発生してサイトが表示されなくなるのです。
そのため、親テーマで既に記述されている内容を編集する場合は、親テーマの functions.php を直接編集する必要があります。そうなると、テーマのアップデートをした際に編集内容が元に戻ってしまいますので注意してください。

「続きを読む→」の編集テクニック

以上の方法で、「続きを読む→」をデザインするための下準備は整いました。あとはスタイルシートで編集をするだけです。

「続きを読む→」をスタイルシートでデザインする方法

指定した class に背景や文字色、余白などを指定していけば OK です。以下にサンプルを載せておきます。(functions.php の続きを読むの部分を <div> タグで囲った場合)

スタイルシートの記述例)

/* 続きを読む */
.read-more a {
 float: right;
 width: 100px;
 padding: 0.3em 1em;
 color: #eee;
 background: #000;
 border: 1px solid #666;
}

実際の表示)

「続きを読む→」の文言や矢印を変更する方法

「続きを読む」は「続きを読む」と表示されています。またその後の「→」も矢印のままです。これを好きな言葉に変更してみましょう。この変更は functoins.php を直接編集します。「Continue reading」と書かれている部分を好きな言葉に変更できます。

function twentyeleven_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'もっと読む!(好きな言葉に置き換え) <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) . '</a>';

矢印に関しては、HTML の特殊文字用コード(&rarr;)で記述されていますので、他のコードにしてもいいですし、消し去っても OK。その他の記号をそのまま記述して大丈夫です。

「続きを読む→」を画像にする方法

テキストではなく画像で表示させたい場合も、functions.php を直接編集します。テキストに該当する部分を消して、画像指定の <img> タグを使えば OK です。画像は絶対パスで指定しましょう。(Moreタグでの抜粋表示の場合は無効です。)

functions.phpの記述)

function twentyeleven_continue_reading_link() {
return ' <div class="read-more"><a href="'. esc_url( get_permalink() ) . '">' . __( '<img src="絶対パスで画像のURLを指定" alt="続きを読む" />', 'twentyeleven' ) . '</a></div>';

スタイルシートの記述例)

/* 続きを読む */
.read-more {
float: right;
}
/* マウスポインタを合わせると、光ったようになります */
.read-more:hover {
filter: alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
}

実際の表示)

モバイルバージョンを終了