先日、WordPressでカスタマイズをしていたところ、記事によってレイアウトが変わってしまうということがありました。
記事タイトルの文字数によって枠の広さなどのレイアウトが変わってしまうと、見栄えが良くないんですよね。
そこで今回は記事のタイトルを、一定文字数を超えたら省略するようにしてみましょう。
はじめに
今回紹介する方法は「the_title( )」で書かれたコードでの説明になります。
the_excerptでタイトルを取得している場合はうまくいかないと思うので注意してください。
また、今回の方法では「テーマ」を編集することになるので、誤ったカスタマイズをしてしまうとサイトが壊れてしまう可能性があるので、すべて自己責任でお願いします。
ではまず、テーマのバックアップをしていきましょう。
CyberDuckなどのFTPソフトを用いてバックアップを取っておいてください。
バックアップを取るコードはthe_title()が書かれているものだけでも良いですが、できれば全体のバックアップをしておくと良いと思います。
バックアップが完了したら「タイトル」が書かれたコードを見ていきます。
コードを確認する
the_title()があるコードを開いてください。
私が使っているテーマは「Stinger7」で、今回編集するthe_title()「newpost-thumbnail-on.php」の中にある「NewPost」の文字数を省略していきます。
このコードでは以下のように構成されています。
</a></dt>
<dd>
<h5><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h5>
<div class="smanone2">
<?php the_excerpt(); //抜粋文 ?>
</div>
</dd>
ここを見るとわかるとおり「<?php the_title( ); ?>」が書かれています。
このコードがタイトルを取得しているコードになっているので、書き換えていきましょう。
タイトルを省略する
では実際にタイトルを省略していきましょう。
今回の方法では「省略する文字数」「省略した時に置き換えるキーワード」などを設定できます。
例えば「7文字」で省略するようにし、省略する時のキーワードを「…」にした場合・・・「あいうえおかき…」というような表示になるということですね。
タイトルを省略できるようにするには「the_title( )」を以下のように書き換えてください。
</a></dt>
<dd>
<h5><a href="<?php the_permalink(); ?>">
<?php if (strlen($post->post_title) > 35) {
echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 35) . '…'; } else {
the_title();
} ?>
</a></h5>
<div class="smanone2">
<?php the_excerpt(); //抜粋文 ?>
</div>
</dd>
</dl>
具体的には「the_title( )」を以下のコードに書き換えてあります。
<?php if (strlen($post->post_title) > 35) {
echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 35) . '…'; } else {
the_title();
} ?>
このようにすれば、タイトルを指定した文字数で省略することができます。
先のコードで解説すると、35文字を超えたら「…」で省略するという記述です。
10文字で省略したい時は、コードの35を10に書き換えるなどしてサイトに合わせて編集してください。
省略した時の文字は' … ‘を書き換えれば変更することができます。「続きを読む>>」のように変更しても良いかもしれませんね。
まとめ
今回の方法を使えば、どれだけ長いタイトルであってもレイアウトを崩すことなく、サイトをカスタマイズすることができるようになります。
タイトルの文字数はSEO的な観点で言うと30文字前後が良いらしいです。
私の場合収まりきらない時がかなりあるので、今回のように省略することができるようになれば、文字数をそこまで気にすることなく記事を作成することができるようになりました。
【WordPress】サイトにいいねボタンを設置するプラグイン WP ULikeの使い方 - クリアメモリ
ぜひ活用してみてください。
ではまた。
