質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2726閲覧

Wordpress ページ遷移後 クラス付与

shuto0901

総合スコア16

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/08/11 14:19

前提・実現したいこと

wordpressでページ遷移した後、特定のタグにクラスを付与したい。
(ページ遷移後もJavaScriptを機能させたい)

発生している問題・エラーメッセージ

ページ遷移する際リロードにより、Javascriptが機能しなくなる。

該当のソースコード

header.php

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css"> 7 <?php 8 wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css'); 9 wp_enqueue_script('jquery'); 10 wp_enqueue_script('word-press-main', get_template_directory_uri() . '/assets/js/javascript.js'); 11 wp_head(); ?> 12</head> 13<body> 14<?php wp_body_open(); ?> 15<!-- header --> 16<header class="header"> 17<nav class="header-inner"> 18<h1 class="header-logo"><a class="header-btn" href="<?php echo home_url(); ?>">LOGO</a></h1> 19 20 21<!-- 質問該当箇所 --> 22<!-- gnav --> 23<ul class="gnav-list"> 24<li class="gnav-items"><a class="gnav-item" href="<?php echo home_url(); ?>">HOME<p class="gnav-txt">ホーム</p></a></li> 25<li class="gnav-items"><a class="gnav-item" href="<?php echo get_permalink(145); ?>">ABOUT<p class="gnav-txt">会社概要</p></a></li> 26<li class="gnav-items"><a class="gnav-item" href="<?php echo get_permalink(155); ?>">SERVICE<p class="gnav-txt">事業内容</p></a></li> 27<li class="gnav-items gnav-items-menu"><a class="gnav-item" href="<?php echo get_permalink(235); ?>">CREATE<p class="gnav-txt">Webサイト制作</p></a> 28<ul class="gnav-item-list"> 29<li><a class="gnav-item-btn" href="<?php echo get_permalink(235); ?>">› Webサイト制作</a></li> 30<li><a class="gnav-item-btn" href="<?php echo get_permalink(261); ?>">› 料金・プラン</a></li> 31<li><a class="gnav-item-btn" href="<?php echo get_permalink(266); ?>">› 制作事例</a></li> 32<li><a class="gnav-item-btn" href="<?php echo get_permalink(275); ?>">› 制作の流れ</a></li> 33<li><a class="gnav-item-btn" href="<?php echo get_permalink(279); ?>">› よくあるご質問</a></li> 34</ul> 35</li> 36<li class="gnav-items"><a class="gnav-item" href="<?php echo get_permalink(238); ?>">BLOG<p class="gnav-txt">ブログ</p></a></li> 37<li class="gnav-items"><a class="gnav-item" href="<?php echo get_permalink(221); ?>">CONTACT<p class="gnav-txt">お問い合わせ</p></a></li> 38</ul><!-- /gnav --> 39<!-- 質問該当箇所 --> 40 41 42<!-- menu --> 43<div class="menu-open menu-close"> 44 <span></span> 45</div> 46</nav> 47 48</header><!-- /header -->

CSS

1@charset "UTF-8"; 2html { 3 font-size: 62.5%; 4} 5 6body { 7 margin: 0; 8 padding: 0; 9 font-size: 100%; 10 height: 100%; 11 font-family: arial, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", Verdana, sans-serif; 12} 13 14.header { 15 z-index: 999; 16 position: fixed; 17 box-sizing: border-box; 18 top: 0; 19 background: #fff; 20 box-shadow: 0 0 2px rgba(6, 8, 8, 0.15); 21 width: 100%; 22} 23 24.header-inner { 25 max-width: 1280px; 26 padding: 0 20px; 27 margin: 0 auto; 28 box-sizing: border-box; 29} 30 31.header-logo { 32 display: inline-block; 33 margin: 0; 34} 35 36.header-btn { 37 font-size: 32px; 38 letter-spacing: 4px; 39 margin: 0; 40 padding-top: 0px; 41 display: block; 42 font-weight: 800; 43 font-family: 'Montserrat', sans-serif; 44 color: #222; 45 line-height: 80px; 46 box-sizing: border-box; 47 height: 80px; 48 cursor: pointer; 49 text-decoration: none; 50} 51 52// 質問該当箇所 53.gnav-list { 54 display: flex; 55 justify-content: space-between; 56 align-items: center; 57 float: right; 58 list-style: none; 59 padding: 0; 60 margin: 0; 61} 62 63.gnav-items { 64 margin: 0; 65 float: left; 66 height: 80px; 67 padding-top: 9px; 68 color: #282828; 69 box-sizing: border-box; 70 font-size: 1.6rem; 71} 72 73.gnav-items-menu { 74 position: relative; 75} 76 77.gnav-items-menu:hover .gnav-item-list { 78 opacity: 1; 79 top: 78px; 80 visibility: visible; 81} 82 83.gnav-item { 84 display: block; 85 margin: 0; 86 padding: 14px 0 6px; 87 box-sizing: border-box; 88 width: 130px; 89 font-size: 1.6rem; 90 font-weight: bold; 91 text-align: center; 92 position: relative; 93 color: #282828; 94 text-decoration: none; 95} 96 97.gnav-item-list { 98 list-style: none; 99 position: absolute; 100 top: 50px; 101 background: #fff; 102 height: auto; 103 width: 190px; 104 padding: 0 0 26px; 105 border-radius: 0 0 6px 6px; 106 border: 2px solid #9dce54; 107 border-top: none; 108 box-sizing: border-box; 109 transition: all .3s; 110 opacity: 0; 111 z-index: 1; 112 margin: 0; 113 list-style: none; 114 visibility: hidden; 115} 116 117.gnav-item-btn { 118 font-size: 15px; 119 color: #333; 120 line-height: 42px; 121 height: 42px; 122 padding-left: 26px; 123 text-align: left; 124 font-weight: 600; 125 display: block; 126 letter-spacing: 0.2px; 127 box-sizing: border-box; 128 cursor: pointer; 129 text-decoration: none; 130} 131 132.gnav-item-btn:hover { 133 color: #429f00; 134 text-decoration: underline; 135} 136 137.gnav_item:hover .gnav-txt { 138 color: #429f00; 139} 140 141.gnav-txt { 142 padding-top: 8px; 143 margin: 0; 144 font-size: 13px; 145 font-weight: 500; 146 letter-spacing: 0; 147 color: #666; 148 line-height: 1; 149} 150 151.active { 152 color: #429f00; 153} 154// 質問該当箇所

JavaScript

1'use strict'; 2 3// 下記のコードをページ遷移後に機能させたいです。 4jQuery(function($) { 5 $(function(){ 6 var $btns = $('.gnav-item'); 7 $btns.click(function(){ 8 $btns.removeClass("active"); 9 $(this).addClass("active"); 10 }); 11 }); 12});

試したこと

https://teratail.com/questions/27919
こちらの質問を参考にコードを書き換えましたが、解決には至りませんでした。

・擬似クラス:active,:link,:visited,などの使用を考えましたが、①クリックした要素にページ遷移後常にクラスが付与されている状態を保つ(常にテキストに色が付いている)。②他のページに遷移する場合はクラスを取り除く(テキストの色が元の黒色に戻る)。の2点が実現されなかったので、解決には至りませんでした。

補足情報(FW/ツールのバージョンなど)

Wordpressサイトはサーバー上(Xserver)にアップロードしております。

他ページのheader部分は全ページheader.phpを読み込んで表示しております。

またJavaScriptのコードに関してはaタグにhref="javascript:void(0)"を入れ動作を確認したところ、思い通りの動きが実現するので、間違いないと思います。

説明が不足しているところや、わかりづらいところもあるかとは思いますがどなたかご教授していただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

JavaScriptは基本的にページ遷移で状態を引き継げません。

正攻法でいくならJavaScriptではなくPHP側で、
現在のURLからactiveにするメニューを割り出し、classにactiveを付けるようにしてください。

投稿2020/08/12 02:15

tabuu

総合スコア2449

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shuto0901

2020/08/18 04:55

ご回答ありがとうございます。 解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問