ページャーで出力されるタイトルを少なくする
ページャーでのレイアウト崩れを防ぎたい！
next_post_link()やprevious_post_link()で出力する前後記事のタイトルが長すぎると見た目が崩れたりして困ることもあるかと思います
なので探してみたらとても便利なものがありましたので紹介だけしておきます
参考サイト
参考サイト：前後のリンクのタイトルを文字数で丸める
まずはfunctions.phpに下記コードをコピペ
新しい関数を作っていると思われます
functions.php
/* 前後リンクを生成（長いタイトルを丸める）
============================================= */
function Custom_previous_post_link($maxlen = -1, $format='« %link', $link='%title', $in_same_cat = false, $excluded_categories = '') {
Custom_adjacent_post_link($maxlen, $format, $link, $in_same_cat, $excluded_categories, true, $maxlen);
}
function Custom_next_post_link($maxlen = -1, $format='%link »', $link='%title', $in_same_cat = false, $excluded_categories = '') {
Custom_adjacent_post_link($maxlen, $format, $link, $in_same_cat, $excluded_categories, false);
}
function Custom_adjacent_post_link($maxlen = -1, $format='« %link', $link='%title', $in_same_cat = false, $excluded_categories = '', $previous = true) {
if ( $previous && is_attachment() )
$post = & get_post($GLOBALS['post']->post_parent);
else
$post = get_adjacent_post($in_same_cat, $excluded_categories, $previous);
if ( !$post )
return;
$tCnt = mb_strlen( $post->post_title, get_bloginfo('charset') );
if(($maxlen > 0)&&($tCnt > $maxlen)) {
$title = mb_substr( $post->post_title, 0, $maxlen, get_bloginfo('charset') ) . '…';
} else {
$title = $post->post_title;
}
if ( empty($post->post_title) )
$title = $previous ? __('Previous Post') : __('Next Post');
$title = apply_filters('the_title', $title, $post->ID);
$date = mysql2date(get_option('date_format'), $post->post_date);
$rel = $previous ? 'prev' : 'next';
$string = '';
$link = str_replace('%title', $title, $link);
$link = str_replace('%date', $date, $link);
$link = $string . $link . '';
$format = str_replace('%link', $link, $format);
echo $format;
}
あとは元々あるnext_post_link()やprevious_post_link()を探してきて書き換えます
まずはテンプレートタグの先頭に「Custom_」を付けます。
更に一つ目のパラメータにタイトルを表示する文字数を指定
二つ目以降は今まで通りにすると指定した数値でタイトルが区切られ決まった文字数で出力されるようになります。
このコードを書き換えてみます
書き換え前
<div class="pagenav">
<span class="old">
<?php previous_post_link('%link','<i class="fas fa-chevron-circle-left"></i> %title');?>
</span>
<span class="new">
<?php next_post_link('%link','%title <i class="fas fa-chevron-circle-right"></i>');?>
</span>
</div>
表示はこのような形
テンプレートタグ名の先頭に「Custom_」
一つ目のパラメータに今回は３文字にしたいので「３」を入力しています
パラメータに関しては、３が入っただけで他はなにもいじっていません
書き換え後
<div class="pagenav">
<span class="old">
<?php Custom_previous_post_link(3,'%link','<i class="fas fa-chevron-circle-left"></i> %title');?>
</span>
<span class="new">
<?php Custom_next_post_link(3,'%link','%title <i class="fas fa-chevron-circle-right"></i>');?>
</span>
</div>
記述が終わったら更新してみると見た目が変化します
コピペだけで終わるのでおすすめ
