doqau82086
2018-06-18 18:01 阅读 96
已采纳

使用语义网格在响应列中显示自定义分类术语

I am using a WP theme that includes the semantic grid.

For example, if I want to create 3 responsive columns I can use the following markup in a post or page:

<div class="grid-33">
Column 1
</div>
<div class="grid-33">
Column 2
</div>
<div class="grid-33">
Column 3
</div>

I am using php to grab and display a list of term links from a custom taxonomy I am using with Woocommerce. It works nicely to create a list. The problem is that the list is very long.

The echo section of the php is as follows:

echo "<h1 class='vendor-title'>MY TITLE</h1>"; 
        echo "<p class='vendor-subtext'>My subtext.</p>";
        echo "<ul class='vendor-list'>";
        foreach ( $terms as $term ) {
            echo '<li><a href="' . get_term_link( $term ) .'">' . $term->name . '</a></li>';
        }
        echo "</ul>";

What I want to do is to format the PHP so that the resulting list is displayed in 3 responsive columns using semantic grid-33 class divs.

How can I code this?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    douzai2562 douzai2562 2018-06-19 17:13

    I found a better solution for this. You can use column-count and column-gap css instead to style the list.

    You can change the column count using @media break points to have less columns on tablet and phone view.

    For example:

    .vendor-list {
        -moz-column-count: 4;
        -moz-column-gap: 10px;
        -webkit-column-count: 4;
        -webkit-column-gap: 10px;
        -ms-column-count:4;
        -ms-column-gap:10px;
        column-count: 4;
        column-gap: 10px;
    }
    
    @media (max-width: 768px) {
        .vendor-list {    
        -moz-column-count: 2;
        -moz-column-gap: 5px;
        -webkit-column-count: 2;
        -webkit-column-gap: 5px;
        -ms-column-count:2;
        -ms-column-gap:5px;
        column-count: 2;
        column-gap: 5px;
    }
    }
    
    点赞 评论 复制链接分享
  • dqt66847 dqt66847 2018-06-18 19:06

    I don't see where is the difficulty… Now you may have to get to correct class for the container:

    echo '<h1 class="vendor-title">MY TITLE</h1>
    <p class="vendor-subtext">My subtext.</p>
    <div class="vendor-list grid-container">';
    
    foreach ( $terms as $term ) {
        echo '<div class="grid-33"><a href="' . get_term_link( $term ) .'">' . $term->name . '</a></div>';
    }
    echo '</div>';
    
    点赞 评论 复制链接分享

相关推荐