wordpressで画像表示関連をいじってみる時に覚えておいた方が良いこと

wordpressでサイトを運営しようとする時に引っ掛かってしまう画像の表示関連の問題。
この記事ではwordpressを利用して画像を表示するにあたって、現役初心者の私が引っ掛かった箇所を取り上げていきたいと思います。
参考になれば幸いです。

まず、サイトの運営をしていくにあたって、画像直リンクOKの外部サイトや、画像直リンクNGの外部サイトなどがあります。
直リンクOKであれば、外部サイトの画像URLをアイキャッチ画像に設定した方が、あきらかに自分のサーバーの負荷を減らすことが出来ます。
しかし直リンクNGの外部サイトの画像は自分のサーバーに画像を保存しなくてはいけません。

それではそれぞれ方法がいくつかありますので、ご説明させて頂きます。

画像直リンクOKの画像をサイトに表示をする方法

画像直リンクOKの場合は、自分のサーバーに画像を保存する必要はありません。
しかし、wordpressのテーマではアイキャッチ画像をサイトに表示するテーマがほとんどで、画像を直リンクして表示する事がほぼ不可能です。
これを可能にする方法としては、カスタムフィールドに画像URLを登録して、アイキャッチ画像を出力している箇所のPHPコードにカスタムフィールドの項目を出力できるように書き換えれば良いだけになります。

簡単ですね!!
しかし、テーマを編集した経験がある方であれば、恐らく容易に出来ますが、これは私のような初心者にはハードルが高いっす。
それでは、どこのファイルを書き換えて、どの箇所のコードを書き換えるのか。

テーマによってもサイトのトップページを表示しているファイルは様々です。
下記は一例になりますが、サイトのトップページを表示するファイルでよく見かけるものをご紹介します。
【外観】→【テーマ編集】

• home.php
• index.php
• archive.php
• その他

などがあります。
トップページを表示しているファイルがわかったら、次はアイキャッチ画像を表示しているコードを探します。
wordpressでアイキャッチ画像を呼び出す際に使われているコードは下記になります。

カスタムフィールドを出力するコードは下記になります。

上記のコードを簡単に説明すると、「もしもカスタムフィールドのHOGEに値が入っていたら値を出力してね」というコードになります。
ですからカスタムフィールに画像のURLを「http://～」で入れていた場合はそのURLが出力されます。
そしてimgで囲ってあるので画像が表示されるという事です。

カスタムフィールドに何も入っていない場合は何も表示されません。

続きは後ほど！