初級者～中級者向け 知識

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

WordPressの知識
2020.03.20
この記事は約10分で読めます。

文中の説明画像をクリックすると拡大します。

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

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

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

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

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

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

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

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

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

【有用】WordPressでFTPアップした画像をメディアと認識させる方法
WordPressサイトで、画像ファイルをFTPを用いてアップロードする方法があります。大量のファイルを一括でアップロードできて利ですが、アップロードしただけではWordPressのメディアライブラリに表示されません。
wakaru-web.com

画像のパスとは

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

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

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

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

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

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

【基本】絶対パスと相対パス、ルートパス（サイトパス）の違いを教えて！
ページ内に図やURLリンクを埋め込む（参照する）とき、対象となるファイルの場所を表す方法として絶対パス、相対パス、ルートパス（サイトパス）の3種類があります。絶対パスは、URLを表す最上位が起点となり、相対パスは、今いる場所（編集しているファイルが置かれているフォルダ）が起点となります。
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つのショートコードを使って、画像ファイルを表示させましょう。

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

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

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

下準備として、テーマフォルダ内に「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

 

まとめ

  • WordPressには特別なフォルダのパスを取得するための関数が用意されている。
  • 親テーマのパスを取得する関数は「get_template_directory_uri();」。
  • 子テーマのパスを取得する関数は「get_stylesheet_directory_uri();」。
  • メディアフォルダのパスを取得する関数は「wp_upload_dir();」。
  • 各関数を使って得られたパスと、画像を保存しているフォルダ名、ファイル名を結合して、画像パスを取得することができる。
スポンサーリンク
タイトルとURLをコピーしました