2012年03月02日 WordPress

基本設定

function.phpに以下を追加

以下を追加することで、WordPressでアイキャッチ画像を使うことが可能になります。
これが設定されていないと、管理画面内の投稿ページにもアイキャッチ関連のボックスは表示されないようです。
add_theme_support( 'post-thumbnails' );

アイキャッチを表示させる

アイキャッチを呼び出すには、呼び出したい箇所に以下を記述します。
<?php the_post_thumbnail(); ?>

これだけの設定でアイキャッチは使えるようになります。

アイキャッチ画像のサイズを設定する

上記の基本設定の状態だと、アップロードされた画像のサイズそのままで表示されてしまうので、サイズを設定したい場合は、以下のようにします。

テンプレートファイル内のアイキャッチを使用する箇所でサイズ指定する場合

<?php the_post_thumbnail(array(100,150)); ?>

上記のようにすれば、縦横比を継承したまま、width,heightのどちらか長い方に合わせて表示してくれるらしいのですが、私がテストしてみた感じだと、縦長の画像をアップロードしても、実際表示される画像は100px ✕ 100pxになってしまい、縦横比は継承されませんでした。私が、誤解しているのか使い方が間違っているのか、分かりませんでしたので、ご存知の方がいれば、教えてくださいm(_ _)m

アイキャッチ画像をアップロードする際にサイズ指定する場合

ネットで検索するとfunctions.phpに以下のように設定すれば、サイズ指定できると書いている記事がたくさんありましたが、詳細の説明が不足していて、誤解してしまう方も多いかもしれません。

実際には、以下のように「set_post_thumbnail_size」を設定すると、アイキャッチ画像をアップロードする際にリサイズが適用されるので、すでにアイキャッチ画像をアップロードしていて、サイズ変更したい場合は、以下の設定では思うようになりません。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 150, true );
参考サイト : webdesignrecipes.com

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

WordPress 投稿画像のアップロード時にサイズを指定

2011年05月26日 WordPress
Resize At Upload を使うことで、アップロード時にサイズを指定することが可能になります。 具体的には、iPhoneなどからの画像をそのままアップすると最大サイズで投稿され、フルサイズの画像が大きすぎるという時などに便利です。 もともと、サムネイルは投稿に挿入する際にサイズ指定できますが、クリックされた後のフルサイズは、管理画面から画像をトリミングするなどしなければ、思いどおりのサ…
「WordPress 投稿画像のアップロード時にサイズを指定」をはてなブックマークに追加

WordPress Contact Formプラグインのメールアドレス確認を実装する

2011年06月16日 WordPress
WordPressでよく使われるメールフォームのプラグイン「Contact Form7」ですが、メールアドレスの確認用の入力フォームが、標準でついてるかと思ってたらついてなかったので、調べてみました。 こちらのサイトさんが、簡単に実装出来る方法を公開してくれてましたので、紹介したいと思います。 …
「WordPress Contact Formプラグインのメールアドレス確認を実装する」をはてなブックマークに追加

Twitter Bootstrapでスマホ回転時の表示崩れ

2013年11月13日 WordPressjQuery・javascript
Twitter Bootstrapを使用して、レスポンシブなウェブサイトを制作していたのですが、iPhoneで縦画面、横画面での表示を繰り返すと画面からはみ出してしまう(拡大表示した時のように画面内にサイトが収まっていない)現象に悩まされました。 もちろん、縦でも横でも画面横幅ピッタリにサイトが表示されるのが理想なので、調べてみました。 今回使用していたのは、Bootstrap v3.…
「Twitter Bootstrapでスマホ回転時の表示崩れ」をはてなブックマークに追加

表示中ページの条件分岐

2011年11月21日 WordPress
条件分岐一覧 is_front_page()トップページかどうか。 is_home()投稿ページ(固定ページを設定していなければトップページ)かどうか。 is_single()個別記事かどうか。カッコにID、タイトル、スラッグを入れて判定できる。 is_page()ページかどうか。カッコにID、タイトル、スラッグを入れて判定できる。 is_singular()個別記事でもページ…
「表示中ページの条件分岐」をはてなブックマークに追加

検索フォームを設置し、検索結果を表示させる

2012年01月23日 WordPress
1.まずは検索フォームを設置します searchform.php 2.次に検索結果を取得、表示させる search.phpの検索結果を表示させる部分…
「検索フォームを設置し、検索結果を表示させる」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy