ロト君のサイト by lotokunn

L'sCore ロト君のサイトへようこそ!

  1. TOP
  2. パソコン
  3. WordPressでのアイキャッチ加工

WordPressでのアイキャッチ加工

4919659112_70f8836dfa

皆さん今晩は!最近WordPressでのサイト作りを始めたロト君です。

 

よくアイキャッチを投稿時に張り付けるのですがいまいち活用方法が分からず苦労したので、再度学習の意味も込めて投稿しておこうと、思います!

基本、アイキャッチ画像を有効化するためには、function.phpに以下のコードを追加しなくてはいけません。

 

<?php add_theme_support('post-thumbnails'); ?>

 

このコードを追加すると投稿編集画面等にアイキャッチを追加するボタンが出来ます。

コードを追加後、各PHPファイル内に下記のコードを追加するとアイキャッチ画像が表示されます。

<?php set_post_thumbnail_size(300, 225, true); ?>

横300,縦255の切り取ったものが表示されます。

 

アイキャッチが選択されていない場合、任意の画像を表示させる場合は下記のような記述を行います。

<?php
if (has_post_thumbnail() ) {
 $thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得
 $image = wp_get_attachment_image_src( $thumbnail_id, 'middle-feature' ); //「full」サイズのアイキャッチの情報を取得
 $src = $image[0]; //url
 $width = $image[1]; //横幅
 $height = $image[2]; //高さ
echo '<img src="'.$src.'" id="eye_image">';
} else {
//アイキャッチがない場合は代替画像を表示。
echo '<img src="' . get_bloginfo('template_directory') . '/img/no_image.jpg' . '" id="eye_image">';
} ?>

これによってループ中でのアイキャッチがない画像は任意のno_image.jpgが表示されます。※id=”eye_image”の様にCSSを使っての装飾も行えます。

 

これが使えると、連続表示の際にアイキャッチの確認もし易くなりますね!!

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA



Hello!!

皆さんこんにちは!こんばんは!!ロト君です。

このサイトは私が興味を持ったモノやコトについて掲載をしていくサイトです。

主にパソコン関係やアニメ・ゲーム等について掲載すたいと思いますので、 どうぞ宜しくお願い致します!

コメント等はTwitter等を活用して頂けると有り難いです!!

Twitter: ロト君@lotokunn