賢威7.0

最新情報リストに表示されるタイトルを指定の文字数にする方法:賢威7.0

今回の記事では、WordPressテーマ: 賢威7 のトップページに表示される最新情報リストのタイトルを、指定の文字数に制限する方法を紹介したいと思います。

サムネイルを非表示にする方法は別の記事で紹介しているので、最新情報リストをもっとコンパクトに表示させたい!という方はぜひ参考にして下さい。
最新情報リストのサムネイルを非表示にする方法:賢威7.0

カスタマイズ前

↓ カスタマイズを何もしていない状態の最新情報リスト

recent-post-list-before

カスタマイズ後

カスタマイズ 1

↓ 最新情報リストのタイトル(Hello worldなどの記事タイトル部分)を10文字に制限

recent-post-list-after-1

カスタマイズ 2

↓ 最新情報リストのタイトル(Hello worldなどの記事タイトル部分)を20文字に制限

recent-post-list-after-2

[ad]

1. 今回のカスタマイズで編集するコード

最新情報リストのサムネイルを管理しているのは、親テーマ(賢威7本体)の functions.php なので、今回は子テーマではなく、親テーマの functions.php を編集していきましょう。

functions.php の282行目付近に functions newposts_keni() という関数がありますが、これが最新情報リストを動かす関数です。
今回のカスタマイズではこの関数を編集して、最新情報リストのタイトルを変更していきます。

keni-functions-php-newposts-keni

2. カスタマイズしやすいように、一度タイトルをコメントアウト

50行ほど下がっていくと、330行目付近に while が見つかると思います。
この while の下にある2つ目の

$res_data .= ...

がタイトルを表示させるコードなので、行の先頭に // を付けてコメントアウトします。

これで一旦タイトルは非表示になります。

// $res_data .= "<h3 class=\"news-title\"itemprop=\"headline\"><a href=\"".esc_attr(get_permalink())."\" rel=\"bookmark\">".esc_html(get_the_title())."</a></h3>\n";

3. タイトルの文字数を制限するコードを追加

次にタイトルの文字数を制限するコードを追加しましょう。

3-1. タイトルを10文字に制限

まずはタイトルを10文字に制限します。

先ほどコメントアウトした行の前に以下のコードを追加すると、文字数が10文字に制限されます。

$res_data .= "<h3 class=\"news-title\"itemprop=\"headline\"><a href=\"".esc_attr(get_permalink())."\" rel=\"bookmark\">";
$res_data .= (mb_strlen(get_the_title()) > 10) ? esc_html(mb_substr(get_the_title(),0,10))."..." : esc_html(get_the_title());
$res_data .= "</a></h3>\n";
functions-php-after

↓ タイトル(Hello worldなどの記事タイトル部分)を10文字に制限
recent-post-list-after-1

3-2. タイトルを20文字に制限

20文字に制限する場合は、先ほどのコードで登場する 10 という数字を 20 に変更すれば、20文字に制限することが出来ます。
(10という数字は2箇所あるので、注意してください)

$res_data .= (mb_strlen(get_the_title()) > 20) ? esc_html(mb_substr(get_the_title(),0,20))."..." : esc_html(get_the_title());

↓ タイトル(Hello worldなどの記事タイトル部分)を20文字に制限
recent-post-list-after-2

20文字に制限する場合と同じように、30文字など他の文字数に制限する場合についても、同じ要領で数字を変更すれば大丈夫です。

4. サムネイルも非表示に

タイトルをカスタマイズするという今回の目的から少し外れてしまいますが、最後にサムネイルも合わせて非表示にしましょう。

下のコードのように編集すれば、サムネイルも非表示にすることができます。今回はこれで完成です!

$res_data .= "<article class=\"news-item\"  hentry itemtype=\"http://schema.org/BlogPosting\" itemscope=\"itemscope\">\n" ;

$res_data .= "<h3 class=\"news-title\"itemprop=\"headline\"><a href=\"".esc_attr(get_permalink())."\" rel=\"bookmark\">";
$res_data .= (mb_strlen(get_the_title()) > 20) ? esc_html(mb_substr(get_the_title(),0,20))."..." : esc_html(get_the_title());
$res_data .= "</a></h3>\n";

// タイトルを表示させる元のコード
// $res_data .= "<h3 class=\"news-title\"itemprop=\"headline\"><a href=\"".esc_attr(get_permalink())."\" rel=\"bookmark\">".esc_html(get_the_title())."</a></h3>\n";

// サムネイル
// if (get_the_post_thumbnail(get_the_ID())) $res_data .= "<div class=\"news-thumb\">\n<a href=\"".esc_attr(get_permalink())."\">".get_the_post_thumbnail(get_the_ID(), 'small_thumb')."</a>\n</div>\n";

$res_data .= "<div class=\"news-date\"><time datetime=\"".get_the_time("Y-m-d")."\" itemprop=\"datePublished\">";
keni-functions-php-after-2 recent-post-list-after-3