Weblasts

ページャーで出力されるタイトルを少なくする

ページャーでのレイアウト崩れを防ぎたい!

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_」

一つ目のパラメータに今回は3文字にしたいので「3」を入力しています
パラメータに関しては、3が入っただけで他はなにもいじっていません

書き換え後

<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>

記述が終わったら更新してみると見た目が変化します

コピペだけで終わるのでおすすめ

Recommend Post