首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >用Wordpress Walker包装父母及其子女

用Wordpress Walker包装父母及其子女
EN

Stack Overflow用户
提问于 2017-09-18 07:52:51
回答 1查看 696关注 0票数 2

在使用Walker和wp_list_pages时,是否可以将父元素和其子元素封装在另一个元素中,这样我就可以将它们作为块来操作了吗?

目前我正在使用代码

代码语言:javascript
复制
class My_Walker extends Walker {
  var $db_fields = array(
    'parent' => 'post_parent',
    'id' => 'ID',
  );

  public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "<nav class=\"list\">\n";
  }

  public function end_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "</nav>\n";
  }

  public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $class = 'list-item';
    if ( $args['has_children'] ) {
      $class ='list-title-item';
    }

    $output .= "<a href=\"#$item->ID\" class=\"$class\">$item->post_title</a>\n";
  }
}

代码语言:javascript
复制
<a href="#116" class="list-title-item">Parent 1</a>
<nav class="list">
  <a href="#118" class="list-item">Child 1.1</a>
  <a href="#120" class="list-item">Child 1.2</a>
  <a href="#122" class="list-item">Child 1.3</a>
</nav>
<a href="#125" class="list-title-item">Parent 2</a>
<nav class="list">
  <a href="#127" class="list-item">Child 2.1</a>
  <a href="#132" class="list-item">Child 2.2</a>
</nav>

我想得到的是

代码语言:javascript
复制
<div id="title-116" class="list-title">
  <a href="#116" class="list-title-item">Parent 1</a>
  <nav class="list">
    <a href="#118" class="list-item">Child 1.1</a>
    <a href="#120" class="list-item">Child 1.2</a>
    <a href="#122" class="list-item">Child 1.3</a>
  </nav>
</div>
<div id="title-125" class="list-title">
  <a href="#125" class="list-title-item">Parent 2</a>
  <nav class="list">
    <a href="#127" class="list-item">Child 2.1</a>
    <a href="#132" class="list-item">Child 2.2</a>
  </nav>
</div>

我用代码给wp_list_pages打电话

代码语言:javascript
复制
wp_list_pages( array(
  'child_of' => $page_id,
  'post_status' => 'publish',
  'order' => 'asc',
  'depth' => 2,
  'walker' => new My_Walker,
) );
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-20 14:00:44

尝试将<div>添加到start_elend_el方法中,仅用于顶级项。(即深度= 0)

代码语言:javascript
复制
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $class = 'list-item';
    if ( $args['has_children'] ) {
      $class ='list-title-item';
    }

    $divopen = '';
    if (0 === $depth) {
        $divopen = "<div id=\"title-{$item->ID}\" class=\"list-title\">";
    }

    $output .= "$divopen\r\n<a href=\"#$item->ID\" class=\"$class\">$item->post_title</a>\n";
}

public function end_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    ...
    // Whatever else output is, plus:
    if (0 === $depth) {   
        $output .= "</div>";
    }
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46274213

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档