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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

479閲覧

WordPress ナビボタンをクリックしてもアニメーションで開閉になりません。

r.baagio10

総合スコア19

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/01/04 02:40

編集2019/01/04 04:17

前提・実現したいこと

![イメージ説明]
https://plusers.net/wordpress_theme_3
こちらのサイトを参考にナビボタンをクリックしたらアニメーションなるのですがjQueryが動きません。
ネットで色々と調べたのですが原因が分かりません。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="keywords" content=""> 6 <meta name="description" content=""> 7 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=auto"> 8 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> 9 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> 10 <?php wp_head(); ?> 11 </head> 12 <body <?php body_class(); ?> > 13 <header> 14 <div class="header-container"> 15 <div class="header-logo"> 16 <h1 class="logo"><a href="<?php echo esc_url( home_url( '/' )); ?>" class="logo-link"><img src="<?php echo get_template_directory_uri(); ?>/./lib/images/logo.png" alt="<?php bloginfo('name'); ?>"></a></h1> 17 </div> 18 <div class="header-navtoggle"> 19 <div> 20 <span></span> 21 <span></span> 22 <span></span> 23 </div> 24 </div> 25 <nav class="header-globalnav"> 26 <?php wp_nav_menu( array( 27 'theme_location' => 'header-nav', 28 'container' => 'nav', 29 'container_id' => 'header-nav', 30 'container_class' => 'header-nav', 31 'fallback_cd' => '' )); ?> 32<!-- 33 <ul class="menu"> 34 <li><a href="">MENU1</a></li> 35 <li><a href="">MENU2</a></li> 36 <li><a href="">MENU3</a></li> 37 <li><a href="">MENU4</a></li> 38 <li><a href="">MENU5</a></li> 39 </ul> 40--> 41 </nav> 42 </div> 43 </header> 44```navbutton.js 45```jQuery 46jQuery(function(){ 47 jQuery(".header-navtoggle").on("click",function(){ 48 jQuery("header").toggleClass("open"); 49 jQuery("nav").slideToggle(500); 50 }); 51}); 52```functions.php 53```php 54<?php 55// テーマのセットアップ 56// titleタグをhead内で生成する 57add_theme_support( 'title-tag' ); 58// HTML5のマークアップ 59add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); 60// Feedのリンクを自動で生成する 61add_theme_support( 'automatic-feed-links' ); 62// アイキャッチ画像を使用する指定 63add_theme_support( 'post_thumbnails' ); 64// カスタムメニュー 65register_nav_menu( 'header-nav', 'ヘッダーナビゲーション' ); 66register_nav_menu( 'footer-nav', 'フッターナビゲーション' ); 67//メニューボタンjs呼び出し 68function navbutton_scripts(){ 69 wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'./js/navbutton.js', array('jquery') ); 70} 71add_action( 'wp_enqueue_scripts' , 'navbutton_scripts' );

試したこと

WordPressでjQueryが動かないときの対処法を見て同じようにしたのですが
原因がわかりませんでした。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/01/04 02:53

質問文の内容の大半が画像なのは、よそのQ&Aサイトなどにもクロスポストしているのかな?
r.baagio10

2019/01/04 03:02

画像の通りに進めたのですがjQueryが動きません。 どのようにすれば動くようになるのでしょうか?
Sohaya

2019/01/04 03:33

「こちらのサイトを参考に」と書かれてますがURLが載っていません。 https://plusers.net/wordpress_theme_3 こちらのサイトでしょうか? サイトのごく一部のスクリーンショットだけで問題解決するのは難しいです。 タイトルに「開閉になりません」、 スクリーンショットの下の文章に「開閉するのですが」と書かれていて、 開閉するのかしないのかがよくわからなくなってしまっています。 もう少し問題点が明確になるよう 質問文の清書をお願いします。 「対処法を見て同じようにしたのですが」について 箇条書きでも構いませんので 具体的に試された内容を 質問に追記お願いします。
KazuhiroHatano

2019/01/04 04:24

ブラウザでリソースを見たらちゃんとnavbutton.jsは読み込まれてますか? ブラウザのコンソールでエラーは出てますか?
r.baagio10

2019/01/04 04:44

確認しているのですがnavbutton.jsは読み込まれていないと思います。 こちらのサイトでは https://plusers.net/wordpress_theme_3 functions.phpにこちらのphpコードをいれれば読み込まれると記載があるのですが 間違いなのでしょうか? //メニューボタンjs呼び出し function navbutton_scripts(){ wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'/js/navbutton.js', array('jquery') ); } add_action( 'wp_enqueue_scripts' , 'navbutton_scripts' );
KazuhiroHatano

2019/01/04 05:02

作ってるのは子テーマだったりしますか? get_template_directory_uriは親テーマのURLを返すので 子テーマの場合はget_stylesheet_directory_uriで
CHERRY

2019/01/04 05:15 編集

navbutton.js は、WordPress のどこのディレクトリに保存されましたか? ` テーマディレクトリ/js/navbutton.js ` に保存しているのであれば、PHP でエラー発生していないのであれば読み込まれると思います。 Web ブラウザの開発者ツール( デベロッパーツール ) のコンソールを開いたら JavaScript や 404 のエラーは出ていないでしょうか?
r.baagio10

2019/01/04 05:18

作ってるのは子テーマだったりしますか? →このサイトの通りに進めており多分ですが子テーマだと思います。 子テーマだとどのように読み込ませる必要がありますか?
r.baagio10

2019/01/04 05:24

navbutton.js は、WordPress のどこのディレクトリに保存されましたか? →デベロッパーツールにこのようなエラーがありました。画像を添付します。 読み込みの原因はディレクトリー構成なのでしょうか?
r.baagio10

2019/01/04 05:29

ディレクトリー構成ですがlibフォルダーの中にnavbutton.jsがあります。
CHERRY

2019/01/04 05:34 編集

navbutton.js で、404 エラーが出ていますね。 ( 404 エラーは、ページが見つからないというエラーです。= 指定された場所にファイルがない。 ) functions.php に追加した部分は、動作しているようですね。 > ディレクトリー構成ですがlibフォルダーの中にnavbutton.jsがあります。 navbutton.js は、「WordPressディレクトリ/wp-content/themes/orijinal-site./js/」に 必要ですので、ここに保存してください。
guest

回答1

0

ベストアンサー

よう見たら、いらんピリオドが入っとるがな

あと、まあget_theme_file_uriのやったら
親テーマ子テーマ両方から探してくれるからそっち使っとこか

php

1 wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'./js/navbutton.js', array('jquery') ); 23 wp_enqueue_script( 'navbutton_script', get_theme_file_uri('js/navbutton.js'), array('jquery') );

投稿2019/01/04 05:33

KazuhiroHatano

総合スコア7802

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

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

r.baagio10

2019/01/04 05:40

ピリオド!! 理解できました。 教えていただいたコードを打ち込んだのですがまだjQueryが動きません。 原因はなぜでしょうか? wp_enqueue_script( 'navbutton_script', get_theme_file_uri('js/navbutton.js'), array('jquery') );
KazuhiroHatano

2019/01/04 05:46

ブラウザのリソース見たら今度こそnavbutton.jsはちゃんと読み込まれてますか?
r.baagio10

2019/01/04 05:53

ブラウザのリソース見たら今度こそnavbutton.jsはちゃんと読み込まれてますか? 有難うございます。 読み込まれたのですが お聞きしたいのですが例えばlibフォルダーの中にjsフォルダーがありその中に navbutton.jsを読み込ませたい場合はどのようにfunctuions.phpに記述すればいいのでしょうか?
r.baagio10

2019/01/04 05:54

こちらで正しいのでしょうか? wp_enqueue_script( 'navbutton_script', get_theme_file_uri('lib/js/navbutton.js'), array('jquery') );
KazuhiroHatano

2019/01/04 06:00

JSファイルは読み込まれてなお動かないなら今度はコンソールでエラー出てないか確認ですね
r.baagio10

2019/01/04 06:00

有難うございます。
r.baagio10

2019/01/04 06:02

jQueryが動かない場合はコンソールでエラーを確認すればいいのですね。 アドバイス有難うございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問