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

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

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

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

PHP

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

Q&A

解決済

3回答

4904閲覧

wordpressでjQueryが動かせない。slicknavを使いたいです。

makoto-n

総合スコア436

WordPress

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

PHP

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

0グッド

1クリップ

投稿2016/04/19 09:45

編集2016/04/20 16:01

function.phpに記述する方法もあるようですが、header.phpに記述しています。
wordpressが持っているjQueryを使用して、サーバー内にあるslicknav.jsを動作させたいです。

slicknavのurlにミスはないようですが、jQueryのurlに欠点があるのかもしれません。
修正点を教えてください。

jsフォルダは作っていないです。作った方がいいでしょうか?

それと「ハンドル」というワードを検索しても理解できません。
この場合はどこがハンドルになりますか?

<header.php>

<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="format-detection" content="telephone=no, email=no, address=no"> <title><?php if( is_single() ): wp_title('|', true, 'right'); endif; bloginfo('name'); ?></title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/original.css"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico"> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico"> <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico"> <meta name="apple-mobile-web-app-title" content="test"> <meta name="application-name" content="test"> <meta name="author" content=""> <?php wp_enqueue_script( 'slicknav', get_template_directory_uri() .'/jquery.slicknav.js', array( 'jquery') ); ?> <?php wp_head(); /* Template Name: WP1 */ ?> <script> jQuery(function () { jQuery(document).ready(function(){ jQuery('#menu').slicknav(); }); } </script> </head> <body <?php body_class(); ?>> <div class="header clearfix"> <h1 class="md-5 xs-10"> <a href="<?php echo home_url(); ?>/"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>"></a> </h1> <h2 class="md-5 xs-10"><?php bloginfo('description'); ?></h2> <div id="menu" class="clearfix"> <?php wp_nav_menu(); ?> </div> </div>

質問ばかりですみません。

追記

4/21

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

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

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

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

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

guest

回答3

0

jQuery本体はfunction.phpで読み込まれている(もしくはWordPress本体のパッケージ版jQuery)のでしょうか?

であれば、
<?php wp_enqueue_script( 'slicknav', get_template_directory_uri() .'/jquery.slicknav.js', array( 'jquery') ); ?>

wp_head()の後へ持って行くと良いだけかなと。
jQueryプラグインはjQuery本体より先に読み込むとエラーになります。

上記を試しても動かなかった場合、
ブラウザの開発者ツールのコンソールを確認して、エラーメッセージを確認してください。

「ハンドル」

一意の識別子みたいなものとお考えいただければよいかなと。
WordPressでの話ですよね?であるなら、例えばenqueueする際に指定する(orコアファイル内で指定されている)ものなどです。

wp_enqueue_style( $handle, $src, $deps, $ver, $media ); wp_register_script( $handle, $src, $deps, $ver, $in_footer );

といった組み込みメソッドの第一引数にあたるものです。
function.phpに以下のような記述があった場合

wp_register_script('script', get_template_directory_uri().'/js/script.js',array(),'1.1',true);

'script'がハンドルになります。


あと、細かいことですがheader.phpに<title>タグを記述するのはちょっと古い方法で
WordPress4.1からfunction.phpにadd_theme_support('title-tag');を記述する方法に変わっています。

wp_title()も4.4一で旦非推奨になっているので(非推奨を見送りにはなりましたが)、そのうち無くなるかもしれません。

投稿2016/04/19 17:08

manabufukai

総合スコア700

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

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

makoto-n

2016/04/20 11:09

ありがとうございます。
makoto-n

2016/04/20 12:00 編集

どうやらjQueryを読み込めていないようで、記述のどこにミスがあるかわかりますか? functionは触っていません。 titleのこと、ありがとうございます。
manabufukai

2016/04/20 16:29

> jQueryプラグインはjQuery本体より先に読み込むとエラーになります。 ここは変更されましたでしょうか? ※jQuery本体が読み込まれているかどうか、は ちょうど追記で上げてくださった画像の右側のコードをちょっと遡っていただいて 「jquery.slicknav.js」の下〜43行目までの間に入っていないでしょうか?(もしくはbody最後あたり) もう少しちゃんとした方法で探す場合は、追記画像のグレーでハイライトされている箇所(index)のすぐ上、「wp-includes/js」中にある「jquery」ディレクトリ直下に「jquery.js?ver=xxx」というファイルが出て来れば読み込まれています。 (それぞれディレクトリをクリックすると中身が展開されるのでご確認ください) テーマは何を使ってらっしゃいますでしょう? デフォルトで入っているtwenty-xx系のものならwp_head()に組み込みjQueryがフックされているので、wp_head()内で出力されます=それより前にプラグインを読み込むと確実にエラーになります。
makoto-n

2016/04/21 11:53

</body>の下に入っていました。 ありがとうございます。 テーマは自分で作っています。 難しいですね。
guest

0

ベストアンサー

JavaScript

1 jQuery(function () { 2 jQuery(document).ready(function(){ 3 jQuery('#menu').slicknav(); 4 }); 5}

では無く、

JavaScript

1 jQuery( function () { 2 jQuery( '.menu > ul' ).slicknav(); // WPのメニュー用 3 } );

です。
ChromeのデベロッパーツールなどでJavaScriptのエラーが出ないか確認し、エラーが出る箇所を修正するといいと思います。

wp_headwp_enqueue_script の記述順の件はmanabufukaiさんの記述をご覧ください。


追記:

(設置参考)
【Wordpressテーマにサブメニューを折りたためる「ツリー式モバイルメニュー」を設置するカスタマイズ方法】
http://nelog.jp/how-to-use-slicknav

(プラグインで導入してしまう方法)
【SlickNav Mobile Menu — WordPress Plugins】
https://ja.wordpress.org/plugins/slicknav-mobile-menu/screenshots/

投稿2016/04/19 17:16

編集2016/04/19 19:53
kei344

総合スコア69364

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

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

makoto-n

2016/04/20 12:00

.menuを書き変えても動作しません。 どうやらjQueryを読み込めていないようで、記述のどこにミスがあるかわかりますか? functionは触っていません。
kei344

2016/04/20 15:21

ChromeのデベロッパーツールなどでJavaScriptのエラーが出ないか確認し、エラーが出る箇所を修正するといいと思います。
makoto-n

2016/04/20 15:59

(index):50 Uncaught ReferenceError: jQuery is not defined とでているので画像を追記します。
kei344

2016/04/20 16:22

HTMLの最後のほう、フッタより下にスクリプト要素が読み込まれている可能性はありませんか?
makoto-n

2016/04/21 11:51

そうでした! ありがとうございます。
guest

0

header.php

php

1 <?php wp_head(); /* Template Name: WP1 */ ?> 2 <?php wp_enqueue_script( 'slicknav', get_template_directory_uri() .'/js/jquery.slicknav.js', array( 'jquery') ); ?> 3</head>

footer.php

php

1<?php /* Template Name: WP1 */ wp_footer(); ?> 2 <script> 3 (function($){ 4 $(document).ready(function(){ 5 $('.menu').slicknav(); 6 }); 7 })(jQuery); 8</script></body> 9</html>

参考までに書いておきます。

投稿2016/04/21 11:56

makoto-n

総合スコア436

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問