teratail
回答率
85.48%
質問するログイン新規登録
トップWordPressに関する質問ループ処理の最初と最後で違う出力をしながらページネーションを作成する方法がわかりません。

編集履歴

質問編集履歴

4

内容の変更

2022/03/30 11:18

投稿

2232
2232

スコア298

test CHANGED
File without changes
test CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  早く答えが必要で、
5
5
  (ダブルポストです。https://qiita.com/keikkkk/questions/7915609d5acb9d3438fc
6
-
7
6
  https://ja.stackoverflow.com/questions/88102/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7-%e8%a8%98%e4%ba%8b%e3%81%ae%e3%83%ab%e3%83%bc%e3%83%97%e5%87%a6%e7%90%86%e3%82%92%e6%9c%80%e5%88%9d%e3%81%a8%e6%9c%80%e5%be%8c%e3%81%a7%e9%81%95%e3%81%86%e5%87%ba%e5%8a%9b%e3%81%a7%e8%a1%8c%e3%81%86%e6%96%b9%e6%b3%95%e3%81%8c%e3%82%8f%e3%81%8b%e3%82%8a%e3%81%be%e3%81%9b%e3%82%93)
8
7
 
9
8
  今現在、アーカイブページで、投稿の一覧のページを作成していて、
@@ -253,47 +252,8 @@
253
252
  .blog-item-thumbnail-content-second:last-child {
254
253
  padding-bottom: 8.515625vw;
255
254
  }
256
- .pagination {
255
+
257
- display: flex;
256
+
258
- }
259
- h2.screen-reader-text {
260
- display: none;
261
- }
262
- ul.page-numbers {
263
- display: flex;
264
- }
265
- ul.page-numbers li {
266
- width: 3.75vw;
267
- height: 3.75vw;
268
- border: 1px solid #1b224c;
269
- text-align: center;
270
- line-height: 3.90625vw;
271
- margin-right: 1.484375vw;
272
- }
273
- ul.page-numbers li:last-child {
274
- margin-right: 0vw;
275
- }
276
- ul.page-numbers span.page-numbers.current {
277
- font-size: 1.6rem;
278
- text-decoration: none;
279
- font-weight: bold;
280
- color: #fff;
281
- }
282
- ul.page-numbers li:nth-of-type(4) {
283
- border: none;
284
- }
285
- span.page-numbers.current {
286
- font-size: 1.6rem;
287
- text-decoration: none;
288
- color: #1b224c;
289
- font-weight: bold;
290
- }
291
- a.page-numbers {
292
- font-size: 1.6rem;
293
- text-decoration: none;
294
- color: #1b224c;
295
- font-weight: bold;
296
- }
297
257
 
298
258
  ```
299
259
 
@@ -305,5 +265,5 @@
305
265
  自分のサイト
306
266
  ![１つ目の記事と２つ目の記事の大きさが同じ](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-30/1b01fea0-2ef6-414d-b3b9-547b33b9da70.png)
307
267
 
308
- よろしくお願い致します。
268
+ お答えいただけると幸いです。
309
-
269
+
WordPressPHP

3

CSS追加

2022/03/30 11:13

投稿

2232
2232

スコア298

test CHANGED
File without changes
test CHANGED
@@ -161,21 +161,18 @@
161
161
  ```
162
162
 
163
163
 
164
- ```SASS
164
+ ```CSS
165
165
 
166
166
  .blog-list-wrapper {
167
167
  display: flex;
168
168
  }
169
-
170
169
  .blog-item-thumbnail-content {
171
170
  display: flex;
172
171
  }
173
-
174
172
  .blog-archive-wrapper {
175
173
  width: 70.31953125vw;
176
174
  margin: 0 auto;
177
175
  }
178
-
179
176
  .blog-item-thumbnail
180
177
  .blog-item-thumbnail-image
181
178
  img.attachment-150x110.size-150x110.wp-post-image {
@@ -183,7 +180,6 @@
183
180
  width: 240px;
184
181
  object-fit: cover;
185
182
  }
186
-
187
183
  .blog-archive-outer-title {
188
184
  font-weight: bold;
189
185
  font-size: 3.2rem;
@@ -191,56 +187,50 @@
191
187
  padding-top: 4.677vw;
192
188
  padding-bottom: 4.6875vw;
193
189
  }
194
-
195
190
  .img-price-third {
196
191
  position: relative;
197
192
  height: 221px;
198
193
  }
199
-
200
194
  img.main-img-third {
201
195
  height: 221px;
202
196
  width: 100%;
203
197
  }
204
-
205
198
  .blog-item-content {
206
199
  padding-left: 3.90625vw;
207
-
200
+ }
208
- .blog-item-day {
201
+ .blog-item-content .blog-item-day {
209
- font-size: 1.6rem;
202
+ font-size: 1.6rem;
210
- color: #1b224c;
203
+ color: #1b224c;
211
- padding-bottom: 1.40625vw;
204
+ padding-bottom: 1.40625vw;
212
- }
205
+ }
213
- .blog-item-title {
206
+ .blog-item-content .blog-item-title {
214
- font-size: 2.6rem;
207
+ font-size: 2.6rem;
215
- padding-bottom: 1.5625vw;
208
+ padding-bottom: 1.5625vw;
216
- }
217
-
218
209
  }
219
210
  .blog-item-content p {
220
211
  font-size: 1.25vw;
221
212
  }
213
+ .blog-item-content p {
214
+ font-size: 1.25vw;
215
+ }
222
216
  .blog-item-thumbnail-content {
223
217
  display: flex;
224
218
  padding-bottom: 7.265625vw;
225
219
  }
226
-
227
220
  .blog-item-day-second {
228
221
  padding-bottom: 1.5625vw;
229
222
  }
230
-
231
223
  img.attachment-240x148.size-240x148.wp-post-image {
232
224
  height: 148px;
233
225
  width: 240px;
234
226
  object-fit: fill;
235
227
  position: relative;
236
228
  }
237
-
238
229
  img.attachment-240x179.size-240x179.wp-post-image {
239
230
  height: 179px;
240
231
  width: 240px;
241
232
  object-fit: fill;
242
233
  }
243
-
244
234
  .blog-list-category {
245
235
  width: 80px;
246
236
  height: 28px;
@@ -251,13 +241,58 @@
251
241
  line-height: 28px;
252
242
  text-align: center;
253
243
  }
254
-
255
244
  .blog-item-thumbnail-content {
256
245
  display: flex;
257
246
  padding-bottom: 7.265625vw;
258
247
  height: 148px;
259
248
  }
260
-
249
+ .blog-item-thumbnail-content-second {
250
+ display: flex;
251
+ padding-bottom: 4.765625vw;
252
+ }
253
+ .blog-item-thumbnail-content-second:last-child {
254
+ padding-bottom: 8.515625vw;
255
+ }
256
+ .pagination {
257
+ display: flex;
258
+ }
259
+ h2.screen-reader-text {
260
+ display: none;
261
+ }
262
+ ul.page-numbers {
263
+ display: flex;
264
+ }
265
+ ul.page-numbers li {
266
+ width: 3.75vw;
267
+ height: 3.75vw;
268
+ border: 1px solid #1b224c;
269
+ text-align: center;
270
+ line-height: 3.90625vw;
271
+ margin-right: 1.484375vw;
272
+ }
273
+ ul.page-numbers li:last-child {
274
+ margin-right: 0vw;
275
+ }
276
+ ul.page-numbers span.page-numbers.current {
277
+ font-size: 1.6rem;
278
+ text-decoration: none;
279
+ font-weight: bold;
280
+ color: #fff;
281
+ }
282
+ ul.page-numbers li:nth-of-type(4) {
283
+ border: none;
284
+ }
285
+ span.page-numbers.current {
286
+ font-size: 1.6rem;
287
+ text-decoration: none;
288
+ color: #1b224c;
289
+ font-weight: bold;
290
+ }
291
+ a.page-numbers {
292
+ font-size: 1.6rem;
293
+ text-decoration: none;
294
+ color: #1b224c;
295
+ font-weight: bold;
261
296
  }
262
297
 
263
298
  ```
WordPressPHP

2

内容の追加

2022/03/30 11:08

投稿

2232
2232

スコア298

test CHANGED
File without changes
test CHANGED
@@ -263,16 +263,12 @@
263
263
  ```
264
264
 
265
265
 
266
-
266
+ 見本
267
267
 
268
268
  ![見本](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-30/474ecb55-7a99-426b-b7eb-b642ff72c2a2.png)
269
269
 
270
-
270
+ 自分のサイト
271
271
  ![１つ目の記事と２つ目の記事の大きさが同じ](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-30/1b01fea0-2ef6-414d-b3b9-547b33b9da70.png)
272
272
 
273
-
273
+ よろしくお願い致します。
274
-
275
-
276
-
277
-
278
-
274
+
WordPressPHP

1

内容の追加

2022/03/30 11:06

投稿

2232
2232

スコア298

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,10 @@
1
1
  ワードプレスでホームページを作成しています。
2
2
  *初心者で、少し前にPHPに触れたばかりです。
3
+
4
+ 早く答えが必要で、
5
+ (ダブルポストです。https://qiita.com/keikkkk/questions/7915609d5acb9d3438fc
6
+
7
+ https://ja.stackoverflow.com/questions/88102/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7-%e8%a8%98%e4%ba%8b%e3%81%ae%e3%83%ab%e3%83%bc%e3%83%97%e5%87%a6%e7%90%86%e3%82%92%e6%9c%80%e5%88%9d%e3%81%a8%e6%9c%80%e5%be%8c%e3%81%a7%e9%81%95%e3%81%86%e5%87%ba%e5%8a%9b%e3%81%a7%e8%a1%8c%e3%81%86%e6%96%b9%e6%b3%95%e3%81%8c%e3%82%8f%e3%81%8b%e3%82%8a%e3%81%be%e3%81%9b%e3%82%93)
3
8
 
4
9
  今現在、アーカイブページで、投稿の一覧のページを作成していて、
5
10
  プラグインWP-PageNaviを使用し、サイトの最後に
WordPressPHP