the_excerpt()で取得した記事の抜粋の長さや省略記号([…])を変更する方法
WordPressでは、the_excerpt()やget_the_excerpt()を用いて、記事の抜粋を取得することが出来ます。
これらでは、抜粋の文字数はデフォルトで55単語、日本語などのマルチバイト文字では110文字になっています。
また、省略記号がデフォルトのままだと[…]になってしまうので、今回はその変更方法を紹介します。
記事の抜粋の長さを変更する
日本語の抜粋をする際は、WP Multibyte Patch>プラグインが有効になっている必要があります。
WP Multibyte Patchをインストールしてない方は、まずインストールしてください。
記事の抜粋の長さを変更するには、以下のコードをfunctions.phpに記載しましょう。
function twpp_change_excerpt_length( $length ) {
return 170;
}
add_filter( 'excerpt_length', 'twpp_change_excerpt_length', 999 );
コードの解説
excerpt_lengthというフィルターを使っています。
2行目の数字を変更することで、抜粋の文字数を変更することが出来ます。
また、filterの第3引数を999にすることで、WordPressの処理が設定を上書きすることを防いでいます。
省略記号[…]を変更する
省略記号を変更するには、以下のコードをfunctions.phpに記載してください。
function wpdocs_excerpt_more( $more ) {
return '...';
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );
コードの解説
excerpt_moreというフィルターを使用しています。
2行目の文字列を変更することで、任意の省略記号に変更することが出来ます。
【補足】「続きを読む」ボタンを設置する
上記のようにthe_excerpt()で記事の抜粋を表示し、その下に「続きを読む」ボタンを設置する例を紹介します。
記事の抜粋を表示したい箇所に、以下のコードを記述してください。
<?php the_excerpt(); ?>
<div class="more-link-container"><a class="more-link" href="<?= get_permalink($post->ID) ?>">続きを読む</a></div>
style.cssはこんな感じです。
.more-link-container {
text-align: right;
}
.more-link {
position: relative;
display: inline-block;
border: 1px #000 solid;
padding: 12px 100px;
line-height: 26px;
margin-top: 20px;
box-sizing: border-box;
clear: both;
color: #000;
font-size: 14px;
}
.more-link::before {
content: "";
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #000;
border-right: solid 2px #000;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
right: 50px;
margin-top: -4px;
}
.more-link:hover {
background: rgb(108, 101, 90);
color: #fff;
font-weight: bold;
text-decoration: none;
}
おわりに
the_excerpt()を利用した記事の抜粋のカスタマイズ方法でした。
「続きを読む」ボタンは、サイトに合わせてお好みでカスタマイズしてみてください。