elementorで作ったサイト、ふと見るとこんな感じで画像が表示されていないことありませんか？
これはリンク切れと言われる現象で、ページを表示するときに写真がうまく読み込めなかったという状態です。
写真のリンク切れの原因は何？
よくある原因が 混在コンテンツです。
はて、そんなことした覚えはないが…と思うかもしれませんが
例えば、Xサーバーで「常時SSL化」をONにして（=常にhttpsになるように）WordPress環境を作っても
WordPress内でhttpのリンクが残ってしまうことがあるのです。
そうするとhttpsのサイトに、httpのリンクの画像が存在してしまい、混在コンテンツ！NG！となってしまうんです。
混在コンテンツで写真が表示されないのはなぜ？
ではなぜhttpsのサイトに、httpの画像が入ってたら表示されないのか？
それは、Google Chromeなどブラウザのセキュリティがめちゃ厳しいためです。
ブラウザは混在コンテンツを見つけたら
「httpsページの中に、httpのリンクが混ざってる！危険だから、この写真を表示するのはブロックするね！」と、強制的にシャットアウトしてしまうんです。
それで結果的にリンク切れになって、元の画像が表示されないというわけです。
elementorのサイトで写真のリンク切れを直す方法
http の部分をすべて https に書き換えてあげればいいだけです！
手動で一つずつ直す必要はありません。
次の手順で一括修正していきましょう！
ステップ1：WordPressの基本URLがhttpsになってるか確認
WordPressダッシュボード > 設定 > 一般から
・WordPress アドレス (URL)
・サイトアドレス (URL)
を確認してください。
大体ここがhttpのままであることが原因です。
この大元がhttpだから画像のURLもhttpになってたということですね。
どちらもsを追加して、httpsとなるようにしましょう。
ステップ2：elementor ツール URL変換
WordPressダッシュボード > elementor > エディター > ツール > URLを変更 タブ から
このように
・上：http
・下：https
と入力して「URLを変更」ボタンをクリックしてください。
これで http → https に書き換わります！
ステップ3：キャッシュ削除
今度は WordPressダッシュボード > elementor > エディター > ツール > Elementorキャッシュ で「ファイルとデータの削除」をクリックしておきましょう。
これで、たまにページに変更を加えても実際にはなんか変わってないぞ！という現象（キャッシュが残っている状況）を防ぎます。
それでもなんかうまくいかない場合…
elementorツールのURL変換の代わりに、Better Search Replaceというプラグインを使ってみてください。
elementorツールのURL変換は、elementorで作ったページ内のデータのみにしか適用されません。
例えば、elementor上で追加した画像のURLなどには適用されますが、
・elementor以外のエディタやブロックエディタ（通常の投稿画面）で作ったページの画像URL
・テーマの設定でアップロードしたロゴ画像やファビコン
には適用しないんです。
そこでこのプラグインを使えば、それらも含めて全てURL変換してくれます。
Better Search Replaceの使い方
※このプラグインを使うとデータベースが直接書き換わるため、作業前に必ずバックアップを取ってください！
プラグインの設定画面は、WordPressダッシュボード > ツール にあります。
以下のような流れで設定してみてください。
① URLを入力（検索：httpのURL、次と置換：httpsのURL）
② テーブルを選択で全て選択する（ここで影響させたくない範囲があればそこは選択しない）
③ ドライランのチェックは外す（一回どこに影響するのか確認したければチェックをつけておく）
④ 実行ボタンを押す
これでWP内の全てのhttpがhttpsに置き換わりました！
プラグインはこれで無効化→削除しちゃってOKです。
まとめ
意外と現場で起こりがちなエラーだったので、記事にしてみました！
本日もお疲れ様でした！
