みなさん、こんにちは。
MEGIDO(メギド)です。

世界や日本で圧倒的なシェア率を誇るCMS(コンテンツ・マネジメント・システム)のワードプレス。
2018年のある調査ではワードプレスの日本CMSシェア率が82.5%だったデータもあります。
これは圧倒的すぎますね。

となるとweb制作に携わっていくなら当然ワードプレスに携わる機会も増えそうです。
今は静的なコーディングをしている人もレベルアップを目指すならワードプレスの知識も必要となるでしょう。

そこで今回は備忘録も兼ねて、初心者がよく忘れがちなワードプレスでimgタグの画像を表示させる方法と背景画像を表示させる方法を簡単に紹介していきたいと思います!

 

imgタグの表示方法

 

まずはimgタグの表示方法から。
簡単なサンプルコードですが、下記のように記述することでimgタグを表示させることが可能です。

<img src="<php echo get_stylesheet_directory_uri(); ?>"/images/sample.png alt="">

静的なコーディングはしているけど、全くワードプレスを知らない人にここで知ってもらいたいことは、

<php  ~?>
get_stylesheet_directory_uri()
echo

この3つの部分です。

 

ワードプレスはphpというプログラミング言語から成り立っています。
そしてワードプレスでimg画像は表示させるにはこのphpのプログラミングを作動させなければならないのです。

「プログラミング」って聞くと難しそう…ってイメージがあると思いますが、img画像を表示させるのはとても簡単。
上記の3つの記述の意味を理解するだけで大丈夫。

<php  ~?>の部分はphpで記述していますよと認識させる部分になります。
この間に書かれている記述がすべてphpの記述です。

get_stylesheet_directory_uri()ワードプレス専用のphpの記述でテーマフォルダのURLを返してくれます。

<img src="<php echo get_stylesheet_directory_uri(); ?>"/images/sample.png alt="">

この記述だと

<img src="<http://ドメイン名/wp-content/themes/テーマ名/images/sample.png>"/images/sample.png alt="">

という感じになります。

imageフォルダがある階層より上の階層のパスを出力してくれます。

ここで注意が必要なのですが、呼び出した記述は、

http://ドメイン名/wp-content/themes/テーマ名

上記まででテーマ名の後に「/」は出力されません

その為、必ず「/」を記述してそれ以下の階層を記述するようにしましょう。
こういうところで詰まって画像が出力されないとテンパることは決して少なくないですよ(笑)

echoはphpの記述で 1 つ以上の文字列を出力するためのものです。
初心者の方は文字列を出力したいときは「echoを使う」と覚えておけばひとまず大丈夫だと思います。

 

 

背景画像の表示方法

ワードプレスのstyle.cssの中で背景画像を設定したい時は、画像ファイルの場所をstyle.cssからの相対パスで指定します。

コーディングをされている方なら理解できると思いますが、例と上げると下記のような記述になります。
※style.cssと同じ階層にimagesフォルダがあり、imagesフォルダ内のsample.jpgを背景画像に使用する場合

.sample { background-image: url(images/sample.jpg) }

phpのプログラミングが関係ない部分、img要素を表示させるよりも背景画像を表示させる方がすぐに覚えられるかもしれませんね。

 

まとめ

今回はワードプレス初心者向けにimgタグの画像表示方法と背景画像の表示方法を紹介しました。
ただコーディングするよりもワードプレスでサイト制作をする方が覚えることも多く、最初は難しいです。
でも覚えれば絶対できるようになるのでワードプレス初心者の方はメギドと一緒に頑張りましょう。

今はワードプレスを使用したサイト制作に関わることが多いので、今後もワードプレスで自分が詰まった部分や初心者向けの情報をお伝え出来ればと思います。

では今回はこの辺で。
最後までお読みいただきありがとうございました!

 

 

まとめ

SHARE

アバター
TEXT BY MEGIDO

CATEGORIES

RECOMMENDED POSTこの記事もおすすめ!