Twitterに自撮りを載せてると「お洋服どこで買ってるの〜？」とか聞かれることも多く、サイト内に、持っているお洋服を一覧で紹介するページを作成しました。
ただ、いちいち情報を手入力するのも絶対にだるいなというで、1商品3分で、ぽちぽち選択するだけで作れるよう作成。
尚且つ、ブランドや系統、カテゴリーなど、いろんな切り口でアーカイブページがあったり回遊もできるようなデータベース風にしてみました。
今回は備忘録として、参考にしたサイトを紹介しておきます。
開発はたまにしかしないから、こうやって基礎だけ覚えといて毎回調べながらやってるよ〜
最近はブロックエディタがメインになって、しょっちゅうコード書いてた頃と比べて変わったことも多いしね。。
カスタム投稿タイプのテンプレートファイル・アーカイブページファイルを作る
ブログ投稿とは別のテンプレートで作成するため、CPI UIでカスタム投稿タイプを作成。
ただし、そのままだとブログ投稿と同様のsingle.phpを使用してしまいます。
予め用意した選択肢をぽちぽちしてデータを自動で出すため、別のテンプレートファイルを使いたかったため、下記のやり方で解決。
とはいえ、テーマに元々用意されているsingle.phpをコピーしてリネーム、この記事最後に紹介するコードを加えただけです。
将来的にはアーカイブページから複数要素で絞り込み検索もできるようにしたいな。。データは初期段階でいろいろ持たせてるからできるはず。。
カスタム投稿タイプのパーマリンクを記事IDにする
CPTUIではカスタム投稿タイプのパーマリンクは設定できんっぽい。
投稿タイトルがURLになると、個別設定しないと日本語URLになっちゃうし、毎回個別設定もだるいので記事IDにしたい。
ってなるとどうやらプラグインしかないらしいです。
いまどきURLでページ判断する人おらん（スマホだとドメインしか表示されないケースがほとんど）だしSEO面でもメリットないし、記事IDが一番楽だと思うんよね。。
https://paralux.co.jp/blog/1726
投稿に属するタームをすべて取得する
各商品投稿のブランド名やアイテムカテゴリーなどは、カスタムタクソノミーを使ってデータを持たせています。
これを投稿内のテーブルなどに出力するために参考にしました。foreachを使うことで、親カテゴリと子カテゴリみたいに複数のタームが設定されててもちゃんと出力されるのでよき。
アーカイブページもアクセスしやすいし、ユーザビリティでも管理の面でも最適解な感じがします。
表内に出力するタームの親子間に「>」を表示
上記の方法で、複数のタームを出力できても、そのままだと連続して表示されてしまうので、パンくずリスト的に「＞」を出力。
nth-childで各要素内でaタグが2つめ以上連続した場合に、2つ目以降の要素に::before指定して出力するようにしました。
https://miyattiblog.com/why-nth-of-type-and-nth-child-do-not-work/#nth-child-2
記事タイトルを取得して表に出力
投稿内のテーブルにある商品名は投稿タイトルをそのまま出せばいいので
カスタムフィールドの値を出力
価格など、商品ごとに異なる要素はカスタムタクソノミーではなくカスタムフィールドで管理する形にしています。
毎回すべてのフィールドが埋まるわけでもないので、入力された場合のみテーブルの行ごと（<tr>〜</tr>まで）出力するよう条件分岐。
https://hirashimatakumi.com/blog/7.html#anchor01-05
これらを参考にできた投稿テンプレート内のテーブル部分のコード
最終的に下記のようなコードを追加する形になりました。
完成したページと見比べると多少わかりやすいかな？
<?php the_content(); // 元からある投稿出力部分 ?>
<div class="clothestable">
<table>
<tbody>
<tr>
<th>ブランド</th>
<td>
<?php
$terms = get_the_terms($post->ID,'brand');
foreach( $terms as $term ) {
echo '<a href="'.get_term_link($term->slug,'brand').'">'.$term->name.'</a>';
}
?>
</td>
</tr>
<tr>
<th>商品名</th>
<td><?php the_title(); ?></td>
</tr>
<tr>
<th>カテゴリー</th>
<td>
<?php
$terms = get_the_terms($post->ID,'itemcategory');
foreach( $terms as $term ) {
echo '<a href="'.get_term_link($term->slug,'itemcategory').'">'.$term->name.'</a>';
}
?>
</td>
</tr>
<tr>
<th>系統</th>
<td>
<?php
$terms = get_the_terms($post->ID,'style');
foreach( $terms as $term ) {
echo '<a href="'.get_term_link($term->slug,'style').'">'.$term->name.'</a>';
}
?>
</td>
</tr>
<tr>
<th>購入色</th>
<td>
<?php $boughtcolor = get_field('boughtcolor'); if( $boughtcolor ): ?>
<?php echo $boughtcolor; ?>
<?php endif; ?>
</td>
</tr>
<?php $coloroption = get_field('coloroption'); if( $coloroption ): ?>
<?php echo '<tr><th>色展開</th><td>'.$coloroption.'</td></tr>'; ?>
<?php endif; ?>
<?php $boughtsize = get_field('boughtsize'); if( $boughtsize ): ?>
<?php echo '<tr><th>購入サイズ</th><td>'.$boughtsize.'</td></tr>'; ?>
<?php endif; ?>
<?php $sizeoption = get_field('sizeoption'); if( $sizeoption ): ?>
<?php echo '<tr><th>サイズ展開</th><td>'.$sizeoption.'</td></tr>'; ?>
<?php endif; ?>
<tr>
<th>価格</th>
<?php $price = get_field('price'); if( $price ): ?>
<?php echo '<td>'.$price.'</td>'; ?>
<?php endif; ?>
</tr>
<tr>
<th>所有状況</th>
<?php $condition = get_field('condition'); if( $condition ): ?>
<?php echo '<td>'.$condition.'</td>'; ?>
<?php endif; ?>
</tr>
</tbody>
</table>
</div>
コメントしてねっ