機能の使い方

テンプレートを読み込みやすいように設定いたしました。
最終的には再利用可能なコンポーネント単位に分割し、コンポーネント数を工数に反映できると良いのかなと考えております。

[goto]

image

自動で width/height, loading=”lazy” が付与。SVGは対象外。

いままで

<img src="<?php echo get_theme_file_uri( 'images/sample.png' ); ?>" class="img-responsive" alt="代替テキスト" width="800" heigth="600" loading="lazy">

imageパーツ

<?php get_template_part( 'template-parts/image', null, array( 'src' => 'images/sample.png', 'alt' => '代替テキスト', 'class' => 'img-responsive' ) ); ?>

parts

固定的なテンプレートを表示する

template: template-parts ディレクトリ内のテンプレートファイル名を指定する
[[parts template=""]]

適当なテンプレートを指定

[[parts template="dummy"]]
[parts template=”dummy”]

cards

カードリストを表示する

template: template-parts ディレクトリ内のテンプレートファイル名を指定する
post_type: 投稿タイプ名を指定する
taxonomy: タクソノミー名を指定する(terms の指定が必須)
terms: タームをカンマ区切りで指定する(taxonomy の指定が必須)
ids: 投稿IDをカンマ区切りで指定する
posts_per_page: 表示する投稿数を指定する
mobile: モバイルでの列数(12分割中の使用ブロック数を指定)
tablet: タブレットでの列数
desktop: PCでの列数
[[cards template="" post_type="" taxonomy="" terms="" ids="" posts_per_page="" mobile="" tablet="" desktop=""]]

カードテンプレートを指定

[[cards template="pickup-card" post_type="news" posts_per_page="3"]]
[cards template=”pickup-card” post_type=”news” posts_per_page=”3″]

タクソノミーを指定

// タクソノミー news_category の event のみ表示
[[cards template="pickup-card" post_type="news" taxonomy="news_category" terms="event" posts_per_page="3"]]

[cards template=”pickup-card” post_type=”news” taxonomy=”news_category” terms=”event” posts_per_page=”3″]

children_card

子ページのカードリストを表示する。

[[children_card parent="" ids="" template="" mobile="" tablet="" desktop=""]]

自分の子ページを表示する

[[children_card]]
[children_card]

親ページを指定

// parent="指定ページのID"
[[children_card parent="39"]]

[children_card parent=”39″]

子ページを指定

// ids="指定ページのIDをカンマ区切りで"
[[children_card ids="2,3,82"]]

[children_card ids=”2,3,82″]

カードテンプレートを指定

// template="template-partsディレクトリに作成したテンプレートファイル名"
[[children_card template="pickup-card"]]

[children_card template=”pickup-card”]

カラム数を指定する

// 12: 1列, 6: 2列, 4: 3列, 3: 4列, 2: 6列
[[children_card mobile="6" tablet="4" desktop="3"]]

[children_card mobile=”6″ tablet=”4″ desktop=”3″]