はじめに
WordPressでWebサイトを作成してみたけど、なんだか殺風景。。。
もう少し見た目のインパクトが欲しい。。。そんな方はWebページに画像を盛り込みましょう！一瞬で見違えるはずです！
説明はいらない！コピペをすぐしたい！っていうかたは → やることリスト！
アイキャッチを表示するために！！
まず前提として、使用するものを列挙します。
開発環境
xampp
テンプレート
STINGER
今回使用するSTINGERというテンプレートですが、デフォルトの状態でサムネイル画像を出力してくれています。
しかし、ひとたび個別ページへ進むと…
こんな感じで、アイキャッチ画像は表示されません。
そこで！個別ページのトップにアイキャッチ画像を出力してみましょう！目標はこんな感じです。
画像が多くてくどい感じが否めませんが。。。とりあえずアイキャッチを出力する記事なのでやっていきます(笑)
wordpressのページ構成
wordpressは、ページひとつひとつが独立したphpファイルから構成されます。
wordpressにログインして、投稿の編集画面から、外観のテーマの編集を選択してみましょう。
右の一覧に表示されているのが、独立したファイル群です。
functions.phpとsingle.php
今回の目標を達成するために手を加えるファイルが上に挙げた2つです。簡単に説明します。
functions.php
各ページはそれぞれのテーマによってレイアウトされています。そのテーマで使用される関数をまとめたファイルがfunctions.phpになります。
ここに表記した関数は、各テーマで呼び出して使用することが可能です。
add_theme_support(‘post-thumbnails’);
add_image_size(‘size1’,500,400,true);
この2行を付け加えることで、他のテーマから呼び出して使用することができます。
add_image_size(‘呼び出しに使う名前’，縦幅(px)，横幅(px)，画像の切り抜きの有無);
になっているので、使用する環境に合わせて内容をいろいろいじってみてください。
single.php
個別のページのレイアウトを司っているのがこのテーマです。ここに「アイキャッチ画像を表示させますよ～」と表記しておくことで、それがWebページに反映されます。
<?php the_post_thumbnail(); ?>
これをいい感じのところに埋め込むことで、画像を出力させます。()内には、functions.phpで記述した、呼び出しに使う名前を記述します。要するに、
<?php the_post_thumbnail(‘size1’); ?>
となります。
今回は、公開日・更新日と投稿文の間にアイキャッチ画像を入れたいと思います。
ここに埋め込む。(divタグの属性は適当につけておきました。)すると…
こんなレイアウトで表示してくれます！
まとめ
今回はphpファイルの記述を追加することで、Webページに画像を”表示する”ことに的を絞ってまとめてみました。
画像を表示する位置や、レイアウトを変えたい場合にはHTML・CSSの知識が必要になってきます。
そのあたりのお話は乞うご期待ということで、宜しくお願い致します。
やることリスト！
投稿の編集画面 → 外観のテーマの編集を選択。
functions.php
※下記をページのどこかにコピペ
add_theme_support(‘post-thumbnails’);
add_image_size(‘size1’,500,400,true);
single.php
※表示したい位置にコピペ
