デイトラweb制作上級編パターン3 DAY31~44⑩
nakano
卒業制作課題パターン3 10日目
archive.php + taxonomy-genre.php
local by flywheel(現Local) でローカル環境にwordpressをインストール
→ ローカル環境の構築まで
今回は「メニュー」ページを作成
archive.php ・・・ 「menu」ページ
taxonomy-genre.php ・・・ タクソノミーページ
プラグイン「Custom Post Type UI」
・カスタム投稿タイプ「menu」
→ 一覧ページのため「アーカイブあり」は真
・カスタムタクソノミー「genre」
・ターム「pasta」「salad」「breadsweets」「drink」
プラグイン「Advanced Custom Fields」
・カスタムフィールド 価格 →「price」
(引用元：https://wpdocs.osdn.jp/ )
メニューページの作成（archive.php）
PHP
<!-- ナビゲーション -->
<ul class="p-lower-menu__nav">
<li><a href="<?php echo esc_url(get_term_link("pasta", "genre")); ?>"><span>パスタ</span></a></li>
<li><a href="<?php echo esc_url(get_term_link("salad", "genre")); ?>"><span>サラダ</span></a></li>
<li><a href="<?php echo esc_url(get_term_link("breadsweets", "genre")); ?>"><span>パン&<br>スイーツ</span></a></li>
<li><a href="<?php echo esc_url(get_term_link("drink", "genre")); ?>"><span>ドリンク</span></a></li>
</ul>
<!-- アイテム一覧 -->
<?php
if (have_posts()) :
?>
<div class="p-lower-menu__items">
<?php
while (have_posts()) :
the_post();
?>
<div class="p-lower-menu__item">
<div class="p-lower-menu__item-image-wrapper">
<div class="p-lower-menu__item-image"><?php the_post_thumbnail('large'); ?></div>
</div>
<p class="p-lower-menu__item-text"><?php the_title(); ?></p>
<p class="p-lower-menu__item-price"><?php the_field('price') ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>タクソノミーページの作成（taxonomy-genre.php）
ターム一覧↓
PHP
ラベルのハイライト + リンクの削除（上級編 DAY25~26から）
<!-- ナビゲーション -->
<ul class="p-lower-menu__nav">
<?php
$genre_highlight = get_queried_object();
$genre_name = $genre_highlight->name;
?>
<li>
<?php if ($genre_name == "パスタ") {
echo '<a class="is-active">';
} else {
echo '<a href="' . esc_url(get_term_link("pasta", "genre")) . '">';
} ?><span>パスタ</span>
</a>
</li>
<li>
<?php if ($genre_name == "サラダ") {
echo '<a class="is-active">';
} else {
echo '<a href="' . esc_url(get_term_link("salad", "genre")) . '">';
} ?><span>サラダ</span>
</a>
</li>
<li>
<?php if ($genre_name == "パン& スイーツ") {
echo '<a class="is-active">';
} else {
echo '<a href="' . esc_url(get_term_link("breadsweets", "genre")) . '">';
} ?><span>パン&<br> スイーツ</span>
</a>
</li>
<li>
<?php if ($genre_name == "ドリンク") {
echo '<a class="is-active">';
} else {
echo '<a href="' . esc_url(get_term_link("drink", "genre")) . '">';
} ?><span>ドリンク</span>
</a>
</li>
</ul>
<!-- アイテム一覧は同じ -->まとめ
今回も卒業制作課題を進めました。
ナビゲーションを作る際「パン」と「スイーツ」の間に改行があり、そこが少し作りづらく感じる場所でした。
結果的には表示できましたが、もっと良い方法があったのかもしれないですね。
