拆分wp_list_ages以对其进行自定义

时间：2011-03-03 作者：sta777

我正在尝试“分解”（认为explode是正确的术语），wp\\u list\\u页面，以便在其中添加一些定义列表代码（dl、dt、dd）。

下面是我试图输出的html代码：

<div id="nav">             
            <ul id="drop-nav">                 
                <li><a href="#">About Us</a>
                <div class="subnav">
                        <div class="subnavTop">
                            <ul class="subnavContent">
                                <li>
                                    <dl>                                             
                                        <dt><a href="#">Help Desk</a></dt>
                                        <dd><a href="#">Email your question</a></dd>
                                        <dd><a href="#">Text a question</a></dd>            
                                    </dl>                                      
                                    <dl>
                                        <dt><a href="#">Life stories</a></dt>                                                 
                                        <dt><a href="#">Statistics</a></dt>
                                        <dd><a href="#">World Statistics</a></dd>
                                        <dd><a href="#">UK Statistics</a></dd>
                                        <dd><a href="#">South West Statistics</a></dd>
                                        <dd><a href="#">Research projects</a></dd>                    
                                    </dl>                                        
                                </li>                   
                            </ul>
                        </div>                           
                    </div>
                </li> 
                <li><a href="#">Talk to us</a></li>
            </ul>
            <br style="clear: left" />
    </div>
以下是我当前输出的html代码：

<div id="nav">  
            <ul id="drop-nav">          
                <li><a href="#">About Us</a>
                <div class="subnav">
                        <div class="subnavTop">
                            <ul class="subnavContent">
                                <li class="page_item page-item-15"><a href="#">Child of About</a>
                                    <ul class=\'children\'>
                                        <li class="page_item page-item-28"><a href="#">Grandchild of About</a></li>
                                    </ul>
                                </li>

                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">Talk to us</a></li>
            </ul>
    <br style="clear: left" />
    </div>
它是在我的标题中使用以下代码生成的。php，（不记得我在哪个网站上找到这个）：

<div id="nav">  
    <ul id="drop-nav">          
    <?php
    // Query the database for all top-level page IDs, and store them in the $menuPages array under the [ID] sub-array
    $menuPages = $wpdb->get_results("SELECT ID FROM $wpdb->posts WHERE post_parent=0 AND post_type=\'page\' AND post_status=\'publish\' ORDER BY menu_order ASC");

    // For each element in the $menuPages array, get the value from the [ID]-subarray to create the top-level menu and it\'s children
    foreach($menuPages as $menuItem){
        $menuItemTitle = get_the_title($menuItem->ID);          
        $menuItemClass = strtolower(trim($menuItemTitle));                  
        $menuItemClass = preg_replace(\'/[^a-z0-9-]/\', \'-\', $menuItemClass);
        $menuItemClass = preg_replace(\'/-+/\', "-", $menuItemClass);             
        $menuItemPermalink = get_permalink($menuItem->ID);
            if (isset($menuItemTitle) && $menuItemTitle != \'Home\'){                 
                _e(\'<li class="\'.$menuItemClass.\'">\'.PHP_EOL);
                _e(\'<a href="\'.$menuItemPermalink.\'">\'.$menuItemTitle.\'</a>\'.PHP_EOL);

            // Run wp_list_pages to fetch any children, and put the HTML <LI> list results into $menuItemChildren as a string
                $menuItemChildren = wp_list_pages(\'title_li=&echo=0&depth=1&sort_column=menu_order&child_of=\'.$menuItem->ID);

            // If results were returned, $menuItemChildren is now a string with HTML in it, so create a drop-down and echo out the HTML
                if($menuItemChildren){                      
                    _e(\'<div class="subnav">\'.PHP_EOL);
                    _e(\'<div class="subnavTop">\'.PHP_EOL);
                    _e(\'<ul class="subnavContent">\'.PHP_EOL);                                   
                    echo $menuItemChildren . PHP_EOL;
                    _e(\'</ul>\'.PHP_EOL);
                    _e(\'</div>\'.PHP_EOL);
                    _e(\'</div>\'.PHP_EOL);                       
                }
                _e(\'</li>\'.PHP_EOL);            
            }
        }
    ?>
    </ul>
    <br style="clear: left" />
    </div>
老实说，这把我的生活搞糊涂了。我知道它应该起作用，只是不知道如何使它起作用。我需要以某种方式将每个子页面/项目更改为a，将孙辈更改为s，所有内容都很好地封装在s中。

希望这有意义。非常感谢您的任何想法/帮助，S。

（该代码用于动态生成“超级菜单”）

/*wyrfel最初提供的Walker课程代码更新为08-03-11以下-非常感谢*/

class My_Walker_Page extends Walker {
var $tree_type = \'page\';

var $db_fields = array (\'parent\' => \'post_parent\', \'id\' => \'ID\');

function start_lvl(&$output, $depth) {
    $indent = str_repeat("\\t", $depth);
    switch ($depth) {
        case 0:
            $output .= "<div class=\\"subnav\\">\\n";
            $output .= "<div class=\\"subnavTop\\">\\n";
            $output .= $indent."<ul class=\'subnavContent\'>\\n";
            $output .= "<li>\\n<dl>\\n";
            break;
        case 1:                
            break;
        default:
            break;
    }
}

function end_lvl(&$output, $depth) {
    $indent = str_repeat("\\t", $depth);
    switch ($depth) {
        case 0:
            $output .= "\\n</dl>\\n</li>\\n";
            $output .= "</ul>\\n";
            $output .= "</div>\\n";
            $output .= "</div>\\n";
            break;
        case 1:                
            break;
        default:
            break;
    }
}

function start_el(&$output, $page, $depth, $args, $current_page) {
    if ( $depth )
        $indent = str_repeat("\\t", $depth);
    else
        $indent = \'\';

    extract($args, EXTR_SKIP);
    $css_class = array(\'page_item\', \'page-item-\'.$page->ID);
    if ( !empty($current_page) ) {
        $_current_page = get_page( $current_page );
        _get_post_ancestors($_current_page);
        if ( isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors) )
            $css_class[] = \'current_page_ancestor\';
        if ( $page->ID == $current_page )
            $css_class[] = \'current_page_item\';
        elseif ( $_current_page && $page->ID == $_current_page->post_parent )
            $css_class[] = \'current_page_parent\';
    } elseif ( $page->ID == get_option(\'page_for_posts\') ) {
        $css_class[] = \'current_page_parent\';
    }

    $css_class = implode(\' \', apply_filters(\'page_css_class\', $css_class, $page));

    $page_link = \'<a href="\' . get_permalink($page->ID) . \'" title="\' . esc_attr( wp_strip_all_tags( apply_filters( \'the_title\', $page->post_title, $page->ID ) ) ) . \'">\' . $link_before . apply_filters( \'the_title\', $page->post_title, $page->ID ) . $link_after . \'</a>\';
    $top_class = strtolower(trim($page->post_title));                   
    $top_class = preg_replace(\'/[^a-z0-9-]/\', \'-\', $top_class);
    $top_class = preg_replace(\'/-+/\', "-", $top_class);         

    switch ($depth) {
        case 0:
            $output .= $indent . \'<li class="\' . $top_class . \'">\'.$page_link . PHP_EOL;
            break;
        case 1:
            $output .= $indent . \'<dt>\'.$page_link.\'</dt>\' . PHP_EOL;
            break;
        default:
            $output .= $indent . \'<dd>\'.$page_link.\'</dd>\' . PHP_EOL;
            break;
    }

    if ( !empty($show_date) ) {
        if ( \'modified\' == $show_date )
            $time = $page->post_modified;
        else
            $time = $page->post_date;
        $output .= " " . mysql2date($date_format, $time);
    }
}

function end_el(&$output, $page, $depth) {
    switch ($depth) {
        case 0:
            $output .= "</li>\\n";
            break;
        case 1:
            break;
        default:
            break;
    }
}
}

2 个回复
最合适的回答,由SO网友:Rarst 整理而成

这是一个可靠答案不容易理解的问题。此功能由Walker_Page 类，您可以用自己的walker（扩展自Walker_Page 或者只是Walker) 通过传入其名称walker 参数到wp_list_pages().

简而言之，这是一种非常灵活的方式，但不太方便和容易掌握，尤其是在不经常与步行者发生冲突的情况下。

SO网友:wyrfel

我现在不能测试这个，但我试着给你写你的助行器。它并不能完全满足您的需要，因为顶级类/id属性很难修改，但下面的所有内容都应该可以（或者我希望如此）。

class My_Walker_Page extends Walker {
    var $tree_type = \'page\';

    var $db_fields = array (\'parent\' => \'post_parent\', \'id\' => \'ID\');

    function start_lvl(&$output, $depth) {
        $indent = str_repeat("\\t", $depth);
        switch ($depth) {
            case 0:
                $output .= $indent."<ul id=\\"drop_nav\\">\\n";
                break;
            case 1:
                $output .= "<div class=\\"subnav\\">\\n";
                $output .= "<div class=\\"subnavTop\\">\\n";
                $output .= $indent."<ul class=\'subnavContent\'>\\n";
                $output .= "<li>\\n<dl>\\n";
                break;
            default:
                break;
        }
    }

    function end_lvl(&$output, $depth) {
        $indent = str_repeat("\\t", $depth);
        switch ($depth) {
            case 0:
                $output .= "\\n".$indent."</ul>\\n";
                break;
            case 1:
                $output .= "\\n</dl>\\n</li>\\n";
                $output .= "</ul>\\n";
                $output .= "</div>\\n";
                $output .= "</div>\\n";
                break;
            default:
                break;
        }
    }

    function start_el(&$output, $page, $depth, $args, $current_page) {
        if ( $depth )
            $indent = str_repeat("\\t", $depth);
        else
            $indent = \'\';

        extract($args, EXTR_SKIP);
        $css_class = array(\'page_item\', \'page-item-\'.$page->ID);
        if ( !empty($current_page) ) {
            $_current_page = get_page( $current_page );
            _get_post_ancestors($_current_page);
            if ( isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors) )
                $css_class[] = \'current_page_ancestor\';
            if ( $page->ID == $current_page )
                $css_class[] = \'current_page_item\';
            elseif ( $_current_page && $page->ID == $_current_page->post_parent )
                $css_class[] = \'current_page_parent\';
        } elseif ( $page->ID == get_option(\'page_for_posts\') ) {
            $css_class[] = \'current_page_parent\';
        }

        $css_class = implode(\' \', apply_filters(\'page_css_class\', $css_class, $page));

        $page_link = \'<a href="\' . get_permalink($page->ID) . \'" title="\' . esc_attr( wp_strip_all_tags( apply_filters( \'the_title\', $page->post_title, $page->ID ) ) ) . \'">\' . $link_before . apply_filters( \'the_title\', $page->post_title, $page->ID ) . $link_after . \'</a>\';
        switch ($depth) {
            case 0:
                $output .= $indent . \'<li class="\' . $css_class . \'">\'.$page_link;
                break;
            case 1:
                $output .= $indent . \'<dt class="\' . $css_class . \'">\'.$page_link;
                break;
            default:
                $output .= $indent . \'<dd class="\' . $css_class . \'">\'.$page_link;
                break;
        }

        if ( !empty($show_date) ) {
            if ( \'modified\' == $show_date )
                $time = $page->post_modified;
            else
                $time = $page->post_date;

            $output .= " " . mysql2date($date_format, $time);
        }
    }

    function end_el(&$output, $page, $depth) {
        switch ($depth) {
            case 0:
                $output .= "</li>\\n";
                break;
            case 1:
                $output .= "</dt>\\n";
                break;
            default:
                $output .= "</dd>\\n";
                break;
        }
    }
}
您应该能够做到：

$args = array(
    \'title_li\' => \'\',
    \'sort_column\' => \'menu_order\',
    \'walker\' => new My_Walker_Page(),
);
wp_list_pages($args);

结束
标签： navigation   小码农  

相关推荐

Thesis -style Navigation

我正在研究一个主题，我希望用户能够像论文一样选择要在主题选项页面中显示的页面。我已经在谷歌上搜索了几个小时的逆向工程论文，但还没有找到一个很好的解决方案。我想知道是否有人做过这件事或看过教程。