【WordPress】yStandardカスタマイズ、関連記事のスタイルを変える

2020年2月9日

今回は、今まで覚えた子テーマとショートコードの知識を応用して、投稿ページの記事下にある関連記事のスタイルをカスタマイズしてみたいと思います。

子テーマの使い方
人気記事ランキングのショートコード

※yStandardはv3からv4へアップグレードがありました。この記事はv3をお使いの方向けになっています。

関連記事のスタイル

デフォルトの関連記事は、このようにカード型で横に3つ、縦に2つのかたちで並んでいます。
これをいろんなケースに応じてカスタマイズしてみます。

post-related.phpを編集する

まず、目指すファイルを見てみます。
これは親テーマにあるpost-related.phpです。ショートコードのところで見たパラメータが並んでいますね。
このファイルをコピーして編集します。

※テーマエディターで直接親テーマを編集しても可能ですが、ミスがあった時のリカバーの大変さや、テーマ更新時に再編集の必要があったりするので、子テーマの利用をおすすめします。

PCにダウンロード

編集は、親テーマからpost-related.phpファイルをダウンロードして、テキストエディタで編集し、子テーマにアップロードするという手順です。

既に子テーマにtemplate-partsなどをアップロードしている方は、post-related.phpを編集して上書きするだけになります。

【WordPress】yStandardカスタマイズ、子テーマの使い方
今回は、子テーマを使ったカスタマイズについて紹介したいと思います。使用テーマはyStandardです。 子テーマの使い方 子テーマって? 子テーマは自分だけのカ…
seguimiii.com
「FTPソフトとは何?」というところから「WordPressでFTPソフトを使うメリット」「FileZillaの使い方」まで詳しく解説します。初心者の方向け。
saruwakakun.com

post-related.phpを編集

親テーマからダウンロードしてきたpost-related.phpです。
このファイルをいじってカスタマイズします。パラメータはショートコードのときのものを参考に。

【WordPress】yStandardカスタマイズ、人気記事ランキングのショートコード
今回は、[ys]人気記事ランキングを例にショートコードのカスタマイズを紹介したいと思います。独学だと必要なことだけしか知らないので、おそらく基本的なことなんだろ…
seguimiii.com

列と表示件数

'col_pc'    => 2,
'count'     => 4,

例えば、2×2で表示させたい場合。
col_pcでPCでの列を2に、countで4件表示にします。

表示タイプ

'list_type'    =>'list',

表示タイプをカード型からリスト型に変更する場合。
list_typeをlistに変更します。

画像無し

'list_type'    => 'list',
'col_pc'       => 1,
'show_img'     => 'false',

show_imgをfalseにすることでサムネイル画像を非表示にできます。
show_imgはデフォルトにはないので、加筆します。

このようにパラメータを変更したり、必要であれば加筆してpost-related.phpを編集します。

タイトル変更

'title'    => 'あわせて読みたい',

titleで「あわせて読みたい」や「こちらの記事もおすすめ」など変更できます。

子テーマにアップロード

編集し終わったpost-related.phpを子テーマにアップロードします。
親テーマと同じフォルダ構成を維持したままというのがポイントです。

template-partsフォルダの中にpartsフォルダ、その中にpost-related.phpファイルです。

関連コンテンツと併用する場合に、関連記事も似たようなスタイルだとちょっとくどいかなと感じたので、サムネを非表示にしてスッキリさせてみました。

いかがだったでしょうか。
これまでの子テーマの使い方とショートコードのカスタマイズを応用して、記事下の関連記事をいじってみました。
少しでも手を加えると、”自分でやれてる”感があってカスタマイズも楽しくなりますね。