質問編集履歴
4
文字変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
としたいから
|
|
132
132
|
### 発生している問題・エラーメッセージ
|
|
133
133
|
|
|
134
|
-
|
|
134
|
+
|
|
135
135
|
最初の読み込み時にリサイズするプログラムをつくりましたが、セキュリティ的に問題があるのと、最初の閲覧者は、読み込み時間がかかるという問題があります。
|
|
136
136
|
|
|
137
137
|
そのため、アップロード画像のaltやタイトルを入れれる欄の下にadd_image_sizeの名前を入れる入力欄をつくり
|
|
@@ -143,9 +143,7 @@
|
|
|
143
143
|
それか他の方法がいいでしょうか？
|
|
144
144
|
|
|
145
145
|
|
|
146
|
-
```
|
|
147
146
|
|
|
148
|
-
```
|
|
149
147
|
### 試したこと
|
|
150
148
|
|
|
151
149
|
上記のこと
|
3
質問内容の変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
ワードプレスのアップロード
|
|
1
|
+
ワードプレスの画像アップロード時にリサイズするプログラムを作りたい
|
test
CHANGED
|
@@ -6,10 +6,16 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
### 実現したいこと
|
|
9
|
-
アップロード
|
|
9
|
+
アップロード時に必要なものだけの画像リサイズをおこないたいです。
|
|
10
|
-
|
|
10
|
+
対象は、投稿ページからアップロードした
|
|
11
|
+
・アイキャッチ
|
|
12
|
+
・カスタムフィールドの画像
|
|
13
|
+
の2点です。
|
|
11
14
|
|
|
12
|
-
|
|
15
|
+
HTMLはpicture要素のsrcsetで出力します。
|
|
16
|
+
↑こちらは自力でできました。
|
|
17
|
+
|
|
18
|
+
|
|
13
19
|
|
|
14
20
|
|
|
15
21
|
|
|
@@ -29,7 +35,7 @@
|
|
|
29
35
|
の１１種類のサイズを自動生成
|
|
30
36
|
|
|
31
37
|
■理由
|
|
32
|
-
画像表示する場所のHTML
|
|
38
|
+
画像表示する場所のHTMLは
|
|
33
39
|
```HTML
|
|
34
40
|
<picture>
|
|
35
41
|
<source media="(max-width: 767px)"
|
|
@@ -49,7 +55,6 @@
|
|
|
49
55
|
symm-top_768-1,333.5.jpg 3x" />
|
|
50
56
|
</picture>
|
|
51
57
|
```
|
|
52
|
-
としたいから
|
|
53
58
|
(※わかりやすくするためにわざと小数点がついた画像ファイル名を書いています)
|
|
54
59
|
|
|
55
60
|
|
|
@@ -127,44 +132,29 @@
|
|
|
127
132
|
### 発生している問題・エラーメッセージ
|
|
128
133
|
|
|
129
134
|
```
|
|
135
|
+
最初の読み込み時にリサイズするプログラムをつくりましたが、セキュリティ的に問題があるのと、最初の閲覧者は、読み込み時間がかかるという問題があります。
|
|
136
|
+
|
|
137
|
+
そのため、アップロード画像のaltやタイトルを入れれる欄の下にadd_image_sizeの名前を入れる入力欄をつくり
|
|
138
|
+
|
|
139
|
+
その名前に合わせてリサイズするプログラムを思いつきました。
|
|
140
|
+
|
|
141
|
+
アップロード画像のaltやタイトルを入れれる欄の下に項目を増やすことは可能でしょうか？。
|
|
142
|
+
|
|
130
|
-
|
|
143
|
+
それか他の方法がいいでしょうか？
|
|
144
|
+
|
|
145
|
+
|
|
131
146
|
```
|
|
132
147
|
|
|
133
|
-
### 該当のソースコード
|
|
134
|
-
|
|
135
|
-
```HTML
|
|
136
|
-
<!--functions.php-->
|
|
137
|
-
add_image_size('画像名', 横幅, 高さ);
|
|
138
|
-
add_image_size('画像名2', 横幅, 高さ);
|
|
139
|
-
<!--上記を必要な画像サイズ分コードに記載-->
|
|
140
|
-
```
|
|
141
|
-
```php
|
|
142
|
-
<?php //index.php サムネ表示する場所 ?>
|
|
143
|
-
<?php if(has_post_thumbnail()):?>
|
|
144
|
-
<?php the_post_thumbnail('', array('class' => 'responsive'));?>
|
|
145
|
-
<?php else: ?>
|
|
146
|
-
```
|
|
147
|
-
```php
|
|
148
|
-
<?php //index.php カスタムフィールド表示する場所 ?>
|
|
149
|
-
<img src="<?php echo get_field('detail'); ?> " class="responsive-img"/>
|
|
150
148
|
```
|
|
151
149
|
### 試したこと
|
|
152
150
|
|
|
153
|
-
|
|
151
|
+
上記のこと
|
|
154
152
|
|
|
155
153
|
### 補足情報（FW/ツールのバージョンなど）
|
|
156
154
|
|
|
157
155
|
WordPress 5.2.7
|
|
158
156
|
Advanced Custom Fields 5.11.4
|
|
159
157
|
|
|
160
|
-
ワードプレスのアップロード画像でpicture要素を使用したい場合やレスポンシブ対応する場所
|
|
161
|
-
皆様はどのようにしているのでしょうか？
|
|
162
|
-
|
|
163
|
-
2022年現在 4xの画像も必要でしょうか？
|
|
164
|
-
|
|
165
158
|
### 参照先
|
|
166
159
|
[レスポンシブの画像切り替えができるsrcset属性](https://www.site-convert.com/archives/1342#outline__4_2)
|
|
167
160
|
[結局レスポンシブデザインでは何種類のサイズの画像を用意すればいいか](https://blog.uzumaki-inc.jp/14837d2123a94b19822b4b4aeda5f978)
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
2
タグの追加 PHP
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
1
文章変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
WordPress 5.2.7
|
|
158
158
|
Advanced Custom Fields 5.11.4
|
|
159
159
|
|
|
160
|
-
ワードプレスのアップロード画像でpicture要素を使用したい場合
|
|
160
|
+
ワードプレスのアップロード画像でpicture要素を使用したい場合やレスポンシブ対応する場所
|
|
161
161
|
皆様はどのようにしているのでしょうか？
|
|
162
162
|
|
|
163
163
|
2022年現在 4xの画像も必要でしょうか？
|