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

編集履歴

質問編集履歴

9

検証データを追加

2020/10/14 03:05

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -82,6 +82,14 @@
82
82
  font-size: 0.85em;
83
83
  }
84
84
  ```
85
+
86
+ ＜検証データ＞
87
+ ```HTML
88
+ <div class="inline-linkcard">
89
+ <a href="URL" title="タイトル名">
90
+ <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>
91
+ ```
92
+
85
93
  [追記]
86
94
  ・CSSでブログカード化できたのですが、タイトルが縦長に伸びてしまいました。
87
95
  　サムネイル画像と横並びに置きたいのですが、どうすればよろしいでしょうか。

8

画像の追記追加

2020/10/14 03:05

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -83,7 +83,8 @@
83
83
  }
84
84
  ```
85
85
  [追記]
86
- ・下記のような形にしたいです。（リンクカード式でカードをクリックできる形式）
86
+ ・CSSでブログカード化できたのですが、タイトルが縦長に伸びてしまいました。
87
+ 　サムネイル画像と横並びに置きたいのですが、どうすればよろしいでしょうか。
87
- ![イメージ説明](b7c8eb04a8622975073bc0f7b1f88e3b.png)
88
+ ![イメージ説明](9dfa5518ab12456dd26be3abf64cebce.png)
88
89
 
89
90
  以上、よろしくお願い致します。

7

CSSを追加

2020/10/14 00:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -51,37 +51,36 @@
51
51
 
52
52
  ```
53
53
 
54
+ Cocoonテーマのブログカードで使用されていたCSS
54
- または
55
+ ```CSS
55
56
 
56
- ```PHP
57
+ /* ===== 内部リンクカード(ショートコード) ===== */
57
- <?php
58
+ .inline-linkcard {
59
+ border: 1px solid #ddd;
58
- $original_post = $post;
60
+ border-radius: 3px;
59
- $tags = wp_get_post_tags($post->ID);
60
- $tagIDs = array();
61
+ margin: 10px auto;
61
- if ($tags) {
62
+ padding: 0;
62
- $tagcount = count($tags);
63
- for ($i = 0; $i < $tagcount; $i++) {
64
- $tagIDs[$i] = $tags[$i]->term_id;
65
- }
63
+ }
66
- $args=array(
67
- 'tag__in' => $tagIDs,
68
- 'post__not_in' => array($post->ID),
64
+ .inline-linkcard + br + .inline-linkcard {
69
- 'showposts'=>4,
70
- 'ignore_sticky_posts'=>1
71
- );
72
- $my_query = new WP_Query($args);
65
+ margin-top: calc(-1em + -10px);
66
+ }
67
+ .inline-linkcard a {
68
+ padding: 10px;
69
+ display: grid;
73
- if( $my_query->have_posts() ) {
70
+ grid-template-columns: 16% 1fr;
71
+ text-decoration: none;
72
+ }
74
- while ($my_query->have_posts()) : $my_query->the_post(); ?>
73
+ .inline-linkcard a img {
75
- <li>
74
+ width: 100%;
76
- <h4>
75
+ height: auto;
77
- <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
78
- </h4>
79
- </li>
80
- <?php endwhile; wp_reset_query(); ?>
81
- <?php } else { ?>
76
+ align-self: center;
77
+ }
78
+ .inline-linkcard a p {
82
- 関連する記事は見当たりません…
79
+ padding-left: 15px;
83
- <?php } } ?>
80
+ align-self: center;
84
-
81
+ margin: 0.2em 0;
82
+ font-size: 0.85em;
83
+ }
85
84
  ```
86
85
  [追記]
87
86
  ・下記のような形にしたいです。（リンクカード式でカードをクリックできる形式）

6

タイトルにテーマの追加

2020/10/13 23:51

投稿

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

5

内容修正

2020/10/13 23:17

投稿

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

4

Wordpressのテーマの追加

2020/10/13 08:19

投稿

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

3

codeを追加

2020/10/13 05:01

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -50,6 +50,39 @@
50
50
  <br style="clear:both;">
51
51
 
52
52
  ```
53
+
54
+ または
55
+
56
+ ```PHP
57
+ <?php
58
+ $original_post = $post;
59
+ $tags = wp_get_post_tags($post->ID);
60
+ $tagIDs = array();
61
+ if ($tags) {
62
+ $tagcount = count($tags);
63
+ for ($i = 0; $i < $tagcount; $i++) {
64
+ $tagIDs[$i] = $tags[$i]->term_id;
65
+ }
66
+ $args=array(
67
+ 'tag__in' => $tagIDs,
68
+ 'post__not_in' => array($post->ID),
69
+ 'showposts'=>4,
70
+ 'ignore_sticky_posts'=>1
71
+ );
72
+ $my_query = new WP_Query($args);
73
+ if( $my_query->have_posts() ) {
74
+ while ($my_query->have_posts()) : $my_query->the_post(); ?>
75
+ <li>
76
+ <h4>
77
+ <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
78
+ </h4>
79
+ </li>
80
+ <?php endwhile; wp_reset_query(); ?>
81
+ <?php } else { ?>
82
+ 関連する記事は見当たりません…
83
+ <?php } } ?>
84
+
85
+ ```
53
86
  [追記]
54
87
  ・下記のような形にしたいです。（リンクカード式でカードをクリックできる形式）
55
88
  ![イメージ説明](b7c8eb04a8622975073bc0f7b1f88e3b.png)

2

・説明追加

2020/10/13 04:12

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -51,7 +51,7 @@
51
51
 
52
52
  ```
53
53
  [追記]
54
- ・下記のような形にしたいです。
54
+ ・下記のような形にしたいです。（リンクカード式でカードをクリックできる形式）
55
55
  ![イメージ説明](b7c8eb04a8622975073bc0f7b1f88e3b.png)
56
56
 
57
57
  以上、よろしくお願い致します。

1

画像追加

2020/10/13 02:16

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -50,4 +50,8 @@
50
50
  <br style="clear:both;">
51
51
 
52
52
  ```
53
+ [追記]
54
+ ・下記のような形にしたいです。
55
+ ![イメージ説明](b7c8eb04a8622975073bc0f7b1f88e3b.png)
56
+
53
57
  以上、よろしくお願い致します。