回答編集履歴

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
+ 見落としがあるかもしれないので後でもう一度見直します。