Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ゼロからつくるWordPressテーマ#8   アイキャッチ画像を設置する     sub topics :変数のスコープ          【改訂版】            http://hitsuji.me
目次 1. アイキャッチ画像とは? 2. 今回の変更内容 3. アイキャッチ画像を設置する          [TOPICS] 変数のスコープについて 4. まとめと次回予告ゼロからつくる WordPress テーマ #8   http://h...
1-1.アイキャッチ画像とは?アイキャッチ=Eye catch読者の目を引きつける画像 記事内の画像、または記事を   イメージできる画像を表示。 トップページや、カテゴリ   ページなどでリスト表示する   ときによく使われる。 「サム...
1-2.投稿を構成する要素 アイキャッチ画像は、投稿を構成する要素の1つ        投稿#1                                                       ギャラ                ...
1-3.メディアライブラリ(画像)を構成する要素画像データのほかにも、様々な要素で構成されている        画像#1                                                 タイトル     ID  ...
1-4.画像を「投稿に挿入」ボタンを押したときの動き                               コンテンツ(本文)に、画像を表                               示するHTMLタグが出力される    ...
1-5.「アイキャッチ画像として使用」を押したときの動き                                       メディアライブラリから、                                       この記事...
1-6.投稿と記事内画像、アイキャッチ画像の関係   投稿#1                                           the_post_thumbnail()                            ...
2-1. 今回の変更内容トップページに、各記事の「アイキャッチ画像」を設置する                                   (サムネイル画像)                           アイキャッチ      ...
2-2. 変更のポイント(1) パーツテンプレート  アイキャッチ画像を表示するテンプレートhome.phpが  インクルードするパーツ を変更画像表示しない                                           ...
2-3. 変更のポイント(2) 画像出力までのフローfunctions.php<?php                                                       アイキャッチ画像の機能ONadd_theme_...
2-4. 変更のポイント(3) 代替画像を出力する方法 アイキャッチ画像の有り/無しを判定して、代替画像を出力する。 画像サイズはfunctions.phpで定義しておく。                                  ...
3. アイキャッチ画像を設置する 1. アイキャッチ画像の機能をONにする 2. アイキャッチ画像サイズをPHP変数に保存する 3. アイキャッチ画像サイズを定義する 4. アイキャッチ画像を出力する 5. 代替画像を出力する        ...
3-1.アイキャッチ画像機能をONfunctions.php <?php add_theme_support(post-thumbnails); add_theme_support()  WordPress関数  以下に代表される機能を有効...
3-2.画像サイズをPHP変数に保存するfunctions.php・・・$hitsuji_app_thumbnails_mid_h = 240;               PHP変数に画像サイズを格納$hitsuji_app_thumbnai...
3-3. アイキャッチ画像サイズを定義functions.php・・・add_image_size( app_thumbnails_mid’ ,   $hitsuji_app_thumbnails_mid_w,   $hitsuji_app_t...
3-4. アイキャッチ画像出力content-excerpt.php                                                   アイキャッチ画像が ・・・                        ...
3-5. 代替画像出力content-excerpt.php<?phpglobal $hitsuji_app_thumbnails_mid_w;              globalglobal $hitsuji_app_thumbnails...
3-5-1. 変数のスコープ  変数のスコープとは         ある変数を読み/書きできる範囲のこと。                                               ただし、パーツテンプレートは  グロー...
3-5-2. WordPressテーマファイルでの変数スコープ    テンプレート、関数ファイル                                                 パーツテンプレート  functions.php ...
テンプレートパーツではローカルスコープになる       パーツテンプレートは、       WordPress関数の中で読み込まれて解釈される     (インクルードタグは、WordPress固有の関数)       パーツテンプレート内のP...
3-5-3. サイトのソースを確認サイトのソース(トップページ、1件目サマリー出力部分)・・・<h3><a href=PAGE-PATH>ロングマン現代英英辞典</a></h3><a href="PAGE-PATH">     <img wid...
動作確認                                               各記事で指定した                                               アイキャッチ画像を       ...
4.まとめと次回予告 まとめ       アイキャッチ画像有効化するには、        add_theme_support(‘post-thumbnails’);       アイキャッチ画像を出力するには、        the_po...
Appendix  WordPress公式ページの関連記事       http://wpdocs.sourceforge.jp/投稿サムネイル       http://wpdocs.sourceforge.jp/テンプレートタグ/th...
WP画像関連Tips#1  WPで用意されている画像サイズ名と、出力サイズ      画像サイズ名               最大サイズ                      例)出力サイズ      thumbnail        ...
WP画像関連Tips#2 set_post_thumbnail_size($width, $height, $crop)  WordPress関数  the_post_thumbnail()関数で出力する画像のデフォルトサイズを指定  縦...
Upcoming SlideShare
Loading in …5
×

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

2,811 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. ゼロからつくるWordPressテーマ#8 アイキャッチ画像を設置する sub topics :変数のスコープ 【改訂版】 http://hitsuji.me
  2. 2. 目次 1. アイキャッチ画像とは? 2. 今回の変更内容 3. アイキャッチ画像を設置する [TOPICS] 変数のスコープについて 4. まとめと次回予告ゼロからつくる WordPress テーマ #8 http://hitsuji.me 2
  3. 3. 1-1.アイキャッチ画像とは?アイキャッチ=Eye catch読者の目を引きつける画像 記事内の画像、または記事を イメージできる画像を表示。 トップページや、カテゴリ ページなどでリスト表示する ときによく使われる。 「サムネイル」とも言う。ゼロからつくる WordPress テーマ #8 http://hitsuji.me 3
  4. 4. 1-2.投稿を構成する要素 アイキャッチ画像は、投稿を構成する要素の1つ 投稿#1 ギャラ ID リー タイトル タグ コンテンツ (本文) アイ カテゴリ パーマ キャッチ リンク 画像ゼロからつくる WordPress テーマ #8 http://hitsuji.me 4
  5. 5. 1-3.メディアライブラリ(画像)を構成する要素画像データのほかにも、様々な要素で構成されている 画像#1 タイトル ID 画像サイ ズ(full) 画像 データ キャプ 代替 リンク ション テキスト URLゼロからつくる WordPress テーマ #8 http://hitsuji.me 5
  6. 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. 7. 1-5.「アイキャッチ画像として使用」を押したときの動き メディアライブラリから、 この記事のサムネイルとして関連づける。 ここでHTMLを出力するわけではない。 ※投稿欄のタイトルを入力しても、 テンプレート内で the_post_title(); を 実行しない限りタイトルが 出力されないのと同じ。 メディアライブラリ 関連づけられたゼロからつくる WordPress テーマ #8 http://hitsuji.me 7
  8. 8. 1-6.投稿と記事内画像、アイキャッチ画像の関係 投稿#1 the_post_thumbnail() で出力 WP内で アイ 関連づけ タイトル キャッチ 画像 the_post()で コンテンツ 本文と一緒に (本文) 出力 画像への リンク <img>タグのリンクゼロからつくる WordPress テーマ #8 http://hitsuji.me 8
  9. 9. 2-1. 今回の変更内容トップページに、各記事の「アイキャッチ画像」を設置する (サムネイル画像) アイキャッチ 画像設置 アイキャッチ画像が無いときは、代替画像を挿入ゼロからつくる WordPress テーマ #8 http://hitsuji.me 9
  10. 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. 11. 2-3. 変更のポイント(2) 画像出力までのフローfunctions.php<?php アイキャッチ画像の機能ONadd_theme_support(post-thumbnails’ ); 有効化 有効化ダッシュボードの投稿画面アイキャッチ画像を選択可能に テンプレートファイル <?php メディア if(have_posts()): ライブラリ while(have_posts()): the_post(); ・・・ 画像情報 the_post_thumbnail(); HTML出力 ・・・ ?>ゼロからつくる WordPress テーマ #8 http://hitsuji.me 11
  12. 12. 2-4. 変更のポイント(3) 代替画像を出力する方法 アイキャッチ画像の有り/無しを判定して、代替画像を出力する。 画像サイズはfunctions.phpで定義しておく。 テンプレートフォルダ NO アイキャッチ画像ある? 代替画像 YES the_post_thumbnail()で <img>タグで 画像出力 代替画像出力 functions.phpで定義した同じ画像サイズで出力ゼロからつくる WordPress テーマ #8 http://hitsuji.me 12
  13. 13. 3. アイキャッチ画像を設置する 1. アイキャッチ画像の機能をONにする 2. アイキャッチ画像サイズをPHP変数に保存する 3. アイキャッチ画像サイズを定義する 4. アイキャッチ画像を出力する 5. 代替画像を出力する  グローバルスコープとローカルスコープ  WPにおける変数スコープ  サイトのソースを確認 6. 動作確認!今回はコード加筆量が多いため、プレゼン資料には一部のみ掲載しています。詳細はAppendixおよび別途Upするテーマフォルダを参照してください。ゼロからつくる WordPress テーマ #8 http://hitsuji.me 13
  14. 14. 3-1.アイキャッチ画像機能をONfunctions.php <?php add_theme_support(post-thumbnails); add_theme_support()  WordPress関数  以下に代表される機能を有効化する。  アイキャッチ画像  カスタム背景  カスタムヘッダー  有効化する機能は、引数で指定する。  アイキャッチ画像は ’post-thumbnails’ を渡す 。ゼロからつくる WordPress テーマ #8 http://hitsuji.me 14
  15. 15. 3-2.画像サイズをPHP変数に保存するfunctions.php・・・$hitsuji_app_thumbnails_mid_h = 240; PHP変数に画像サイズを格納$hitsuji_app_thumbnails_mid_w = 160; 他の変数と重複しない範囲で・・・ 好きな名前をつけるPHP変数について PHPプログラムの中で使用する変数 $から始まる 変数名は、文字/数字/記号の一部が使える 他の変数と名前の重複しないように要注意  WordPressコアが使用している変数名は使用不可($postなど多数)  通常Prefixを付けて、名前衝突を避けるゼロからつくる WordPress テーマ #8 http://hitsuji.me 15
  16. 16. 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関数で出力する画像サイズを定義できる  アイキャッチ画像出力時に引数として指定可能ゼロからつくる WordPress テーマ #8 http://hitsuji.me 16
  17. 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. 18. 3-5. 代替画像出力content-excerpt.php<?phpglobal $hitsuji_app_thumbnails_mid_w; globalglobal $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. 19. 3-5-1. 変数のスコープ  変数のスコープとは  ある変数を読み/書きできる範囲のこと。 ただし、パーツテンプレートは  グローバルスコープとは ローカルスコープになる  (基本的に)PHPブロックに書いた変数のスコープ。  異なるPHPブロックで、同じ変数にアクセスできる。  ローカルスコープとは  (基本的に)関数内に書いた変数のスコープ。  ローカルスコープとグローバルスコープの変数は、互いにアク セスできない。  ローカルスコープからグローバルスコープの変数にアクセスす るときは、global をつける。ゼロからつくる WordPress テーマ #8 http://hitsuji.me 19
  20. 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. 21. テンプレートパーツではローカルスコープになる パーツテンプレートは、 WordPress関数の中で読み込まれて解釈される (インクルードタグは、WordPress固有の関数) パーツテンプレート内のPHPブロックは ローカルスコープになる。ゼロからつくる WordPress テーマ #8 http://hitsuji.me 21
  22. 22. 3-5-3. サイトのソースを確認サイトのソース(トップページ、1件目サマリー出力部分)・・・<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-image2件目の記事のサマリーが続く このクラス名を利用してスタイル指定する※PAGE-PATH,IMG-PATHはそれぞれ具体的なURLが出力される(http://…) ゼロからつくる WordPress テーマ #8 http://hitsuji.me 22
  23. 23. 動作確認 各記事で指定した アイキャッチ画像を 出力できた。 画像が無いときは 代替画像を出力できた。ゼロからつくる WordPress テーマ #8 http://hitsuji.me 23
  24. 24. 4.まとめと次回予告 まとめ  アイキャッチ画像有効化するには、 add_theme_support(‘post-thumbnails’);  アイキャッチ画像を出力するには、 the_post_thumbnail();  パーツテンプレートからグローバルスコープ変数にア クセスするときは、アタマにglobalをつける。 次回予告  次回は、投稿クエリとループ関数について紹介します。ゼロからつくる WordPress テーマ #8 http://hitsuji.me 24
  25. 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. 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. 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

×