【知識】WordPressの画像のパスの書き方教えて(投稿、固定ページ、テーマファイル)

Tweet

Pocket

WordPressで管理する画像へのパスって何？

WordPressで画像を管理するフォルダ

WordPressのサイトで使われる画像は、主に以下の2つのフォルダで管理されます。

1. WordPressにあるメディアフォルダ
2. テーマフォルダの中の任意の画像フォルダ

投稿や固定ページ、あるいはテーマのカスタマイズなどで、WordPressが認識した画像を使いたい場合には「メディア」フォルダに保存することが一般的です。

その理由は、以下の通りです。

• 「メディア」には、パソコン上の画像をWordPressの機能で簡単にアップロードすることができる
• 「メディア」にアップロードした画像は、WordPressが認識できる
  （WordPressが認識できると、投稿や固定ページなどで、すぐに使用することができる）

一方、「メディア」ではなく、ここでいう「テーマフォルダ」内の画像とは、自分が任意に作ったフォルダにFTPなどでアップした画像のことです。

ちなみに、FTPアップした画像をメディアと認識させる方法はこちらです。

【有用】WordPressでFTPアップした画像をメディアと認識させる方法

WordPressサイトで、画像ファイルをFTPを用いてアップロードする方法があります。しかし、FTPでアップロードしただけではWordPressのメディアライブラリに表示されません。画像をメディアで認識させるプラグインを紹介します。

wakaru-web.com

画像のパス（path）とは

「パス（path）」とは、使用するファイルやフォルダがある場所を示す記述のことです。

ですので、「画像のパス」といえば、その画像ファイルやフォルダがある場所（そこまでの経路）を示す記述になります。

さて、各フォルダに保存されている画像ファイルへのパスは、どのように取得すればよいのでしょうか。

画像を掲載する側のファイルはいろいろな位置にあるので、画像までのパスもいろいろなパスがあることになります。

ここでは、画像ファイルへのパスを、投稿や固定ページなど表示したい場所別に記述する方法を紹介します。

なお、「パス」というものには、絶対パス、相対パス、ルートパス（サイトパス）があります。それぞれの違いや意味については、こちらをご覧ください。

【基本】絶対パスと相対パス、ルートパス（サイトパス）の違いを教えて！

パスって何のこと？ コンピューターの世界では、様々な場面でパスという言葉が使われます。 しかし、パスという言葉は、その場面によって少しずつ内容が異なってきます。 パスとは、「対象とするファイルまでの辿り方」を指し示す表現方法で...

wakaru-web.com

画像パスを取得できるショートコードを記述する

具体的に画像パスを取得する前に、下準備をしましょう。

画像パスを取得する方法として、画像フォルダへのパスを取得できるショートコードを定義します。

ショートコードが何かよくわからない人は、以下の記事をご覧ください。

【有用】Wordpressのショートコードの書き方と使い方教えて

ショートコードとは、functions.php等に記述しておいた関数を固定ページや投稿などで短いコードで簡単に呼び出す機能。ショートコードを利用する方法には、functions.phpに記述、プラグインで作成、テーマのショートコードを利用、があります。

wakaru-web.com

ショートコードを定義するには、functions.phpに設定を記述する必要があります。

以下のコードを、コピー&ペーストして、functions.phpに追加してください（ここでは、「子テーマ」を使っていることを前提とします）。

【functions.php】

// 親テーマのテーマフォルダのパスを取得するショートコード
function gettmplurl($atts, $content = null) {
return get_template_directory_uri();
}
add_shortcode('tmplurl', 'gettmplurl');

// 子テーマのテーマフォルダのパスを取得するショートコード
function getchildtmplurl($atts, $content = null) {
return get_stylesheet_directory_uri();
}
add_shortcode('childtmplurl', 'getchildtmplurl');

// メディアフォルダのパスを取得するショートコード
function getmediaurl($atts, $content = null) {
$wp_upload_dir = wp_upload_dir();
return $wp_upload_dir['baseurl'];
}
add_shortcode('mediaurl', 'getmediaurl');

ここでは、ショートコードの定義をしているのですが、コードの意味が分からなくても大丈夫です。

一応簡単に説明します。

• 親テーマのテーマフォルダを取得する関数として「get_template_directory_uri();」を使用しています。
• 子テーマのテーマフォルダを取得する関数は「get_stylesheet_directory_uri();」です。
• メディアフォルダのパスを取得する関数は「wp_upload_dir();」を使っています。

それぞれのパスを取得できる関数を使って、ショートコードでそれらのパスを使えるようにしているというわけです。

最終的に定義されたショートコードは、以下の3つです。

• [tmplurl]・・・親テーマフォルダへのパスを取得するショートコード
• [childtmplurl]・・・子テーマフォルダへのパスを取得するショートコード
• [mediaurl]・・・メディアフォルダへのパスを取得するショートコード

それでは、この3つのショートコードを使って、画像ファイルを表示させましょう。

「子テーマ」って何だっけ？という場合には、こちらをご覧ください。

【基本】WordPressの親テーマと子テーマって何？

「子テーマ」とは、テーマとは別ファイルでありながら、同時に読み込まれて、機能とスタイルを引き継いだ、カスタマイズ専用のテーマのことです。「子テーマ」から見たオリジナルのテーマを「親テーマ」と呼ぶことがあります。

wakaru-web.com

画像がテーマフォルダ内の特定のフォルダにアップロードされている場合

最初に、表示させる画像がテーマフォルダ内の特定のフォルダにアップロードされているケースを考えます。

メディアにアップロードするのとは、違う方法です。

下準備として、テーマフォルダ内に「images」というフォルダを作り、その中に、何でもいいので画像ファイルをアップロードしておいてください。

例えばSimplicity（親テーマ）の場合には、
（WordPressのインストールディレクトリ）/wp-content/themes/simplicity2/images/

ここでは、サンプルとして以下の画像を用います。

ファイル名は、仮に「images01.gif」としておきます。

まずこの画像を、「投稿」と「固定ページ」と「ウィジェット」の中で表示させる方法を紹介します。

この画像は、テーマフォルダの中の「images」フォルダにあるので、そこまでのURLとファイル名「images01.gif」と結合した文字列が、パスとして取得できれば良いのです。

管理画面のエディタの画面の中に、以下のように書きます。

1つ注意点ですが、コードをエディタに記述する時は、「ビジュアルモード」ではなく「テキストモード」にて記述する必要があります。

Gutenbergの場合には、「カスタムHTML」を使いましょう。

【投稿・固定ページ・ウィジェット】

<img src="[tmplurl]/images/images01.gif">

そうすると、ブラウザ上で画像が表示されます。

ウィジェットでも同様に、ショートコードを使って画像を表示させることが可能です。

ここでは、サイドバーの一番上に「テキスト」ウィジェットを追加して表示させています。

実際にブラウザ上で確認すると、画像が表示されていることがわかります。

画像が親テーマではなく、子テーマの中の「images」フォルダにある場合は、記述するショートコードを[childtmplurl]に変更します。

例えばSimplicity（子テーマ）の場合には、
（WordPressのインストールディレクトリ）/wp-content/themes/simplicity2-child/images/

【投稿・固定ページ・ウィジェット】

<img src="[childtmplurl]/images/images01.gif">

画像がメディアフォルダにアップロードされている場合

次に、画像がWordPressのメディアフォルダにアップロードされている場合を考えます。

メディアフォルダには、次の画像が保存されていることにしましょう。

通常、メディアフォルダにアップロードされている場合は、投稿や固定ページのエディタの機能で追加できます。

WordPress5.0以上で実装されたGutenbergの場合は、「画像」ブロックから画像の挿入ができます。「画像」と書かれたボタンをクリックしましょう。

「アップロード」「メディアライブラリ」「URLから挿入」と、3つの方法を状況に合わせて選択しましょう。実際に画像を追加すると以下のようになります。

このようなエディタの機能を使わずに、メディアフォルダにある画像を取得したい場合は、先ほどの例で紹介したショートコードを使うとできます。

ただ注意点として、メディアフォルダで管理されている画像は、WordPressの設定によって、年月ベースのフォルダに分類されていることがあります。

これは、WordPressの設定の「メディア設定」を見ることで確認できます。

この場合、画像のパスを取得する際に、メディアフォルダまでの絶対パスに加えて、画像をアップロードした「年月」の情報が必要です。

画像ファイルのファイル名だけでなく、「年月」も指定しないと、画像パスが取得できません。

それを踏まえて、メディアフォルダに保存されている画像パスを取得する記述は、以下のようになります。

【投稿・固定ページ・ウィジェット】

<img src="[mediaurl]/YYYY/MM/images05.gif ">

上記の例は、「YYYY年」の「MM月」にアップロードされた「images05.gif」というファイル名の画像を表示させている例です。

実際には、「YYYY」には「2020」などの「年」が入り、「MM」には「04」のような「月」の数字が入ります。

画像のパスが正常に入力されているか、ブラウザ上で確認しましょう。

もし画像が表示されていない場合は、ファイル名やショートコードなどのスペルが間違っている可能性があるので、正常に表示されるまでよく確認しましょう。

WordPressのテンプレートファイルで画像パスを取得する方法

最後に、投稿や固定ページ、ウィジェットではなく、WordPressのテンプレートファイルに直接画像パスを書く方法を紹介します。

テンプレートファイルでも、ショートコードを実行する方法はあるのですが、そのような方法を使わなくとも、直接WordPressの関数をPHPのプログラムとして実行すれば、画像パスを取得し画像を表示させることが可能です。

例えば、テーマフォルダ内の特定のフォルダ（ここでは「images」フォルダ）を指定して画像パスを取得する方法は、以下の通りです。

【PHP】

<img src="<?php echo get_template_directory_uri(); ?>/images/images01.gif" />

また、子テーマの中にある特定のフォルダ内の画像パスを取得する方法は、以下の通りです。

【PHP】

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/images01.gif" />

メディアフォルダ内に保存されている画像パスを取得する方法は、以下の通りです。

【PHP】

<img src="<?php echo wp_upload_dir()['baseurl']; ?>/images/images05.gif" />

テンプレートファイルとは何か、については、こちらをご覧ください。

【知識】WordPressのテンプレートファイル、テンプレート階層とは？

WordPressのテンプレートファイルとは、Webページを構成するパーツとなるファイルです。ページを表示させるために組み合わせて使われます。全体を作る骨組みだったり、ヘッダ、フッタ、あるいはコンテンツ部分を受け持ったりと、ファイルごとにそれぞれの役割を担っています。

wakaru-web.com

Tweet

Pocket