現在のTwentyTwelveのサイトレイアウトだと、タイトル記事が長すぎるとレイアウトが崩れてしまうことがあり、タイトル記事を制限してみました。
完成イメージ
TOPページのタイトル記事数に表示制限をかけ、抜粋後に「…」を表示しようと思います。
the_title 記事タイトルはどのように表示されているのか
記事タイトルの取得は、WordPressテンプレートタグの「 the_title(); 」を使用し取得します。テーマフォルダの中にある、「 content.php 」の20行目付近を見てみましょう。
19 <?php if ( is_single() ) : ?> 20 <h1 class="entry-title"><?php the_title(); ?></h1>
the_title オプション
「 the_title(); 」には複数のオプションが用意されており、引数を指定することにより、表示をカスタマイズすることができます。
書式:the_title(‘第1引数’,’第2引数’,’第3引数’)
第1引数: タイトルの直前に出力されるコード、テキストを記述します。デフォルトは空です。
第2引数: タイトルの直後に出力されるコード、テキストを記述します。デフォルトは空です。
第3引数: タイトルの値をカスタマイズする際などには、「 false 」を指定します。デフォルトは、「 true 」になります。
※今回は、タイトル値をカスタマイズする為、この値を「 false 」として設定します。
第1引数: タイトルの直前に出力されるコード、テキストを記述します。デフォルトは空です。
第2引数: タイトルの直後に出力されるコード、テキストを記述します。デフォルトは空です。
第3引数: タイトルの値をカスタマイズする際などには、「 false 」を指定します。デフォルトは、「 true 」になります。
※今回は、タイトル値をカスタマイズする為、この値を「 false 」として設定します。
例として、以下のように第1引数と第2引数を使用することで、記事タイトルに<h2>タグを付けて表示することが可能です。
<?php the_title('<h2>','</h2>');?>
タイトル記事の文字数を制限 function.phpに追記する
テーマフォルダの中にある、「 function.php 」に以下のコードを追記します。タイトル記事の文字数を設定し、タイトル記事が設定した値以上の場合は、「…」を表示して記事タイトルを表示するようにしています。
function excerpt_title($str_len) { $title = the_title( '', '', false); if ( mb_strlen( $title ) > $str_len ) { $title = mb_substr( $title, 0, $str_len ) . '....'; echo $title; } else { echo $title; } } add_filter('excerpt_title');
excerpt_titleの使い方
TwentyTwelveをテーマにお使いのかたは、テーマフォルダの中にある、「 content.php 」の23行目付近に<?php the_title();?>があるので該当行をコメントアウトもしくは削除し、以下のコードの4行目を追加し、<?php excerpt_title(); ?>の()内に抜粋するタイトル記事の文字数を記述します。
21 <?php else : ?> 22 <h1 class="entry-title"> 23 <?php /*<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>*/ ?> 24 <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_ title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php excerpt_title(20); ?></a>
Twenty Twelve以外の方は、記事タイトルを表示した箇所に以下のコードを記述し、()内に、抜粋するタイトル記事の文字数を記述します。
<?php excerpt_title();?>