前提・実現したいこと
子テーマの固定ページのカスタムテンプレートを作っています。そのページ内の一部分に、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"> 42function ~ 43</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?>
回答1件
あなたの回答
tips
プレビュー