記事一覧 タイルの投稿日・カテゴリーの下にカテゴリを5個まで表示したい

ちょっとご要望がはっきり分かりません。

投稿ページの編集より、カテゴリーを 5 つ選択するのではだめなのでしょうか。

Akiraさん お世話になっております。

わかりにくくて申し訳ありません。

こちらの画像の動画を見るの左あたりに、該当記事のタグを5つほど表示したいのです。

よろしくお願いいたします。

書き忘れていました。この画像はブログのトップページの記事リストです。

3 つ質問があります。

質問 1

表示するのはカテゴリーでしょうか。タグでしょうか。

質問 2

カテゴリーにしろタグにしろ、リンクは必要でしょうか。それともカテゴリー名やタグ名を表示するだけでいいのでしょうか。

質問 3

5 つという制限は、やはり必要でしょうか。

Akiraさん。ありがとうございます。

ごっちゃになってしまい申し訳ありません。表示したいのはタグです。

タグのリンクは必要です。

5つの制限はなくてもいいですが、タグが多いとはみ出てしまうかなと思いまして。

制限はどちらでもいいです。

よろしくお願いいたします。

5 つの制限がなければ、簡単です。 CSS を指定すれば、はみ出すことはないと思います。

まず、 FTP ソフトやサーバーのファイルマネージャーなどを使い、親テーマにある entry-card-content.php を子テーマにコピペをします。

子テーマに設置した entry-card-content.php を開き、最後の方にある下記の HTML を探します。

<footer>
  <p class="entry-read"><a href="<?php the_permalink(); ?>" class="entry-read-link"><?php echo get_theme_text_read_entry(); //記事を読む ?></a></p>
</footer>

上記の HTML を下記のように変更します。

<footer>
  <div class="tags-read">
    <p class="entry-tags"><?php the_tags( '' ); ?></p>
    <p class="entry-read"><a href="<?php the_permalink(); ?>" class="entry-read-link"><?php echo get_theme_text_read_entry(); //記事を読む ?></a></p>
  </div>
</footer>

あとは CSS で装飾します。

CSS の一例は、下記のとおりです。

.tags-read {
  display: flex;
  flex-wrap: wrap;
}

.entry-tags {
  margin: 0;
}

Akiraさん お世話になっております。

Akiraさんの教えていただいた方法でやってみたのですが、

このようにタグが多い場合高さがズレてしまいます。

なので、やはりこの画像のタイトルの文字数制限のようにタグの個数を制限したいのですが、

可能でしょうか。あとタグの見た目もタグクラウドのものと揃えたいです。タグクラウドの見た目は

.tagcloud a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 6px 12px;
    color: #666; /* 文字色 */
    text-decoration: none;
    border-radius: 2px; /* 角を少し丸く */
    border: 1px solid #e6e6e6; 
    background: #FFF; /* 背景色 */
}

こうなってます。タグの見た目を変えるとなったら、タグの間の「,」も消したいです。

あとAkiraさんが貼ってくださった、CSSコードを追加すると 動画を見るというボタンが右端に寄せて

おきたいのですが、最後のタグのすぐ右に来てしまいます。

要望が多くて本当にすみません。 Akiraさんにはいつも本当にお世話になっております。

よろしくお願いいたします。

スマートに任意の数のタグ情報を取得する方法が分からないのですが、一応下記の 3 ステップでいけます。

●ステップ 1 ●

FTP ソフトやサーバーのファイルマネージャーを使い、子テーマフォルダの直下に 1 つファイルを作成します。

作成したファイルに entry-tags.php と名前をつけ、下記のコードを追加します。

<?php

$tags = get_the_tags();

if( isset( $tags[0] ) ) { ?>
    <a href="<?php echo get_tag_link( $tags[0]->term_id ); ?>"><?php echo $tags[0]->name; ?></a>
<?php
} if( isset( $tags[1] ) ) { ?>
    <a href="<?php echo get_tag_link( $tags[1]->term_id ); ?>"><?php echo $tags[1]->name; ?></a>
<?php
} if( isset( $tags[2] ) ) { ?>
    <a href="<?php echo get_tag_link( $tags[2]->term_id ); ?>"><?php echo $tags[2]->name; ?></a>
<?php
} if( isset( $tags[3] ) ) { ?>
    <a href="<?php echo get_tag_link( $tags[3]->term_id ); ?>"><?php echo $tags[3]->name; ?></a>
<?php
} if( isset( $tags[4] ) ) { ?>
    <a href="<?php echo get_tag_link( $tags[4]->term_id ); ?>"><?php echo $tags[4]->name; ?></a>
<?php
}

タグを 5 つ表示する内容です。 6 つ以上表示する場合にはコードを追加、 4 つ以下にする場合にはコードを削除します。

$tags[0] が 1 番目のタグ、 $tags[4] が 5 番目のタグです。

●ステップ 2 ●

前のコメントと同様に、 entry-card-content.php を子テーマに設置し、下記のコードを探します。

<footer>
  <p class="entry-read"><a href="<?php the_permalink(); ?>" class="entry-read-link"><?php echo get_theme_text_read_entry(); //記事を読む ?></a></p>
</footer>

これを下記のように書き換えます。

<footer>
  <p class="entry-read"><span class="entry-tags"><?php get_template_part( 'entry-tags' ); ?></span><a href="<?php the_permalink(); ?>" class="entry-read-link"><?php echo get_theme_text_read_entry(); //記事を読む ?></a></p>
</footer>

●ステップ 3 ●

CSS を指定します。

.entry-tags {
  padding-left: 5px;
}

.entry-tags a {
  display: inline-block;
  margin-bottom: 5px;
  padding: 6px 12px;
  color: #666; /* 文字色 */
  text-decoration: none;
  border-radius: 2px; /* 角を少し丸く */
  border: 1px solid #e6e6e6; 
  background: #fff; /* 背景色 */
}

.entry-read-link {
  float: right;
}

タグを 4 つにした出来上がりは下記のものです。

http://netakiri.net/uploader/src/up0526.png

あきらさん。本当にありがとうございます！

いろいろな質問しましたが、全て丁寧に答えていただき本当に助かりました。

これからもよろしくお願いいたします！