会員制記事の購読をご希望されるお客様はコチラより
ログインまたは会員登録してください。

パスワードをお忘れの方はコチラ

新規登録はコチラ

 


wordpressにアイキャッチ(サムネイル)画像を設定する

2010 年 12 月 2 日 投稿者: 木村 健一
wordpressのバージョン3より、”アイキャッチ画像” という機能があります。
記事に対しサムネイル画像を設定することが容易になりました。
基本的には一度phpファイルを設定してしまえば、後は記事投稿時に「アイキャッチ画像として使用」というリンクを押すだけで設定出来てしまいます。簡単なのでぜひアイキャッチ要素としてご利用してみては!?
wordpressにアイキャッチ(サムネイル)画像を設定する

具体的な設定方法

■function.phpを編集する

テーマ内にあるfunction.phpファイルで下記を追加して下さい。
add_theme_support( 'post-thumbnails' );
上記設定を行えば、記事(投稿)、ページどちらにも反映されます。
片方のみでよいという方は、第二引数に設定を行います。

■記事のみ設定する
add_theme_support( 'post-thumbnails', array( 'post' ) );
■ページのみ設定する
add_theme_support( 'post-thumbnails', array( 'page' ) );

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

画像を記事内に表示させるには、single.php(記事詳細ページ)や、index.php(記事一覧ページ)ファイルなど、記事ループ処理内にて、下記を追加します。
<?php the_post_thumbnail(); ?>
上記を記載することでアイキャッチ画像を表示することができます。
当サイトでは下記のような形でindex.phpに加えました。(Line : 09)
<div class="headLines">
  <div class="headLineTitle"><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', '411'), the_title_attribute('echo=0')); ?>"><?php initialText(the_title( "" , "" , false ) ); ?></a></h2></div>
  <div class="headLineBody">
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
      <small><?php the_time(__('F jS, Y', '411')) ?>  投稿者:<?php the_eccube_authre_link( get_the_author_meta('login'), get_the_author() ) ?></small>
    </div>
    <div class="text">
      <div class="entry">
        <?php the_post_thumbnail(); ?>
        <?php the_excerpt(); ?>
        <a class="grn_link" href="<?php the_permalink() ?>">続きを読む>></a>
      </div>
    </div>
    <p class="postmetadata"><?php printf(__('Posted in %s', '411'), get_the_category_list(', ')); ?> | <?php edit_post_link(__('Edit', '411'), '', ' | '); ?>  <?php comments_popup_link(__('No Comments &#187;', '411'), __('1 Comment &#187;', '411'), __('% Comments &#187;', '411'), '', __('Comments Closed', '411') ); ?></p>
  </div>
  <br clear="all" />
  <hr class="gry" />
</div>


記事毎にアイキャッチ画像を設定する

記事の編集画面より設定を行います。 画像の追加アイコン等で画像を追加し、アイキャッチ画像として設定します。

上図のとおり、画像をアップしてから下部にある、「アイキャッチ画像として使用」リンクをクリックするだけです。
正常に設定されれば、記事編集ページ内右下あたりに、下のように画像が表示されます。

誤って設定してしまった場合でも、削除し、改めてアイキャッチ画像を設定することも可能です。

これでアイキャッチ画像の設定は完了です。



コメントフォーム

コメントを投稿するにはログインしてください。

現在、この記事へのトラックバックはありません。

トラックバック URL

おススメ記事