teratail
回答率
85.48%
質問するログイン新規登録
トップWordPressに関する質問Wordpressでアイキャッチ画像を表示したい

編集履歴

回答編集履歴

2

要望に合わせて修正

2020/12/07 05:34

投稿

dit.
dit.

スコア3235

test CHANGED
@@ -1,475 +1,381 @@
1
- 回答を全面的に変更し、「おそらく希望はこうではないか」という状態のものに書き換えています。
2
-
3
- 「希望通りではないと思うがエラーが出ない状態」のコードは編集履歴を参考。
1
+ 要望がなんとなく判明したのでさらに書き換えました。
2
+
4
-
3
+ 「トップページにカテゴリー一覧（リスト）を表示させる」
4
+
5
-
5
+ 「トップページには各カテゴリーのタイトルとそれに所属する記事を画像（150*150）とタイトルで表示→個別ページにリンク」
6
+
6
-
7
+ 「アーカイブページもトップページと同じような見た目で表示」
8
+
9
+
10
+
7
- [サンプルサイト](http://milchkrone.com/sample20201126/)
11
+ [サンプルサイト](http://milchkrone.com/dit20201204/)
8
-
9
-
10
-
11
- ・デザインはなるべく他の部分と合うようにしたけど適当。
12
+
12
-
13
- ・プラグイン不使用のため画像表示のEasy FancyBoxとかを使ってそうな挙動はすべて無視。
13
+
14
-
15
-
16
-
17
- ◆一覧にアイキャッチを表示、アイキャッチがなければ投稿中の一番初めの画像を表示、それもなければ代替画像を表示
14
+
18
-
19
- [参考サイト](https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a)
20
-
21
- functions.phpに追加↓
15
+ ◆index.phpをすべて下記に書き換える↓
22
16
 
23
17
  ```php
24
18
 
25
- /*
26
-
27
- アイキャッチ画像が設定してある場合はそれを取得し出力
28
-
29
- アイキャッチは無いが投稿内に画像がある場合は、そのうちの1番最初の画像を取得し出力
30
-
31
- それも無い場合は代替画像を出力 or 何もしない
32
-
33
- https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a
34
-
35
- */
36
-
37
- function catch_thumbnail_image($get_size = 'thumbnail', $altimg_id = null) {
38
-
39
- global $post;
40
-
41
- $image = '';
42
-
43
- $image_get = preg_match_all( '/<img.+class=[\'"].*wp-image-([0-9]+).*[\'"].*>/i', $post->post_content, $matches );
44
-
45
- $image_id = $matches[1][0];
46
-
47
- if( !$image_id && $altimg_id ){
48
-
49
- $image_id = $altimg_id;
50
-
51
- }
52
-
53
- $image = wp_get_attachment_image( $image_id, $get_size, false, array(
54
-
55
- 'class' => 'thumbnail-image',
56
-
57
- 'srcset' => wp_get_attachment_image_srcset( $image_id, $get_size ),
58
-
59
- 'sizes' => wp_get_attachment_image_sizes( $image_id, $get_size )
60
-
61
- ) );
62
-
63
- if( empty($image) ) {
64
-
65
- $image = '<img src="https://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE">'; /* 代替画像のアドレスを指定する */
66
-
67
- }
68
-
69
- return $image;
70
-
71
- }
19
+ <?php
20
+
21
+ /**
22
+
23
+ * The main template file
24
+
25
+ *
26
+
27
+ * This is the most generic template file in a WordPress theme
28
+
29
+ * and one of the two required files for a theme (the other being style.css).
30
+
31
+ * It is used to display a page when nothing more specific matches a query.
32
+
33
+ * E.g., it puts together the home page when no home.php file exists.
34
+
35
+ *
36
+
37
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
38
+
39
+ *
40
+
41
+ * @package WordPress
42
+
43
+ * @subpackage Twenty_Twenty
44
+
45
+ * @since Twenty Twenty 1.0
46
+
47
+ */
48
+
49
+
50
+
51
+ get_header();
52
+
53
+ ?>
54
+
55
+
56
+
57
+ <main id="site-content" role="main">
58
+
59
+ <div class="category_list"><!-- カテゴリ一覧の表示 ここから -->
60
+
61
+ <ul>
62
+
63
+ <?php
64
+
65
+ $cat_all = get_terms( "category", "fields=all&get=all&exclude_tree=12&exclude=11" );
66
+
67
+ foreach($cat_all as $value):
68
+
69
+ ?>
70
+
71
+ <li><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?>(<?php echo $value->count;?>)</a></li>
72
+
73
+ <?php endforeach; ?>
74
+
75
+ </ul>
76
+
77
+ </div><!-- カテゴリ一覧の表示 ここまで -->
78
+
79
+
80
+
81
+ <?php if ( is_home() ) { ?>
82
+
83
+ <?php
84
+
85
+ $categories = get_categories();
86
+
87
+ foreach($categories as $category) :
88
+
89
+ ?>
90
+
91
+ <hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />
92
+
93
+ <div class="has-text-align-center"><h2><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->cat_name; ?></a></h2></div>
94
+
95
+ <?php
96
+
97
+ query_posts('cat='.$category->cat_ID.'&showposts=-1');
98
+
99
+ if (have_posts()) : ?>
100
+
101
+ <div class="ex-list">
102
+
103
+ <?php while (have_posts()) : the_post(); ?>
104
+
105
+ <div><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"><?php else: ?><img src="http://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE"><?php endif; ?><?php the_title(); ?></a></div>
106
+
107
+ <?php endwhile; ?>
108
+
109
+ </div>
110
+
111
+ <?php endif; ?>
112
+
113
+ <?php endforeach; ?>
114
+
115
+
116
+
117
+
118
+
119
+ <?php }else{ ?>
120
+
121
+ <?php
122
+
123
+
124
+
125
+ $archive_title = '';
126
+
127
+ $archive_subtitle = '';
128
+
129
+
130
+
131
+ if ( is_search() ) {
132
+
133
+ global $wp_query;
134
+
135
+
136
+
137
+ $archive_title = sprintf(
138
+
139
+ '%1$s %2$s',
140
+
141
+ '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
142
+
143
+ '&ldquo;' . get_search_query() . '&rdquo;'
144
+
145
+ );
146
+
147
+
148
+
149
+ if ( $wp_query->found_posts ) {
150
+
151
+ $archive_subtitle = sprintf(
152
+
153
+ /* translators: %s: Number of search results. */
154
+
155
+ _n(
156
+
157
+ 'We found %s result for your search.',
158
+
159
+ 'We found %s results for your search.',
160
+
161
+ $wp_query->found_posts,
162
+
163
+ 'twentytwenty'
164
+
165
+ ),
166
+
167
+ number_format_i18n( $wp_query->found_posts )
168
+
169
+ );
170
+
171
+ } else {
172
+
173
+ $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
174
+
175
+ }
176
+
177
+ } elseif ( is_archive() && ! have_posts() ) {
178
+
179
+ $archive_title = __( 'Nothing Found', 'twentytwenty' );
180
+
181
+ } elseif ( ! is_home() ) {
182
+
183
+ $archive_title = get_the_archive_title();
184
+
185
+ $archive_subtitle = get_the_archive_description();
186
+
187
+ }
188
+
189
+
190
+
191
+ if ( $archive_title || $archive_subtitle ) {
192
+
193
+ ?>
194
+
195
+
196
+
197
+ <header class="archive-header has-text-align-center header-footer-group">
198
+
199
+
200
+
201
+ <div class="archive-header-inner section-inner medium">
202
+
203
+
204
+
205
+ <?php if ( $archive_title ) { ?>
206
+
207
+ <h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1>
208
+
209
+ <?php } ?>
210
+
211
+
212
+
213
+ <?php if ( $archive_subtitle ) { ?>
214
+
215
+ <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
216
+
217
+ <?php } ?>
218
+
219
+
220
+
221
+ </div><!-- .archive-header-inner -->
222
+
223
+
224
+
225
+ </header><!-- .archive-header -->
226
+
227
+
228
+
229
+ <?php
230
+
231
+ }
232
+
233
+
234
+
235
+ if ( have_posts() ) {
236
+
237
+ ?>
238
+
239
+ <div class="ex-list">
240
+
241
+ <?php while ( have_posts() ) { the_post(); ?>
242
+
243
+ <div><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"><?php else: ?><img src="http://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE"><?php endif; ?><?php the_title(); ?></a></div>
244
+
245
+ <?php } ?>
246
+
247
+ </div>
248
+
249
+ <?php
250
+
251
+ } elseif ( is_search() ) {
252
+
253
+ ?>
254
+
255
+
256
+
257
+ <div class="no-search-results-form section-inner thin">
258
+
259
+
260
+
261
+ <?php
262
+
263
+ get_search_form(
264
+
265
+ array(
266
+
267
+ 'label' => __( 'search again', 'twentytwenty' ),
268
+
269
+ )
270
+
271
+ );
272
+
273
+ ?>
274
+
275
+
276
+
277
+ </div><!-- .no-search-results -->
278
+
279
+
280
+
281
+ <?php
282
+
283
+ }
284
+
285
+ ?>
286
+
287
+
288
+
289
+ <?php get_template_part( 'template-parts/pagination' ); ?>
290
+
291
+ <?php } ?>
292
+
293
+ </main><!-- #site-content -->
294
+
295
+
296
+
297
+ <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
298
+
299
+
300
+
301
+ <?php
302
+
303
+ get_footer();
72
304
 
73
305
  ```
74
306
 
75
307
 
76
308
 
77
- ◆カテゴリー一覧の表示、アーカイブを一覧表示に変更
78
-
79
- index.php全部書き換え↓
80
-
81
- ```php
82
-
83
- <?php
84
-
85
- /**
86
-
87
- * The main template file
88
-
89
- *
90
-
91
- * This is the most generic template file in a WordPress theme
92
-
93
- * and one of the two required files for a theme (the other being style.css).
94
-
95
- * It is used to display a page when nothing more specific matches a query.
96
-
97
- * E.g., it puts together the home page when no home.php file exists.
98
-
99
- *
100
-
101
- * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
102
-
103
- *
104
-
105
- * @package WordPress
106
-
107
- * @subpackage Twenty_Twenty
108
-
109
- * @since Twenty Twenty 1.0
110
-
111
- */
112
-
113
-
114
-
115
- get_header();
116
-
117
- ?>
118
-
119
-
120
-
121
- <main id="site-content" role="main">
122
-
123
-
124
-
125
-
126
-
127
- <div class="category_list"><!-- カテゴリ一覧の表示 ここから -->
128
-
129
- <ul>
130
-
131
- <?php
132
-
133
- $cat_all = get_terms( "category", "fields=all&get=all&exclude_tree=12&exclude=11" );
134
-
135
- foreach($cat_all as $value):
136
-
137
- ?>
138
-
139
- <li><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?>(<?php echo $value->count;?>)</a></li>
140
-
141
- <?php endforeach; ?>
142
-
143
- </ul>
144
-
145
- </div><!-- カテゴリ一覧の表示 ここまで -->
146
-
147
-
148
-
149
-
150
-
151
- <?php
152
-
153
-
154
-
155
- $archive_title = '';
156
-
157
- $archive_subtitle = '';
158
-
159
-
160
-
161
- if ( is_search() ) {
162
-
163
- global $wp_query;
164
-
165
-
166
-
167
- $archive_title = sprintf(
168
-
169
- '%1$s %2$s',
170
-
171
- '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
172
-
173
- '&ldquo;' . get_search_query() . '&rdquo;'
174
-
175
- );
176
-
177
-
178
-
179
- if ( $wp_query->found_posts ) {
180
-
181
- $archive_subtitle = sprintf(
182
-
183
- /* translators: %s: Number of search results. */
184
-
185
- _n(
186
-
187
- 'We found %s result for your search.',
188
-
189
- 'We found %s results for your search.',
190
-
191
- $wp_query->found_posts,
192
-
193
- 'twentytwenty'
194
-
195
- ),
196
-
197
- number_format_i18n( $wp_query->found_posts )
198
-
199
- );
200
-
201
- } else {
202
-
203
- $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
204
-
205
- }
206
-
207
- } elseif ( is_archive() && ! have_posts() ) {
208
-
209
- $archive_title = __( 'Nothing Found', 'twentytwenty' );
210
-
211
- } elseif ( ! is_home() ) {
212
-
213
- $archive_title = get_the_archive_title();
214
-
215
- $archive_subtitle = get_the_archive_description();
309
+ ◆[外観]-[カスタマイズ]-[追加CSS]に追記↓
310
+
311
+ （flexbox使用。横幅700px以上で横4つ、それより小さい場合は横2つ）
312
+
313
+ ```css
314
+
315
+ .category_list{
316
+
317
+ padding:4rem 0 0;
318
+
319
+ max-width: 58rem;
320
+
321
+ width: calc(100% - 4rem);
322
+
323
+ margin-left: auto;
324
+
325
+ margin-right: auto;
326
+
327
+ }
328
+
329
+ .ex-list{
330
+
331
+ display:flex;
332
+
333
+ flex-wrap: wrap;
334
+
335
+ width: calc(100% - 4rem);
336
+
337
+ padding:4rem 0 0;
338
+
339
+ max-width: 58rem;
340
+
341
+ margin-left: auto;
342
+
343
+ margin-right: auto;
344
+
345
+ }
346
+
347
+ .ex-list>div{
348
+
349
+ width:50%;
350
+
351
+ padding: .5em;
352
+
353
+ }
354
+
355
+ .ex-list img{
356
+
357
+ display:block;
358
+
359
+ }
360
+
361
+ @media (min-width: 700px){
362
+
363
+ .ex-list>div{
364
+
365
+ width:25%;
216
366
 
217
367
  }
218
368
 
219
-
220
-
221
- if ( $archive_title || $archive_subtitle ) {
222
-
223
- ?>
224
-
225
-
226
-
227
- <header class="archive-header has-text-align-center header-footer-group">
228
-
229
-
230
-
231
- <div class="archive-header-inner section-inner medium">
232
-
233
-
234
-
235
- <?php if ( $archive_title ) { ?>
236
-
237
- <h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1>
238
-
239
- <?php } ?>
240
-
241
-
242
-
243
- <?php if ( $archive_subtitle ) { ?>
244
-
245
- <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
246
-
247
- <?php } ?>
248
-
249
-
250
-
251
- </div><!-- .archive-header-inner -->
252
-
253
-
254
-
255
- </header><!-- .archive-header -->
256
-
257
-
258
-
259
- <?php
260
-
261
- }
369
+ }
262
-
263
-
264
-
265
- if ( have_posts() ) {
266
-
267
- if ( is_archive() ) {
268
-
269
- ?>
270
-
271
- <div class="ex-list">
272
-
273
- <?php
274
-
275
- while ( have_posts() ) {
276
-
277
- the_post();
278
-
279
- ?>
280
-
281
- <div>
282
-
283
- <a href="<?php the_permalink(); ?>">
284
-
285
- <?php $catch_thumbnail_size = 'thumbnail'; if(has_post_thumbnail()){ the_post_thumbnail($catch_thumbnail_size); } else { echo catch_thumbnail_image($catch_thumbnail_size); } ?>
286
-
287
- <?php the_title(); ?>
288
-
289
- </a>
290
-
291
- </div>
292
-
293
- <?php
294
-
295
- }
296
-
297
- ?>
298
-
299
- </div><!-- end of .category-list -->
300
-
301
- <?php
302
-
303
- }else{
304
-
305
-
306
-
307
- $i = 0;
308
-
309
-
310
-
311
- while ( have_posts() ) {
312
-
313
-
314
-
315
-
316
-
317
- $i++;
318
-
319
- if ( $i > 1 ) {
320
-
321
- echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
322
-
323
- }
324
-
325
- the_post();
326
-
327
-
328
-
329
- get_template_part( 'template-parts/content', get_post_type() );
330
-
331
-
332
-
333
- }
334
-
335
-
336
-
337
- }
338
-
339
-
340
-
341
- } elseif ( is_search() ) {
342
-
343
- ?>
344
-
345
-
346
-
347
- <div class="no-search-results-form section-inner thin">
348
-
349
-
350
-
351
- <?php
352
-
353
- get_search_form(
354
-
355
- array(
356
-
357
- 'label' => __( 'search again', 'twentytwenty' ),
358
-
359
- )
360
-
361
- );
362
-
363
- ?>
364
-
365
-
366
-
367
- </div><!-- .no-search-results -->
368
-
369
-
370
-
371
- <?php
372
-
373
- }
374
-
375
- ?>
376
-
377
-
378
-
379
- <?php get_template_part( 'template-parts/pagination' ); ?>
380
-
381
-
382
-
383
- </main><!-- #site-content -->
384
-
385
-
386
-
387
- <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
388
-
389
-
390
-
391
- <?php
392
-
393
- get_footer();
394
-
395
-
396
370
 
397
371
  ```
398
372
 
399
373
 
400
374
 
401
- ◆見た目の調整
375
+ 書き換える部分を極力少なくしました。
402
-
376
+
403
- [外観]-[カスタマイズ]-[追加CSS]に追記↓
377
+ index.phpとカスタマイズの所の追加CSSだけです。
404
-
405
- flexbox使用。横幅700px以上で横4つ、それより小さい場合は横2つ
378
+
406
-
407
- ```css
379
+
408
-
409
- .category_list{
380
+
410
-
411
- padding:4rem 0 0;
412
-
413
- max-width: 58rem;
414
-
415
- width: calc(100% - 4rem);
416
-
417
- margin-left: auto;
418
-
419
- margin-right: auto;
420
-
421
- }
422
-
423
- .ex-list{
424
-
425
- display:flex;
426
-
427
- flex-wrap: wrap;
428
-
429
- width: calc(100% - 4rem);
430
-
431
- padding:4rem 0 0;
432
-
433
- max-width: 58rem;
434
-
435
- width: calc(100% - 4rem);
436
-
437
- margin-left: auto;
438
-
439
- margin-right: auto;
440
-
441
- }
442
-
443
- .ex-list>div{
444
-
445
- width:50%;
446
-
447
- padding: .5em;
448
-
449
- }
450
-
451
-
452
-
453
- @media (min-width: 700px){
454
-
455
- .ex-list{
456
-
457
- padding:8rem 0 0;
458
-
459
- }
460
-
461
- .ex-list>div{
462
-
463
- width:25%;
464
-
465
- }
466
-
467
- }
468
-
469
- ```
470
-
471
-
472
-
473
- それっぽくはなると思いますが細かいところは調整してません。
381
+ ※テーマの更新があった場合カスタマイズした内容が元に戻る可能性がありますので子テーマの作成をお勧めします。（子テーマについては知らなければまずは調べていただき、わからなければまた質問してください。）
474
-
475
- 見落としがあるかもしれないので後でもう一度見直します。

1

追記編集

2020/12/07 05:34

投稿

dit.
dit.

スコア3235

test CHANGED
@@ -1,17 +1,85 @@
1
+ 回答を全面的に変更し、「おそらく希望はこうではないか」という状態のものに書き換えています。
2
+
1
- 「エラーは出ないけれど希望通りではないであろう状態」のコードです。
3
+ 「希望通りではないと思うがエラーが出ない状態」のコードは編集履歴を参考。
4
+
5
+
6
+
2
-
7
+ [サンプルサイト](http://milchkrone.com/sample20201126/)
8
+
9
+
10
+
3
- 具体的には95行目、105行目、106行目に全角空白が入っていたり、
11
+ ・デザインはなるべく他の部分と合うようにしたけど適当。
4
-
5
- 必要なコードを削除してしまっていたり、不必要な`}`が入っていたので修正しました。
12
+
6
-
7
-
8
-
9
- この後サンプルサイトを作り「おそらく希望のこと」ができたら回答を編集しますが取り急ぎ提示しておきます。
13
+ ・プラグイン不使用のため画像表示のEasy FancyBoxとかを使ってそうな挙動はすべて無視。
14
+
15
+
16
+
10
-
17
+ ◆一覧にアイキャッチを表示、アイキャッチがなければ投稿中の一番初めの画像を表示、それもなければ代替画像を表示
18
+
11
-
19
+ [参考サイト](https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a)
20
+
21
+ functions.phpに追加↓
12
22
 
13
23
  ```php
14
24
 
25
+ /*
26
+
27
+ アイキャッチ画像が設定してある場合はそれを取得し出力
28
+
29
+ アイキャッチは無いが投稿内に画像がある場合は、そのうちの1番最初の画像を取得し出力
30
+
31
+ それも無い場合は代替画像を出力 or 何もしない
32
+
33
+ https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a
34
+
35
+ */
36
+
37
+ function catch_thumbnail_image($get_size = 'thumbnail', $altimg_id = null) {
38
+
39
+ global $post;
40
+
41
+ $image = '';
42
+
43
+ $image_get = preg_match_all( '/<img.+class=[\'"].*wp-image-([0-9]+).*[\'"].*>/i', $post->post_content, $matches );
44
+
45
+ $image_id = $matches[1][0];
46
+
47
+ if( !$image_id && $altimg_id ){
48
+
49
+ $image_id = $altimg_id;
50
+
51
+ }
52
+
53
+ $image = wp_get_attachment_image( $image_id, $get_size, false, array(
54
+
55
+ 'class' => 'thumbnail-image',
56
+
57
+ 'srcset' => wp_get_attachment_image_srcset( $image_id, $get_size ),
58
+
59
+ 'sizes' => wp_get_attachment_image_sizes( $image_id, $get_size )
60
+
61
+ ) );
62
+
63
+ if( empty($image) ) {
64
+
65
+ $image = '<img src="https://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE">'; /* 代替画像のアドレスを指定する */
66
+
67
+ }
68
+
69
+ return $image;
70
+
71
+ }
72
+
73
+ ```
74
+
75
+
76
+
77
+ ◆カテゴリー一覧の表示、アーカイブを一覧表示に変更
78
+
79
+ index.php全部書き換え↓
80
+
81
+ ```php
82
+
15
83
  <?php
16
84
 
17
85
  /**
@@ -52,9 +120,13 @@
52
120
 
53
121
  <main id="site-content" role="main">
54
122
 
55
- <!-- カテゴリ一覧の表示 ここから -->
123
+
56
-
124
+
125
+
126
+
57
- <ul class="category_list">
127
+ <div class="category_list"><!-- カテゴリ一覧の表示 ここから -->
128
+
129
+ <ul>
58
130
 
59
131
  <?php
60
132
 
@@ -70,212 +142,246 @@
70
142
 
71
143
  </ul>
72
144
 
73
- <!-- カテゴリ一覧の表示 ここまで -->
74
-
75
-
76
-
77
- <!-- アイキャッチ画像一覧の表示 ここから -->
78
-
79
- <div class="article-wrap">
80
-
81
- <?php
82
-
83
-
84
-
85
- $archive_title = '';
86
-
87
- $archive_subtitle = '';
88
-
89
-
90
-
91
- if ( is_search() ) {
92
-
93
- global $wp_query;
94
-
95
-
96
-
97
- $archive_title = sprintf(
98
-
99
- '%1$s %2$s',
100
-
101
- '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
102
-
103
- '&ldquo;' . get_search_query() . '&rdquo;'
104
-
105
- );
106
-
107
-
108
-
109
- if ( $wp_query->found_posts ) {
110
-
111
- $archive_subtitle = sprintf(
112
-
113
- /* translators: %s: Number of search results. */
114
-
115
- _n(
116
-
117
- 'We found %s result for your search.',
118
-
119
- 'We found %s results for your search.',
120
-
121
- $wp_query->found_posts,
122
-
123
- 'twentytwenty'
124
-
125
- ),
126
-
127
- number_format_i18n( $wp_query->found_posts )
128
-
129
- );
130
-
131
- } else {
132
-
133
- $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
145
+ </div><!-- カテゴリ一覧の表示 ここまで -->
146
+
147
+
148
+
149
+
150
+
151
+ <?php
152
+
153
+
154
+
155
+ $archive_title = '';
156
+
157
+ $archive_subtitle = '';
158
+
159
+
160
+
161
+ if ( is_search() ) {
162
+
163
+ global $wp_query;
164
+
165
+
166
+
167
+ $archive_title = sprintf(
168
+
169
+ '%1$s %2$s',
170
+
171
+ '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
172
+
173
+ '&ldquo;' . get_search_query() . '&rdquo;'
174
+
175
+ );
176
+
177
+
178
+
179
+ if ( $wp_query->found_posts ) {
180
+
181
+ $archive_subtitle = sprintf(
182
+
183
+ /* translators: %s: Number of search results. */
184
+
185
+ _n(
186
+
187
+ 'We found %s result for your search.',
188
+
189
+ 'We found %s results for your search.',
190
+
191
+ $wp_query->found_posts,
192
+
193
+ 'twentytwenty'
194
+
195
+ ),
196
+
197
+ number_format_i18n( $wp_query->found_posts )
198
+
199
+ );
200
+
201
+ } else {
202
+
203
+ $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
204
+
205
+ }
206
+
207
+ } elseif ( is_archive() && ! have_posts() ) {
208
+
209
+ $archive_title = __( 'Nothing Found', 'twentytwenty' );
210
+
211
+ } elseif ( ! is_home() ) {
212
+
213
+ $archive_title = get_the_archive_title();
214
+
215
+ $archive_subtitle = get_the_archive_description();
216
+
217
+ }
218
+
219
+
220
+
221
+ if ( $archive_title || $archive_subtitle ) {
222
+
223
+ ?>
224
+
225
+
226
+
227
+ <header class="archive-header has-text-align-center header-footer-group">
228
+
229
+
230
+
231
+ <div class="archive-header-inner section-inner medium">
232
+
233
+
234
+
235
+ <?php if ( $archive_title ) { ?>
236
+
237
+ <h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1>
238
+
239
+ <?php } ?>
240
+
241
+
242
+
243
+ <?php if ( $archive_subtitle ) { ?>
244
+
245
+ <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
246
+
247
+ <?php } ?>
248
+
249
+
250
+
251
+ </div><!-- .archive-header-inner -->
252
+
253
+
254
+
255
+ </header><!-- .archive-header -->
256
+
257
+
258
+
259
+ <?php
260
+
261
+ }
262
+
263
+
264
+
265
+ if ( have_posts() ) {
266
+
267
+ if ( is_archive() ) {
268
+
269
+ ?>
270
+
271
+ <div class="ex-list">
272
+
273
+ <?php
274
+
275
+ while ( have_posts() ) {
276
+
277
+ the_post();
278
+
279
+ ?>
280
+
281
+ <div>
282
+
283
+ <a href="<?php the_permalink(); ?>">
284
+
285
+ <?php $catch_thumbnail_size = 'thumbnail'; if(has_post_thumbnail()){ the_post_thumbnail($catch_thumbnail_size); } else { echo catch_thumbnail_image($catch_thumbnail_size); } ?>
286
+
287
+ <?php the_title(); ?>
288
+
289
+ </a>
290
+
291
+ </div>
292
+
293
+ <?php
134
294
 
135
295
  }
136
296
 
297
+ ?>
298
+
137
- } elseif ( is_archive() && ! have_posts() ) {
299
+ </div><!-- end of .category-list -->
300
+
138
-
301
+ <?php
302
+
303
+ }else{
304
+
305
+
306
+
139
- $archive_title = __( 'Nothing Found', 'twentytwenty' );
307
+ $i = 0;
140
-
308
+
309
+
310
+
141
- } elseif ( ! is_home() ) {
311
+ while ( have_posts() ) {
312
+
313
+
314
+
315
+
316
+
142
-
317
+ $i++;
318
+
143
- $archive_title = get_the_archive_title();
319
+ if ( $i > 1 ) {
320
+
144
-
321
+ echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
322
+
323
+ }
324
+
325
+ the_post();
326
+
327
+
328
+
145
- $archive_subtitle = get_the_archive_description();
329
+ get_template_part( 'template-parts/content', get_post_type() );
330
+
331
+
146
332
 
147
333
  }
148
334
 
149
335
 
150
336
 
151
- if ( $archive_title || $archive_subtitle ) {
152
-
153
- ?>
154
-
155
-
156
-
157
- <header class="archive-header has-text-align-center header-footer-group">
158
-
159
-
160
-
161
- <div class="archive-header-inner section-inner medium">
162
-
163
-
164
-
165
- <?php if ( $archive_title ) { ?>
166
-
167
- <h3 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h3>
168
-
169
- <?php } ?>
170
-
171
- <?php
172
-
173
- $thumbnail_id = get_post_thumbnail_id();//アイキャッチのID
174
-
175
- $data = wp_get_attachment_image_src($thumbnail_id,'thumbnail');//配列
176
-
177
- ?>
178
-
179
- <img src="<?php echo $data[0] ;?>" width="<?php echo $data[1] ;?>" height="<?php echo $data[2] ;?>" >
180
-
181
- <?php if ( $archive_subtitle ) { ?>
182
-
183
- <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
184
-
185
- <?php } ?>
186
-
187
-
188
-
189
- </div><!-- .archive-header-inner -->
190
-
191
-
192
-
193
- </header><!-- .archive-header -->
194
-
195
-
196
-
197
- <?php
198
-
199
- }
337
+ }
200
-
201
-
202
-
203
- if ( have_posts() ) {
338
+
204
-
205
-
206
-
207
- $i = 0;
339
+
208
-
209
-
210
-
211
- while ( have_posts() ) {
340
+
212
-
213
- $i++;
214
-
215
- if ( $i > 1 ) {
216
-
217
- echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
218
-
219
- }
220
-
221
-
222
-
223
- the_post();
224
-
225
-
226
-
227
- get_template_part( 'template-parts/content', get_post_type() );
228
-
229
-
230
-
231
- }
232
-
233
- } elseif ( is_search() ) {
341
+ } elseif ( is_search() ) {
234
-
235
- ?>
236
-
237
-
238
-
239
- <div class="no-search-results-form section-inner thin">
240
-
241
-
242
-
243
- <?php
244
-
245
- get_search_form(
246
-
247
- array(
248
-
249
- 'label' => __( 'search again', 'twentytwenty' ),
250
-
251
- )
252
-
253
- );
254
-
255
- ?>
256
-
257
-
258
-
259
- </div><!-- .no-search-results -->
260
-
261
-
262
-
263
- <?php
264
-
265
- }
266
342
 
267
343
  ?>
268
344
 
269
345
 
270
346
 
347
+ <div class="no-search-results-form section-inner thin">
348
+
349
+
350
+
351
+ <?php
352
+
353
+ get_search_form(
354
+
355
+ array(
356
+
357
+ 'label' => __( 'search again', 'twentytwenty' ),
358
+
359
+ )
360
+
361
+ );
362
+
363
+ ?>
364
+
365
+
366
+
367
+ </div><!-- .no-search-results -->
368
+
369
+
370
+
371
+ <?php
372
+
373
+ }
374
+
375
+ ?>
376
+
377
+
378
+
271
- <?php get_template_part( 'template-parts/pagination' ); ?>
379
+ <?php get_template_part( 'template-parts/pagination' ); ?>
272
380
 
273
381
 
274
382
 
275
383
  </main><!-- #site-content -->
276
384
 
277
- </div><!-- /.article-wrap -->
278
-
279
385
 
280
386
 
281
387
  <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
@@ -286,4 +392,84 @@
286
392
 
287
393
  get_footer();
288
394
 
395
+
396
+
289
397
  ```
398
+
399
+
400
+
401
+ ◆見た目の調整
402
+
403
+ [外観]-[カスタマイズ]-[追加CSS]に追記↓
404
+
405
+ flexbox使用。横幅700px以上で横4つ、それより小さい場合は横2つ
406
+
407
+ ```css
408
+
409
+ .category_list{
410
+
411
+ padding:4rem 0 0;
412
+
413
+ max-width: 58rem;
414
+
415
+ width: calc(100% - 4rem);
416
+
417
+ margin-left: auto;
418
+
419
+ margin-right: auto;
420
+
421
+ }
422
+
423
+ .ex-list{
424
+
425
+ display:flex;
426
+
427
+ flex-wrap: wrap;
428
+
429
+ width: calc(100% - 4rem);
430
+
431
+ padding:4rem 0 0;
432
+
433
+ max-width: 58rem;
434
+
435
+ width: calc(100% - 4rem);
436
+
437
+ margin-left: auto;
438
+
439
+ margin-right: auto;
440
+
441
+ }
442
+
443
+ .ex-list>div{
444
+
445
+ width:50%;
446
+
447
+ padding: .5em;
448
+
449
+ }
450
+
451
+
452
+
453
+ @media (min-width: 700px){
454
+
455
+ .ex-list{
456
+
457
+ padding:8rem 0 0;
458
+
459
+ }
460
+
461
+ .ex-list>div{
462
+
463
+ width:25%;
464
+
465
+ }
466
+
467
+ }
468
+
469
+ ```
470
+
471
+
472
+
473
+ それっぽくはなると思いますが細かいところは調整してません。
474
+
475
+ 見落としがあるかもしれないので後でもう一度見直します。