Help us understand the problem. What is going on with this article?

Wordpress構築するのにおすすめな画像設定

何度かWordpressをやっていて、サムネイルの扱いにコツがあったので共有します。

不満な点

  • 自動的に複数サイズにカットされる機能がついているが、使わないサイズも出力されるので、サーバーの容量を圧迫されやすい。
  • 指定サイズ以下の画像がアップロードされると、拡大したりカットしたりしてくれない。
  • (管理画面)サムネイルから記事を見つけにくい
  • ダミー画像を設定してくれない

まず、これを記入

functions.php
add_theme_support( 'post-thumbnails' );

サムネイル機能をオンにする。

余計な画像を排出しないようにする

管理画面 > 設定 > メディア で表示される
スクリーンショット 2020-02-12 13.02.30.png

ここのサイズを全て0にすると、余分な画像サイズの画像が出力されない。

"アイキャッチ"を"サムネイル"に名前変更する

functions.php
function custom_post_labels( $labels ) {
    $labels->featured_image = 'サムネイル画像(推奨: **px : **px)'; // アイキャッチ画像
    $labels->set_featured_image = 'サムネイル画像を設定'; // アイキャッチ画像を設定
    $labels->remove_featured_image = 'サムネイル画像を削除'; // アイキャッチ画像を削除
    $labels->use_featured_image = 'サムネイル画像として使用'; // アイキャッチ画像として使用
    return $labels;
}
add_filter( 'post_type_labels_post', 'custom_post_labels' );

ちなみに、_postpostpageにすると固定ページに適用され、カスタム投稿名にするとカスタム投稿でも適用される。

メニューにサムネイルを挿入する

functions.php
    /**
     *  サムネイル画像表示
     */
    function customize_manage_posts_custom_column($column_name, $post_id) {
        if ( 'thumbnail' == $column_name) {
            $thum = get_the_post_thumbnail($post_id, 'small', array( 'style'=>'width:100px;height:auto;' ));
        } if ( isset($thum) && $thum ) {
            echo $thum;
        } else {
            echo __('None');
        }
    }
    add_action( 'manage_posts_custom_column', 'customize_manage_posts_custom_column', 10, 2 );

サムネイルがあるのと無いのとでは、該当記事を探すスピードが段違いだと思う。
参考サイトはこちら

大(1200px),中(600),小(300)設定する

functions.php
    add_image_size('large',1200,900);
    add_image_size('medium',600,450);

指定のサイズより大きくなった場合、縮小された画像を出力してくれる。
デザインにより、適宜変更。
1:1だと大きすぎるので、とりあえず4:3のにしておけば、不都合を感じることはないと思う。
近年のRetinaサイズやレスポンシブで画像サイズの変更も考慮すると、一回り大きいサイズの方が綺麗に出力される。

ダミー画像を作る

画像がない場合のダミー画像を準備する。大体グレー背景にロゴの画像を中央に置いている。
サムネイルサイズが複数ある場合、複数サイズ分を用意する。
ここで作る名前でおすすめなのが、dmy_post.jpgdmy_カスタム投稿名.jpgで作ること。

画像の有無でURLを変更する関数を作る

functions.php
function post_thumbnail_set($size = 'medium', $dmy_slug = false)
{
    global $site_info;
    if (has_post_thumbnail()) {
        $url_setting = get_the_post_thumbnail_url(get_the_ID(),$size);
        return '<figure style="background-image:url('.$url_setting.');" class="imgBg"></figure>';
    } else {
        if ($dmy_id):
            return '<figure style="background-image:url('. get_stylesheet_directory_uri().'/' .'img/dmy_'.$dmy_slug.'.jpg)" class="imgBg"></figure>';
        else:
            return '<figure style="background-image:url('. get_stylesheet_directory_uri().'/' .'img/dmy_slug.jpg)" class="imgBg"></figure>';
        endif;
    }
}

記事ページで<?= post_thumbnail_set() ?>と記述すると、画像のURLを出力される。
変数を設定できて、例えば<?= post_thumbnail_set('large','event') ?>と記述すると、1200x900以内に収まった画像、もしくは、dmy_event.jpgが出力される。

サムネ用のCSSを設定する

style.css
figure.imgBg{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
}

figureの周りを囲うdivに横幅と高さを設定すれば、サムネがちょうどいいサイズで表示される。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした