今回は、今まで覚えた子テーマとショートコードの知識を応用して、投稿ページの記事下にある関連記事のスタイルをカスタマイズしてみたいと思います。
子テーマの使い方
人気記事ランキングのショートコード
※yStandardはv3からv4へアップグレードがありました。この記事はv3をお使いの方向けになっています。
目次
関連記事のスタイル
デフォルトの関連記事は、このようにカード型で横に3つ、縦に2つのかたちで並んでいます。
これをいろんなケースに応じてカスタマイズしてみます。
post-related.phpを編集する
まず、目指すファイルを見てみます。
これは親テーマにあるpost-related.phpです。ショートコードのところで見たパラメータが並んでいますね。
このファイルをコピーして編集します。
※テーマエディターで直接親テーマを編集しても可能ですが、ミスがあった時のリカバーの大変さや、テーマ更新時に再編集の必要があったりするので、子テーマの利用をおすすめします。
PCにダウンロード
編集は、親テーマからpost-related.phpファイルをダウンロードして、テキストエディタで編集し、子テーマにアップロードするという手順です。
既に子テーマにtemplate-partsなどをアップロードしている方は、post-related.phpを編集して上書きするだけになります。
post-related.phpを編集
親テーマからダウンロードしてきたpost-related.phpです。
このファイルをいじってカスタマイズします。パラメータはショートコードのときのものを参考に。
列と表示件数
'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ファイルです。
関連コンテンツと併用する場合に、関連記事も似たようなスタイルだとちょっとくどいかなと感じたので、サムネを非表示にしてスッキリさせてみました。
いかがだったでしょうか。
これまでの子テーマの使い方とショートコードのカスタマイズを応用して、記事下の関連記事をいじってみました。
少しでも手を加えると、”自分でやれてる”感があってカスタマイズも楽しくなりますね。