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

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 記事一覧 タイルの投稿日・カテゴリーの下にカテゴリを5個まで表示したい

このトピックには9件の返信が含まれ、1人の参加者がいます。10 ヶ月、 1 週前 しらぬい さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #60478

    しらぬい

    いつもお世話になっております!

    すばらしいテーマをありがとうございます。

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

    いろいろ試しても知識がなく、出来ませんでした。

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

  • #60485

    Akira

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

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

  • #60488

    しらぬい

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

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

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

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

  • #60489

    しらぬい

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

  • #60496

    Akira

    3 つ質問があります。

    質問 1

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

    質問 2

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

    質問 3

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

  • #60498

    しらぬい

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

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

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

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

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

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

  • #60499

    Akira

    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;
    }
  • #60512

    しらぬい

    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さんにはいつも本当にお世話になっております。

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

  • #60515

    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

  • #60517

    しらぬい

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

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

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

トピック「記事一覧 タイルの投稿日・カテゴリーの下にカテゴリを5個まで表示したい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)