もう悩まないで!WordPressでタイトルの文字数を制限して取得する方法
  • もう悩まないで!WordPressでタイトルの文字数を制限して取得する方法
  • 記事公開:2017/12/11
  • 最終更新:2019/02/18

もう悩まないで!WordPressでタイトルの文字数を制限して取得する方法

Wordpressでタイトルの文字数を制限して取得する方法をご紹介します。テーマのカスタマイズで記事タイトルを取得したいが、文字数を制限したいときなどにお役立てください。文字数を制限して表示していると伝えるテクニックも合わせてご紹介しています。

この記事は約 5 分で読めます。

WordPressでタイトルの文字数を制限して取得する方法

TOPページに新着情報を表示させる時など、記事のタイトルを取得したい場面に多々出会います。

しかも、タイトルの文字数を制限して取得したい!
そんな場面が意外と多いです。

そこで今回は、タイトルの文字数を制限して取得する方法をまとめてみました。
タイトルの文字数を制限して取得したい方は参考にしてください。

それでは、見ていきましょう。

まず、単純に文字数を制限してタイトルを取得するコードをご紹介します。
それが以下のコードです。

<?php echo mb_substr($post->post_title, 0, 20); ?>

タイトルを頭から20文字だけ取得するコードです。

取得する文字数は、上記の「20」の値を変更することで任意の文字数に変えられます。
30文字取得したい場合は「30」としてやればOKです。

しかし、タイトルの文字数を制限すると、タイトルによっては単語の途中で切れてしまう可能性がでてきます。

「もう悩まないで!Wordpressでタイトルの文」

仮に文字数を制限して取得したタイトルが上記だったらどうでしょうか?
変な位置でタイトルが切れていてちょっとおかしいですよね。

タイトルに続きがあるのかないのかが分からない状態です。
不具合が生じているようにも見えます。

そこで考えられるのが、文字数を制限して取得したタイトルの最後に「…」を表示させ、続きがあることを表現する方法です。

以下のコードで、文字数を制限したタイトルの最後に「…」を表示させることができます。

<?php echo mb_substr($post->post_title, 0, 20).'...'; ?>

この形式であれば、タイトルに続きがあるんだよ~と伝えることができます。

末尾の文字列は自由に変更できます。
上記コードの「…」を任意の文字列に変更してください。

ただこのコードですと、制限した文字数以内のタイトルでも末尾に「…」がついてしまいます。

「WordPressの徹底解剖…」

タイトルに続きはないのに、まるで続きがあるように見えます。
ちょっと違和感がありますよね。

最終的に選ぶべきコードは、制限した文字数以上のタイトルなら「…」を表示させ、制限した文字数以内なら「…」を表示しないコードです。そのコードが以下のコードです。

<?php
if(mb_strlen($post->post_title, 'UTF-8')>20){
$title= mb_substr($post->post_title, 0, 20, 'UTF-8');
echo $title.'……';
}else{
echo $post->post_title;
}
?>

タイトルを頭から20文字だけ取得して、タイトルが20文字以上の場合、末尾に「…」を表示させ、タイトルが20文字以内であれば、末尾に「…」を表示しないコードです。

取得する文字数は「20」の値を変更することで任意の文字数に変えられます。
このコードのみ「20」の値が2つあるので、両方変更する必要がありますので注意してください。
30文字にするなら両方の値を「30」に変更しましょう。

まとめ

WordPressでタイトルの文字数を制限して取得する方法をご紹介しました。

TOPページの記事一覧やLOOPなどで、見た目を整えるためにタイトルの文字数を制限したい場面などに役立つコンテンツです。タイトルの文字数を制限したい方は、ぜひ参考にしてください。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2015/09/17

    WordPressコメントフォームのデフォルト項目を非表示にする方法

    WordPressコメントフォームのデフォルト項目を非表示にする方法をご紹介します。WordPressでは、コメントフォームにいくつかの項目がデフォルトで表示されています。コメントを増やすためには、できるだけ入力項目を減らすのが効果的。入力項目を非表示にしたい方、参考にしてください。 記事を読む

  • 2015/09/17

    WordPress管理画面の投稿一覧ページに投稿IDを表示させる方法

    WordPress管理画面の投稿一覧ページに投稿IDを表示させる方法をご紹介します。必要を感じてカスタマイズしましたが地味に便利です。参考にしてください。 記事を読む

  • 2016/01/23

    WordPress管理画面の投稿一覧にカスタムフィールドの値を表示させる方法

    WordPress管理画面の投稿一覧にカスタムフィールドの値を表示させる方法をご紹介しています。カスタムフィールドの値を投稿一覧から確認できると便利だと思いませんか?興味のある方は参考にしてください。5分後には投稿一覧にカスタムフィールドの値が表示されています。 記事を読む

  • 2019/03/06

    WordPressでレスポンシブデザインを作成するときに役立つコンテンツ12選

    レスポンシブデザインの構築で役立つコンテンツをまとめました。 レスポンシブデザインを構築する時、大抵の場合で必 ... 記事を読む

  • 2015/09/17

    WordPressの投稿画面でエディタのスクロール位置を固定するなら「Preserve Editor Scroll Position」が便利!

    WordPressの投稿を下書き保存すると本文のスクロールバーが最上部まで戻ってしまい、書きかけの部分まで移動して続きを書く。これって面倒じゃないですか?今回は投稿を下書き保存しても保存した部分を表示したままにできる「Preserve Editor Scroll Position」をご紹介します。 記事を読む

コメントを残す

(必須)

CAPTCHA