ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

       後で読む

s1こちらのブログなのですがWordPressを使用して運用しています。今回は上の画像の用にWordPressで使用しているプラグインの「Popular Posts」で、WordPressのアップデート後にサムネイルの取得がうまくいかないという現象が起きました。なんとか原因を特定して修正が出来ましたのでメモがてらまとめていきます。

SPONSORED LINKS

WordPress「Popular Posts」で画像が表示されなくなった原因

以外とあっさりと原因は特定出来ました。両者の画像のURLをコピーして見たとこ下記のようにURLが違いました。あーそりゃ画像は表示されないよねって感じでちょっと拍子抜けでしたが、、、、

「Popular Posts」のアイキャッチ画像

https://smart-phone.783783783.com/wp-content/uploads/2014/08/%E5%9B%B3%E5%9B%B31-100×100.png

アイキャッチの画像

https://smart-phone.783783783.com/wp-content/uploads/2014/08/図1.png

こんな感じで、URLに含まれる日本語が化けてしまっているのが原因のようでした。(末尾の100×100というのはリサイズがかかっているのだと認識してスルーです。)

こういった事象は今までは出てなかったのですが、最近になって発見しました。1ヶ月ほど前まではどれも正常に表示されていたのでおそらくプラグインか、WordPress自体のアップデートをした際にちょっとした変更が行われて表示されなくなってしまったのかと推測されます。(どうやら日本語のファイルを上げた際のファイル名の変換され方が変わっている模様です。)

画像が表示されない場合の改善方法

修正方法は単純で、ファイルのURLを変更してあげれば問題なく表示されるようになるはずです。
sキャプチャ2
ファイルの名の変更ということで、メディア→ライブラリと進みファイルの名の変換を試みましたが、、、、
sキャプチャ3
あれできない。パーマネントリンクの変更は可能でしたがファイル名の変換はできませんでした。ということで一番早そうな手はずとして画像の再アップロード・再設定のてはずをとることにしました。

再アップロードの手順

  1. 対象の画像がない場合は、すでにアップロードされている画像を保存します。
  2. 画像の名前を適当な英数字に変更します。
  3. 対象の画像をWordPressに再アップロード
  4. 対象の記事のアイキャッチ画像を先ほどアップした画像に変更します。

以上の手順を踏むことによって治りました。
sキャプチャ4
ふーこれで一段落です。あとはこれを対象の記事に関してやる感じです。

今回の教訓とまとめ

多くのWEBデザイナーさんとかにはあたりまえのことかもしれませんが

アップロードする画像の名前を必ず英数字にすること

これが大事だと再認識。私は、特にコーディングしたりシステム書いたりできないにわかブロガーなのでこの辺りが完全に抜けてました。簡単にスクショが取れる「snipping tool」であるとか、

Skitch: 撮る。描き込む。共有する。
カテゴリ: 仕事効率化
現在の価格: 無料

とかを乱用してそのまま画像のアップとかをしてしまっていたので結構適当な日本語名のファイルが多くなってしまっていました。

あぁ、今度表示されない奴が出てきたらその都度修正しなきゃ(^_^;)大変です。

皆さんはこんな初歩的なことで躓かないようにしてくださいね。

てな感じで。

 - WordPress, プラグイン , , ,

  関連記事

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

images_112014_115155_AM
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

icon_1r_192
【アクセス数報告】2015年4月のPVとアフィリエイトの収益とか

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

photo-express-for-google-tb
Picasa and Google Plus ExpressからPhoto Express for Googleに変更しました。【WordPressプラグイン】

前に書いたエントリーで利用していたプラグインがGoogleの認証方法の変更によっ …

icon_1r_192
【アクセス数報告】2015年6月のPVとアフィリエイトの収益とか

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

sum1014
【STINGER5カスタマイズ】サイドバーにプロフィール設置

今回はSTINGER5のカスタマイズのお話です。サイドバーにプロフィールを追加し …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です