関連記事の“抜粋文”と“記事を読む”を消してすっきりさせてみました。【Simplicity】

記事の下にある、Simplicityに元々備わっている関連記事を表示する部分。ここが記事タイトル以外に抜粋文と「記事を読む」という文字があって、見づらいなあとずっと感じていました。

なので関連記事部分を下図のように変更してみました。「アイキャッチ+記事タイトルのみ」に、そして各記事の間にドットのラインを表示するよう変更してみました。

“文字の塊”があるとそれだけでそこを読み飛ばしてしまう、という人が世の中には少なからずいます。そうでなくてもごちゃごちゃした文字の塊は敬遠されがちです。

なので、恐らくどうせ読まれていないであろう文字は極力削った方が、ユーザーの利便性も上がるだろうし、それでPVが少しでも増えればこちらとしても喜ばしいです。

ということで以下、やったことの解説になります。
ちなみにスマホでの表示はこんな感じです。

関連記事表示をアイキャッチと記事タイトルだけにする方法

このカスタマイズはPHPファイルをいじりますので、まずは子テーマフォルダにいじるPHPファイルを複製します。Simplicityの元のテーマフォルダから今回いじるPHPファイルをダウンロードして、それをそのまま子テーマフォルダにアップロードします。

関連記事部分のPHPファイルを子テーマに複製する

今回いじる、関連記事部分の表示に関わるコードが書かれているファイルは「related-entry-card.php」というものです。まずこれをサーバーからダウンロードしてきます。

エックスサーバーであれば「ファイルマネージャー」から「ドメイン名のフォルダ」→「public_html」→「wp_content」→「themes」→「simplicity2」と進めば、その階層に「related-entry-card.php」というファイルが入っています。それをダウンロード(ファイル名をクリック)します。

そうしたらそのファイルを、中身をいじることなくそのまま、またファイルマネージャーの今度は「simplicity2」フォルダがある階層と同じ階層にある「simplicity2-child(任意の名前、子テーマフォルダというフォルダの中にアップロードします。

アップロードする時、右下に「ファイル名の文字コード」というのがありますが、これはたぶん「UTF-8」にしておいた方がいいと思います。詳しいことは分からないのですが、文字化けを防ぐために、確かUTF-8にすべきだったかと。(もしかしたら今はそういう問題がないのか、分からないけど、とりあえず私はUTF-8でいつもアップロードしています)

子テーマフォルダ内にアップロードしたら、それでもうそのファイルをWordPressの管理画面内「テーマの編集」からいじることができます。
WordPressのダッシュボードに移動します。

記事の抜粋文の表示を無くす

子テーマ内にアップロードしたPHPファイルから、記事の抜粋文の表示を指示している部分のコードを削除します。“スニペット”が該当する部分です。具体的にはrelated-entry-card.phpファイルの中ほどにある以下のコードを丸々削除します。

<p class="related-entry-snippet">
<?php echo get_the_custom_excerpt($post->post_content,get_excerpt_length()).'';//カスタマイズで指定した文字の長さだけ本文抜粋>

下の画像はエックスサーバー上で見た時のPHPファイルですが、削除するのは下図の部分です。

削除したら「ファイルを更新」します。
これで抜粋文は消えました。

「記事を読む」の文字を消す

抜粋文を消したら、「記事を読む」の文字リンクも消したほうがすっきりして良いです。パソコンから見ると別に邪魔にも感じないかもしれませんが、スマホの画面で見ると邪魔くさいかと思います。

この文字を消すのは簡単で、WordPressのダッシュボードから「カスタマイズ」→「テーマ内テキスト」の中に“「記事を読む」の変更”という項目がありますので、そこに書かれている文字を削除して空欄にします。

空欄にするだけで「記事を読むリンク」は消えます。

各記事の間に横線を引く

関連記事部分の文字数がガクンッと減ったら、何となくそのままではバランスが悪いので、各記事の間にラインを挿入しました。

これは子テーマのスタイルシートにCSSを記述すればOKです。

/*関連記事の各記事間に破線挿入*/
.related-entry{
  border-bottom: 1px dotted;
}

おわり

本当はこのタイトルの文字を
simplicityの関連記事

このぐらいの位置に持ってこれたら最高なんですが、ちょっとすぐにはやり方が分からないので、後回しに。

慣れないうちは「ちょっとスッキリし過ぎじゃない?」ぐらいに感じるかもしれないけど、いろんな人のブログを一ユーザーとして見て回っているとやっぱり文字数は可能な限り少ない方が読むなと実感したので、手を加えてみました。

同じSimplicityテーマでこの記事の手順を完全に踏んでいてもこのブログと完全に同じにはならないので、CSSに不慣れな人の混乱を避けるために次のCSSも紹介しておきます。こちらもこの記事でのカスタマイズと一緒に子テーマに追加したCSSの記述です。

/*関連記事(Relation)の見た目の調整*/
.related-entry-title a{
  font-size:15px;
  color:#444;
}

これも一緒にコピペすれば今のところ現時点の当ブログの関連記事欄と全く同じデザインになるはずです。

シェアする

RSS/Feed

この記事と同じカテゴリーの記事一覧はこちら→ Simplicityカスタマイズ, ブログの話


トップへ戻る