Suche senden
Hochladen
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
•
14 gefällt mir
•
3,046 views
YUKI YAMAGUCHI
Folgen
WordCamp 2012で発表した「画像のアップロード&アイキャッチ画像をしっかり理解しよう!」のスライドです。
Weniger lesen
Mehr lesen
Melden
Teilen
Melden
Teilen
1 von 63
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
WordcampFukuoka2010プレイベント
WordcampFukuoka2010プレイベント
YUKI YAMAGUCHI
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
デザイナー視点のWordPress WordCrub Fukui 2011.1.29
Toshiaki Sasaki
Progressionのススメ
Progressionのススメ
Toshiaki Sasaki
ルビー( ´∀`)人(´∀` )ルビー
ルビー( ´∀`)人(´∀` )ルビー
Toshiaki Sasaki
Abc words
Abc words
YUKI YAMAGUCHI
WordPressテーマの作り方
WordPressテーマの作り方
YUKI YAMAGUCHI
Osc2010fukuoka
Osc2010fukuoka
YUKI YAMAGUCHI
Tips of Design
Tips of Design
Toshiaki Sasaki
Weitere ähnliche Inhalte
Andere mochten auch
Hello Google+
Hello Google+
Toshiaki Sasaki
Performance up Web Design
Performance up Web Design
Toshiaki Sasaki
Road Map 2012
Road Map 2012
YUKI YAMAGUCHI
First sass
First sass
Toshiaki Sasaki
ノンデザイナーでもグラフを見やすくする6つのコツ
ノンデザイナーでもグラフを見やすくする6つのコツ
Sho Hamano
いろのいろいろ
いろのいろいろ
sekaiya
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
YUKI YAMAGUCHI
Sacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
YUKI YAMAGUCHI
CS -Cart勉強会
CS -Cart勉強会
YUKI YAMAGUCHI
Word Camp Fukuoka2010
Word Camp Fukuoka2010
YUKI YAMAGUCHI
EC-CUBEとここが違う!はじめてみようCS-Cart
EC-CUBEとここが違う!はじめてみようCS-Cart
YUKI YAMAGUCHI
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
YUKI YAMAGUCHI
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
YUKI YAMAGUCHI
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
Kunio Sakamoto
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
schoowebcampus
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...
schoowebcampus
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
schoowebcampus
Webデザインのための配色セオリー
Webデザインのための配色セオリー
webcampusschoo
Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
YUKI YAMAGUCHI
Photoshopで学ぶ、一生使える色調補正 先生:藤本 圭先生
Photoshopで学ぶ、一生使える色調補正 先生:藤本 圭先生
schoowebcampus
Andere mochten auch
(20)
Hello Google+
Hello Google+
Performance up Web Design
Performance up Web Design
Road Map 2012
Road Map 2012
First sass
First sass
ノンデザイナーでもグラフを見やすくする6つのコツ
ノンデザイナーでもグラフを見やすくする6つのコツ
いろのいろいろ
いろのいろいろ
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
Sacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
CS -Cart勉強会
CS -Cart勉強会
Word Camp Fukuoka2010
Word Camp Fukuoka2010
EC-CUBEとここが違う!はじめてみようCS-Cart
EC-CUBEとここが違う!はじめてみようCS-Cart
Fukuoka.php 第一回勉強会 LTスライド
Fukuoka.php 第一回勉強会 LTスライド
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる!WebデザイナーのためのCS-Cartカスタマイズ講座
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
「初心者向けデザイン講座」 -東洋美術学校(第三回目:色編)
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "The purposes and methods of technological ...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
i.school, The University of Tokyo "Divergence, convergence, and expression of...
Webデザインのための配色セオリー
Webデザインのための配色セオリー
Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
Photoshopで学ぶ、一生使える色調補正 先生:藤本 圭先生
Photoshopで学ぶ、一生使える色調補正 先生:藤本 圭先生
Ähnlich wie WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
20120516 NetCommons GoogleMap
20120516 NetCommons GoogleMap
Kenichi Ohwada
2012年8月10日 勉強会
2012年8月10日 勉強会
Rin Yano
Word press 3.5RC2 - パーフェクト functions.php -
Word press 3.5RC2 - パーフェクト functions.php -
BREN
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
horike37
Osc2012tokyo timing
Osc2012tokyo timing
Takashi Kitamura
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
夜子まま塾講義10(画面の呼び出し)
夜子まま塾講義10(画面の呼び出し)
Masafumi Terazono
ぺちぱな。 はじまり
ぺちぱな。 はじまり
Ryo Tajima
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
eZ Publish勉強会10月〜Wysiwygエディター〜
eZ Publish勉強会10月〜Wysiwygエディター〜
ericsagnes
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
Hitsuji
WordVolcano: WordPress on クラウド 〜ブラウザだけでサイトを作ろう〜
WordVolcano: WordPress on クラウド 〜ブラウザだけでサイトを作ろう〜
Naoko Takano
2005 07 30_xwj_customizinig
2005 07 30_xwj_customizinig
Tom Hayakawa
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Takashi Uemura
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
夜子まま塾講義7(androidの画面デザイン1)
夜子まま塾講義7(androidの画面デザイン1)
Masafumi Terazono
ExGame さくっと入門
ExGame さくっと入門
Soshi Kido
Ähnlich wie WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
(20)
20120516 NetCommons GoogleMap
20120516 NetCommons GoogleMap
2012年8月10日 勉強会
2012年8月10日 勉強会
Word press 3.5RC2 - パーフェクト functions.php -
Word press 3.5RC2 - パーフェクト functions.php -
第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
Osc2012tokyo timing
Osc2012tokyo timing
WordPress を使いこなそう
WordPress を使いこなそう
夜子まま塾講義10(画面の呼び出し)
夜子まま塾講義10(画面の呼び出し)
ぺちぱな。 はじまり
ぺちぱな。 はじまり
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
eZ Publish勉強会10月〜Wysiwygエディター〜
eZ Publish勉強会10月〜Wysiwygエディター〜
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
WordVolcano: WordPress on クラウド 〜ブラウザだけでサイトを作ろう〜
WordVolcano: WordPress on クラウド 〜ブラウザだけでサイトを作ろう〜
2005 07 30_xwj_customizinig
2005 07 30_xwj_customizinig
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressプラグイン作成入門
WordPressプラグイン作成入門
夜子まま塾講義7(androidの画面デザイン1)
夜子まま塾講義7(androidの画面デザイン1)
ExGame さくっと入門
ExGame さくっと入門
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
1.
画像のアップロード&
アイキャッチ画像を しっかり理解しよう! 山口 有由希 2012年9月16日日曜日
2.
自己紹介 2012年9月16日日曜日
3.
や ま ぐ
ち ゆ う き 山口 有由希 福岡県在住、長崎県出身 フロッグマンオフィス所属 福岡県でWebデザイナー 2012年9月16日日曜日
4.
Fireworksマニア
lors.com http://fw.v-co 2012年9月16日日曜日
5.
今回のねらい 2012年9月16日日曜日
6.
WordPressの画像の扱い方をマスターすれば、
難しいコードを書かなくてもアイデア次第で いろんなことができます。 2012年9月16日日曜日
7.
全部
WordPressで 運営中 2012年9月16日日曜日
8.
画像の扱い方で困る
ことがないように しっかり押さえて おきましょう! 2012年9月16日日曜日
9.
本日の流れ 2012年9月16日日曜日
10.
✦ ファイルアップローダーからアップした
画像の保存先の確認と設定 ✦ 初期設定されているサイズ (thumbnail,medium,large)の設定を変更する ✦ アイキャッチ画像を使えるように設定する ✦ いろいろなところにアイキャッチ画像を使う ✦ テーマ内や投稿/ページ内に画像を 使用するときのパスの指定方法のポイント 2012年9月16日日曜日
11.
WordPressでの 画像アップロードの 基本のき 2012年9月16日日曜日
12.
WordPressでは、ファイルアップローダー
から画像をアップすると thumbnail、medium、large、fullの 4種類の画像サイズが 自動的に生成され、保存されます 。 2012年9月16日日曜日
13.
どこにアップ
されているの? 2012年9月16日日曜日
14.
WordPressの ファイルアップローダーから アップした画像の
保存場所を確認/設定する 2012年9月16日日曜日
15.
2012年9月16日日曜日
16.
管理画面->設定->メディア
✦ メディア設定の中に設定箇所があります。 2012年9月16日日曜日
17.
thumbnail,medium,largeの
サイズ設定はどこでやるの? 2012年9月16日日曜日
18.
2012年9月16日日曜日
19.
初期設定されている画像サイズ (large,medium,thumbnail) の設定をする 2012年9月16日日曜日
20.
管理画面->設定->メディア
✦ メディア設定の中に設定箇所があります。 2012年9月16日日曜日
21.
サムネイルを実寸法にトリミングする?
チェックを入れたとき 元画像 チェックをはずしたとき 2012年9月16日日曜日
22.
チェックを入れたとき
サイズ優先。指定のサイズぴったりの画像 を作成する。そのため、縦横比の異なる画 像を指定した場合、上下もしくは左右が切 り取られてしまう。 チェックをはずしたとき 画像維持優先。画像すべてがそのサイズ内 におさまるようにリサイズする。縦横比の 異なる画像を指定した場合、上下、もしく は左右の長さが指定しているサイズより小 さくなる。 2012年9月16日日曜日
23.
2012年9月16日日曜日
24.
サムネイルサイズにしか
選択欄がない 2012年9月16日日曜日
25.
medium,largeサイズの
トリミング方法の指定は できないの? functions.phpを編集することで 実現できます! 2012年9月16日日曜日
26.
ところで
functions.phpって? テーマディレクトリ 内にある、関数などを 記述することができる PHPファイルです。 2012年9月16日日曜日
27.
2012年9月16日日曜日
28.
update_option('medium_crop', true);
update_option('large_crop', true); true…サイズ優先 false…画像保持優先 2012年9月16日日曜日
29.
update_option('medium_size_h', 100);
update_option('medium_size_w', 100); functions.phpでサイズの設定もできます。 このとき、管理画面での設定値より functions.phpで設定した値の方が優先されます。 2012年9月16日日曜日
30.
thumbnail、medium、large 以外の 画像サイズを作る 2012年9月16日日曜日
31.
2012年9月16日日曜日
32.
新しいサイズを定義する
functions.phpに以下の記述を追加します。 add_image_size('新しいサイズ名', 幅, 高さ,切り抜き方 ); add_image_size('mini', 100, 200, true); 2012年9月16日日曜日
33.
どう使い分ける?
✦ ページや投稿内で貼付けたい画像サイズは、 thumbnail,medium,largeで設定しておくと便利。 (投稿の際、一覧からサイズを選べるため) ✦ テーマ内に埋め込むもので、一覧に出る必要のないも の(小さいサムネイル用画像など)は別の名称で作っ ておくと混乱がない(投稿の際の一覧にでない) 2012年9月16日日曜日
34.
アイキャッチ画像を使う 2012年9月16日日曜日
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.
2012年9月16日日曜日
37.
アイキャッチのサイズを指定する
functions.phpに以下の記述を追加します。 set_post_thumbnail_size(横,縦,切り抜き方); 一緒に切り抜き方も指定できます。 set_post_thumbnail_size(100,100,true); 2012年9月16日日曜日
38.
記事のループ内に アイキャッチ画像を 表示させる 2012年9月16日日曜日
39.
メインループ内で使用する
ループ内に以下の記述を追加します。 the_post_thumbnail(サイズ指定); サイズ指定を省略すると、 先ほど指定したサイズのアイキャッチが 表示されます。 the_post_thumbnail(); the_post_thumbnail( thumbnail ); 2012年9月16日日曜日
40.
サイズ指定に使えます
functions.phpで以下の文で定義した 新しいサイズ名も使えます。 add_image_size('新しいサイズ名', 幅, 高さ,切り抜き方 ); the_post_thumbnail( mini ); 2012年9月16日日曜日
41.
注意点 Codexで上記のように記載がありますが、 functions.phpで値を設定せずにパラメータなしでアイキャッチ
を出力するとフルサイズで出力されてしまいます 。 2012年9月16日日曜日
42.
add_theme_support('post-thumbnails');
set_post_thumbnail_size(横,縦,切り抜き方); アイキャッチのサイズ指定は セットで書いておきましょう。 2012年9月16日日曜日
43.
オリジナルループ内などで使用する
ループ内に以下の記述を追加します。 echo get_the_post_thumbnail(記事のID,サイズ指定); サイズ指定を省略すると、先ほど指定したサイ ズのアイキャッチが表示されます。 2012年9月16日日曜日
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.
使用例 2012年9月16日日曜日
46.
アイキャッチ画像を さらにいろいろなところに 表示させる 2012年9月16日日曜日
47.
プラグインに組み込む
人気記事を表示するプラグイン、Popular Postsに アイキャッチを表示させてみましょう。 http://rmarsh.com/plugins/popular-posts-plugin/ 2012年9月16日日曜日
48.
出力部分をカスタマイズする
設定→Popular Posts→Output→ Output template:を編集します 2012年9月16日日曜日
49.
出力部分をカスタマイズする
[php: XXXXXX ;]で囲むとテーマと同じように PHP構文を書くことができます。 このプラグイン内で使用可能な変数リストがサイド バーに表示されているので、そこからPost_idを取 得する変数を選び、セットします。 2012年9月16日日曜日
50.
記述方法
以下の記述を追加します。 {php: echo get_the_post_thumbnail({postid},"サイズ指定");} サイズ指定はこれまでと同様、thumbnailや mediumなども指定できます。 {php: echo get_the_post_thumbnail({postid},"thumbnail");} 2012年9月16日日曜日
51.
関連記事表示にも導入
プラグインSimilar Postsを使用して 関連記事表示部分にもアイキャッチ画像を 表示させることができます。 設定方法は人気記事の時と同様です。 http://rmarsh.com/plugins/similar-posts/ 2012年9月16日日曜日
52.
テーマディレクトリにある画像 をテーマ内で使う 2012年9月16日日曜日
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.
テーマディレクトリにある画像 を投稿/ページ内で使う 2012年9月16日日曜日
55.
投稿やページにフ ルパスで書いて
困るシチュエーション ✦ サイトのURLが変わることになった! ✦ テスト環境ではhogehoge.com/test/に設置し ていたが、本番環境ではhogehoge.com/で公 開するので絶対パスが変わってしまう ✦ ファイルアップローダーであげた画像は上書き が面倒 2012年9月16日日曜日
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.
投稿/ページでの書き方
<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.
こんなに便利!
✦ function.php内の置き換えたいパスのURLを 変更だけでOK。 ✦ 画像の差し替えがあったときは該当ディレク トリの画像をFTPで上書きでOK (ファイルアップローダーであげた画像の上書 きは地味に大変) 2012年9月16日日曜日
59.
この方法の注意点
記事中に出てくる指定した文字列をすべて置換し ます(この場合はimagepath) そのため置き換える文字列は本文中に出てくるこ とのないような文字列を設定しておいた方がいい でしょう。 2012年9月16日日曜日
60.
まとめ 2012年9月16日日曜日
61.
✦ thumbnail、medium、large以外にも
いろんな画像サイズを作れちゃう! ✦ アイキャッチ画像はfunctions.phpでの 設定が重要! ✦ テーマ内でも自由に呼び出せるので アイデア次第で使い方色々 2012年9月16日日曜日
62.
使いこなして
サイト制作に役立ててくださいね! 2012年9月16日日曜日
63.
ご静聴ありがとうございました!
ご指摘/ご質問などお気軽に。 yuki930 2012年9月16日日曜日
Hinweis der Redaktion
\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
Jetzt herunterladen