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

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

ただいまの
回答率

88.78%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,047

kawadai

score 11

前提・実現したいこと

子テーマの固定ページのカスタムテンプレートを作っています。そのページ内の一部分に、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 
get_header();
if ( have_posts() )  : 
    while ( have_posts() ) : the_post(); ?>
        <div <?php post_class( 'section-inner' ); ?>>
            <header>
            </header><!-- .page-header -->
            <div class="entry-content section-inner thin">


                <div class="portfolio">
                    <?php include dirname(__FILE__) . '/turnjs4/books.php'; ?>
                </div>


                <div class="entry-content section-inner thin">
                    <?php the_content(); ?>
                </div>
            </div> <!-- .content -->
        </div>
        <?php 
        if ( get_post_type() == 'post' ) get_template_part( 'related-posts' );
    endwhile;
endif; 

get_footer(); ?>


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

<!doctype html>
<html>
<head>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/js/jquery.min.1.7.js"/></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/js/modernizr.2.5.3.min.js"/></script>
</head>
<body>

↑はローカルでは起動した箇所。本番環境では力を発揮できなかったもの。「現在では削除」しております。

---------ここからbooks.phpの内容---------

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div>画像の読み込み、ここは正常に表示されるので省きます</div>
        </div>
        <div class="pagenation">
       矢印を表示していました。cssが読み込まれないので正常か判断できません。
        </div>
    </div>
</div>


<?php
function add_files(){
define("port", get_stylesheet_directory_uri());

    wp_enqueue_script('jquery',port.'/turnjs4/js/jquery.min.1.7.js');
    wp_enqueue_script('modernizr',port.'/turnjs4/js/modernizr.2.5.3.min.js');
    wp_enqueue_script('turn',port.'/turnjs4/js/turn.min.js');
    wp_enqueue_style('jquery2',port.'/turnjs4/css/jquery.ui.css');
    wp_enqueue_style('book',port.'/turnjs4/css/books.css');
}

add_action('wp_enqueue_scripts', 'add_files');
?>


<script type="text/javascript">
function</script>

↑ 外部化していないscriptもあります。これは読み込まれています。

---------ここまでがbooks.phpの内容---------

yepnope({
    test : Modernizr.csstransforms,
    yep: ['<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/js/turn.min.js', '<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/css/jquery.ui.css'],
    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'],
    both: ['<?php echo get_stylesheet_directory_uri(); ?>/turnjs4/css/books.css'],
    complete: loadApp
});

↑ 「現在では削除」
html時代は条件分岐で読み込むjsなどを読み込むことをしていたようです。こちらも作例ファイルの写しなのでよくわかってはいません。
今はエラーを吐き出すので削除して、enqueueで単純に読み込もうとしています。html4用の対応は技術力がないのでとりあえずは考えていません。

補足情報

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

追記

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

<?php
if(is_page( '40' )) {
    define("port", get_stylesheet_directory_uri());
    function book_enqueue_scripts() {
        wp_enqueue_script('konkon',port.'/turnjs4/js/jquery.min.1.7.js');
        wp_enqueue_script('modernizr',port.'/turnjs4/js/modernizr.2.5.3.min.js');
        wp_enqueue_script('turn',port.'/turnjs4/js/turn.min.js');
        wp_enqueue_style('concon2',port.'/turnjs4/css/jquery.ui.css');
        wp_enqueue_style('book',port.'/turnjs4/css/books.css');
            }
    add_action( 'wp_enqueue_scripts', 'book_enqueue_scripts' );        
    }
?>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/04/29 02:53

    JavaScript側でエラーは出ていませんか?デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

    キャンセル

  • kawadai

    2019/04/29 03:01

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

    キャンセル

回答 1

checkベストアンサー

+2

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

define( "port", get_stylesheet_directory_uri() );
function book_enqueue_scripts() {
    // if ( is_page( '40' ) ) { // これが正しく分岐できているかを先に確認するほうが良いでしょう
        // wp_enqueue_script('konkon',port.'/turnjs4/js/jquery.min.1.7.js'); // WordPressはデフォルトでjQueryを読み込むようになっていますよ
        wp_enqueue_script( 'modernizr', port.'/turnjs4/js/modernizr.2.5.3.min.js' );
        wp_enqueue_script( 'turn', port.'/turnjs4/js/turn.min.js', array( 'jquery' ) ); // jQueryのあとに読み込まれる指定が無い
        // wp_enqueue_style( 'concon2',port.'/turnjs4/css/jquery.ui.css' ); // jquery.ui が読み込まれていないので不要では?
        wp_enqueue_style( 'book', port.'/turnjs4/css/books.css' );
    // } // スクリプトの読み込みが出来たら分岐を試す
}
add_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/05/02 00:59

    いくつか試していく中でページ内に読み込みを行うことはできるようになりました。
    しかし、scriptが読み込まれていてもその効力を発揮しないことがおきてしまいました。
    現状として確認したのは

    ①エラーが出ているか→出てませんでした。
    ②wordpressのjqueryバージョンを確認し、対応バージョンに入れ直しもディベロッパーツールにてロードされていることを確認しました。
    ③質問にありました内容に関しましてはfunction.phpにておこないました。その結果ロードされ対象のjavascriptがディベロッパーツールにてロードされたことを確認いたしました。
    ④headの中かbodyの終わりの方かをenqueueにてタイミング調整を両方とも試しましたが反応はありません。
    ⑤同時に読み込まれているCSSは反応しています。

    ・元々のhtml環境から変えた際のjs側のファイルパスの指定などの変更はあるものなのでしょうか?もともとその点は気にしたことがなかったです。
    ・また、ページにロードできていても、何かwordpress特有のこと行わないと機能してくれないものなのでしょうか?
    ・ローカル環境では、クラスを対象にjsファイルが機能すると考えていたのですが認識違いでしたでしょうか?

    調べてもよくわかりませんでした。

    キャンセル

  • 2019/05/02 01:44

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

    キャンセル

  • 2019/05/02 11: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
    使用していないのでよくわかりませんが、こういうプラグインやキャッシュ系のプラグインは、カスタマイズ中は切っておくなどしないとキャッシュにより変更が適用されないことがあります。

    キャンセル

  • 2019/05/03 15:54

    ありがとうございます。解決いたしました。
    以前は
    <script type="text/javascript">
    function loadApp() {
    var $win = $(window);
    のhtmlだったので、そのまま一文目を削除して

    function loadApp() {
    var $win = $(window);

    でやっていましたが、ご指摘の通りjQueryでアクセスというのを試して

    (function($) {
    var $win = $(window);

    を行ったら無事に機能することができました。

    何度もありがとうございました。

    キャンセル

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

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る