时间戳

首页 > 解决方案 > 在 WordPress 中使用 Timber/Twig 将父子类别与帖子分组并显示

php - 在 WordPress 中使用 Timber/Twig 将父子类别与帖子分组并显示

问题描述

我有以下 WordPress 查询代码在我的 Timber 主题中工作，但正在努力转换为 Timber/Twig 格式。

$args = array(
  'taxonomy' => 'category',
  'parent' => '7',
  'orderby' => 'name',
  'order' => 'ASC',
  'hide_empty' => false,
);
$terms = get_terms( $args );

foreach ( $terms as $term ) {
  $termId = $term->term_id;

  // Output first level of children of parent category ID 7
  echo '<p>' . $term->name . '</p>';

  $args = array(
    'taxonomy' => 'category',
    'child_of' => $termId,
    'orderby' => 'name',
    'order' => 'ASC',
    'hide_empty' => false,
  );
  $childTerms = get_terms( $args );

  foreach ( $childTerms as $childTerm ) {
    $childTermId = $childTerm->term_id;

    // Output second level of children of parent category ID 7
    echo '<p>' . $childTerm->name . '</p>';

    $args = array(
      'cat' => $childTermId,
      'orderby' => 'title',
      'order' => 'ASC',
      'posts_per_page' => -1,
    );

    $query = new WP_Query( $args );
    while( $query->have_posts() ) : $query->the_post();
      // Output posts assigned to second level children categories
      echo '<p><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></p>';
    endwhile;
    wp_reset_postdata();

    // $posts = Timber::get_posts( $args );
  }
}

功能不完整的示例 Timber/Twig 代码

{% for term in terms %}
<div class="category">
  <h3>
    {{ term.name }}
  </h3>
  {% for childTerm in terms %}
    {% if childTerm.parent == term.term_id %}
    <div class="category__child">
      <h4>{{ childTerm.name }}</h4>
      <!-- Output posts from child terms here -->
    </div>
    {% endif %}
  {% endfor %}
</div>
{% endfor %}

HTML 嵌套输出示例

父类别

父类别

父类别

非常感谢任何帮助。

标签： phpwordpresstwigtimber

解决方案

首先，您必须更改要发送到视图的数据。将孩子与父母分组，并将帖子与相应的孩子分组。这可以通过以下方式实现：

<?php
    $data = [];

    $terms = get_terms([
        'taxonomy' => 'category',
        'parent' => '7',
        'orderby' => 'name',
        'order' => 'ASC',
        'hide_empty' => false,
    ]);

    foreach ($terms as $term) {
        /**
        *  Assign parent term to array and initiate children array
        *  Use term id so you can match the children easier with their parent
        **/
        $data[$term->term_id] = [
            'name'      => $term->name,
            'children'  => [],
        ];

        $childTerms = get_terms([
            'taxonomy' => 'category',
            'child_of' => $term->term_id,
            'orderby' => 'name',
            'order' => 'ASC',
            'hide_empty' => false,
        ]);

        foreach ($childTerms as $childTerm) {
            /**
            *  Assign child term to parent inside array and initiate post array
            *  Use child term id so you can match the post easier with the correct child
            **/
            $data[$term->term_id]['children'][$childTerm->term_id] = [
                'name' => $childTerm->name,
                'posts' => [],
            ];

            $query = new WP_Query([
                'cat' => $childTerm->term_id,
                'orderby' => 'title',
                'order' => 'ASC',
                'posts_per_page' => -1,
            ]);

            while($query->have_posts()) {
                $query->the_post();
                $data[$term->term_id]['children'][$childTerm->term_id]['posts'][] = [
                    'url'   => get_the_permalink(),
                    'title' => get_the_title(),
                ];
            }
            wp_reset_postdata();
        }
    }

这将创建一个嵌套数组，这将更容易在树枝中使用，例如

<ul>
{% for parent in data %}
    <li>
        {{ parent.name }}
        {% if parent.children|default %}
            <ul>
            {% for child in parent.children %}
                <li>
                    {{ child.name }}
                    {% if child.posts|default %}
                    <ul>
                    {% for post in child.posts %}
                        <li><a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li>
                    {% endfor %}
                    </ul>
                    {% endif %}
                </li>
            {% endfor %}
            </ul>
        {% endfor %}
    </li>
{% endfor %}
</ul>

演示

注意：没有测试 wordpress 部分，因为我不使用 wordpress

推荐阅读