デイトラweb制作上級編パターン3  DAY31~44⑩

卒業制作課題パターン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>

<!-- アイテム一覧は同じ -->

まとめ

今回も卒業制作課題を進めました。

ナビゲーションを作る際「パン」と「スイーツ」の間に改行があり、そこが少し作りづらく感じる場所でした。

結果的には表示できましたが、もっと良い方法があったのかもしれないですね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です