WordPressで画像のURLを取得(コピー)・確認する方法

WordPressでアップロードした画像のURLを取得する方法を記載したいと思います。

画像のURLが必要になる場面はいくつか考えられますが、例えば弊社テーマの「アルバトロス」「ハミングバード」「ストーク」を使っていて、吹き出しショートコードを利用する場合、アイコン画像のURLを取得する必要があります。

アイコンを設定するためには、画像のURLを取得する(コピーする)必要があるのですが、画像をメディアにアップロードし、その画像URLをコピーする方法をご紹介します。

まずは画像をアップロードする

WordPressで画像をアップロードするには、編集画面からアップロードする方法と、【メディア > 新規追加】からアップロードする方法とがあります。

今回は後者の「メディア」からアップロードする方法をご紹介したいと思います。

①管理画面の「メディア」を開く

まずは管理画面にログインし、左側のメニューの【メディア > 新規追加】を開きます。

②デスクトップなどから画像をアップロード

メディア > 新規追加を開いた後、デスクトップなどから画像をアップロードします。

「ここにファイルをドロップ」という箇所に、アップロードしたい画像をドラッグアンドドロップするか、「ファイルを選択」を押すことでアップロードしてください。

③アップロードした画像の「編集」というリンクを押す

アップロード後、画面下にアップロードした画像のサムネイルが表示されるので、その右端の「編集」というリンクを押します。

④ファイルのURLをコピー

「編集」を押すと新しいウインドウで、画像の詳細編集ページに移ります。

その中に「ファイルのURL」という項目があり、下に画像のURLが記載されています。こちらを全部選択し、コピーすることで画像のURLを取得(コピー)できるようになります。

コピーした画像を使ってみる

実際に画像URLを利用して、吹き出しショートコード※1をつくってみたいと思います。

※1 下記の吹き出し機能はオープンケージテーマを利用している場合でのみ利用可能です。

[voice icon="https://open-cage.com/wp-content/uploads/2017/01/icon.jpeg" name="名前" type="l"]吹き出しショートコードのテストです。画像URLをコピーして貼り付けてみました。[/voice]

上記のように画像URLを利用して貼り付けてみました。(実際は下記のように表示されます。)

名前
吹き出しショートコードのテストです。画像URLをコピーして貼り付けてみました。
画像URLをビジュアルエディタで貼り付けるときの注意点

現時点のWordPressバージョン(ver4.7)にて確認したところ、画像URLをビジュアルエディタで貼り付けると、勝手に画像が挿入される仕様となっているようです。

便利なようで、画像URLをそのまま入力したい場合には逆に不便になってしまいますね。

正確な回避方がわからなかったのですが、URLを貼り付けて画像が表示された状態で、キーボードの⌘(コマンド)+ zを押すことでURLの表示に戻るようでした。(すみません。Windowsでは確認できていないのですが、同じ仕様であればCtrl(コントロール)+ z で同様のことが可能かと思われます。)

この方法がいつまで使えるのかはわかりませんが、現時点ではURLに変換することが可能になります。

おまけ:ウィジェット内に画像を表示する

サイドバーウィジェットなどで、画像を表示させたい場合にも、この画像URLを利用することで実現可能となります。

【外観 > ウィジェット】のページにて、画像を表示させたい箇所に「テキスト」ウィジェットパーツを配置します。

その中に、下記のようなコード↓を記載することで画像を表示できるようになります。

<img src="ここに画像のURL">

【外観 > ウィジェット】の編集画面プレビュー

また、画像にリンクを設置したい場合はこのように書きます↓

<a href="ここにリンク先"><img src="ここに画像のURL"></a>

以上、おまけ情報でした。

新作!究極のモバイルファースト
WPテーマ「ストーク」

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

インパクトのあるアニメーション
WPテーマ「ハミングバード」

インパクトのあるアニメーションでブログを演出します。

誰が使っても美しいデザイン
WPテーマ「アルバトロス」

シンプルかつ正統派のブログテーマです。