WordPress Twenty Twelveでタイトル記事数をfunctionを使って抜粋する方法


現在のTwentyTwelveのサイトレイアウトだと、タイトル記事が長すぎるとレイアウトが崩れてしまうことがあり、タイトル記事を制限してみました。

完成イメージ

スクリーンショット_2013_04_14_8_56

 

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引数を使用することで、記事タイトルに<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();?>

この記事が気に入ったら
いいね ! しよう

Twitter でin44y

最新の関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です