Lightning Proのカスタム投稿タイプのphpテンプレートでカスタムフィールドとカスタムタクソノミーを表示

Lightning Proでカスタム投稿のphpページテンプレートを子テーマで新たに作るという作戦はBadPracriceです。ご注意ください。上記URLにて㈱ベクトルさん直々のベストプラクティスをいただきました。基本的に、すべてフィルターフック/アクションフックを子テーマfunctions.phpで使い、phpテンプレートを新たに子テーマで作らない。親テーマ更新の影響を最大限に避けるカスタマイズを推奨します。と言うアドバイスです。

Lightninig Pro バージョン4.0.8 です。カスタム投稿タイプの一覧ページとカスタム投稿タイプの個別記事ページでカスタムフィールドを使いたいので子テーマでphpテンプレートを作成しました。子テーマダウンロードは以下の Lightninig 公式ページで行ってください。

Lightninig Pro 子テーマサンプル

固定ページのページ属性のpage-✕✕✕.php は使わない様にする

「ダッシュボード」⇒「固定ページ」⇒「新規追加」⇒固定ページの右上にある歯車マークの「設定」⇒「文書」⇒「ページ属性」 には以下4種類ですが、固定ページでこの機能を使うこと自体が not recommended で非推奨であると丁寧に各phpファイルのコメントアウトに記載してくれています。

  1. デフォルトテンプレート
    page.php
  2. Landing Page for Page Builder ( not recommended )
    page-lp-builder.php
  3. Landing page ( not recommended )
    page-lp.php
  4. No Sidebar ( not recommended )
    page-onecolumn.php

では、どうするかと言うと、 「ダッシュボード」⇒「固定ページ」⇒ 「新規追加」⇒ 固定ページの右上にある歯車マークの「設定」 ⇒「文書」⇒「レイアウト設定」にて、Lightninig Proのオリジナルとして、

  1. 共通設定を適用
    Use common settings
  2. 2カラム
    2 column
  3. 1カラム
    1 column
  4. 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がお勧めです。

※〇△✕にはカスタム投稿タイプのスラッグ名が入ります。