the_title() や the_excerpt()、カスタムフィールドなどの出力文字数を制限する方法のまとめ

  • 27152
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WordPressで企業サイトを構築する場合、「トップページにタイトルと記事本文を30文字で表示制限をかけて出力する」などの処理を施すことが多いのですが、忘れがちなので備忘録も兼ねてまとめました。

他にも「ブログのサイドメニューに記事のタイトルだけを20文字で表示制限をかけて出力する」のような処理の場合でも使えるカスタマイズです。

今回はthe_title() でタイトルを出力する場合、また、the_content() や the_excerpt() で記事本文や抜粋を出力する場合、さらに、カスタムフィールドのtextarea に入力した内容を情報を出力する場合で、それぞれ具体的な制御方法をまとめて紹介させていただきます。

(1)テーマファイル側でタイトルの文字数を制限する

まずはthe_title() で出力されたタイトルを、functions.phpを触らずにテーマファイル側で完結させる方法です。

任意の文字数(以下の例だと30文字)で表示制限して、以後を…で省略します。
<?php if (strlen($post->post_title) > 30) {
echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 30) . '…'; } else {
the_title();
} ?>



(2)functions.php をカスタマイズして、タイトルの文字数を制限する

今度はfunctuons.php をカスタマイズして、the_title() で出力されたタイトルの文字数を制限する方法です。
<?php
function titlelimitchar($title){
  if(mb_strlen($title) > 30 && !(is_single()) && !(is_page())){
    $title = mb_substr($title,0,30) . "…";
  }
  return $title;
}
add_filter( 'the_title', 'titlelimitchar' );
?>



(3)the_content() の出力内容の文字数を制限する

the_content() で出力された記事本文の文字数を制限する方法です。

<?php echo mb_substr(strip_tags($post-> post_content),0,30) . '…'; ?>


(4)the_excerpt() の出力内容の文字数を制限する

the_excerpt() で出力された記事抜粋の文字数を制限する方法です。

<?php echo mb_substr(get_the_excerpt(), 0, 30) . '…'; ?>
<?php //echo mb_substr(get_the_excerpt(), 0, 30); ?>


(5)カスタムフィールドのtextarea の出力内容の文字数を制限する

Custom Field Template などのカスタムフィールド拡張プラグインを利用する場合に、カスタムフィールドのtextarea に入力した文字数を制限する方法です。

<?php
    $pattern = '/(^.{30})(.+)/u';
    $subject = post_custom('textarea');
    $matches = array();
    preg_match($pattern, $subject , $matches);
    if ($matches[2] != '') {
        $out = $matches[1] . '…';
    } else {
        $out = $subject;
    }
    echo($out);
?>



(6)Types を利用したカスタムフィールドのtextarea の出力内容の文字数を制限する

Types のプラグイン利用してカスタムフィールドのtextarea に入力した文字数を制限する方法です。

「wpcf-○○○○」の部分には、filedスラグを入力します。

<?php echo mb_strimwidth(post_custom('wpcf-○○○○'), 0, 30 , '…', utf8); ?>

  • 27152
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す