超簡単にWordPressの投稿から抜粋を表示させてデザインや文字数を変更する方法

WEB開発 | 27, 02, 2019

WordPressで抜粋を表示させてデザインや文字数を変更する方法

WordPressの記事一覧ページなどに投稿本文からの抜粋を表示させたい場合があると思います。

今回はそんなときに役立つサンプルコードをいくつかご紹介したいと思います。

ではさっそくどうぞ。

抜粋を表示させるコード

<?php the_excerpt(); ?>

を任意の場所に貼り付けるだけで抜粋が表示されます。

抜粋をCSSでデザインする方法

CSSで装飾したい場合はheadlineタグやdivタグなどで囲ってそこにCSSを掛ければOKです。

例えばPHPには

<div class="content-md"><?php the_excerpt(); ?></div>

と書いて、CSSには

.content-md {
    color: #aaa;
    font-size: 13px;
}

と書けば弊社のWEBサイトの抜粋みたいに表示されるはずです。

抜粋末尾に表示される「…」を変更する

抜粋末尾に表示される「…」を変更したい場合は「function.php」に下記コードをコピペしてください。

function new_excerpt_more($more){
    global $post;
    return '...<a href="'. get_permalink($post->ID) . '">Read More</a>'; // 任意の文字に編集してください
}
add_filter('excerpt_more','new_excerpt_more',9999);

上記コードの「Read More」の部分は任意のテキストに変更してください。

抜粋の文字数を変更

抜粋の文字数を制限したい場合は「function.php」に下記コードをコピペしてください。

// 抜粋テキスト文字数制限
add_filter('the_excerpt', 'my_the_excerpt');
function my_the_excerpt($postContent) {
    $postContent = mb_strimwidth($postContent, 0, 50, "…","UTF-8"); // 50を変更すれば文字数変更可能
    return $postContent;
}

コードにも書きましたが、上記コードの「50」の部分を任意の文字数に変更すればOKです。

まとめ

いかがでしたでしょうか。

今回はWordPressの抜粋機能に焦点をあててTipsを書いてみました。

ではでは。

Writer

フクチ

フクチ| CEO


代表の福知です。 よろしくお願いします。






こちらの記事もおすすめ

Related Posts