使用散列而不是链接的自定义查看器(单页布局)

时间：2015-06-14 作者：physalis

我目前正在使用WordPress开发一个基于一页的布局，其中实际内容在后端被拆分为单独的页面，所有这些页面都结合到我的首页模板文件中的一页布局中。

WordPress菜单允许自定义URL，这可能是通过引用#基于散列的链接（这些链接指向相应的div）来满足单页浏览的最简单方法。

然而，我正在寻找一种可能是最干净的解决方案来组织菜单及其锚定，以便站点的实际编辑/管理员可以简单地链接到实际页面，并让一个自定义助行器将其转换为哈希，从而指向前端的正确部分。

到目前为止，我将使用单个页面的slug，让wp\\u查询提取slug并将其作为ID添加到包装div中，例如。

名为“about Page”的第1页有一个slug“about Page”，因此div如下所示

<div class="section_wrapper" id="about-page"></div>

并在菜单编辑器中键入该slug作为哈希URL。

在这种情况下，是否有一个简单的walker或其他解决方案可以提供帮助，即将指向页面的链接转换为简单的哈希？还是更好的做法？

2 个回复

最合适的回答,由SO网友:physalis 整理而成

嗯，经过一些更深入的研究，我终于找到了一个可行的解决方案，它干净、简单，迄今为止工作完美无瑕。

把这个放进你的函数里。php创建自定义walker，将经典的permalinks转换为哈希（例如，page.com/mypage到page.com/#mypage）：

/* Custom nav walker */

class Single_Page_Walker extends Walker_Nav_Menu{
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';
       $class_names = $value = \'\';
       $classes = empty( $item->classes ) ? array() : (array) $item->classes;
       $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item ) );
       $class_names = \' class="\'. esc_attr( $class_names ) . \'"\';
       $output .= $indent . \'<li id="menu-item-\'. $item->ID . \'"\' . $value . $class_names .\'>\';
       $attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
       $attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
       $attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
       if($item->object == \'page\')
       {
            $varpost = get_post($item->object_id);
            if(is_home()){
              $attributes .= \' href="#\' . $varpost->post_name . \'"\';
            }else{
              $attributes .= \' href="\'.home_url().\'/#\' . $varpost->post_name . \'"\';
            }
       }
       else
            $attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';
        $item_output = $args->before;
        $item_output .= \'<a\'. $attributes .\'>\';
        $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID );
        $item_output .= $args->link_after;
        $item_output .= \'</a>\';
        $item_output .= $args->after;
        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args, $id );
    }
}

然后，在希望菜单出现的地方，放置以下代码来调用菜单（在functions.php中之前应该将其定义为菜单位置），并根据自己的喜好调整选项，除了“walker”部分之外：

<?php 
    wp_nav_menu(array(
    \'theme_location\' => \'onepage\',
    \'echo\' => true,
    \'container\' => false,
    \'walker\'=> new Single_Page_Walker,
    \'depth\' => 1) );
?>

-已经这样了。现在，您可以在后端填充菜单，而无需再关心哈希：）。

SO网友:Kristoffer

我目前正在做一个项目。

首先，我使用slug在onepage模板上创建锚定：

<article id="post-<?= get_slug(get_the_ID()); ?>" class="container">

然后我在自定义菜单遍历器类中使用以下代码来替换菜单项href属性中的url。

/**
* Figure out if the current item is on the page - replace anchor
*/
if (is_page_template(\'template-forside.php\')) {
    $onepageID = get_the_ID();
} else {
    $onepageID = get_option(\'page_on_front\');
}


// Build array of IDs that are on the page
$onepageids = array($onepageID);
$pages = get_pages(\'child_of=\'.$onepageID);
foreach($pages as $child) {
    array_push($onepageids, $child->ID);
}

if( in_array($item->object_id,$onepageids) ) {
    if ( is_page_template(\'template-forside.php\') ) {
        // The menu item links to the current page
        $atts[\'href\']   = \'#post-\'.get_slug($item->object_id);
    } else {
        $atts[\'href\'] = get_home_url().\'#post-\'.get_slug($item->object_id);
    }


} else {
    $atts[\'href\']   = ! empty( $item->url )        ? $item->url        : \'\';
}

请注意，我做了三件事：

弄清楚这到底是不是一页模板（template for side.php）。如果不是，那么该站点的首页就是onepage页面注意-此代码有点缺陷，因为它假设一页模板是首页，因此无法完全推广。

结束

小码农CODE

使用散列而不是链接的自定义查看器(单页布局)

相关推荐

修改strid_tag函数以使用术语slug而不是术语名称