「Welcart」×「Blanc」で画像が表示されなくなった時の対処法

ABOUTこの記事をかいた人

がみたか

兵庫県加古川市在住の2児の父親です。 ・アクセスバーズ®プラクティショナー ・Webの何でも屋さん ・オルゴナイトのネットショップ店長 ・某コミュニティの技術サポート など、「お客さんの周りも笑顔にしたい」という思いで、あれこれやってます^^ 最近のお気に入りのマンガは「暗殺教室」で、ハマりすぎて何周したかわかりませんw

「がみたか.com」でご提供しているサービスはこちら!

どうも、「癒せるブログ屋さん」がみたかです。

 

僕はこのブログの他に、嫁さんと共同で運営している「苺一会(いちごいちえ)」という、主にオルゴナイトを販売しているネットショップを運営しています。

Wordpressでネットショップを作るためのプラグインと無料のテーマを紹介します

2015.08.05

※オルゴナイトについてはこちらの記事をご覧ください!

オルゴナイトとは?100均でもそろう制作に必要な材料と作り方のまとめ

2017.05.30

 

さて、このネットショップ「苺一会(いちごいちえ)」は、

  • WordPressを使っている。
  • Welcartというプラグインでカート機能を追加している。
  • BlancというWelcart対応のテーマを使っている。

といった環境で運営しているのですが、本体でもあるWordpressのアップデートで商品画像が表示されないという致命的なトラブルが起りました。

今回はその「Welcart」×「Blanc」でネットショップ運営した時にWordPressを4.5にしたら商品画像が表示されなくなるトラブルの対処法についてお話しようと思います。

 

 

ネットショップに起こった不具合

WordPressのアップデートでバージョンが4.5になった時に、いつものように「苺一会(いちごいちえ)」のWordpressもアップデートを行いました。

そして、いつものようにショップ内を確認してみたところ、1番大事なものが見当たりません…

画像が表示されない!

画像が表示されない!

写真が無い!!

ネットショップで写真が無いのは致命的です。

売る気がさらさら無いお店のような印象をあたえ、買う方もテキスト情報だけで判断する「CDのジャケ買い」に近いものがありますw

(それはそれで楽しいけど)

しかも、この「苺一会(いちごいちえ)」のオルゴナイトは、嫁さんのデザインも売りの1つなので、写真が無いと話になりません(^_^;)

 

しばらくはWordpressを4.4にダウングレードする事で事なきを得ましたが、いつまでもこのままではセキュリティ上よろしくないので解決策を探し回った結果、1つの原因とその解決方法が書かれた記事を発見しました。

WordPressのダウングレードはこちらのサイトを参考にしました。
WordPressをダウングレードする方法|WP navi

 

ネットショップとは関係ない記事(写真は「Blanc」でしたが…)でしたが、その記事を参考にし、今はWordpress4.5.2にアップデートをしても画像が表示されるようになったので、その手順を解説していきますね^^

 

WordPressのアップデートによる「Blanc」の不具合を修正する

「Flex Slidar」の修正をする

はじめにこの不具合の原因を書いておくと、この「Blanc」の商品詳細ページの画像表示には、Javascriptで動く「Flex Slidar」というプログラムで表示されており、「Flex Slidar」がうまく画像情報を拾えなくなったため表示されなくなってしまっていると考えられます。

なので、FTPを使ってプログラムファイルを見つけ出し、修正してあげる必要があります。

ちなみにこの記事を参考にしました。ありがとうございます!!
WordPress 4.5 jQuery Syntax errorで、FlexSlider 2が動かないときの対処法。|サイゴンのうさぎ

 

FTPで「scripts.js」というプログラムファイルを探しだす

さて、今回の原因となっているのは「scripts.js」というプログラムファイルで、以下の順番にフォルダ(ディレクトリ)を開いていくとたどり着くことができます。

Xサーバーの場合です

「ドメイン名」→「public_html」→「wp-content」→「theme」→「blanc」→「scripts.js

Blancのアップデート対応3

FTPソフトの画面

 

この「scripts.js」をダウンロードします。

 

「scripts.js」を編集する

「scripts.js」をダウンロードしたら、テキストエディタでそれを開き、24行目にある[href^=#]となっているところを[herf^=”#”]に変更して保存します。

Blancのアップデート対応4

テキストエディタで編集する。

この保存した「scripts.js」を同じディレクトリ「blanc」の中にアップロードします。


追記:

スマホ表示の時に表示されていなかったので、27行目のこの部分も修正。

Blancのアップデート対応4-2

同じように「#」を「”#”」に修正する。

これでスマホで見た時もちゃんと画像が表示されるようになりました^^


これだけで直りますw

 

Blancのアップデート対応5

無事に表示されました^^

 

まとめ

今まで何に悩んでたんだ?ってぐらいあっけなく直ったわけですが、テーマ名で検索していたらおそらく一生直らないでしょうw

それぐらい情報が皆無だったので今回この記事を書いたのですが、今回思ったのは、少しずらしたら答えが見つかったので(今回は「Flex Sridar」)検索するにもいろんな視点で見ることが大事だなと(^_^;)

 

同じような理由で、Wordpressをアップデートできずに悩んでる人が、一人でも多く解決できることを祈ってます^^

 

今回はこの辺で!次の記事でまたお会いしましょう^^

WordPress × Welcartのいろんな情報に、1クリックでアクセスできるページはこちらです

「Wordpress」×「Welcart」でネットショップを運営するためのまとめ

2017.01.11

 

PS.

アクセスバーズ®で、思考が柔軟になったのかもしれませんね^^

興味があればこちらをどうぞ!

アクセスバーズ™️を詳しく知りたい?

アクセスバーズ™️を、わかりやすく解説したメルマガ講座やってます。

登録していただいた特典として、

アクセスバーズ™️のセッションを特別価格で受けていただけます^^

 

アクセスバーズ™️を受けてみませんか?

バーズ™️ファシリテーターになって、ますますパワーアップ!?

アクセスバーズ™️セッションのお申し込みはこちらまで^^

Facebookアイキャッチテンプレ02

 

この記事が気に入ったら
いいね!をお願いします。

Twitter で

mineo

記事が気に入ったらシェアをお願いします^^