質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

369閲覧

ワードプレスの画像アップロード時にリサイズするプログラムを作りたい

mumu1354

総合スコア18

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2022/12/12 08:11

編集2023/11/25 18:22

前提

WEB独学者です。
ワードプレスを使用しています。
カスタムフィールドはプラグインAdvanced Custom Fields
レスポンシブサイトです。

実現したいこと

アップロード時に必要なものだけの画像リサイズをおこないたいです。
対象は、投稿ページからアップロードした
・アイキャッチ
・カスタムフィールドの画像
の2点です。

HTMLはpicture要素のsrcsetで出力します。
↑こちらは自力でできました。

 

イメージ説明
投稿のアイキャッチ画像を設定>ファイルをアップロード からアップロードした画像ファイルは
横幅 高さ

  • 512px 889px
  • 768px 1,333.5px
  • 224px 388.062px
  • 448px 776.124px
  • 672px 1164.186px
  • 152px 263.328px
  • 304px 526.656px
  • 456px 789.984px
  • 274.097px 474.844px
  • 548.194px 949.688px
  • 822.291px 1424.532px

の11種類のサイズを自動生成

■理由
画像表示する場所のHTMLは

HTML

1<picture> 2 <source media="(max-width: 767px)" 3 srcset="symm-top_274.097-474.844.jpg, 4 symm-top_548.194-949.688.jpg 2x, 5 symm-top_822.291-1424.532.jpg 3x" /> 6 <source media="(max-width: 1023px)" srcset=" 7 symm-top_152-263.328.jpg, 8 symm-top_304-526.656.jpg 2x, 9 symm_456-789.984.jpg 3x" /> 10 <source media="(max-width: 1365px)" srcset=" 11 symm-top_224-388.062.jpg, 12 symm-top_448-776.124.jpg 2x, 13 symm_672-1164.186.jpg 3x" /> 14 <img srcset="symm-top_256-444.500.jpg, 15 symm-top_512-889.jpg 2x, 16 symm-top_768-1,333.5.jpg 3x" /> 17</picture>

(※わかりやすくするためにわざと小数点がついた画像ファイル名を書いています)

カスタムフィールド フィールド名detail(フィールドタイプ画像)> 画像を追加する > ファイルをアップロード からアップロードした画像ファイルは
横幅 高さ

  • 800px 445px
  • 1600px 910px
  • 332px 184.672px
  • 332px 184.672px
  • 664px 369.344px
  • 996px 554.016px
  • 265px 147.406px
  • 530px 294.812px
  • 795px 442.218px

の9種類のサイズを自動生成

■理由
画像表示する場所のHTMLを

HTML

1<picture> 2 <source media="(max-width: 375px)" 3 srcset="symm-top_265-147.406.jpg, 4 symm-top_530-294.812.jpg 2x, 5 symm-top_795-442.218.jpg 3x" /> 6 <source media="(max-width: 1023px)" srcset=" 7 symm-top_332-184.672.jpg, 8 symm-top_664-369.344.jpg 2x, 9 symm_996-554.016.jpg 3x" /> 10 <img srcset="symm-top_800*445.jpg, 11 symm-top_1600-910.jpg 2x, 12 symm-top_2400-1365.jpg 3x" /> 13</picture>

としたいから

カスタムフィールド フィールド名detail2(フィールドタイプ画像)> 画像を追加する > ファイルをアップロード からアップロードした画像ファイルは
イメージ説明
横幅

  • 608px
  • 1216px
  • 1824px
  • 464px
  • 928px
  • 1392px
  • 608px
  • 1216px
  • 369.875px
  • 739.75px
  • 1109.625px

の11種類のサイズを自動生成

■理由
画像表示する場所のHTMLを

HTML

1<picture> 2 <source media="(max-width: 414px)" 3 srcset="symm-top_369.875.jpg, 4 symm-top_739.75.jpg 2x, 5 symm-top_1109.625.jpg 3x" /> 6 <source media="(max-width: 1023px)" srcset=" 7 symm-top_608.jpg, 8 symm-top_1216.jpg 2x, 9 symm_1824.jpg 3x" /> 10 <source media="(max-width: 1365px)" srcset=" 11 symm-top_464.jpg, 12 symm-top_928.jpg 2x, 13 symm_1392.jpg 3x" /> 14 <img srcset="symm-top_608.jpg, 15 symm-top_1216.jpg 2x, 16 symm-top_1824.jpg 3x" /> 17</picture>

としたいから

発生している問題・エラーメッセージ

最初の読み込み時にリサイズするプログラムをつくりましたが、セキュリティ的に問題があるのと、最初の閲覧者は、読み込み時間がかかるという問題があります。

そのため、アップロード画像のaltやタイトルを入れれる欄の下にadd_image_sizeの名前を入れる入力欄をつくり

その名前に合わせてリサイズするプログラムを思いつきました。

アップロード画像のaltやタイトルを入れれる欄の下に項目を増やすことは可能でしょうか?。

それか他の方法がいいでしょうか?

試したこと

上記のこと

補足情報(FW/ツールのバージョンなど)

WordPress 5.2.7
Advanced Custom Fields 5.11.4

参照先

レスポンシブの画像切り替えができるsrcset属性
結局レスポンシブデザインでは何種類のサイズの画像を用意すればいいか

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

以下のコードでできました。
https://github.com/yon-s/wordpress-img-resize/blob/main/function.php
デバイスピクセル数や枚数はお好みのものを設定してください
自作データベースを使うのでこちらを参考にしてください
https://blog-and-destroy.com/33799

投稿2023/11/25 09:22

mumu1354

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問