Tips

【コピペでできるWordPress】 アイキャッチを表示するPHPファイル記述

【コピペでできるWordPress】 アイキャッチを表示するPHPファイル記述

 

icon-asterisk はじめに

WordPressでWebサイトを作成してみたけど、なんだか殺風景。。。

もう少し見た目のインパクトが欲しい。。。そんな方はWebページに画像を盛り込みましょう!一瞬で見違えるはずです!

説明はいらない!コピペをすぐしたい!っていうかたは → やることリスト!

 

icon-asterisk アイキャッチを表示するために!!

まず前提として、使用するものを列挙します。

開発環境

xampp

テンプレート

STINGER

 

今回使用するSTINGERというテンプレートですが、デフォルトの状態でサムネイル画像を出力してくれています。

wp1-1

しかし、ひとたび個別ページへ進むと…

wp1-2

こんな感じで、アイキャッチ画像は表示されません。

そこで!個別ページのトップにアイキャッチ画像を出力してみましょう!目標はこんな感じです。

wp1-3

画像が多くてくどい感じが否めませんが。。。とりあえずアイキャッチを出力する記事なのでやっていきます(笑)

 

icon-asterisk wordpressのページ構成

wordpressは、ページひとつひとつが独立したphpファイルから構成されます。

wordpressにログインして、投稿の編集画面から、外観のテーマの編集を選択してみましょう。

wp1-4

 

wp1-5

 

右の一覧に表示されているのが、独立したファイル群です。

 

icon-asterisk 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’); ?>

となります。

今回は、公開日・更新日と投稿文の間にアイキャッチ画像を入れたいと思います。

wp1-6

ここに埋め込む。(divタグの属性は適当につけておきました。)すると…

wp1-7

こんなレイアウトで表示してくれます!

icon-asterisk まとめ

今回はphpファイルの記述を追加することで、Webページに画像を”表示する”ことに的を絞ってまとめてみました。

画像を表示する位置や、レイアウトを変えたい場合にはHTML・CSSの知識が必要になってきます。

そのあたりのお話は乞うご期待ということで、宜しくお願い致します。

 

icon-check-circle やることリスト!

投稿の編集画面 → 外観のテーマの編集を選択。

functions.php

※下記をページのどこかにコピペ

/*アイキャッチ画像のサイズ追加*/
add_theme_support(‘post-thumbnails’);
add_image_size(‘size1’,500,400,true);

single.php

※表示したい位置にコピペ

<?php the_post_thumbnail(‘size1’); ?>

 

記事アーカイブ

ー【第1回】アイキャッチを表示するPHPファイル記述 ★本記事です

ー【第2回】アイキャッチを表示するPHPファイル記述 +α

ー【第3回】執筆中。。。

新連載はじまりました!新PHP基礎 連載リンク

PHP基礎 連載

Recent News

Recent Tips

Tag Search