WordPress logo.svg
WordPress logo” by WordPress

wordpressのサムネイル編集を行ったので、作業メモ。

投稿記事のアイキャッチに設定した画像がサムネイルとしてトップページに表示されますが、
そのサイズを好きに変更したい、かつ、一括で変更できるとはかどりますよね。

環境

  • wordpress 3.9.2
  • やること

  • function.phpにサムネイルサイズの定義を追記
  • content.phpにサムネイル表示処理を追記
  • 定義したサイズのサムネイルを一括作成
  • ページ確認
  • 1.function.phpの中身を編集する。

  • ダッシュッボード→外観→テーマ編集と進み、テーマ編集画面でfunction.phoを選択
  • function.phpの末尾に以下を追加
  • large,middle,smallの3種類のサムネイルサイズを定義します。

    /* 2014-09-12追加 */
    /* 再度作成するサムネイルのサイズ設定 */
    // 'large-feature'という名前で幅300px、高さ200pxのサムネイルを作成
    add_image_size( 'large-feature', 300, 200,true );
    // 'middle-feature'という名前で幅300px、高さ100pxのサムネイルを作成 指定したサイズで切り抜き
    add_image_size( 'middle-feature', 300, 100, true );
    // 'small-feature'という名前で幅100px、高さ80pxのサムネイルを作成
    add_image_size( 'small-feature', 100,80 );
    

    2.content.phpの中身を編集

  • ダッシュッボード→外観→テーマ編集と進み、テーマ編集画面でcontent.phpを選択
  • content.phpの、エントリーヘッダーを記述する部分にサムネイル出力処理を追加
  • 今回は3サイズでどのように表示されるのかを比較するために、ヘッダー部分にサムネイルを3つ表示するように記述しました。

    <?php
    /**
     * The default template for displaying content
     *
     * Used for both single and index/archive/search.
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    ?>
    
    	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
    		<div class="featured-post">
    			<?php _e( 'Featured post', 'twentytwelve' ); ?>
    		</div>
    		<?php endif; ?>
    		<header class="entry-header">
    			<?php if ( ! post_password_required() && ! is_attachment() ) :
    				
    					// 2014-09-12 サムネイル出力処理追加
    					// 設定した'large-feature'のサムネイルを出力
    					the_post_thumbnail('large-feature');
    					// 設定した'middle-feature'のサムネイルを出力
    					the_post_thumbnail('middle-feature');
    					// 設定した'small-feature'のサムネイルを出力
    					the_post_thumbnail('small-feature');
    
    					// the_post_thumbnail();
    			endif; ?>
    
    			<?php if ( is_single() ) : ?>
    			<h1 class="entry-title"><?php the_title(); ?></h1>
    			<?php else : ?>
    			<h1 class="entry-title">
    				<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
    			</h1>
    			<?php endif; // is_single() ?>
    			<?php if ( comments_open() ) : ?>
    				<div class="comments-link">
    					<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
    				</div><!-- .comments-link -->
    			<?php endif; // comments_open() ?>
    		</header><!-- .entry-header -->
    

    3.サムネイルのサイズを一括変換する。

  • regenerate-thumbnailsでサムネイル再作成
  • プラグイン「regenerate-thumbnails」を使用して、メディア内の画像すべてに対してサムネイルの再作成を行う。
    使い方は別エントリで詳しく書きます。

    4.phpの編集+サムネイル再作成後にページを確認

    content.phpにlarge,middle,smallの3つのサイズのサムネイルをヘッダーに出力するように記述したので3つのサイズの異なるサムネイルが表示されます。
    function.phpに定義したサイズのサムネイルがcontent.phpに記述した通りに表示されている事を確認します。

    5.特定のサムネイルだけを表示するようにcontent.phpを編集

  • content.phpを編集
  • content.phpに3つのサムネイルを表示するよう記述したので、実際に表示させたいサムネイルだけを表示してくれるように編集する。
    ただ、いらないサムネイルの箇所をコメントアウトするだけにしました。

    					// 2014-09-12 サムネイル出力処理追加
    					// 設定した'large-feature'のサムネイルを出力
    					// the_post_thumbnail('large-feature');
    					// 設定した'middle-feature'のサムネイルを出力
    					the_post_thumbnail('middle-feature');
    					// 設定した'small-feature'のサムネイルを出力
    					// the_post_thumbnail('small-feature');
    
    

    実際のトップージは、middleサイズのサムネイルだけを表示するようにしました。

    参考ページ

    こちらのページを参考にさせていただきました。
    思ったより簡単!WordPressのサムネイルを別サイズも含め作り直す方法!!

    以上。