ゼロからつくるWord pressテーマ第8回

ゼロからつくるWordPressテーマ#8

アイキャッチ画像を設置する
sub topics :変数のスコープ

【改訂版】

http://hitsuji.me

目次

1. アイキャッチ画像とは？
2. 今回の変更内容
3. アイキャッチ画像を設置する
[TOPICS] 変数のスコープについて

4. まとめと次回予告

ゼロからつくる WordPress テーマ #8 http://hitsuji.me 2

1-1.アイキャッチ画像とは？

アイキャッチ＝Eye catch
読者の目を引きつける画像

 記事内の画像、または記事を
イメージできる画像を表示。

 トップページや、カテゴリ
ページなどでリスト表示する
ときによく使われる。

 「サムネイル」とも言う。


1-2.投稿を構成する要素

アイキャッチ画像は、投稿を構成する要素の１つ

投稿#1
ギャラ
ID リー

タイトル
タグ

コンテンツ
（本文）
アイカテゴリ
パーマ
キャッチ
リンク
画像


1-3.メディアライブラリ（画像）を構成する要素

画像データのほかにも、様々な要素で構成されている

画像#1
タイトル ID
画像サイ
ズ(full)
画像
データ

キャプ代替
リンクションテキスト
URL


1-4.画像を「投稿に挿入」ボタンを押したときの動き

コンテンツ（本文）に、画像を表
示するHTMLタグが出力される

<img ID番号
class="alignleft size-thumbnail wp-image-820”
title="hitsuji01_blue"
src="http:../hitsuji01_standard.png"
alt=”hitsuji icon" width="100" height="100" />

各要素を反映して出力

ID番号は、ダッシュボードに表示されないが
内部で記録＆管理されている

投稿に挿入


1-5.「アイキャッチ画像として使用」を押したときの動き

メディアライブラリから、
この記事のサムネイルとして関連づける。

ここでHTMLを出力するわけではない。
※投稿欄のタイトルを入力しても、
テンプレート内で the_post_title(); を
実行しない限りタイトルが
出力されないのと同じ。

メディアライブラリ

関連づけられた


1-6.投稿と記事内画像、アイキャッチ画像の関係

投稿#1 the_post_thumbnail()
で出力
WP内で
アイ
関連づけ
タイトルキャッチ
画像

the_post()で
コンテンツ
本文と一緒に
（本文）
出力
画像への
リンク
<img>タグのリンク


2-1. 今回の変更内容

トップページに、各記事の「アイキャッチ画像」を設置する
（サムネイル画像）

アイキャッチ
画像設置

アイキャッチ画像が無いときは、代替画像を挿入


2-2. 変更のポイント(1) パーツテンプレート
アイキャッチ画像を表示するテンプレートhome.phpが
インクルードするパーツを変更

画像表示しない画像表示する

header.php header.php

index.php home.php content-
content.php
（汎用テンプレート）（トップページ用） excerpt.php

footer.php footer.php

この中に画像表示するコードを書く

2-3. 変更のポイント(2) 画像出力までのフロー
functions.php
<?php
アイキャッチ画像の機能ON
add_theme_support('post-thumbnails’ );

有効化有効化

ダッシュボードの投稿画面
アイキャッチ画像を選択可能にテンプレートファイル

<?php
メディア if(have_posts()):
ライブラリ
while(have_posts()):
the_post();
・・・
画像情報 the_post_thumbnail(); HTML出力
・・・
?>


2-4. 変更のポイント(3) 代替画像を出力する方法

 アイキャッチ画像の有り／無しを判定して、代替画像を出力する。
 画像サイズはfunctions.phpで定義しておく。

テンプレートフォルダ

NO
アイキャッチ画像ある？
代替画像
YES

the_post_thumbnail()で <img>タグで
画像出力代替画像出力

functions.phpで定義した同じ画像サイズで出力


3. アイキャッチ画像を設置する

1. アイキャッチ画像の機能をONにする
2. アイキャッチ画像サイズをPHP変数に保存する
3. アイキャッチ画像サイズを定義する
4. アイキャッチ画像を出力する
5. 代替画像を出力する
 グローバルスコープとローカルスコープ
 WPにおける変数スコープ
 サイトのソースを確認

6. 動作確認
！今回はコード加筆量が多いため、プレゼン資料には一部のみ掲載しています。
詳細はAppendixおよび別途Upするテーマフォルダを参照してください。


3-1.アイキャッチ画像機能をON
functions.php

<?php
add_theme_support('post-thumbnails');

add_theme_support()
 WordPress関数
 以下に代表される機能を有効化する。
 アイキャッチ画像
 カスタム背景
 カスタムヘッダー
 有効化する機能は、引数で指定する。
 アイキャッチ画像は ’post-thumbnails’ を渡す。


3-2.画像サイズをPHP変数に保存する
functions.php
・・・
$hitsuji_app_thumbnails_mid_h = 240; PHP変数に画像サイズを格納
$hitsuji_app_thumbnails_mid_w = 160;
他の変数と重複しない範囲で
・・・
好きな名前をつける

PHP変数について
 PHPプログラムの中で使用する変数
 $から始まる
 変数名は、文字／数字／記号の一部が使える
 他の変数と名前の重複しないように要注意
 WordPressコアが使用している変数名は使用不可($postなど多数)
 通常Prefixを付けて、名前衝突を避ける


3-3. アイキャッチ画像サイズを定義
functions.php

・・・
add_image_size( 'app_thumbnails_mid’ ,
$hitsuji_app_thumbnails_mid_w,
$hitsuji_app_thumbnails_mid_h );

add_image_size (画像サイズ名称, 横, 縦);
 WordPress関数
 WP関数で出力する画像サイズを定義できる
 アイキャッチ画像出力時に引数として指定可能


3-4. アイキャッチ画像出力
content-excerpt.php
アイキャッチ画像が
・・・あれば出力する
<?php if (has_post_thumbnail()): ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('app_thumbnails_mid'); ?></a>
<?php else: ?>
代替画像出力（２ページ後で紹介）
<?php endif; ?>
・・・
has_post_thumbnail()
 WordPress関数
 アイキャッチ画像の有り／無しを判定

the_post_thumbnail (画像サイズ名称);
 WordPress関数
 アイキャッチ画像のHTML出力
 add_image_size()で定義した画像サイズ名で、サイズ指定できる

3-5. 代替画像出力
content-excerpt.php

<?php
global $hitsuji_app_thumbnails_mid_w; global
global $hitsuji_app_thumbnails_mid_h; functions.phpで定義した
変数へアクセス可能にする
?>
・・・
<?php if (has_post_thumbnail()): ?>
アイキャッチ画像出力（前ページで紹介）
<?php else: ?>
<img class = "myapp_thumbnails_full"
src="<?php bloginfo('template_url') ?>/img/nophoto.png”
width ="<?php echo $hitsuji_app_thumbnails_mid_w; ?>” 縦/横サイズの
height="<?php echo $hitsuji_app_thumbnails_mid_h; ?>” 数値出力
alt="no photo" />
<?php endif; ?> echo
変数の値を出力する
PHP関数


3-5-1. 変数のスコープ

 変数のスコープとは
 ある変数を読み／書きできる範囲のこと。
ただし、パーツテンプレートは
 グローバルスコープとはローカルスコープになる
 （基本的に）PHPブロックに書いた変数のスコープ。
 異なるPHPブロックで、同じ変数にアクセスできる。

 ローカルスコープとは
 （基本的に）関数内に書いた変数のスコープ。
 ローカルスコープとグローバルスコープの変数は、互いにアク
セスできない。
 ローカルスコープからグローバルスコープの変数にアクセスす
るときは、global をつける。


3-5-2. WordPressテーマファイルでの変数スコープ
テンプレート、関数ファイルパーツテンプレート

functions.php content.php
<?php
<?php
$var = 1; echo $var = 1; ?> ???

<?php
参照 global $var;

index.php echo $var; 1が出力
home.php
?>
<?php <?php
echo $var; echo $var;
テンプレートパーツの変数は
1が出力 1が出力ローカルスコープ。

PHPブロックで使用した変数はグローバルスコープの変数にアクセス
他のテンプレートから読み書きできる。するには、global をアタマにつける。


テンプレートパーツではローカルスコープになる

パーツテンプレートは、
WordPress関数の中で読み込まれて解釈される
（インクルードタグは、WordPress固有の関数）

パーツテンプレート内のPHPブロックは
ローカルスコープになる。


3-5-3. サイトのソースを確認
サイトのソース（トップページ、１件目サマリー出力部分）

・・・
<h3><a href=PAGE-PATH>ロングマン現代英英辞典</a></h3>
<a href="PAGE-PATH">
<img width="160" height="240” src=”IMG-PATH"
class="attachment-app_thumbnails_mid wp-post-image”
alt=“longman" title=”longman" />
</a> クラス自動出力
・・・  attachment-サイズ名
 wp-post-image
２件目の記事のサマリーが続く

このクラス名を利用してスタイル指定する

※PAGE-PATH,IMG-PATHはそれぞれ具体的なURLが出力される（http://…）


動作確認

各記事で指定した
アイキャッチ画像を
出力できた。

画像が無いときは
代替画像を出力できた。


4.まとめと次回予告

 まとめ
 アイキャッチ画像有効化するには、
add_theme_support(‘post-thumbnails’);
 アイキャッチ画像を出力するには、
the_post_thumbnail();
 パーツテンプレートからグローバルスコープ変数にア
クセスするときは、アタマにglobalをつける。

 次回予告
 次回は、投稿クエリとループ関数について紹介します。


Appendix

 WordPress公式ページの関連記事
 http://wpdocs.sourceforge.jp/投稿サムネイル
 http://wpdocs.sourceforge.jp/テンプレートタグ/the_post_thumbnail
 http://codex.wordpress.org/Function_Reference/add_image_size

 編集前後のテンプレート DL url
 編集前
• http://wordpress.hitsuji.me/wp-
content/uploads/TrainingOniPhoneDesign_1.0.0.zip
 編集後
• http://wordpress.hitsuji.me/wp-
content/uploads/TrainingOniPhoneDesign_1.0.2.zip


WP画像関連Tips#1

 WPで用意されている画像サイズ名と、出力サイズ

画像サイズ名最大サイズ例）出力サイズ
thumbnail 150 x 150 150 x 100
medium 300 x 300 300 x 200
large 640 x 640 600 x 400
full 元サイズ 600 x 400

例）元サイズが600 x 400 の場合


WP画像関連Tips#2

set_post_thumbnail_size($width, $height, $crop)
 WordPress関数
 the_post_thumbnail()関数で出力する画像のデフォルトサイズを指定
 縦横比に関わらず、指定サイズに出力するときは、$crop=trueとする

get_the_post_thumbnail ($post_id, $size, $attr)
 WordPress関数
 投稿記事IDを指定してアイキャッチ画像のHTMLを取得できる
（the_post_thumbnailはループ内でしか使えない）


ゼロからつくるWord pressテーマ第8回

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a ゼロからつくるWord pressテーマ第8回

Similar a ゼロからつくるWord pressテーマ第8回 (20)

Último

Último (8)

ゼロからつくるWord pressテーマ第8回