賢威7.0

人気PVランキングウィジェットの本文を非表示+文字数を変更する方法:賢威7.0

pv-ranking-thumbnail

今回は 賢威7で追加された、人気記事ランキングのウィジェットをカスタマイズする方法をご紹介します。

この記事では、

  1. 抜粋記事の文字数を変更する方法
  2. 抜粋記事を非表示にする方法

の2つを紹介していきますが、どちらも編集する箇所はほとんど同じです。

「ウィジェットの表示内容を変更」というと、手間がかかって大変…というイメージがありますが、今回編集する箇所は多くありません。慣れてくれば意外と手軽に出来るカスタマイズです。

カスタマイズ前

↓ 抜粋記事の文字数が少し多め(80文字)

pv-widget-before

カスタマイズ後

カスタマイズ 1
↓ 抜粋記事の文字数を変更(10文字)

pv-widget-excerpt-after-css

カスタマイズ 2
↓ 抜粋記事を非表示にする(0文字にする)

pv-widget-after-css

[ad]

ちなみに今回は「画像+ランキング番号のリスト」で進めていきます。
他のランキングでも同じようにカスタマイズ出来るので、お好みの表示形式で大丈夫です。

pv-widget-admin-area

また、今回はPHPファイルを編集するので、バックアップを取ってから作業するようにして下さい。画面が真っ白になることもあるので、小さいものでもPHPコードのミスには要注意です。

今回編集するコード

人気ランキングウィジェットを表示させるコードは、親テーマの functions.php に書かれているので、functions.php を編集していきましょう。

functions.php の2312行目付近にある、ページのPV数を表示するウィジェット と書かれたコメントが見つかると思います。

keni-functions-php

ページのPV数を表示するウィジェット というコメントの下を見ていくと、80行くらい下にある、2399行目付近の以下のコードがあります。
このコードで抜粋記事の文字数をコントロールしているので、今回はこのコードを編集していきましょう。

if (mb_strlen($content) > 80)  $content = mb_substr($content,0,80)."...";
keni-functions-php-excerpt

1.抜粋記事の文字数を変更する

まずは抜粋記事の文字数を変更します。

表示する文字数を決めているのは下のコードの 80 という部分なので、これを変更すれば、お好みの文字数に変更することが出来ます。

if (mb_strlen($content) > 80)  $content = mb_substr($content,0,80)."...";

ここでは試しに 10 文字にしてみます。

if (mb_strlen($content) > 10)  $content = mb_substr($content,0,10)."...";

↓ 本文の抜粋部分が10文字に制限されました。

pv-widget-10-char

もし文字数が思うようにコントロール出来ない場合は、WP Multibyte Patch という、WordPressに最初からインストールされているプラグインを有効化してみてください。
今回のカスタマイズに限らず、文字数関連の不具合は WP Multibyte Patchがかなり効果的です。

https://ja.wordpress.org/plugins/wp-multibyte-patch/

1-1. CSSでスタイリング

文字数を制限しただけでは余白が少し大きいので、余白と合わせて一緒に文字の大きさも調整しましょう。

以下のコードを追加するファイルは、親テーマの base.css でも、子テーマの CSS ファイルでも、お好みのファイルで大丈夫です。

.main-body .ranking-list li {
    margin-bottom: 20px;
    border-bottom: 1px dotted #ccc;
}
.sub-conts .ranking-list > li .rank-title {
    font-size: 1em;
}
.rank-thumb {
    margin-right: 16px;
}
pv-widget-excerpt-after-css

2.抜粋記事を非表示にする

それでは今度は抜粋記事自体を非表示にします。

foreach の下の $contnet から始まる行と、その下の行をコメントアウトします。

$content = strip_tags(strip_shortcodes($post_data->post_content));

if (mb_strlen($content) > 80)  $content = mb_substr($content,0,80)."...";
keni-functions-php-comment-out

これで抜粋記事が消えました。

keni-functions-php-delete-1

一応抜粋記事は消えていますが、このままでは空の <p> タグが残ってしまうので、余裕があれば以下の作業もしておくと良いかもしれません。

一手間かけることで余分な <p> タグを減らすことが出来ます。

2-1. 空の p タグを非表示にする

コメントアウトした if... の下に、 switch で始まるコードがあるので、
このコードの中にある以下の箇所をコメントアウトします。

echo "<p class=\"rank-desc\">".esc_html(strip_tags($content))."</p>\n";

このコードは functions.php 内に合計6箇所出てきますが、全てコメントアウトします。
1つずつ探すのも大変なので、テキストエディタの検索機能や置換機能を使うのがオススメです。

pv-widget-functions-delete-2

2-2. CSSでスタイリング

それでは最後にCSSでスタイリングしましょう。
以下のコードを親テーマの base.css や子テーマの CSS ファイルに追加すれば完成です。

.main-body .ranking-list li {
    margin-bottom: 0;
}
.sub-conts .ranking-list > li .rank-title {
    font-size: 1em;
}
.rank-thumb {
    margin-right: 16px;
}

余白や文字の大きさは、上のコードの数値を変更すればお好みで調整できます。

pv-widget-after-css