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

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

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

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

PHP

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

3206閲覧

Wordpressの子テーマの固定ページ内で特定のphpファイルを読み込んだ際のjsの読み込み

kawadai

総合スコア11

WordPress

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

PHP

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/04/28 06:16

編集2019/04/28 17:49

前提・実現したいこと

子テーマの固定ページのカスタムテンプレートを作っています。そのページ内の一部分に、phpファイルを問題なく読み込ませることが目標です。

現在はphpファイルを読み込ませることまでは成功しました。しかし、そのphpファイルの中身がうまく表示できません。
エラーやchromeのエラーを見ると、jsやcssの読み込みが行われていないようでした。エラーとしても読み込まれていません。なのでファイルパスの問題ではないようです。
ローカル環境ではうまくいったのですが、本番環境ではうまくいきません。

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

元々jsファイルに付属していた参考例のhtmlをもとに作成しています。
それをphpに変換して作業を行っています。(wordpress内にはhtmlがないと聞いたので)
ローカルでは、wordpressでも <script type~></script> でのjs読み込みで問題なかったのですが、本番環境ではうまく読み込まれていないようでした。

環境として

・親テーマ
・子テーマ
・ portfolio.php
・ turnjs4
・ books.php
・ js
・ jquery.min.1.7.js
・ modernizr.2.5.3.min.js
・ turn.min.js
・ css
・ books.css
・ jquery.ui.css

このような階層構造になっています。

該当のソースコード

*重要そうでない箇所はコードを省いています。もし足りないようでしたらコメントよろしくお願いいたします。
Portfolio.phpはcontentsの部分で下にいるbooksを読み込もうとしています。

php

1<?php 2get_header(); 3if ( have_posts() ) : 4 while ( have_posts() ) : the_post(); ?> 5 <div <?php post_class( 'section-inner' ); ?>> 6 <header> 7 </header><!-- .page-header --> 8 <div class="entry-content section-inner thin"> 9 10 11 <div class="portfolio"> 12 <?php include dirname(__FILE__) . '/turnjs4/books.php'; ?> 13 </div> 14 15 16 <div class="entry-content section-inner thin"> 17 <?php the_content(); ?> 18 </div> 19 </div> <!-- .content --> 20 </div> 21 <?php 22 if ( get_post_type() == 'post' ) get_template_part( 'related-posts' ); 23 endwhile; 24endif; 25 26get_footer(); ?> 27

次に問題のbooks.phpになります。html当初は<head>やdoctype宣言等も書かれていましたが、最終的にcontents内に読み込むので必要ではないと判断し削除しました。
このhtmlのなごりの箇所があってもローカル環境では動きました。そのため、ローカルで動いていた時の情報も補足で記載しております。

php

1 2<!doctype html> 3<html> 4<head> 5<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/js/jquery.min.1.7.js"/></script> 6<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/js/modernizr.2.5.3.min.js"/></script> 7</head> 8<body> 9 10↑はローカルでは起動した箇所。本番環境では力を発揮できなかったもの。「現在では削除」しております。 11 12---------ここからbooks.phpの内容--------- 13 14<div class="flipbook-viewport"> 15 <div class="container"> 16 <div class="flipbook"> 17 <div>画像の読み込み、ここは正常に表示されるので省きます</div> 18 </div> 19 <div class="pagenation"> 20       矢印を表示していました。cssが読み込まれないので正常か判断できません。 21 </div> 22 </div> 23</div> 24 25 26<?php 27function add_files(){ 28define("port", get_stylesheet_directory_uri()); 29 30 wp_enqueue_script('jquery',port.'/turnjs4/js/jquery.min.1.7.js'); 31 wp_enqueue_script('modernizr',port.'/turnjs4/js/modernizr.2.5.3.min.js'); 32 wp_enqueue_script('turn',port.'/turnjs4/js/turn.min.js'); 33 wp_enqueue_style('jquery2',port.'/turnjs4/css/jquery.ui.css'); 34 wp_enqueue_style('book',port.'/turnjs4/css/books.css'); 35} 36 37add_action('wp_enqueue_scripts', 'add_files'); 38?> 39 40 41<script type="text/javascript"> 42function43</script> 44 45↑ 外部化していないscriptもあります。これは読み込まれています。 46 47---------ここまでがbooks.phpの内容--------- 48 49yepnope({ 50 test : Modernizr.csstransforms, 51 yep: ['<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/js/turn.min.js', '<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/css/jquery.ui.css'], 52 nope: ['<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/js/turn.html4.min.js', '<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/css/jquery.ui.html4.css'], 53 both: ['<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/css/books.css'], 54 complete: loadApp 55}); 56 57↑ 「現在では削除」 58html時代は条件分岐で読み込むjsなどを読み込むことをしていたようです。こちらも作例ファイルの写しなのでよくわかってはいません。 59今はエラーを吐き出すので削除して、enqueueで単純に読み込もうとしています。html4用の対応は技術力がないのでとりあえずは考えていません。

補足情報

htmlとcssは初学者程度で知っていますが、php特にwordpressが絡むと訳が分かりません。
phpのファイルってdoctype宣言いらないよね?で調べるような知識ですので文章が見当違いの可能性もございます。
有識者の方々、ご助力をよろしくお願いいたします。

追記

調べてみたところ、個別ページでの読み込みではなく、functuion.phpにて特定ページのみに読み込ませるのがbetterとの記載を見つけましたので、個別での記載をやめfunctuion側でやろうとした記録を載せます。成功はしませんでした。何が違うのでしょう...

php

1<?php 2if(is_page( '40' )) { 3 define("port", get_stylesheet_directory_uri()); 4 function book_enqueue_scripts() { 5 wp_enqueue_script('konkon',port.'/turnjs4/js/jquery.min.1.7.js'); 6 wp_enqueue_script('modernizr',port.'/turnjs4/js/modernizr.2.5.3.min.js'); 7 wp_enqueue_script('turn',port.'/turnjs4/js/turn.min.js'); 8 wp_enqueue_style('concon2',port.'/turnjs4/css/jquery.ui.css'); 9 wp_enqueue_style('book',port.'/turnjs4/css/books.css'); 10 } 11 add_action( 'wp_enqueue_scripts', 'book_enqueue_scripts' ); 12 } 13?>

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

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

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

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

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

kawadai

2019/04/28 18:01

閲覧していただきありがとうございます。google chromeにてデベロッパーツールを開いてconsoleを確認してみました。エラーの箇所を確認してもJavascriptは表示されておりません。また、デベロッパーツールで見れるhtmlの隅々をみても、読み込もうとしているjavascriptは見当たりませんでした。
guest

回答1

0

ベストアンサー

とりあえずいくつか確認しつつ、ページへの出力を目指すことをお勧めします。

PHP

1define( "port", get_stylesheet_directory_uri() ); 2function book_enqueue_scripts() { 3 // if ( is_page( '40' ) ) { // これが正しく分岐できているかを先に確認するほうが良いでしょう 4 // wp_enqueue_script('konkon',port.'/turnjs4/js/jquery.min.1.7.js'); // WordPressはデフォルトでjQueryを読み込むようになっていますよ 5 wp_enqueue_script( 'modernizr', port.'/turnjs4/js/modernizr.2.5.3.min.js' ); 6 wp_enqueue_script( 'turn', port.'/turnjs4/js/turn.min.js', array( 'jquery' ) ); // jQueryのあとに読み込まれる指定が無い 7 // wp_enqueue_style( 'concon2',port.'/turnjs4/css/jquery.ui.css' ); // jquery.ui が読み込まれていないので不要では? 8 wp_enqueue_style( 'book', port.'/turnjs4/css/books.css' ); 9 // } // スクリプトの読み込みが出来たら分岐を試す 10} 11add_action( 'wp_enqueue_scripts', 'book_enqueue_scripts' );

【functions.phpでJSやCSSを一元管理する - SMART 開発者のためのウェブマガジン】
https://rfs.jp/sb/wordpress/wp-lab/wp_enqueue_script.html

【WordPressでスクリプトファイルを読み込むときはwp_enqueue_script関数を使う | 埼玉のWebコンサルタント ColdSleep Works】
https://works.coldsleep.jp/blog/wp_enqueue_script/

【WordPressでJavaScriptを読み込ませるならこうすると便利です(2018年) - Qiita】
https://qiita.com/yousan/items/f967f4e8e1e7f912be8a

投稿2019/04/29 08:14

kei344

総合スコア69364

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

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

kawadai

2019/05/01 15:59

いくつか試していく中でページ内に読み込みを行うことはできるようになりました。 しかし、scriptが読み込まれていてもその効力を発揮しないことがおきてしまいました。 現状として確認したのは ①エラーが出ているか→出てませんでした。 ②wordpressのjqueryバージョンを確認し、対応バージョンに入れ直しもディベロッパーツールにてロードされていることを確認しました。 ③質問にありました内容に関しましてはfunction.phpにておこないました。その結果ロードされ対象のjavascriptがディベロッパーツールにてロードされたことを確認いたしました。 ④headの中かbodyの終わりの方かをenqueueにてタイミング調整を両方とも試しましたが反応はありません。 ⑤同時に読み込まれているCSSは反応しています。 ・元々のhtml環境から変えた際のjs側のファイルパスの指定などの変更はあるものなのでしょうか?もともとその点は気にしたことがなかったです。 ・また、ページにロードできていても、何かwordpress特有のこと行わないと機能してくれないものなのでしょうか? ・ローカル環境では、クラスを対象にjsファイルが機能すると考えていたのですが認識違いでしたでしょうか? 調べてもよくわかりませんでした。
kawadai

2019/05/01 16:44

追記です。関係があるのかわかりませんが、プラグインでAutoptimizeをしていると読み込まれていてもhtmlのコード上では見えなくなってしまうような処理が行われているようです。これはそのjsが重要ではないと判断されているということなのでしょうか?しかしcssはしっかり仕事してくれているので関係ない気がいたしますが気になりましたで念のためお伝えいたします。 jqueryの読み込みはプラグインのオンオフに関わらず表示されていました。
kei344

2019/05/02 02:46

> js側のファイルパスの指定 どういうものを想定されているかがわかりません。jsが呼び出されているならファイルパスは何か関係あるのでしょうか。 > 何かwordpress特有のこと $ではなくjQueryでアクセスすることが必要ではあります。下記のようにすれば特に気にしなくても良くなります。(回答の2番目のリンクを参照) (function($) { // jQueryコード })(jQuery); > クラスを対象にjsファイルが機能すると考えていたのですが 特に試していないですが、公式サイトの記述を見るに下記のように呼び出す必要はありそうです。 $('#magazine').turn({gradients: true, acceleration: true}); 【GitHub - blasten/turn.js: The page flip effect for HTML5】 https://github.com/blasten/turn.js#whats-new > Autoptimize 使用していないのでよくわかりませんが、こういうプラグインやキャッシュ系のプラグインは、カスタマイズ中は切っておくなどしないとキャッシュにより変更が適用されないことがあります。
kawadai

2019/05/03 06:54

ありがとうございます。解決いたしました。 以前は <script type="text/javascript"> function loadApp() { var $win = $(window); のhtmlだったので、そのまま一文目を削除して function loadApp() { var $win = $(window); でやっていましたが、ご指摘の通りjQueryでアクセスというのを試して (function($) { var $win = $(window); を行ったら無事に機能することができました。 何度もありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問