前提・実現したいこと
HTML/CSSで作ったサイトをWordPress化しようとしております。
元のサイトと同様、以下のようにレスポンシブで表示させたいのですが、PHPを触った経験値が浅く、解決策が思いつかないのでご教授頂きたく思います。
【やりたいこと】
～769px ⇒ 1列1記事、計3記事表示
769px～993px ⇒ 1列3記事、計3記事表示
993px～ ⇒ 1列5記事、計5記事表示
【現状】
～769px ⇒ 1列1記事、計5記事表示
769px～993px ⇒ 上の列に3記事＆下2記事、計5記事表示
993px～ ⇒ 1列5記事、計5記事表示
WordPressの管理画面から5つ分投稿してから下記のようにwhile構文を使ってまとめた場合、993px未満になっても.only_pcのdisplay: none;が効かせられないので、5つ表示されたままになってしまいます。
なぜ表示されないのかはわかってはいるものの、管理画面から投稿できるようにして、かつ元のようにレスポンシブで表示できるいい方法が思いつかず、詰まっているという状況です。
該当のソースコード
「HTML」「CSS」が元のサイトの該当箇所、「PHP」が元のHTMLにPHPコードを当て込んだものです。
HTML
1 <div id="popular_wrapper">
2
3 <h1><i class="fas fa-flag"></i> 人気のある記事</h1>
4
5 <div id="popular" class="row">
6 <div class="article mb-3">
7 <img class="img-fluid" src="images/MacBook-and-clutter.png" alt="">
8 <p class="category">カテゴリー#1</p>
9 <p class="text">テスト投稿</p>
10 <p class="number number1">No.1</p>
11 </div>
12 <div class="article mb-3">
13 <img class="img-fluid" src="images/macbook-holding.png" alt="">
14 <p class="category">カテゴリー#1</p>
15 <p class="text">テスト投稿</p>
16 <p class="number number2">No.2</p>
17 </div>
18 <div class="article mb-3">
19 <img class="img-fluid" src="images/communication.png" alt="">
20 <p class="category">カテゴリー#4</p>
21 <p class="text">テスト投稿</p>
22 <p class="number number3">No.3</p>
23 </div>
24 <div class="article only_pc mb-3">
25 <img class="img-fluid" src="images/macbook-at-the-coffee-shop.jpg" alt="">
26 <p class="category">カテゴリー#2</p>
27 <p class="text">テスト投稿</p>
28 <p class="number number4">No.4</p>
29 </div>
30 <div class="article only_pc mb-3">
31 <img class="img-fluid" src="images/rest-time-in-front-of-macbook.png" alt="">
32 <p class="category">カテゴリー#3</p>
33 <p class="text">テスト投稿</p>
34 <p class="number number5">No.5</p>
35 </div>
36 </div>
37
38 </div>
CSS
1
2div#popular_wrapper h1,
3div#new_wrapper h1 {
4 font-size: 24px;
5 border-top: 1px solid #dcdddf;
6 border-bottom: 1px solid #dcdddf;
7 text-align: center;
8 padding: 24px 0;
9 margin-top: 50px;
10 margin-bottom: 30px;
11 width: 100%;
12}
13
14div#popular div.article,
15div#new div.article {
16 position: relative;
17 border: 1px solid #dcdddf;
18}
19
20div#popular div.article p.number,
21div#new div.article p.number {
22 position: absolute;
23 top: 0;
24 left: 0;
25 color: #fff;
26 font-size: 12px;
27 width: 48px;
28 height: 48px;
29 text-align: center;
30 opacity: 0.7;
31}
32
33div#popular div.article p.number {
34 line-height: 48px;
35}
36
37div#popular div.article p.number1 {
38 background-color: #d6b038;
39}
40
41div#popular div.article p.number2 {
42 background-color: #bfc4c9;
43}
44
45div#popular div.article p.number3 {
46 background-color: #b9704e;
47}
48
49div#popular div.article p.number4 {
50 background-color: #47442F;
51}
52
53div#popular div.article p.number5 {
54 background-color: #47442F;
55}
56
57div#new div.article p.number {
58 background-color: #3B4552;
59 padding-top: 3px;
60}
61
62div#new div.article p.number span {
63 font-size: 14px;
64}
65
66
67div#popular div.article p.category,
68div#new div.article p.category {
69 background-color: #47b39d;
70 color: #fff;
71 text-align: center;
72 width: 121px;
73 height: 35px;
74 line-height: 35px;
75 font-size: 12px;
76 margin: 10px 0;
77}
78
79div#popular div.article p.text,
80div#new div.article p.text {
81 margin-left: 10px;
82}
83
84div#popular,
85div#new {
86 margin: 0 2.5%;
87}
88
89div.only_pc {
90 display: none;
91}
92
93
94 @media (min-width: 769px) {
95
96 div#popular div.article,
97 div#new div.article {
98 width: 32%;
99 margin-right: 1%;
100 }
101
102 }
103
104
105 @media (min-width: 993px) {
106
107 div#popular div.article,
108 div#new div.article {
109 width: 18%;
110 margin-right: 2%;
111 border: 0;
112 }
113
114 div.only_pc {
115 display: block;
116 }
117
118 }
119
120
121 @media (min-width: 1200px) {
122 div#popular {
123 max-width: 1200px;
124 margin: 0 auto;
125 }
126 }
127
PHP
1<div id="popular_wrapper">
2
3 <h1><i class="fas fa-flag"></i> 人気のある記事</h1>
4
5 <div id="popular" class="row">
6
7 <?php
8 $news_query = new WP_Query(
9 array(
10 'post_type' => 'post',
11 'posts_per_page' => 5,
12 'orderby' => 'rand',
13 )
14 );
15
16 if ( $news_query->have_posts()) :
17 while ( $news_query->have_posts()) :
18 $news_query->the_post();
19 ?>
20 <div class="article mb-3">
21 <img class="img-fluid" src="<?php the_post_thumbnail(); ?>
22 <p class=" category">カテゴリー#1</p>
23 <p class="text"><?php the_title(); ?></p>
24 <p class="number number1">No.1</p>
25 </div>
26
27 <?php endwhile; ?>
28 <?php else: ?>
29 <p>記事はありません！</p>
30 <?php endif; ?>
31 <?php wp_reset_postdata(); ?>
32
33 </div>
34
35</div>
試したこと
Xeory Extensionという無料テーマを自分なりに模写したものを試しにWordPress化しようとしていて、Xeory Extensionのソースコードを見てみたけど正直よくわからない・・・というレベルです・・・
その他
今回の質問の趣旨とは話が変わりますが・・・
<img class="img-fluid" src="<?php the_post_thumbnail(); ?>
上記に「">」を加えてimgタグを閉じるとなぜか「">」という文字が画面に表示されてしまいます。
気持ち悪いですが「">」を省くと表示されないので一旦このようにしています。
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。