Lightning Proのカスタム投稿タイプのphpテンプレートでカスタムフィールドとカスタムタクソノミーを表示
Lightning Proでカスタム投稿のphpページテンプレートを子テーマで新たに作るという作戦はBadPracticeです。ご注意ください。上記URLにて㈱ベクトルさん直々のベストプラクティスをいただきました。親テーマ更新の影響を完全に子テーマで避けるカスタマイズを推奨します。子テーマをすべてフィルターフック/アクションフックで利用するところまではいいのですが、phpテンプレートまで子テーマで作り、親テーマ更新が発生するたびに子テーマのphpテンプレートを手作業で毎回修正することは避けられます。というアドバイスです。
Lightninig Pro バージョン4.0.8 です。カスタム投稿タイプの一覧ページとカスタム投稿タイプの個別記事ページでカスタムフィールドを使いたいので子テーマでphpテンプレートを作成しました。子テーマダウンロードは以下の Lightninig 公式ページで行ってください。
固定ページのページ属性のpage-✕✕✕.php は使わない様にする
「ダッシュボード」⇒「固定ページ」⇒「新規追加」⇒固定ページの右上にある歯車マークの「設定」⇒「文書」⇒「ページ属性」 には以下4種類ですが、固定ページでこの機能を使うこと自体が not recommended で非推奨であると丁寧に各phpファイルのコメントアウトに記載してくれています。
- デフォルトテンプレート
page.php - Landing Page for Page Builder ( not recommended )
page-lp-builder.php - Landing page ( not recommended )
page-lp.php - No Sidebar ( not recommended )
page-onecolumn.php
では、どうするかと言うと、 「ダッシュボード」⇒「固定ページ」⇒ 「新規追加」⇒ 固定ページの右上にある歯車マークの「設定」 ⇒「文書」⇒「レイアウト設定」にて、Lightninig Proのオリジナルとして、
- 共通設定を適用
Use common settings - 2カラム
2 column - 1カラム
1 column - 1カラム(サブセクション無し)
1 column ( no sub section )
と記載されているため、こちらを使うことを推奨してくれています。
この「レイアウト設定」は
/themes/lightning-pro/inc/layout-controller/admin-post-meta.php
にて、各種投稿タイプ別にadd_meta_box()を使いlightning_design_settingというidでライトニングのデザイン設定メタフィールド達をedit-post-sidebarに追加しています。WPデフォルトではなくLightning Proオリジナルです。
おそらくですが、投稿ページには、 「ダッシュボード」⇒「投稿ページ」⇒ 「新規追加」⇒ 投稿ページの右上にある歯車マークの「設定」⇒「文書」⇒「ページ属性」 がないため、固定ページと投稿ページで同じレイアウト種別を適用させるたいということで非推奨を記載していると考えられます。
そのため、カスタムフィールドを表示するためにカスタム投稿タイプのphpテンプレートを作る際は、 Lightninig Proのオリジナル 「レイアウト設定」をしっかり踏襲して作る事が推奨されます。
page.phpやsingle.phpでは上記のメタフィールド達を lightning_the_class_name( ‘mainSection’ ) と lightning_the_class_name( ‘sideSection’ ) あたりでレイアウト設定コントロールしていて、
themes/lightning-pro/inc/template-tags.php
を見るとbootstrapのバージョン3と4で分岐、Lightningデザイン設定の各種設定値(カラム数、siteContentの上下余白有無、セクションベースの設定)に関するビュー側のコードなどが記載されています。今回投稿タイプ一覧は、
- $skin_info[‘bootstrap’]===’bs4′; //bootstrap4
bootstrap4、レイアウトmainSectionは1カラム、
これらを把握したうえでカスタム投稿タイプのphpテンプレートを作成する必要があります。
LightningProカスタム投稿タイプの一覧phpテンプレート
index.phpをコピーして
/themes/lightning-pro-child/archive-〇△✕.php
をつくります。
※〇△✕にはカスタム投稿タイプのスラッグ名が入ります。
ファイル内のコードを読み進めると投稿のループ部分で以下の記載があります。
get_template_part( 'template-parts/post/loop', $postType['slug'] );
そのため
/themes/lightning-pro/template-parts/post/loop-post.php
でファイル内のコードを読みます。そうすると、投稿タイプテンプレートに関するコメント書きがあり、指示に従うとカスタム投稿タイプ用のテンプレートはloop-post.phpをコピーして
/themes/lightning-pro-child/template-parts/post/loop-〇△✕.php
となります。
同じく、loop-〇△✕.phpを読み進めると投稿一覧のレイアウトパターンを選択できるようになっている事がコメントアウト記載されています。
get_template_part( 'template-parts/post/loop-layout', 'use-component-sample' );
そのため
/themes/lightning-pro/template-parts/post/loop-layout-use-component-sample.php
をコピーして子テーマに以下の様にファイルを追加します。
/themes/lightning-pro-child/template-parts/post/loop-layout-use-component-sample.php
※use-component-sampleの部分は任意に変えられます
loop-layout-use-component-sample.phpのコードを読むとlayoutは、card 、card-horizontal 、media と3タイプを選べるようになっています。その他にも何を表示するか?booleanで選ぶなどレイアウトの拡張設定ができます。
今回は、子テーマで loop-layout-use-component-sample.php を以下の様にしました。
<?php
$options = array(
'layout' => 'card-horizontal', // card , card-horizontal , media
'display_image' => true,
'display_image_overlay_term' => true,
'display_excerpt' => true,
'display_date' => false,//日付を表示しない
'display_new' => false,//New!!を表示しない
'display_btn' => true,
'image_default_url' => false,
'overlay' => false,
'btn_text' => __( 'Read more', 'lightning-pro' ),
'btn_align' => 'text-right',
'new_text' => __( 'New!!', 'lightning-pro' ),
'new_date' => 7,
'class_outer' => '',
'class_title' => '',
'body_prepend' => '',
'body_append' => '',
);
wp_kses_post( VK_Component_Posts::the_view( $post, $options ) );
なお、元のクラスは
/themes/lightning-pro/inc/vk-components/package/class-vk-component-posts.php
に記載されていますので必要に応じて継承など行ってください。
問題は、カスタム投稿タイプの一覧と個別ページでカスタムタクソノミーとカスタムフィールドの表示をどうするか?ゴリゴリphpをオリジナルで書いてしまうのか、Lightning Proの既製品クラスでうまくやる方法をVWSフォーラムでお尋ね中です。
LightningProカスタム投稿タイプの個別記事phpテンプレート
single.phpをコピーして single-〇△✕.phpがお勧めです。
※〇△✕にはカスタム投稿タイプのスラッグ名が入ります。