現在の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(); 」には複数のオプションが用意されており、引数を指定することにより、表示をカスタマイズすることができます。

 
例として、以下のように第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();?>