• HOME
  • WordPress
  • WordPressのトップページ記事タイトルを「...」省略させない方法

WordPressのトップページ記事タイトルを「...」省略させない方法

この記事のURLとタイトルをコピーする
WordPress

WordPress のトップページに表示されている記事タイトルを、「...」で省略されちゃうんだけど..どうしたらいいんだろう?

って悩みを、解決していきます。モバイルで表示したときの記事タイトルだけで、パソコンの場合はちゃんと正しいタイトルが表示されるんです。テンプレートデザインの都合上ですね。

新着記事タイトルが「...」で省略される状態とは、こんな感じです↓

【詳細】WordPressのトップページ記事タイトルが、省略されている状態とは?

Bloom mobile title false
画像:記事タイトルが「...」で省略された状態

ちなみにこの症状で、管理人はなんども悩まされております。理由は、テンプレートをアップデートすると、新着記事のタイトルが「...」で省略されてしまうんです。

そのたびに修正の方法を調べたり、考えたりする羽目になっていたので、忘備録的にやり方をまとめておきますね。

というわけで今回は、WordPressのトップページ記事タイトルを「...」省略させない方法を、さくっと解説していきます。

今回の解説につかう WordPress テンプレートは、TCD さまのテンプレートを使用しています↓

使用しているテーマ

WordPressのトップページ記事タイトルを「...」省略させない解決方法【3ステップ】

WordPressのトップページ記事タイトルを「...」省略させない方法を、解説していきます。

なるべくわかりやすく、そしてほかのテーマでも応用しやすいように、3ステップで解説していきます。

テーマを編集しますので、かならずバックアップすることを忘れず、自己責任にてやってみてくださいね!

それでは、いってみよ〜!

【ステップ1】テーマエディターで、WordPressテンプレートを選択する

ステップ1のやり方手順
  • WordPress の管理画面にログインする
  • サイドバーの 外観 -テーマエディター をクリック
  • 編集するテーマを選択が、修正したいテンプレートであることを確認する

ステップ1は、テーマエディターでテンプレートを選択してください。

テーマの編集画面がでたら、ステップ1は完了です。

【ステップ2】トップページの「PHP」ページをひらく

ステップ2のやり方手順
  • template-parts をクリック
  • index-tab-content.php をクリック

ステップ2は、トップページの「PHP」ページをひらきます。

ステップ2は、使っている WordPress のテーマによってかわります。

トップページは「index.php」が基本なのですが、「Bloom」の場合はタブコンテンツで新着記事を表示しています。だから「index-tab-content.php」が、記事タイトルの省略に関係しているわけですね。

ここまでで、ステップ2は完了です。

【ステップ3】省略するコードの数字を修正する

【修正まえ】※ index-tab-content.php 310行目

<h2 class="p-blog-list__item-title p-article__title"><?php echo is_mobile() ? wp_trim_words( get_the_title(), 25, '...' ) : mb_strimwidth( get_the_title(), 0, 92, '...' ); ?></h2>

【修正あと】※ index-tab-content.php 310行目

<h2 class="p-blog-list__item-title p-article__title"><?php echo is_mobile() ? wp_trim_words( get_the_title(),  125, '...' ) : mb_strimwidth( get_the_title(), 0, 92, '...' ); ?></h2>

ステップ3は、省略するコードの数字を修正します。

「Bloom」の場合は、 index-tab-content.php 310行目にある「get_the_title(),」のうしろにある数字を、変更します。上記の赤文字部分ですね。

テンプレートのデフォルト値は「25」でした。日本語(全角)は1文字2バイト換算のため、モバイルで 12 文字しか表示されず、残りは「...」で表示されるってことですね。

今回は趨勢しやすいように、「125」に修正したので、62文字ぐらいまでタイトルに表示できる設定です。SEO的には 32 文字ぐらいがベストなので、数値は「64」でいいでしょう。

さいごに、ファイルを更新をクリックすれば完了です。

以上で、WordPress のトップページ記事タイトルを「...」省略させない方法の解説はおわりです。

【結果】WordPressのトップページ記事タイトルを、省略せず表示できた!

Bloom mobile title true
画像:モバイルの記事タイトル省略「...」を解決した状態

3ステップを実際にやってみた結果、省略しないタイトルを表示させることができました。

モバイル版の表示範囲がせまくても、ちゃんとタイトルは全文表示させたほうがいいですよね。

わたしもさいしょはデザイン上、省略されてもいいかなぁ〜なんて思っていたんですが...友人にブログをチェックしてもらったところ、こんなことを言われました↓

タイトルがないと記事内容がわからないから、クリックしたくならないよ?
やっぱり、そうだよねぇ...

毎回テンプレートを修正する必要はありますが、面倒な作業でもないので、今回の方法で対応していこうと思います。

そこまで、テンプレートのアップデートがあるわけじゃありませんからね!

WordPressのトップページ記事タイトルが、省略されている状態とは?

WordPressのトップページ記事タイトルが、省略されている状態を確認してみましょう。

使用しているテンプレートによって変わりますが、このブログの場合はモバイル表示させたときに省略されてしまうんです。たとえば、こんな感じで↓

Bloom mobile title false
画像:記事タイトルが「...」で省略された状態
トップページの記事タイトル「...」省略例
  • 省略後タイトル:【レビュー】はじめよう!楽しくマスターするGarageBand iOS...
  • 正しいタイトル:【レビュー】はじめよう!楽しくマスターするGarageBand iOS版 ~iPhoneでここまでできる!~

新着記事の文字数を制限することで、デザイン的なくずれをなくすことができます。だから、デフォルトでモバイル版のテンプレートで文字数省略されているんでしょうね。

ただ SEO も大事にするブロガーは、だいたいの文字数ってそろってくるもんですよね。だから、文字数制限をなくしても、さほどデザインのくずれが気にならないこともおおいんですよ。

記事タイトルは省略するよりも、全文みせてあげたほうが、読者にとってもやさしいデザインとなることは間違いありません。

あとがき

WordPressのトップページ記事タイトルを「...」省略させない方法を、解説させていただきました。まとめると、こんな感じ↓

3ステップまとめ
  • 【ステップ1】テーマエディターで、WordPressテンプレートを選択する
  • 【ステップ2】トップページの「PHP」ページをひらく
  • 【ステップ3】省略するコードの数字を修正する

3ステップをおこなえば、「Bloom」テンプレートなら確実に記事タイトルの省略機能を、省くことができます。

あらためて、ステップ1から挑戦してみる方は、こちらからどうぞ↓

【ステップ1】テーマエディターで、WordPressテンプレートを選択する

今回の記事は、毎回おなじように調べたり、探したりする時間を効率化するために、忘備録的な記事になってしまいました。ほかのテンプレートでも、応用できると思いますので、参考にしてみてください。

そのほか、WordPress やブログに関する悩みや便利な使い方をまとめた記事がありますので、あわせてこちらもどうぞ↓

関連する記事

この記事のURLとタイトルをコピーする
記事へのお問い合わせ