AFFINGER5（WING）の子テーマJETの記事タイトル表示文字数を変更する方法について解説します。
問題
AFFINGER5（WING）の子テーマJETでは、トップページや関連記事などがマガジンスタイル（カード型）で表示されます。
JETでは、トップページのタイトル部分の文字数は30文字で表示されるようになっているため、少し長めのタイトルの場合、以下のように途中で文字が切れてしまいます。
同様に、関連記事部分のタイトルは、23文字表示となっているためこちらも途中で文字が切れてしまいます。
長過ぎるタイトルはSEO的に見ても推奨されていないので30文字で十分とも言えますが、少し長めのタイトルの場合やよく言われるように32文字でタイトルを作っている場合などは後ろの文字が消えて少し見栄えが悪いと感じる人もいるかと思います。
そこで、今回はJETで記事タイトルの表示文字数を変更する方法を紹介します。
単純に記事タイトルを全文表示するのは簡単です。JETの管理画面から設定できます。
「記事タイトルを省略しない」にチェックを入れるだけでOKです。
ただ、この方法だと注意書きにあるようにタイトルが長いとカードが長くなり見た目が悪くなる場合があります。
もちろん人によってはこれでOKという人もいると思います。そういう人は以下の作業は不要です。
以下で紹介するのは、タイトルを全文表示するのではなく抜粋する文字数を変更するという方法になります。
修正するファイル
子テーマのJET内にある以下のファイルを修正します。
- itiran-original-thumbnail-on.php
- itiran-pickup-top.php
- itiran-random-top.php
- itiran-thumbnail-on.php
- kanren-thumbnail-on.php
記事タイトルが表示されるのはトップページのほかアーカイブページや関連記事一覧なども含んでいるため複数ファイルの修正が必要です。
修正内容と修正箇所
修正内容
修正するのは上記各ファイル内のwp_trim_words関数でタイトルの文字数を省略している箇所です。
<?php echo wp_trim_words( get_the_title(), 23, '...' ); ?>上の例ではタイトルを23文字に省略させて表示しています。
この23という数字の部分を自分が表示させたいタイトルの文字数に変更します。
32文字で表示させたいという場合は以下のように「23」→「32」に変更します。
<?php echo wp_trim_words( get_the_title(), 32, '...' ); ?>各ファイルの修正箇所
以下修正するファイルと修正箇所になります。デフォルトのタイトル文字数は30か23になっているのでこの数字部分を変更してください。
JETのバージョンはver20191218を例に説明しています。
itiran-original-thumbnail-on.phpの110行目あたり
<?php if( trim( $GLOBALS["st_child_jet_data15"] ) !== '' ) : the_title(); else: echo wp_trim_words( get_the_title(), 30, '...' ); endif; ?>itiran-pickup-top.phpの47行目あたり
<?php st_rumdom_picktitile(); ?><?php if( trim( $GLOBALS["st_child_jet_data15"] ) !== '' ) : the_title(); else: echo wp_trim_words( get_the_title(), 30, '...' ); endif; ?>itiran-random-top.phpの152行目あたり
<?php st_rumdom_picktitile(); ?><?php if( trim( $GLOBALS["st_child_jet_data15"] ) !== '' ) : the_title(); else: echo wp_trim_words( get_the_title(), 30, '...' ); endif; ?>itiran-thumbnail-on.phpの102行目あたり
<?php if( trim( $GLOBALS["st_child_jet_data15"] ) !== '' ) : the_title(); else: echo wp_trim_words( get_the_title(), 30, '...' ); endif; ?>kanren-thumbnail-on.phpの111行目あたり
<?php echo wp_trim_words( get_the_title(), 23, '...' ); ?>修正箇所は以上です。
修正後、記事タイトルが変更した文字数で表示されることを確認しましょう。
上記ファイルの数字部分をすべて32に変更すると、32文字の記事タイトルでも以下のように途中で切れずに表示されるようになりました。
関連記事についても、32文字で表示されています。
注意点
JET自体がアフィンガーの子テーマのため、対象ファイルを子テーマにコピーして修正するということができません。
なので子テーマのJETを最新バージョンに更新したら再度この部分については修正する必要があります。
これから修正しようという人はJETの購入者限定ページより最新版をインストールしてから行うことをお勧めします。
