MENU

※一部広告が含まれている場合があります

WordPressでデータベースっぽいサイトをつくるため参考にした記事まとめ

WordPressでデータベースサイトを作る方法

Twitterに自撮りを載せてると「お洋服どこで買ってるの〜?」とか聞かれることも多く、サイト内に、持っているお洋服を一覧で紹介するページを作成しました。

ただ、いちいち情報を手入力するのも絶対にだるいなというで、1商品3分で、ぽちぽち選択するだけで作れるよう作成。

尚且つ、ブランドや系統、カテゴリーなど、いろんな切り口でアーカイブページがあったり回遊もできるようなデータベース風にしてみました。

今回は備忘録として、参考にしたサイトを紹介しておきます。

開発はたまにしかしないから、こうやって基礎だけ覚えといて毎回調べながらやってるよ〜

最近はブロックエディタがメインになって、しょっちゅうコード書いてた頃と比べて変わったことも多いしね。。

Contents

カスタム投稿タイプのテンプレートファイル・アーカイブページファイルを作る

ブログ投稿とは別のテンプレートで作成するため、CPI UIでカスタム投稿タイプを作成。

ただし、そのままだとブログ投稿と同様のsingle.phpを使用してしまいます。

予め用意した選択肢をぽちぽちしてデータを自動で出すため、別のテンプレートファイルを使いたかったため、下記のやり方で解決。

とはいえ、テーマに元々用意されているsingle.phpをコピーしてリネーム、この記事最後に紹介するコードを加えただけです。

将来的にはアーカイブページから複数要素で絞り込み検索もできるようにしたいな。。データは初期段階でいろいろ持たせてるからできるはず。。

webの自由帳
【カスタム投稿タイプ】をCustom Post Type UIで作る方法|webの自由帳 今回はWordPressのカスタム投稿タイプを「Custom Post Type UI」というプラグインで作る方法をまとめていきたいと思います。

カスタム投稿タイプのパーマリンクを記事IDにする

CPTUIではカスタム投稿タイプのパーマリンクは設定できんっぽい。

投稿タイトルがURLになると、個別設定しないと日本語URLになっちゃうし、毎回個別設定もだるいので記事IDにしたい。

ってなるとどうやらプラグインしかないらしいです。

いまどきURLでページ判断する人おらん(スマホだとドメインしか表示されないケースがほとんど)だしSEO面でもメリットないし、記事IDが一番楽だと思うんよね。。

https://paralux.co.jp/blog/1726

投稿に属するタームをすべて取得する

各商品投稿のブランド名やアイテムカテゴリーなどは、カスタムタクソノミーを使ってデータを持たせています。

これを投稿内のテーブルなどに出力するために参考にしました。foreachを使うことで、親カテゴリと子カテゴリみたいに複数のタームが設定されててもちゃんと出力されるのでよき。

アーカイブページもアクセスしやすいし、ユーザビリティでも管理の面でも最適解な感じがします。

Recooord | Web制作で扱うコーディ...

表内に出力するタームの親子間に「>」を表示

上記の方法で、複数のタームを出力できても、そのままだと連続して表示されてしまうので、パンくずリスト的に「>」を出力。

nth-childで各要素内でaタグが2つめ以上連続した場合に、2つ目以降の要素に::before指定して出力するようにしました。

https://miyattiblog.com/why-nth-of-type-and-nth-child-do-not-work/#nth-child-2

GRAYCODE
::beforeと::afterを使って要素の前後に文字を追加する | GRAYCODE HTML&CSS 擬似要素「::before」と「::after」を使って、特定の要素の前後にテキストや記号を追加する方法を解説します。

記事タイトルを取得して表に出力

投稿内のテーブルにある商品名は投稿タイトルをそのまま出せばいいので

The WordPress Press
投稿のタイトルを取得・表示する WordPressループの中で、記事のタイトルを表示するにはthe_title()を、記事を取得するにはget_the_title()を使用します。

カスタムフィールドの値を出力

価格など、商品ごとに異なる要素はカスタムタクソノミーではなくカスタムフィールドで管理する形にしています。

毎回すべてのフィールドが埋まるわけでもないので、入力された場合のみテーブルの行ごと(<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>
シェアしてくれたらうれしい。。
  • URLをコピーしました!

わたしについて

るるにゃのアバター るるにゃ 女装男子・男の娘

おとこだけどかわいい格好をするのがすき。
女の子になって感じたことを書いています。

コメントしてねっ

コメントする

Contents
閉じる