Contenu connexe Similaire à ゼロからつくるWord pressテーマ第8回 Similaire à ゼロからつくるWord pressテーマ第8回 (20) ゼロからつくるWord pressテーマ第8回2. 目次
1. アイキャッチ画像とは?
2. 今回の変更内容
3. アイキャッチ画像を設置する
[TOPICS] 変数のスコープについて
4. まとめと次回予告
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 2
6. 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番号は、ダッシュボードに表示されないが
内部で記録&管理されている
投稿に挿入
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 6
7. 1-5.「アイキャッチ画像として使用」を押したときの動き
メディアライブラリから、
この記事のサムネイルとして関連づける。
ここでHTMLを出力するわけではない。
※投稿欄のタイトルを入力しても、
テンプレート内で the_post_title(); を
実行しない限りタイトルが
出力されないのと同じ。
メディアライブラリ
関連づけられた
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 7
8. 1-6.投稿と記事内画像、アイキャッチ画像の関係
投稿#1 the_post_thumbnail()
で出力
WP内で
アイ
関連づけ
タイトル キャッチ
画像
the_post()で
コンテンツ
本文と一緒に
(本文)
出力
画像への
リンク
<img>タグのリンク
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 8
10. 2-2. 変更のポイント(1) パーツテンプレート
アイキャッチ画像を表示するテンプレートhome.phpが
インクルードするパーツ を変更
画像表示しない 画像表示する
header.php header.php
index.php home.php content-
content.php
(汎用テンプレート) (トップページ用) excerpt.php
footer.php footer.php
この中に画像表示するコードを書く
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 10
11. 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出力
・・・
?>
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 11
12. 2-4. 変更のポイント(3) 代替画像を出力する方法
アイキャッチ画像の有り/無しを判定して、代替画像を出力する。
画像サイズはfunctions.phpで定義しておく。
テンプレートフォルダ
NO
アイキャッチ画像ある?
代替画像
YES
the_post_thumbnail()で <img>タグで
画像出力 代替画像出力
functions.phpで定義した同じ画像サイズで出力
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 12
13. 3. アイキャッチ画像を設置する
1. アイキャッチ画像の機能をONにする
2. アイキャッチ画像サイズをPHP変数に保存する
3. アイキャッチ画像サイズを定義する
4. アイキャッチ画像を出力する
5. 代替画像を出力する
グローバルスコープとローカルスコープ
WPにおける変数スコープ
サイトのソースを確認
6. 動作確認
!今回はコード加筆量が多いため、プレゼン資料には一部のみ掲載しています。
詳細はAppendixおよび別途Upするテーマフォルダを参照してください。
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 13
17. 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: ?>
代替画像出力(2ページ後で紹介)
<?php endif; ?>
・・・
has_post_thumbnail()
WordPress関数
アイキャッチ画像の有り/無しを判定
the_post_thumbnail (画像サイズ名称);
WordPress関数
アイキャッチ画像のHTML出力
add_image_size()で定義した画像サイズ名で、サイズ指定できる
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 17
18. 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関数
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 18
19. 3-5-1. 変数のスコープ
変数のスコープとは
ある変数を読み/書きできる範囲のこと。
ただし、パーツテンプレートは
グローバルスコープとは ローカルスコープになる
(基本的に)PHPブロックに書いた変数のスコープ。
異なるPHPブロックで、同じ変数にアクセスできる。
ローカルスコープとは
(基本的に)関数内に書いた変数のスコープ。
ローカルスコープとグローバルスコープの変数は、互いにアク
セスできない。
ローカルスコープからグローバルスコープの変数にアクセスす
るときは、global をつける。
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 19
20. 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 テーマ #8 http://hitsuji.me 20
21. テンプレートパーツではローカルスコープになる
パーツテンプレートは、
WordPress関数の中で読み込まれて解釈される
(インクルードタグは、WordPress固有の関数)
パーツテンプレート内のPHPブロックは
ローカルスコープになる。
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 21
23. 動作確認
各記事で指定した
アイキャッチ画像を
出力できた。
画像が無いときは
代替画像を出力できた。
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 23
24. 4.まとめと次回予告
まとめ
アイキャッチ画像有効化するには、
add_theme_support(‘post-thumbnails’);
アイキャッチ画像を出力するには、
the_post_thumbnail();
パーツテンプレートからグローバルスコープ変数にア
クセスするときは、アタマにglobalをつける。
次回予告
次回は、投稿クエリとループ関数について紹介します。
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 24
25. 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
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 25
26. 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 の場合
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 26
27. 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はループ内でしか使えない)
ゼロからつくる WordPress テーマ #8 http://hitsuji.me 27