簡単な操作で画像を上書きできるプラグイン「Enable Media Replace」
2018.11.26 Posted by Coding_team
WordPress構築の仕事が増えてきて、どのような画面設計にすれば更新がしやすくなるのか考えるのが最近の楽しみとなっております。
さて皆さんはWordPress(以下WP)で、アップされている画像の内容を上書きしようと思ったとき、どうしていますか?
WPにおいては、ローカル環境でファイルを上書きする感覚で、同名ファイルをアップすると、新規アップロードしたファイルの末尾に「-1」「-2」と連番が付与されていきます。
自動で別のファイル名に書き換えられてしまうわけですから、上書きされる予定だった画像も残ってしまいます。
確実にやろうと思うと、アップされている画像を削除してから、新たにアップし直すという手段になりますが、操作が多く手間がかかるように感じてしまうでしょう。
私も作業に時間がかかると感じ、効率的な方法が無いか調べたところ、簡単に画像を上書きできるプラグインを発見致しました。
今回は、WPにメディアファイルの上書き機能を追加する「Enable Media Replace」を紹介致します。
インストール方法
WP管理画面の左メニューから「プラグイン」→「新規追加」をクリック。
「Enable Media Replace」を検索し、「今すぐインストール」をクリック。
インストールを終えたら「有効化」します。
これでインストール作業は完了です。
使い方
左メニューの「メディア」から、実際にアップロードされている画像をクリックしてみましょう。
画像の詳細ウインドウ右下に「メディアを置換」という項目が追加されています。
この画像を上書きしたい場合は「メディアを置換」→「新しいファイルをアップロード」をクリック。
クリックすると「新しいメディアファイルをアップロード」という画面に移動します。
「ファイルを選択」から画像を選択します。
※「ファイルを選択」ボタンにアップロードしたい画像をドラッグ&ドロップで読み込ませることも可能。
選択した画像が右側に表示されます。
左側にある画像が現在アップロードされている画像、右側にある画像が上書きするためにアップロードする画像になります。
その下に「メディアを置換する方式を選択」でラジオボタンが2個設置されています。
今回は「image.jpg」を「image_boar.jpg」で上書きすることになりますが、この置換方式の選択によって上書きされる画像の結果が変わります。
置換方式を選択したあと「アップロード」をクリックすることで、上書きが完了します。
置換方式別の動作について
ここからは各置換方式の説明を致します。
1.「ファイルの置換のみ」を選択
画像のファイル名が上書きされません。
今回は「image.jpg」を「image_boar.jpg」で上書きしますが、ファイル名は「image.jpg」のままになります。
差し替え前と差し替え後の画像の、名前が全く同じであるなら、こちらを選択して問題ありません。
2.「ファイルを置換して新しいファイル名で全てのリンクを更新する」
一方でこちらは画像のファイル名も上書きされます。
すでに設置されている画像のパスも自動で書き換わるようになるため、画像を入れ直す必要がありません。
1の条件以外の場合はこちらを選択するとよいでしょう。
注意点
少ない操作で画像を上書きできるプラグインですが、注意点があります。
まずWPでは画像を使用する際、「フルサイズ」「中サイズ」「サムネイルサイズ」が存在します。
各サイズの設定は左メニューの「設定」→「メディア」から変更が可能です。
ここで注意したい点として、反映前と反映後で画像サイズの比率が異なる場合、
フルサイズ以外の画像は上書きが反映されず消えてしまうことです。
ただし画像はフルサイズしか使わないのであれば、下記の説明は気にしなくてよいでしょう。
まず画像サイズ比率が同じ場合は下記のように画像が差し換わります。
次に反映後の画像を正方形にして、上書きすると下記のように画像が差し換わります。
フルサイズはアップロードした画像に合わせられるため問題なく表示されます。
サムネイスサイズは元々正方形の比率のため、こちらも問題ありません。
ただし、中サイズは異なる比率のため削除されてしまいます。
注意点だけ意識しておけば、画像上書きの作業時間が短縮される便利なプラグインですね。
インストールから使用方法まで簡単ですので、是非利用されてはいかがでしょうか。
以上、クリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
ノーコードツールとは?Web制作の新常識と活用事例について徹底解説!
2024.08.23
2022.07.28
Webサイト更新時に修正が反映されない時は?キャッシュ削除での解決方法
2022.05.19