Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

WordPressのアイキャッチ画像の設定と使い方

アイキャッチ

WordPressで「アイキャッチ画像」を設定する方法と使い方を解説します。WEBサイトに「アイキャッチ画像」があるとないとでは、訪問者の離脱率が変わると言われていますので設定しない手はありませんね。それと、アフィリエイトでの商品(サイト)を紹介する場合にもWordPressのアイキャッチ機能は大変重宝します。アイキャッチ画像は、トップページ、カテゴリー、タグページや関連記事の表示等に使いまわすことができるので大変便利です。

アイキャッチ画像の設定方法

まず、function.phpに下記を記載します。

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

次にWordPressの管理画面で以下の手順で設定していきます。

サムネイルメディア設定

「設定」→「メディア」の設定画面で出力させる画像サイズを設定します。

アイキャッチ画像設定

function.phpの設定に問題がなければ、投稿画面に「アイキャッチ画像」の設定項目が表示されています。アイキャッチ画像設定を続いてクリックします。

画像指定

…/ドメイン名/public_html/wp-content/uploads/(年)/(月)にアップロードされている画像が一覧で表示されているので、画像を選択します。新しく画像を登録する場合は、左上の、「ファイルをアップロード」を選択してローカルにある画像をアップロードします。画像選択が終わったら、「アイキャッチ画像を設定」をクリックします。

設定完了

上記のように、画像が表示されれば設定は完了です。

アイキャッチ画像の使い方

設定が終わったら、実際に表示させてみましょう。アイキャッチ画像を表示させたい場所(テンプレートファイル)に下記を記入します。

<?php if(has_post_thumbnail()): ?><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a><?php else: ?><a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/default.jpg" width="128" height="128" alt="NOT IMAGE" title="NOT IMAGE" class="attachment-thumbnail wp-post-image" /></a><?php endif; ?>

上記は、管理画面でのアイキャッチ画像設定がない場合は、default.jpgを表示するようにしていしています。なお、アイキャッチ画像をリサイズしたり、タイトル属性を付加したりする場合は、下記を参考にしてください。

<?php the_post_thumbnail(array(100,100)); ?>
<?php the_post_thumbnail( 'thumbnail', array(  'title' => 'moji', 'class' => 'sankumi' )); ?>

管理画面のメディア設定で指定したサムネイル意外の大きさで出力する方法は下記を参考にしてください。

<?php the_post_thumbnail('medium'); ?>
<?php the_post_thumbnail('large'); ?>

メディア設定で指定したサイズ以外で、よく利用する大きさの画像サイズがあれば下記をfunciton.phpに記載します。使い方は、メディア設定をした画像サイズを呼び出す方法と同じです。

<?php add_image_size( 'mini', 50, 50, true ); ?>

以上、WordPressのアイキャッチ画像機能の設定方法と便利な使い方を紹介しました。アイキャッチ画像は、様々な場所で使いますので、使い方をマスターしましょう。