PHPで呼び出した記事一覧をCoCoonテーマのブログカード型にする方法

Question

Wordpressを使用しております。
PHPで呼び出した記事一覧をブログカード型にする方法を教えてください。
PHPソースは下記のとおりになります。

<?php
//カテゴリ情報から関連記事を10個ランダムに呼び出す
$tags = wp_get_post_tags($post->ID);
$tag_ids = array();
foreach($tags as $tag):
  array_push( $tag_ids, $tag -> term_id);
endforeach ;
$args = array(
  'post__not_in' => array($post -> ID),
  'posts_per_page'=> 10,
  'tag__in' => $tag_ids,
  'orderby' => 'rand',
);
$query = new WP_Query($args); ?>
 <?php if( $query -> have_posts() ): ?>
  <?php while ($query -> have_posts()) : $query -> the_post(); ?>
    <div class="related-entry">
      <div class="related-entry-thumb">
  <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
        <?php echo get_the_post_thumbnail($post->ID, 'thumb100'); //サムネイルを呼び出す?>
        <?php else: // サムネイルを持っていないとき ?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" width="100px" />
        <?php endif; ?>
        </a>
      </div><!-- /.related-entry-thumb -->

      <div class="related-entry-content">
        <h7 class="related-entry-title"> <a href="<?php the_permalink(); ?>">
          <?php the_title(); //記事のタイトル?>
      </a></h7>
        <p class="related-entry-snippet">
       <?php echo mb_substr( strip_tags( $post->post_content  ), 0, 70 ) . ''; //記事本文の抜粋を70文字だけ取り出す?></p>
      </div><!-- /.related-entry-content -->
    </div><!-- /.new-entry -->

  <?php endwhile;?>

  <?php else:?>
  <p>記事はありませんでした</p>
  <?php
endif;
wp_reset_postdata();
?>
<br style="clear:both;">

Cocoonテーマのブログカードで使用されていたCSS

/* ===== 内部リンクカード(ショートコード) ===== */
.inline-linkcard {
	border: 1px solid #ddd;
    border-radius: 3px;
    margin: 10px auto;
    padding: 0;
}
.inline-linkcard + br + .inline-linkcard {
	margin-top: calc(-1em + -10px);
}
.inline-linkcard a {
	padding: 10px;
    display: grid;
    grid-template-columns: 16% 1fr;
    text-decoration: none;
}
.inline-linkcard a img {
    width: 100%;
    height: auto;
    align-self: center;
}
.inline-linkcard a p {
	padding-left: 15px;
    align-self: center;
    margin: 0.2em 0;
    font-size: 0.85em;
}

＜検証データ＞

<div class="inline-linkcard">
<a href="URL" title="タイトル名">
<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>

[追記]
・CSSでブログカード化できたのですが、タイトルが縦長に伸びてしまいました。
サムネイル画像と横並びに置きたいのですが、どうすればよろしいでしょうか。

以上、よろしくお願い致します。

Comments

[m.ts10806]

「ブログカード化」とは何でしょうか。
コードだけ提示されても分かること(伝わること)は多くありません。

[退会済みユーザー]

記事リストをリンクカード形式にするということです。
（伝わるか不安ですが。。。）

[m.ts10806]

質問は編集できますので。
文章よりも図示とか既に実現しているサイトがあるならその部分の画面キャプチャとかしてもらったほうが伝わるかと思います。
おそらく、CSSの範疇ですね

[退会済みユーザー]

ありがとうございます。
画像を追加させていただきましたので、ご確認お願い致します。

[Lhankor_Mhy]

重複投稿です。
https://teratail.com/questions/297486

https://teratail.com/help#posted-otherservice

[退会済みユーザー]

ご指摘ありがとうございます。
そちらの方は削除依頼出させていただきました。

[m.ts10806]

先に書いたように必要な情報を取得、表示できているのでしたらCSSの範疇です。
あとはWordPressと使用しているテーマ次第でどこに書くべきかが決まりますが、ひとまず静的HTMLで作ってみてはと。

[退会済みユーザー]

ありがとうございます。CSSでリンクカード型にできるんですね。
テーマはCocoonを使用しております。

[m.ts10806]

>CSSでリンクカード型にできるんですね。
いえ、「自分でそういう風に組む」です。
リンクカード型という機能がそのままあるわけではありません。
が「テーマ次第」と申し上げたのは、テーマにレイアウトが用意してあるかもしれないので、それを確認してもらいたいということです。
念のため、質問本文にもテーマ名を追記しておいてください。

[退会済みユーザー]

ありがとうございます。
テーマおよびに使用されているCSSを追加させていただきましたので、
ご確認お願い致します。

[Lhankor_Mhy]

ちらっとCocoonテーマのコードをのぞいてみましたが、
blogcard-in.php をインポートして url_to_internal_blogcard_tag という関数にURLを渡すと、その手のことをやってくれそうな感じでした。

PHPはよくわからないので、間違っていたらすみません。

[退会済みユーザー]

ありがとうございます。
なるほど…そのようなやり方もあるんですね。
今回CSSでブログカード化できてしまいました。申し訳ございません…。
ただ、タイトル部分が追加した画像のような状態になってしまっております。

[hatena19]

phpコードから出力されるHTMLコードを推測するのは非常に手間ですので、出力されたHTMLコードを提示してもらえませんか。
ブラウザに表示させて検証ツールでブログカードのタグを右クリックしてCopyで簡単にHTMLコードをクリップボードに格納できます。

[退会済みユーザー]

ありがとうございます。
検証データの方を追記させていただきました。
（情報が入ってしまう為、簡略化しております。）

Answer 1

.inline-linkcard a {
    padding: 10px;
    display: grid; /* ここ */
    grid-template-columns: 16% 1fr; /* ここ */
    text-decoration: none;
}

上記で grid で2列にして1列目の幅を 16% にしているのが原因でしょうね。
aリンク内の画像や、次のaリンク内のタイトルの幅がカード(.inline-linkcard)の幅の16%になってしまってます。

gridは子要素のレイアウトを決めるものですので、aリンク画像とaリンクタイトルを横並び（2列）にしたいのなら、親要素の .inline-linkcard に設定してください。

.inline-linkcard {
    border: 1px solid #ddd;
    border-radius: 3px;
    margin: 10px auto;
    padding: 0;
    display: grid; /* こちらに移動 */
    grid-template-columns: 16% 1fr;  /* こちらに移動 */
}

1列目の幅が 16%でいいのかは微妙です。pxで固定幅（画像の幅）に設定するほうかよさそうに思えます。この辺は実際の表示をみながらいろいろ調整してみてください。

Comments

[退会済みユーザー]

ありがとうございます！
上記内容に修正したら、理想通りに出力されました。
gridの1列目の幅が原因だったんですね…。
また機会がありましたら、よろしくお願い致します。