• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / 画像サイズ追加&管理画面から選べるようにカスタム

画像サイズ追加&管理画面から選べるようにカスタム

池田祐太郎 | 2018年1月19日 公開


「アップロードした画像を自由なサイズにしたい」
「管理画面から選べるようにし、クライアントが選択できるようにしたい」

WordPressをカスタマイズしているとこのような希望がでてくることがあると思います。
そこで今回は「任意の画像サイズを追加」し、「管理画面から選択できる」ようにカスタマイズする方法をご紹介します。もちろんプラグインは利用しません。

目次

  • 1 画像サイズを追加&管理画面から選択できるとは?
  • 2 カスタマイズ方法
    • 2.1 設定箇所
    • 2.2 複数のカスタム画像を設定したい場合

画像サイズを追加&管理画面から選択できるとは?

投稿画面等で画像をアップロードすると、
1. 表示設定に設定した名称(例: 「サムネイル切り抜き_400x400」等)が表示される
2. 作成した画像サイズを選択できる
ようになります。

例えば、このようなことを実現したいとします。

サイズは縦400px 横400px、画像の切り抜きを行い、管理画面から選べるようにする。
切り抜きをしないバージョンの画像サイズも選択できるように。

元画像はこちら

投稿画面で画像をアップロードすると(下の画像は編集からの画面ですが、、、)

プレビューしてみると、設定したように400×400のサイズで画像が表示されているのが確認できました。
切り抜き版と通常版の違いはこのようになります。

カスタマイズ方法

以下をfunctions.phpに追加します。バックアップは取っておきましょう。

/*
* 画像サイズ追加&管理画面から選べるようにカスタム 
*/
function add_custom_image_sizes() {
    global $my_custom_image_sizes;
    $my_custom_image_sizes = array(
        'original_thumb_crop' => array(
            'name'       => 'サムネイル切り抜き_400x400', // 選択肢のラベル名
            'width'      => 400,    // 最大画像幅をpxで設定
            'height'     => 400,    // 最大画像高さをpxで設定
            'crop'       => true,  // 切り抜きを行うならtrue, 行わないならfalse
            'selectable' => true   // 選択肢に含めるならtrue, 含めないならfalse
        )
    );
    foreach ( $my_custom_image_sizes as $slug => $size ) {
        add_image_size( $slug, $size['width'], $size['height'], $size['crop'] );
    }
}
add_action( 'after_setup_theme', 'add_custom_image_sizes' );

function add_custom_image_size_select( $size_names ) {
    global $my_custom_image_sizes;
    $custom_sizes = get_intermediate_image_sizes();
    foreach ( $custom_sizes as $custom_size ) {
        if ( isset( $my_custom_image_sizes[$custom_size]['selectable'] ) && $my_custom_image_sizes[$custom_size]['selectable'] ) {
            $size_names[$custom_size] = $my_custom_image_sizes[$custom_size]['name'];
        }
    }
    return $size_names;
}
add_filter( 'image_size_names_choose', 'add_custom_image_size_select' );

設定箇所

上記のコードにて、設定が必要な箇所です。

省略
    $my_custom_image_sizes = array(
        'original_thumb_crop' => array(
            'name'       => 'サムネイル切り抜き_400x400', // 選択肢のラベル名
            'width'      => 400,    // 最大画像幅をpxで設定
            'height'     => 400,    // 最大画像高さをpxで設定
            'crop'       => true,  // 切り抜きを行うならtrue, 行わないならfalse
            'selectable' => true   // 選択肢に含めるならtrue, 含めないならfalse
        )
    );
省略

選択肢のラベル名: 任意の名称を入力します。ここに設定した名称が管理画面でも表示されるため、利用する人にとってわかりやすい名称を入力します。
最大画像幅をpxで設定: 指定した画像サイズで横幅が設定されます。
最大画像高さをpxで設定: 指定した画像サイズで縦幅が設定されます。
切り抜きを行うならtrue, 行わないならfalse: trueだと縮小せず切り抜きます。一方でfalseは縮小し、元画像の比率に合わせて縦横大きいサイズに合わせます。
選択肢に含めるならtrue, 含めないならfalse: 管理画面に表示したい場合はtrue。表示しないならfalseへ。

複数のカスタム画像を設定したい場合

2つ以上のオリジナルの画像を設定したい場合は、以下のように,(カンマ)で区切り、ユニークな名称を追加します。

    $my_custom_image_sizes = array(
        'original_thumb_crop' => array(
            'name'       => 'サムネイル切り抜き_400x400', // 選択肢のラベル名
            'width'      => 400,    // 最大画像幅をpxで設定
            'height'     => 400,    // 最大画像高さをpxで設定
            'crop'       => true,  // 切り抜きを行うならtrue, 行わないならfalse
            'selectable' => true   // 選択肢に含めるならtrue, 含めないならfalse
        ), //ここでカンマで区切ります
        'original_thumb' => array(
            'name'       => 'サムネイル_400x400', // 選択肢のラベル名
            'width'      => 400,    // 最大画像幅をpxで設定
            'height'     => 400,    // 最大画像高さをpxで設定
            'crop'       => false,  // 切り抜きを行うならtrue, 行わないならfalse
            'selectable' => true   // 選択肢に含めるならtrue, 含めないならfalse
        ) //最後の要素にはカンマをつけない
    );

最後の要素はカンマを付け足さないように注意しましょう。

参考サイト: WordPressで追加した画像サイズを本文に挿入できるようにする | Simple Colors

WordPress保守管理サービス

Filed Under: TIPS 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
一覧ページ等で、アイキャッチ画像がなかったら一番目の画像を取得し、さらに画像がなかったら定義した画像を表示するカスタマイズ方法
2018年3月22日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法
  • WordPress保守管理サービスのメリット・デメリット

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.