teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問PHPで呼び出した記事一覧をCoCoonテーマのブログカード型にする方法

編集履歴

質問編集履歴

9

検証データを追加

2020/10/14 03:05

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -166,6 +166,22 @@
166
166
 
167
167
  ```
168
168
 
169
+
170
+
171
+ ＜検証データ＞
172
+
173
+ ```HTML
174
+
175
+ <div class="inline-linkcard">
176
+
177
+ <a href="URL" title="タイトル名">
178
+
179
+ <img width="100" height="100" data-src="画像のソース" class="attachment-thumb100 size-thumb100 wp-post-image lozad lozad-img" loading="lazy" alt="" data-srcset="画像のソース"/></noscript></a><a href="URL"> タイトル名</a></div>
180
+
181
+ ```
182
+
183
+
184
+
169
185
  [追記]
170
186
 
171
187
  ・CSSでブログカード化できたのですが、タイトルが縦長に伸びてしまいました。

8

画像の追記追加

2020/10/14 03:05

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -168,9 +168,11 @@
168
168
 
169
169
  [追記]
170
170
 
171
- ・下記のような形にしたいです。（リンクカード式でカードをクリックできる形式）
171
+ ・CSSでブログカード化できたのですが、タイトルが縦長に伸びてしまいました。
172
172
 
173
+ 　サムネイル画像と横並びに置きたいのですが、どうすればよろしいでしょうか。
174
+
173
- ![イメージ説明](b7c8eb04a8622975073bc0f7b1f88e3b.png)
175
+ ![イメージ説明](9dfa5518ab12456dd26be3abf64cebce.png)
174
176
 
175
177
 
176
178
 

7

CSSを追加

2020/10/14 00:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -104,67 +104,65 @@
104
104
 
105
105
 
106
106
 
107
+ Cocoonテーマのブログカードで使用されていたCSS
108
+
107
- または
109
+ ```CSS
108
110
 
109
111
 
110
112
 
111
- ```PHP
113
+ /* ===== 内部リンクカード(ショートコード) ===== */
112
114
 
113
- <?php
115
+ .inline-linkcard {
114
116
 
115
- $original_post = $post;
117
+ border: 1px solid #ddd;
116
118
 
117
- $tags = wp_get_post_tags($post->ID);
119
+ border-radius: 3px;
118
120
 
119
- $tagIDs = array();
121
+ margin: 10px auto;
120
122
 
121
- if ($tags) {
123
+ padding: 0;
122
124
 
123
- $tagcount = count($tags);
125
+ }
124
126
 
125
- for ($i = 0; $i < $tagcount; $i++) {
127
+ .inline-linkcard + br + .inline-linkcard {
126
128
 
127
- $tagIDs[$i] = $tags[$i]->term_id;
129
+ margin-top: calc(-1em + -10px);
128
130
 
129
- }
131
+ }
130
132
 
131
- $args=array(
133
+ .inline-linkcard a {
132
134
 
133
- 'tag__in' => $tagIDs,
135
+ padding: 10px;
134
136
 
135
- 'post__not_in' => array($post->ID),
137
+ display: grid;
136
138
 
137
- 'showposts'=>4,
139
+ grid-template-columns: 16% 1fr;
138
140
 
139
- 'ignore_sticky_posts'=>1
141
+ text-decoration: none;
140
142
 
141
- );
143
+ }
142
144
 
143
- $my_query = new WP_Query($args);
145
+ .inline-linkcard a img {
144
146
 
145
- if( $my_query->have_posts() ) {
147
+ width: 100%;
146
148
 
147
- while ($my_query->have_posts()) : $my_query->the_post(); ?>
149
+ height: auto;
148
150
 
149
- <li>
151
+ align-self: center;
150
152
 
151
- <h4>
153
+ }
152
154
 
153
- <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
155
+ .inline-linkcard a p {
154
156
 
155
- </h4>
157
+ padding-left: 15px;
156
158
 
157
- </li>
159
+ align-self: center;
158
160
 
159
- <?php endwhile; wp_reset_query(); ?>
161
+ margin: 0.2em 0;
160
162
 
161
- <?php } else { ?>
163
+ font-size: 0.85em;
162
164
 
163
- 関連する記事は見当たりません…
164
-
165
- <?php } } ?>
165
+ }
166
-
167
-
168
166
 
169
167
  ```
170
168
 

6

タイトルにテーマの追加

2020/10/13 23:51

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- PHPで呼び出した記事一覧をカード型にする方法
1
+ PHPで呼び出した記事一覧をCoCoonテーマのブログカード型にする方法
test CHANGED
File without changes

5

内容修正

2020/10/13 23:17

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- PHPで呼び出した記事一覧をブログカード化する方法
1
+ PHPで呼び出した記事一覧をカード型にする方法
test CHANGED
@@ -1,6 +1,6 @@
1
1
  Wordpressを使用しております。
2
2
 
3
- PHPで呼び出した記事一覧をCocoonテーマで使用されているブログカード化する方法を教えてください。
3
+ PHPで呼び出した記事一覧をブログカード型にする方法を教えてください。
4
4
 
5
5
  PHPソースは下記のとおりになります。
6
6
 

4

Wordpressのテーマの追加

2020/10/13 08:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  Wordpressを使用しております。
2
2
 
3
- PHPで呼び出した記事一覧をブログカード化する方法を教えてください。
3
+ PHPで呼び出した記事一覧をCocoonテーマで使用されているブログカード化する方法を教えてください。
4
4
 
5
5
  PHPソースは下記のとおりになります。
6
6
 

3

codeを追加

2020/10/13 05:01

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -102,6 +102,72 @@
102
102
 
103
103
  ```
104
104
 
105
+
106
+
107
+ または
108
+
109
+
110
+
111
+ ```PHP
112
+
113
+ <?php
114
+
115
+ $original_post = $post;
116
+
117
+ $tags = wp_get_post_tags($post->ID);
118
+
119
+ $tagIDs = array();
120
+
121
+ if ($tags) {
122
+
123
+ $tagcount = count($tags);
124
+
125
+ for ($i = 0; $i < $tagcount; $i++) {
126
+
127
+ $tagIDs[$i] = $tags[$i]->term_id;
128
+
129
+ }
130
+
131
+ $args=array(
132
+
133
+ 'tag__in' => $tagIDs,
134
+
135
+ 'post__not_in' => array($post->ID),
136
+
137
+ 'showposts'=>4,
138
+
139
+ 'ignore_sticky_posts'=>1
140
+
141
+ );
142
+
143
+ $my_query = new WP_Query($args);
144
+
145
+ if( $my_query->have_posts() ) {
146
+
147
+ while ($my_query->have_posts()) : $my_query->the_post(); ?>
148
+
149
+ <li>
150
+
151
+ <h4>
152
+
153
+ <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
154
+
155
+ </h4>
156
+
157
+ </li>
158
+
159
+ <?php endwhile; wp_reset_query(); ?>
160
+
161
+ <?php } else { ?>
162
+
163
+ 関連する記事は見当たりません…
164
+
165
+ <?php } } ?>
166
+
167
+
168
+
169
+ ```
170
+
105
171
  [追記]
106
172
 
107
173
  ・下記のような形にしたいです。（リンクカード式でカードをクリックできる形式）

2

・説明追加

2020/10/13 04:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -104,7 +104,7 @@
104
104
 
105
105
  [追記]
106
106
 
107
- ・下記のような形にしたいです。
107
+ ・下記のような形にしたいです。（リンクカード式でカードをクリックできる形式）
108
108
 
109
109
  ![イメージ説明](b7c8eb04a8622975073bc0f7b1f88e3b.png)
110
110
 

1

画像追加

2020/10/13 02:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -102,4 +102,12 @@
102
102
 
103
103
  ```
104
104
 
105
+ [追記]
106
+
107
+ ・下記のような形にしたいです。
108
+
109
+ ![イメージ説明](b7c8eb04a8622975073bc0f7b1f88e3b.png)
110
+
111
+
112
+
105
113
  以上、よろしくお願い致します。