• 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 の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
2022年1月27日
タグ: WordPressカスタマイズ
カテゴリー: WordPress
フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 外部のプロフェッショナルによる WordPress サイトの保守・運用:安心と安全性を手軽に手に入れる方法
  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上

カテゴリー

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

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.