今回社内のwordpressでできているとあるサイト修正の為、カスタマイズする部分がありました。
ネット上には色々情報はあるものの、深く追わないと分からなかったこともあったので、ここに記録に残します。（テーマはlightningを使用）
今回カスタマイズしたのは以下の２つ。
１．お知らせ表示の「次の記事」「前の記事」カスタマイズ
２．お知らせ表示上部のパンくずリストのカテゴリを非表示にしたい
まず、１について。
デフォルトだと、アイキャッチ画像が表示されてしまいます。
このアイキャッチ画像を非表示にして、前後の記事に移動できるリンクを作りたいと思います。
修正するファイルは、
wordpress\wp-content\themes\lightning\functions.php
|
1 2 3 4 5 |
add_filter( 'lightning_next_prev_options', function( $options ){ $options['layout'] = 'card-horizontal'; $options['display_image'] = false; return $options; } ); |
このコードを追記。これでアイキャッチ画像は消え、前後の記事へ行くリンクが表示されます。
$options～の各項目は改変できる部分で、変えたい部分を追記していきます。
その元の$optionsはどこで定義されているかというと、
\wordpress\wp-content\themes\lightning_g3\template-parts\loop-item.php
に記載がありました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$options = array( // card, card-noborder, card-intext, card-horizontal , media, postListText. 'layout' => 'media', 'display_image' => true, 'display_image_overlay_term' => true, 'display_excerpt' => true, 'display_date' => true, 'display_new' => true, 'display_taxonomies' => false, 'display_btn' => true, 'image_default_url' => false, 'overlay' => false, 'btn_text' => __( 'Read more', 'lightning' ), 'btn_align' => 'text-right', 'new_text' => __( 'New!!', 'lightning' ), 'new_date' => 7, 'class_outer' => 'vk_post-col-xs-12 vk_post-col-sm-12 vk_post-col-lg-12', 'class_title' => '', 'body_prepend' => '', 'body_append' => '', ); |
各項目について、chatGPTにお願いしました。
「このコードは、WordPressのテーマやプラグインで使用される可能性が高い、VK_Component_Postsというクラスのthe_viewメソッドを呼び出しています。このメソッドは、指定された投稿（$post）を指定されたオプション（$options）で表示するために使用されます。
$options配列内の各項目は次のように構成されています：
- ‘layout’: 投稿の表示レイアウトを決定します。例えば、’card’はカード形式、’media’はメディア（画像や動画）を含むレイアウトなどが考えられます。
- ‘display_image’: 画像の表示を制御します。trueであれば表示されます。
- ‘display_image_overlay_term’: 画像の上に用語をオーバーレイ表示するかどうかを決定します。
- ‘display_excerpt’: 投稿の抜粋を表示するかどうかを制御します。
- ‘display_date’: 投稿の日付を表示するかどうかを制御します。
- ‘display_new’: 新しい投稿であるかどうかを示すラベルを表示するかどうかを制御します。
- ‘display_taxonomies’: タクソノミー（カテゴリーやタグなど）を表示するかどうかを制御します。
- ‘display_btn’: ボタン（通常は「Read more」など）を表示するかどうかを制御します。
- ‘image_default_url’: 画像が設定されていない場合に表示されるデフォルトの画像のURLを指定します。
- ‘overlay’: 画像にオーバーレイを表示するかどうかを制御します。
- ‘btn_text’: ボタンのテキストを指定します。
- ‘btn_align’: ボタンの配置を指定します。例えば、’text-right’は右揃えです。
- ‘new_text’: 新しい投稿であることを示すラベルのテキストを指定します。
- ‘new_date’: 投稿が「新しい」かどうかを判定するための期間（日数）を指定します。
- ‘class_outer’: 投稿外側の要素に適用されるクラスを指定します。
- ‘class_title’: タイトルに適用されるクラスを指定します。
- ‘body_prepend’: 投稿の本文の前に挿入されるHTMLまたはテキストを指定します。
- ‘body_append’: 投稿の本文の後に挿入されるHTMLまたはテキストを指定します。
これらのオプションは、特定のデザインや表示の要件に合わせて投稿の表示をカスタマイズするために使用されます。」
とのことです。笑 ありがとうございます。
これらの項目をカスタマイズできます。
でも、これに「次の記事」「前の記事」をつけたつけたい、、、
先ほどアイキャッチ画像を削除したソースの後に以下を追記
|
1 2 3 4 5 6 7 8 9 |
add_filter( 'lightning_next_prev_options_prev', function( $options ){ $options['body_prepend'] = '<span class="vk_post_imgOuter_singleTermLabel">前の記事</span>'; return $options; } ); add_filter( 'lightning_next_prev_options_next', function( $options ){ $options['body_prepend'] = '<span class="vk_post_imgOuter_singleTermLabel">次の記事</span>'; return $options; } ); |
これだと、文字が被ってしまうので、カスタムcssで調整が必要のようで、、、
そこで、
こちらの記事を参考にさせていただき
|
1 2 3 4 5 6 7 |
.next-prev-prev.card-horizontal .card-body { padding-left: 5.0rem; } .next-prev-next.card-horizontal .card-body { padding-right: 5.0rem; } |
と追記したところ、表示したいようになりました。(ちょっとよく見えなくてごめんなさい。）
つづいて、２のパンくずリストのカテゴリ非表示。
お知らせ投稿をすると、デフォルトで必ずカテゴリが設定されてしまいます。
表示のカテゴリは消せたけれど、パンくずリストに表示されているカテゴリが邪魔…。
|
1 2 3 |
.single-post .breadcrumb li:nth-child(3) { display:none; } |
と、カスタムCSSに追記。
これが、、、
消えました！
修正の仕方を探していたら、
こちら
の情報をみつけて参考にさせていただきました！
