前提・実現したいこと
wordpress内に写真をめくることのできる turn.js を実装することです。
以下が大元のデータを配布しているサイトになります。
http://www.turnjs.com/
発生している問題・エラーメッセージ
http://inomacreate.com/jquery-turnjs/
上記のサイトを参考に動作確認のためそのままコピペで制作しているのですが、画像が縦に複数表示されています。
写真が同一箇所に表示されるわけでもなく、またペラペラめくれません。
おそらくjavascriptに問題と思っているのですが、元のものをまねただけなので何が間違っているかが判断できません。
wordpress環境で投稿をプレビューし、検証を行ったところturn.jsとportfolio.jsの名称があったので、javascriptは読み込みことには成功していることまでは確認できました。
該当のソースコード
どこに誤りがあるのかわからないので一通り載せます。
javascript
1(function($) { 2'use strict'; 3var has3d, 4 hasRot, 5 vendor = '', 6 version = '4.1.0', 7 PI = Math.PI, 8 A90 = PI/2, 9 isTouch = 'ontouchstart' in window, 10 mouseEvents = (isTouch) ? { 11 down: 'touchstart', 12 move: 'touchmove', 13 up: 'touchend', 14```上記がturn.jsの最初の一部になります。元のデータより何も変更は加えてないので途中までの表記にしました。 15 16```javascript 17jQuery(function(){ 18 jQuery('#portfolio_a').turn( 19 { 20 elevation: 50, 21 gradients: true, 22 autoCenter: false, 23 direction: 'rtl', 24 } 25 ); 26}); 27```参考サイトのもののほぼコピペです。名称はportfolio.jsになります。 28```wordpress 29<pre class="wp-block-code"><code><div id="portfolio_a"> 30<div> 31<img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-26.png" alt="" > 32</div> 33<div> 34<img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-25.png" alt="" > 35</div> 36<div> 37<img src="http://localhost/wordpress/wp-content/uploads/2018/10/2018-01-23.png" alt="" > 38</div> 39<div> 40<img src="http://localhost/wordpress/wp-content/uploads/2018/10/2017-12-21.png" alt="" > 41</div> 42</div> 43</code></pre> 44``` wordpressのgutenbergを用いたら<pre><code>が増えましたがこれを投稿ページのブロック部分に記述しております。 45上のportfolio箇所で定義したportfolio_aがここで読み込まれていると思っています。 46 47```function 48<?php function add_script(){ 49 wp_enqueue_script('portfolio', get_template_directory_uri() . '/js/portfolio.js', array('jquery'), '', true); 50 wp_enqueue_script('turn', get_template_directory_uri() . '/js/turn.js', array('jquery'), '', true); 51 } 52 add_action( 'wp_enqueue_scripts', 'add_script' ); 53?> 54```wordpressのfunction.phpに追加記述している内容になります。function内には親テーマ子テーマの引継ぎのphpが記載されている以外ほかの記述はありません。 55 56 57### 試したこと 58 59```header 60<?php wp_deregister_script('jquery'); ?> 61<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 62```conflictを起こすことがあると聞いたので一応header.php内でgoogle側のjqualyを読み込むように設定してみたりしました。 63現状このペラペラページに該当するcssの記述(heightやwidthなど)は行ってはいないのですが、javaの動作に関しては関係ないものと思いひとまず省いております。 64 65 66### 補足情報(FW/ツールのバージョンなど) 67 68バージョンに関しましては2018/10/29現在すべて最新版をダウンロードして用いております。 69localで確認をしております。xamppを用いてlocal環境のwordpressで確認しております。 70不足している情報などありましたら教えていただけますと幸いです。 71 72 73### 追記 20181103 74 75google chromeにて検証を行った際、 76 77Failed to load resource: the server responded with a status of 404 (Not Found) 78というエラーが出ておりました。 79調べてみるとjqueryが定義されていないということなのですが、wordpressのテーマをカスタムで制作しているためまずどこでjqueryが導入されているのか探し出せておりません。コンソールではJQMIGRATE: Migrate is installed, version 1.4.1が入っていることは確認できました。 80 81dreamweverにてファイルを横断して検索をかけてみたところ、jsやjQuery関して読み込まれている箇所は見当たりませんでした。 82一般的な<script></script>で囲まれている文章がfunction.php内で 83 84<script>jQuery( 'html' ).removeClass( 'no-js' ).addClass( 'js' );</script> 85 86のように記述が行われておりました。何か関係があるのでしょうか?
回答3件
あなたの回答
tips
プレビュー