サイトのwordpress化について

Question

店舗トップページをworpress化したいと考えているのですが、商品画像などは楽天はr-cabinet、yahooはストアクリエイタープロなどから画像のurlを読み込んで表示しているのですが、wordpress化する場合、imgタグにに/をつけただけでは表示されませんでした。どのように記述したらよいでしょうか？

Answer

ECマスターズの田中です。


は、Wordpressのテーマが保存されているディレクトリのURLを表示する命令ですので、
R-CabinetやストアクリエイターProなど、
外部サーバーに設置された画像の表示にご利用いただくことはできません。

imgタグのsrc="と"の間に、画像URLを直接ご記載いただきますようお願いします。

PHPを活用して一括で記載しようとされているなど、
問題がある場合は、お手数ですが詳しい内容を改めてお聞かせいただきますようお願いします。

Answer

＞＞imgタグのsrc="と"の間に、画像URLを直接ご記載いただきますようお願いします。

このようにしておりますが、表示されません。今まだサーバーにアップロードできないので他に考えられる原因を教えていただけますでしょうか。
ちなみに、cssをwordpressの様式に書き換える前にはr-cabinetの画像が表示されていました。

Answer

同じサイト内で、bxsliderを用いてスライドショーを作成しているのですtが静的htmlのときはうまく動くのですがwordpressにすると作動せず、bxsliderがうまく読み込めていないようなのですが、どのように記述したらよいでしょうか。

以下が現在のfunctions.phpにある記述です。jsなどはファイル分けしておらず、子テーマ直下にすべて置いてある状況です。


function add_my_scripts() {	
	//WordPress 本体の jQuery を登録解除
	wp_deregister_script( 'jquery');  
	//jQuery を CDN から読み込む
	wp_enqueue_script( 'jquery', 
	  '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', 
	  array(), 
	  '3.3.1', 
	  true // 終了タグの前で読み込み
	);
	wp_enqueue_style( 'bxslider_css', get_template_directory_uri() . '/jquery.bxslider.css', '4.1.2' );
	wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/jquery.bxslider.js',  '4.1.2' );
  }
  add_action('wp_enqueue_scripts', 'add_my_scripts');

Answer

r-cabinetに入っている画像が表示されなかった件は、自己解決しました。bxsliderの方をご協力いただけますと助かります。宜しくお願い致します。

Answer

ECマスターズの田中です。

//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
がタグ直前で読み込まれているのに対し、
jquery.bxslider.js がタグの中で読み込まれるため、
前提となるjqueryが読み込まれておらず、エラーとなっている可能性がございます。

jQueryを直前に移動する必要がなければ
,
true // 終了タグの前で読み込み
を削除していただく、

jQueryが移動出来ない場合は
wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/jquery.bxslider.js', '4.1.2' );
を
wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/jquery.bxslider.js', '4.1.2', true );
または
wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/jquery.bxslider.js', array('jquery'), '4.1.2', true );
のようにご変更いただく、

などの方法でご対応いただきますようお願いします。

それでも動作しない場合は、
実際のページに記載されたjquery.bxslider.jsのURLに直接アクセスして
JSファイルの内容が閲覧できるかどうか、ご確認いただきますようお願いします。

Answer

ありがとうございます。まだ正常に動くようになっていないのですが、サーバーにアップしてから見ていただいた方が良いように感じるので、また後日質問させていただきます。

別件ですが、wordpressでプラグインを使って検索窓を作りたいと考えていますが、サイト内ではなく楽天の商品ページを検索して表示することは可能でしょうか？
可能な場合、どのプラグインを使ってどのように設定したらよいでしょうか。

Answer

ECマスターズの田中です。

> 別件ですが、wordpressでプラグインを使って検索窓を作りたいと考えていますが、サイト内ではなく楽天の商品ページを検索して表示することは可能でしょうか？

WordPressのフォーム用プラグインは、
原則として、結果の保存先など様々な機能と連携しており、
楽天検索を実施するような、想定されていない使い方をしようとすると
本来の機能の動作を止めるために大きな労力が必要となるため、
HTMLを直接記載して作成いただくことをおすすめします。

楽天ショップ内の際と同様、下記のようなタグをご設置いただく形になります。

= この下の行から ==================== 
 
 
 
 
 
= この上の行まで ==================== 
※店舗IDの部分は、店舗内検索のURLに含まれる６桁の数字にご変更ください。

Answer

検索窓の件、教えていただき助かりました。ありがとうございます。

bxsliderの方ですが、先日教えていただいた内容を試したのですがうまくいきませんでした。
以下の記述をhead内にしておりまして、この場合はどのようにしたらよいのでしょうか。


    jQuery(function($){
      var slider;
      jQuery(document).ready(function($){
            // var windowWidth = jQuery(window).width();//windowのwidthを取得
            // var width = windowWidth / 2;//windowのwidthを数字で割る
      slider = $('.key_visual').bxSlider({
          auto: true,
          pager: false,
          buildPager: null, //サムネイルページャーの指定
          speed:1500,
          responsive: true,
          // slideWidth: 352,//スライダーの幅
          slideWidth: 1000,//スライダーの幅
          shrinkItems: true, 
          speed: 1000,
          // pager: true,
          maxSlides: 2, //最大表示数
          minSlides: 2,
          moveSlides:1
        });
      });
      });
      jQuery(window).on('load', function($){
      if( jQuery('.key_visual').width() == 0 ) slider.reloadSlider();
      });

Answer

ECマスターズの田中です。

いただいたタグ内の記述にエラーの原因はみあたらず、
おそらく前提となるJSファイルの読み込みに関連して
エラーが発生しているため、

正しい原因を判断するには、
実際のページを表示し、
デベロッパーツールを利用してエラーの内容、発生するタイミングを確認し、
修正を試みる必要がございます。

そのため、動作が確認できるページのURLを
返信もしくは元質問の「投稿内容について報告する」よりお送りいただきたいのですが、
難しい場合は、
・「ページのソースを表示」で表示される内容
・デベロッパーツールのエラー内容（コンソールに赤い文字で表示された内容）
　https://eng-entrance.com/javascript-display-error
といった、詳しい状況をお知らせいただきますようお願いします。

Answer

エラー内容はこちらです。写真で申し訳ありません。###HR######IMG0be1572fb8a401d45388320c6a5e3d382.jpegIMG0###

Answer

ECマスターズの田中です。

お送りいただいたエラー内容を確認したところ、
jquery.bxslider.css
jquery.bxslider.js
を読み込もうとしたところ、ファイルが見つからなかったという
エラーが発生しております。

該当ページのソースをご確認の上、
jquery.bxslider.css
jquery.bxslider.js
のURLが想定したURLになっているか、ご確認いただきますようお願いします。

また、
jQueryが定義されていない（＝jQueryの読み込みに失敗しているか、読み込み前にjQueryを使用している）
というエラーも発生しております。

先程いただいたscriptタグの前に、
jQuery本体が読み込まれていないと、このようなエラーになります。
jquery.min.js は、ソースのどの部分に記載されておりますでしょうか。

その他にも、
calendar.jsが見つからない、
500x500.pngが見つからない、
MaterialIcons-Regular.woff2、MaterialIcons-Regular.woff、MaterialIcons-Regular.ttfの読み込みに失敗している、
といったエラーが発生しております。
これらは今回ご質問いただいたケースとは関係ありませんが、
必要に応じて原因確認の上ご対応いただきますようお願いします。

Answer

ありがとうございます。jquery.min.jsはfonctions.phpに書いております。

function add_my_scripts() {	
	//WordPress 本体の jQuery を登録解除
	wp_deregister_script( 'jquery');  
	//jQuery を CDN から読み込む
	wp_enqueue_script( 'jquery', 
	  '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', 
	  array(), 
	  '3.3.1'
	);
	wp_enqueue_style( 'bxslider_css', get_template_directory_uri() . '/jquery.bxslider.css', '4-4.2.12' );
	// wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/jquery.bxslider.js',  '4.1.2' );
	// wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/jquery.bxslider.js', array('jquery'), '4.1.2', true );
	wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/jquery.bxslider.js', '4-4.2.12', true );
  }
  add_action('wp_enqueue_scripts', 'add_my_scripts');

Answer

ECマスターズの田中です。

今回の問題を調査するためには、
実際にどのようなURLにアクセスしようとしたか確認するために、
ブラウザで表示した際に読み込まれた、HTMLのソースが必要となります。

https://pasomaki.com/chrome-view-source/
上記ページにございますように、
該当ページをChromeで表示した際に
余白を右クリック→「ページのソースを表示」をクリックした際に表示されるHTMLにて、
jquery.bxslider.css・jquery.bxslider.jsのURLが想定したURLになっているか、
いただいたscriptタグとjquery.min.js用のscriptタグはどちらが前に読み込まれているか、
ご確認いただきますようお願いします。

どうしてもわからない場合は、HTMLのソースを
返信もしくは「投稿内容について報告する」より
お送りいただきますようお願いします。

Answer

お手数をおかけして申し訳ありません。先ほど「投稿内容について報告する」より、header.php、index.php、footer.phpの順に張り付けて送信い………（省略）………
ログインして全文を読む

Answer

ECマスターズの田中です。

header.php、index.php、footer.phpの内容をお送りいただき、
ありがとうございます。

最初に、先にお送りいただいた


jQuery(function($){
（中略）
if( jQuery('.key_visual').width() == 0 ) slider.reloadSlider();
});


上記scriptタグを、2行下にございます

と

の間に移動していただきますようお願いします。

次に、functions.phpにて
wp_enqueue_style( 'bxslider_css', get_template_directory_uri() . '/jquery.bxslider.css', '4-4.2.12' );
wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/jquery.bxslider.js', '4-4.2.12', true );
各行に含まれている
get_template_directory_uri()
を
get_stylesheet_directory_uri()
にご変更いただきますようお願いします。

以上2点を変更の上、表示をご確認いただき、
改善されないようであれば、改めてコンソールのエラー内容をお送りいただきますようお願いします。

Answer

ありがとうございます。
教えていただいたようにしましたが、改善されませんでした。
エラー内容を画像に添付いたします。
よろしくお願い致します。###HR######IMG0955b7f4c7050f4fe094dd9eaea74803f.jpegIMG0###

Answer

ECマスターズの田中です。

お送りいただいた写真の左上（Elementsパネル）を確認したところ、
get_template_directory_uri()
で取得されたURLが
http://localhost/
で始まっているようです。

localhostは、
https://wa3.i-3-i.info/word1102.html
のように、自分のPC内を示すURLとなっておりますので、
自分のPC内で各種JSファイルを探そうとして見つからずにエラーが出ております。

編集いただいているWordPressは、
自身のPC内にあるテスト環境などではなく、本番環境でしょうか。
その場合は、WordPressの管理画面＞一般＞設定から
サイトアドレス (URL)
が
localhost
に設定されていないか、ご確認をお願いします。
https://knowledge.sakura.ad.jp/25847/
※WordPress アドレス(URL) は、変更しないようご注意ください。

Answer

私が今編集しているのは本番環境ではなく、ローカル環境です。bxsliderのjsファイルなどは何もいじらずそのまま静的htmlとして書いていたものをコピペしたの………（省略）………
ログインして全文を読む

Answer

ECマスターズの田中です。

ローカル環境で編集されている件、承知しました。

2021/09/06 18:26 にいただいた写真の左上に写っているURLが、
ローカル環境の中で読み込もうとしているJSファイルのアドレスとなっておりますので、
同じ画面の中にあるjquery.bxslider.jsがどのようなURLになっているか、
そのURLを直接開くとファイルの内容が確認できるかどうか、
ご確認いただきますようお願いします。

写真の左上の画面は、いわゆるElementsパネルとなっております。
https://weback.net/utility/1432/
Elementsパネルの操作中にCtrl+F（Ctrlキーを押しながらFキー）を押すと、
検索窓が表示されますので、
jquery.bxslider.js
と入力の上検索して、URLをご確認いただきますようお願いします。
（※文字色が緑色の部分はコメントアウトされており、表示に影響しませんのでご注意願います）

Answer

jquery.bxslider.jsと検索して出たアドレスを開くと、以下のように出ました。


この localhost ページが見つかりません次の http://localhost/wordpress/wp-content/themes/mytheme/jquery.bxslider.js?ver=1 のウェブページは見つかりませんでした:http://localhost/wordpress/wp-content/themes/mytheme/jquery.bxslider.js?ver=1
HTTP ERROR 404

Answer

ECマスターズの田中です。

いただいたメッセージが出たということは、つまり、
http://localhost/wordpress/wp-content/themes/mytheme/jquery.bxslider.js
を読み込もうとしたが、その場所にファイルがなかった、
ということを指しております。
（説明のため、不要なパラメータは削除しております）

このURLは、ローカル環境の、
wordpress ディレクトリの中の
wp-content ディレクトリの中の
themes ディレクトリの中の
mytheme ディレクトリの中の
jquery.bxslider.js ファイルを指しておりますが、
該当ディレクトリの中に「jquery.bxslider.js」が入っているかどうか、
一方ジーテンさんにてどのディレクトリに「jquery.bxslider.js」を設置されたか、
ご確認いただきますようお願いします。

また、静的HTMLを開いて同様の処理を行っていただき、
どのようなURLにアクセスするか、ファイルの内容は閲覧できるか、
ご確認いただきますようお願いします。

Answer

ありがとうございます。myhtmes内に「bxslider-4-4.2.12」というファイルがあり、その中にjsonファイルやmdファイルなどとともにjquery.bxslider.jsが入っていました。そちらをmytheme内に移動したところ、bxsliderが正常に動作しました。何度もご協力いただいて、ありがとうございました。
大変助かりました。