画像のアップロード&                 アイキャッチ画像を                しっかり理解しよう!                   山口 有由希2012年9月16日日曜日
自己紹介2012年9月16日日曜日
や ま ぐ ち      ゆ う き   山口 有由希   福岡県在住、長崎県出身   フロッグマンオフィス所属   福岡県でWebデザイナー2012年9月16日日曜日
Fireworksマニア         lors.com                  http://fw.v-co2012年9月16日日曜日
今回のねらい2012年9月16日日曜日
WordPressの画像の扱い方をマスターすれば、          難しいコードを書かなくてもアイデア次第で                 いろんなことができます。2012年9月16日日曜日
全部                WordPressで                運営中2012年9月16日日曜日
画像の扱い方で困る                 ことがないように                 しっかり押さえて                 おきましょう!2012年9月16日日曜日
本日の流れ2012年9月16日日曜日
✦ ファイルアップローダーからアップした          画像の保存先の確認と設定     ✦ 初期設定されているサイズ          (thumbnail,medium,large)の設定を変更する     ✦ アイキャッチ画像を使える...
WordPressでの 画像アップロードの 基本のき2012年9月16日日曜日
WordPressでは、ファイルアップローダー               から画像をアップすると          thumbnail、medium、large、fullの                4種類の画像サイズが         ...
どこにアップ                されているの?2012年9月16日日曜日
WordPressの ファイルアップローダーから アップした画像の 保存場所を確認/設定する2012年9月16日日曜日
2012年9月16日日曜日
管理画面->設定->メディア                ✦ メディア設定の中に設定箇所があります。2012年9月16日日曜日
thumbnail,medium,largeの        サイズ設定はどこでやるの?2012年9月16日日曜日
2012年9月16日日曜日
初期設定されている画像サイズ (large,medium,thumbnail) の設定をする2012年9月16日日曜日
管理画面->設定->メディア                ✦ メディア設定の中に設定箇所があります。2012年9月16日日曜日
サムネイルを実寸法にトリミングする?                      チェックを入れたとき                元画像                      チェックをはずしたとき2012年9月16日日曜日
チェックを入れたとき                  サイズ優先。指定のサイズぴったりの画像                  を作成する。そのため、縦横比の異なる画                  像を指定した場合、上下もしくは左右が切 ...
2012年9月16日日曜日
サムネイルサイズにしか                  選択欄がない2012年9月16日日曜日
medium,largeサイズの                トリミング方法の指定は                   できないの?                functions.phpを編集することで                 ...
ところで                functions.phpって?      テーマディレクトリ      内にある、関数などを      記述することができる      PHPファイルです。2012年9月16日日曜日
2012年9月16日日曜日
update_option(medium_crop, true);            update_option(large_crop, true);                true…サイズ優先                fal...
update_option(medium_size_h, 100);            update_option(medium_size_w, 100);           functions.phpでサイズの設定もできます。     ...
thumbnail、medium、large 以外の 画像サイズを作る2012年9月16日日曜日
2012年9月16日日曜日
新しいサイズを定義する          functions.phpに以下の記述を追加します。          add_image_size(新しいサイズ名, 幅, 高さ,切り抜き方 );                 add_image_...
どう使い分ける?      ✦ ページや投稿内で貼付けたい画像サイズは、           thumbnail,medium,largeで設定しておくと便利。           (投稿の際、一覧からサイズを選べるため)      ✦ テーマ...
アイキャッチ画像を使う2012年9月16日日曜日
アイキャッチを有効にする          functions.phpに以下の記述を追加します。                     add_theme_support(post-thumbnails);          投稿のみ/固定ペ...
2012年9月16日日曜日
アイキャッチのサイズを指定する          functions.phpに以下の記述を追加します。                set_post_thumbnail_size(横,縦,切り抜き方);          一緒に切り抜き方も指...
記事のループ内に アイキャッチ画像を 表示させる2012年9月16日日曜日
メインループ内で使用する          ループ内に以下の記述を追加します。                   the_post_thumbnail(サイズ指定);                サイズ指定を省略すると、          ...
サイズ指定に使えます          functions.phpで以下の文で定義した          新しいサイズ名も使えます。          add_image_size(新しいサイズ名, 幅, 高さ,切り抜き方 );        ...
注意点 Codexで上記のように記載がありますが、 functions.phpで値を設定せずにパラメータなしでアイキャッチ を出力するとフルサイズで出力されてしまいます       。2012年9月16日日曜日
add_theme_support(post-thumbnails);                set_post_thumbnail_size(横,縦,切り抜き方);           アイキャッチのサイズ指定は       セットで書...
オリジナルループ内などで使用する          ループ内に以下の記述を追加します。                echo get_the_post_thumbnail(記事のID,サイズ指定);                サイズ指定を...
使用例                <?php $pages = get_pages(array(child_of => 1)); ?>                <ul>                <?php foreach ($p...
使用例2012年9月16日日曜日
アイキャッチ画像を さらにいろいろなところに 表示させる2012年9月16日日曜日
プラグインに組み込む          人気記事を表示するプラグイン、Popular Postsに          アイキャッチを表示させてみましょう。                http://rmarsh.com/plugins/pop...
出力部分をカスタマイズする                設定→Popular Posts→Output→                Output template:を編集します2012年9月16日日曜日
出力部分をカスタマイズする          [php: XXXXXX ;]で囲むとテーマと同じように          PHP構文を書くことができます。          このプラグイン内で使用可能な変数リストがサイド          バー...
記述方法          以下の記述を追加します。        {php: echo get_the_post_thumbnail({postid},"サイズ指定");}                サイズ指定はこれまでと同様、thumb...
関連記事表示にも導入          プラグインSimilar Postsを使用して          関連記事表示部分にもアイキャッチ画像を          表示させることができます。          設定方法は人気記事の時と同様です。...
テーマディレクトリにある画像 をテーマ内で使う2012年9月16日日曜日
bloginfo(template_directory ); を使おう!          使用中テーマファイルディレクトリのURLを出力          します。以下のように記述します。                <img src="<...
テーマディレクトリにある画像 を投稿/ページ内で使う2012年9月16日日曜日
投稿やページにフ ルパスで書いて                   困るシチュエーション            ✦ サイトのURLが変わることになった!            ✦ テスト環境ではhogehoge.com/test/に設置し  ...
functions.phpに仕掛けをしよう         function chgImgPath($text) {         $content = str_replace(置き換えたい文字列, 置き換えたいパス,$text);     ...
投稿/ページでの書き方          <img src="imagepath/hogehoge.png" alt="これはhogehogeです" />      出力結果          <img src="http://blog.v-c...
こんなに便利!                ✦ function.php内の置き換えたいパスのURLを                 変更だけでOK。                ✦ 画像の差し替えがあったときは該当ディレク       ...
この方法の注意点          記事中に出てくる指定した文字列をすべて置換し          ます(この場合はimagepath)          そのため置き換える文字列は本文中に出てくるこ          とのないような文字列を設...
まとめ2012年9月16日日曜日
✦ thumbnail、medium、large以外にも                いろんな画像サイズを作れちゃう!         ✦ アイキャッチ画像はfunctions.phpでの                設定が重要!     ...
使いこなして      サイト制作に役立ててくださいね!2012年9月16日日曜日
ご静聴ありがとうございました!                ご指摘/ご質問などお気軽に。                       yuki9302012年9月16日日曜日
Upcoming SlideShare
Loading in …5
×

WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!

6,522 views

Published on

WordCamp 2012で発表した「画像のアップロード&アイキャッチ画像をしっかり理解しよう!」のスライドです。

0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,522
On SlideShare
0
From Embeds
0
Number of Embeds
2,138
Actions
Shares
0
Downloads
53
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!

    1. 1. 画像のアップロード& アイキャッチ画像を しっかり理解しよう! 山口 有由希2012年9月16日日曜日
    2. 2. 自己紹介2012年9月16日日曜日
    3. 3. や ま ぐ ち ゆ う き 山口 有由希 福岡県在住、長崎県出身 フロッグマンオフィス所属 福岡県でWebデザイナー2012年9月16日日曜日
    4. 4. Fireworksマニア lors.com http://fw.v-co2012年9月16日日曜日
    5. 5. 今回のねらい2012年9月16日日曜日
    6. 6. WordPressの画像の扱い方をマスターすれば、 難しいコードを書かなくてもアイデア次第で いろんなことができます。2012年9月16日日曜日
    7. 7. 全部 WordPressで 運営中2012年9月16日日曜日
    8. 8. 画像の扱い方で困る ことがないように しっかり押さえて おきましょう!2012年9月16日日曜日
    9. 9. 本日の流れ2012年9月16日日曜日
    10. 10. ✦ ファイルアップローダーからアップした 画像の保存先の確認と設定 ✦ 初期設定されているサイズ (thumbnail,medium,large)の設定を変更する ✦ アイキャッチ画像を使えるように設定する ✦ いろいろなところにアイキャッチ画像を使う ✦ テーマ内や投稿/ページ内に画像を 使用するときのパスの指定方法のポイント2012年9月16日日曜日
    11. 11. WordPressでの 画像アップロードの 基本のき2012年9月16日日曜日
    12. 12. WordPressでは、ファイルアップローダー から画像をアップすると thumbnail、medium、large、fullの 4種類の画像サイズが 自動的に生成され、保存されます 。2012年9月16日日曜日
    13. 13. どこにアップ されているの?2012年9月16日日曜日
    14. 14. WordPressの ファイルアップローダーから アップした画像の 保存場所を確認/設定する2012年9月16日日曜日
    15. 15. 2012年9月16日日曜日
    16. 16. 管理画面->設定->メディア ✦ メディア設定の中に設定箇所があります。2012年9月16日日曜日
    17. 17. thumbnail,medium,largeの サイズ設定はどこでやるの?2012年9月16日日曜日
    18. 18. 2012年9月16日日曜日
    19. 19. 初期設定されている画像サイズ (large,medium,thumbnail) の設定をする2012年9月16日日曜日
    20. 20. 管理画面->設定->メディア ✦ メディア設定の中に設定箇所があります。2012年9月16日日曜日
    21. 21. サムネイルを実寸法にトリミングする? チェックを入れたとき 元画像 チェックをはずしたとき2012年9月16日日曜日
    22. 22. チェックを入れたとき サイズ優先。指定のサイズぴったりの画像 を作成する。そのため、縦横比の異なる画 像を指定した場合、上下もしくは左右が切 り取られてしまう。 チェックをはずしたとき 画像維持優先。画像すべてがそのサイズ内 におさまるようにリサイズする。縦横比の 異なる画像を指定した場合、上下、もしく は左右の長さが指定しているサイズより小 さくなる。2012年9月16日日曜日
    23. 23. 2012年9月16日日曜日
    24. 24. サムネイルサイズにしか 選択欄がない2012年9月16日日曜日
    25. 25. medium,largeサイズの トリミング方法の指定は できないの? functions.phpを編集することで 実現できます!2012年9月16日日曜日
    26. 26. ところで functions.phpって? テーマディレクトリ 内にある、関数などを 記述することができる PHPファイルです。2012年9月16日日曜日
    27. 27. 2012年9月16日日曜日
    28. 28. update_option(medium_crop, true); update_option(large_crop, true); true…サイズ優先 false…画像保持優先2012年9月16日日曜日
    29. 29. update_option(medium_size_h, 100); update_option(medium_size_w, 100); functions.phpでサイズの設定もできます。 このとき、管理画面での設定値より functions.phpで設定した値の方が優先されます。2012年9月16日日曜日
    30. 30. thumbnail、medium、large 以外の 画像サイズを作る2012年9月16日日曜日
    31. 31. 2012年9月16日日曜日
    32. 32. 新しいサイズを定義する functions.phpに以下の記述を追加します。 add_image_size(新しいサイズ名, 幅, 高さ,切り抜き方 ); add_image_size(mini, 100, 200, true);2012年9月16日日曜日
    33. 33. どう使い分ける? ✦ ページや投稿内で貼付けたい画像サイズは、 thumbnail,medium,largeで設定しておくと便利。 (投稿の際、一覧からサイズを選べるため) ✦ テーマ内に埋め込むもので、一覧に出る必要のないも の(小さいサムネイル用画像など)は別の名称で作っ ておくと混乱がない(投稿の際の一覧にでない)2012年9月16日日曜日
    34. 34. アイキャッチ画像を使う2012年9月16日日曜日
    35. 35. アイキャッチを有効にする functions.phpに以下の記述を追加します。 add_theme_support(post-thumbnails); 投稿のみ/固定ページのみ アイキャッチを使う設定もできます。 add_theme_support( post-thumbnails, array( post ) ); // 投稿のみ add_theme_support( post-thumbnails, array( page ) ); // 固定ページのみ2012年9月16日日曜日
    36. 36. 2012年9月16日日曜日
    37. 37. アイキャッチのサイズを指定する functions.phpに以下の記述を追加します。 set_post_thumbnail_size(横,縦,切り抜き方); 一緒に切り抜き方も指定できます。 set_post_thumbnail_size(100,100,true);2012年9月16日日曜日
    38. 38. 記事のループ内に アイキャッチ画像を 表示させる2012年9月16日日曜日
    39. 39. メインループ内で使用する ループ内に以下の記述を追加します。 the_post_thumbnail(サイズ指定); サイズ指定を省略すると、 先ほど指定したサイズのアイキャッチが 表示されます。 the_post_thumbnail(); the_post_thumbnail( thumbnail );2012年9月16日日曜日
    40. 40. サイズ指定に使えます functions.phpで以下の文で定義した 新しいサイズ名も使えます。 add_image_size(新しいサイズ名, 幅, 高さ,切り抜き方 ); the_post_thumbnail( mini );2012年9月16日日曜日
    41. 41. 注意点 Codexで上記のように記載がありますが、 functions.phpで値を設定せずにパラメータなしでアイキャッチ を出力するとフルサイズで出力されてしまいます 。2012年9月16日日曜日
    42. 42. add_theme_support(post-thumbnails); set_post_thumbnail_size(横,縦,切り抜き方); アイキャッチのサイズ指定は セットで書いておきましょう。2012年9月16日日曜日
    43. 43. オリジナルループ内などで使用する ループ内に以下の記述を追加します。 echo get_the_post_thumbnail(記事のID,サイズ指定); サイズ指定を省略すると、先ほど指定したサイ ズのアイキャッチが表示されます。2012年9月16日日曜日
    44. 44. 使用例 <?php $pages = get_pages(array(child_of => 1)); ?> <ul> <?php foreach ($pages as $page): ?> <li> <?php echo get_the_post_thumbnail($page->ID); ?> <h1><?php echo $page->post_title; ?></h1> <?php echo $page->post_content; ?> </li> <?php endforeach; ?> </ul>2012年9月16日日曜日
    45. 45. 使用例2012年9月16日日曜日
    46. 46. アイキャッチ画像を さらにいろいろなところに 表示させる2012年9月16日日曜日
    47. 47. プラグインに組み込む 人気記事を表示するプラグイン、Popular Postsに アイキャッチを表示させてみましょう。 http://rmarsh.com/plugins/popular-posts-plugin/2012年9月16日日曜日
    48. 48. 出力部分をカスタマイズする 設定→Popular Posts→Output→ Output template:を編集します2012年9月16日日曜日
    49. 49. 出力部分をカスタマイズする [php: XXXXXX ;]で囲むとテーマと同じように PHP構文を書くことができます。 このプラグイン内で使用可能な変数リストがサイド バーに表示されているので、そこからPost_idを取 得する変数を選び、セットします。2012年9月16日日曜日
    50. 50. 記述方法 以下の記述を追加します。 {php: echo get_the_post_thumbnail({postid},"サイズ指定");} サイズ指定はこれまでと同様、thumbnailや mediumなども指定できます。 {php: echo get_the_post_thumbnail({postid},"thumbnail");}2012年9月16日日曜日
    51. 51. 関連記事表示にも導入 プラグインSimilar Postsを使用して 関連記事表示部分にもアイキャッチ画像を 表示させることができます。 設定方法は人気記事の時と同様です。 http://rmarsh.com/plugins/similar-posts/2012年9月16日日曜日
    52. 52. テーマディレクトリにある画像 をテーマ内で使う2012年9月16日日曜日
    53. 53. bloginfo(template_directory ); を使おう! 使用中テーマファイルディレクトリのURLを出力 します。以下のように記述します。 <img src="<?php bloginfo(template_ directory); ?>/ images/sitetitle.png" /> 出力結果 <img src="http://blog.v-colors.com/wp-content/ themes/v-colors/images/sitetitle.png" />2012年9月16日日曜日
    54. 54. テーマディレクトリにある画像 を投稿/ページ内で使う2012年9月16日日曜日
    55. 55. 投稿やページにフ ルパスで書いて 困るシチュエーション ✦ サイトのURLが変わることになった! ✦ テスト環境ではhogehoge.com/test/に設置し ていたが、本番環境ではhogehoge.com/で公 開するので絶対パスが変わってしまう ✦ ファイルアップローダーであげた画像は上書き が面倒2012年9月16日日曜日
    56. 56. functions.phpに仕掛けをしよう function chgImgPath($text) { $content = str_replace(置き換えたい文字列, 置き換えたいパス,$text); return $content; } add_action(the_content, chgImgPath); function chgImgPath($text) { $content = str_replace(imagepath,get_bloginfo(template_directory)./ images,$text); return $content; } add_action(the_content, chgImgPath);2012年9月16日日曜日
    57. 57. 投稿/ページでの書き方 <img src="imagepath/hogehoge.png" alt="これはhogehogeです" /> 出力結果 <img src="http://blog.v-colors.com/wp-content/themes/v-colors/ images/hogehoge.png" alt="これはhogehogeです" />2012年9月16日日曜日
    58. 58. こんなに便利! ✦ function.php内の置き換えたいパスのURLを 変更だけでOK。 ✦ 画像の差し替えがあったときは該当ディレク トリの画像をFTPで上書きでOK (ファイルアップローダーであげた画像の上書 きは地味に大変)2012年9月16日日曜日
    59. 59. この方法の注意点 記事中に出てくる指定した文字列をすべて置換し ます(この場合はimagepath) そのため置き換える文字列は本文中に出てくるこ とのないような文字列を設定しておいた方がいい でしょう。2012年9月16日日曜日
    60. 60. まとめ2012年9月16日日曜日
    61. 61. ✦ thumbnail、medium、large以外にも いろんな画像サイズを作れちゃう! ✦ アイキャッチ画像はfunctions.phpでの 設定が重要! ✦ テーマ内でも自由に呼び出せるので アイデア次第で使い方色々2012年9月16日日曜日
    62. 62. 使いこなして サイト制作に役立ててくださいね!2012年9月16日日曜日
    63. 63. ご静聴ありがとうございました! ご指摘/ご質問などお気軽に。 yuki9302012年9月16日日曜日

    ×