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

卒業制作課題パターン2 14日目

表示中のページに応じて、メニューの色を変化させる

青色になるのは

・hoverしているとき

・対応しているページを開いているとき


※画像を青色にする方法 → 上級編パターン2  DAY31~44①

「当院について」ページの場合

PHP

<li class="header__nav-item <?php if (is_page('ページ番号')) {
                                echo 'is-active';
                            } ?>">
    <a href="<?php $page = get_page_by_path('about');
                echo esc_url(get_permalink($page->ID)); ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <rect width="24" height="24" opacity="0" />
            <path d="M5.368,10.232V8.555a.5.5,0,0,1,.5-.5H7.548a.5.5,0,0,1,.5.5v1.677a.5.5,0,0,1-.5.5H5.871A.5.5,0,0,1,5.368,10.232Zm5.871.5h1.677a.5.5,0,0,0,.5-.5V8.555a.5.5,0,0,0-.5-.5H11.238a.5.5,0,0,0-.5.5v1.677A.5.5,0,0,0,11.238,10.735ZM8.051,14.258V12.58a.5.5,0,0,0-.5-.5H5.871a.5.5,0,0,0-.5.5v1.677a.5.5,0,0,0,.5.5H7.548A.5.5,0,0,0,8.051,14.258Zm3.187.5h1.677a.5.5,0,0,0,.5-.5V12.58a.5.5,0,0,0-.5-.5H11.238a.5.5,0,0,0-.5.5v1.677A.5.5,0,0,0,11.238,14.761Zm7.548,5.2v1.51H0v-1.51a.5.5,0,0,1,.5-.5h.818V3.566a.95.95,0,0,1,1.006-.882H6.039V1.006A1.006,1.006,0,0,1,7.045,0h4.7a1.006,1.006,0,0,1,1.006,1.006V2.684h3.711a.95.95,0,0,1,1.006.882V19.458h.818A.5.5,0,0,1,18.787,19.961ZM3.334,19.416H8.051v-2.81a.5.5,0,0,1,.5-.5h1.677a.5.5,0,0,1,.5.5v2.81h4.718V4.7h-2.7V5.7A1.006,1.006,0,0,1,11.742,6.71h-4.7A1.006,1.006,0,0,1,6.039,5.7V4.7h-2.7ZM11.155,2.684h-1.09V1.594a.252.252,0,0,0-.252-.252H8.974a.252.252,0,0,0-.252.252v1.09H7.632a.252.252,0,0,0-.252.252v.839a.252.252,0,0,0,.252.252h1.09v1.09a.252.252,0,0,0,.252.252h.839a.252.252,0,0,0,.252-.252V4.026h1.09a.252.252,0,0,0,.252-.252V2.935A.252.252,0,0,0,11.155,2.684Z" transform="translate(3 1)" fill="#393939" />
        </svg>
        <span>当院について</span>
    </a>
</li>

「スタッフブログ」のようにページが入り組んでいる場合、スラッグで指定することもできる

スタッフブログ(スラッグはblog) > ターム別(genre/ターム名) > 投稿ページ(blog/タイトル名)

※genreがタクソノミーの場合

PHP

<li class="header__nav-item <?php if (strstr($_SERVER['REQUEST_URI'], 'blog')) {
                                echo 'is-active';
                            } else if (strstr($_SERVER['REQUEST_URI'], 'genre')) {
                                echo 'is-active';
                            } ?>">
    <a href="<?php echo esc_url(get_post_type_archive_link('blog')); ?>">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <rect width="24" height="24" fill="#393939" opacity="0" />
            <path d="M19.4,7.34,16.66,4.6A2,2,0,0,0,14,4.53l-9,9a2,2,0,0,0-.57,1.21L4,18.91A1,1,0,0,0,5,20h.09l4.17-.38a2,2,0,0,0,1.21-.57l9-9a1.92,1.92,0,0,0-.07-2.71ZM9.08,17.62l-3,.28.27-3L12,9.32l2.7,2.7ZM16,10.68,13.32,8l1.95-2L18,8.73Z" fill="#393939" />
        </svg>
        <span>スタッフブログ</span>
    </a>
</li>

参考記事

【PHP】URLに特定の文字列が含まれている場合に処理する方法
→ strstr()、$_SERVER['REQUEST_URI']について

まとめ

今回で2つ目の卒業制作課題を作り終えました。

作り終えたといっても後で本番環境に移行させたり、アクセス制限をかけたりしますがとりあえずは今日で終わりといっても良いはず。

1つ目にかけた作業時間に比べると、慣れもあってかとても早く作ることができました。

3つ目のカフェのサイトも気になっているので、次はそのサイトも作りたいなぁと思っています。

コメントを残す

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