将哈希插入 url 以将其转换为锚点
Insert hash into url to turn it into an anchor
我正在使用Wordpress,并试图弄清楚如何破解子菜单中的链接。
我在这里设置了一个演示:http://brandsite.simpletruth.io/logo/
具体来说,我想在二级菜单链接前面添加一个哈希,以便它们成为同页锚点,而不是转到单独的页面。
例如:
http://brandsite.simpletruth.io/logo/logo-spacing/
成为:
http://brandsite.simpletruth.io/logo#logo-spacing
理想情况下,这发生在Wordpress中,但我认为使用javascript也是一个很好的解决方案。
谢谢!
你必须使用自定义的walker函数
在您的实例中:
在您的函数中
class custom_names extends Walker_Nav_Menu
{
/* Start of the <ul>
*
* Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
* So basically add one to what you'd expect it to be
*/
function start_lvl(&$output, $depth = 0, $args = array())
{
$indent = str_repeat("'t", $depth);
$output .= "'n$indent<ul class='"children'">'n";
}
/* End of the <ul>
*
* Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
* So basically add one to what you'd expect it to be
*/
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("'t", $depth);
$output .= "$indent</ul>'n";
}
/* Output the <li> and the containing <a>
* Note: $depth is "correct" at this level
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $current_object_id = 0 )
{
$indent = ( $depth ) ? str_repeat( "'t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
if ($depth == 1) {
$attributes = ' ' . $attr . '="'.str_replace(basename ($item->url), '#'.str_replace(' ', '-', strtolower ($item->title)), $value).'"';
}
}
$title = apply_filters( 'the_title', $item->title, $item->ID );
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
/* Close the <li>
* Note: the <a> is already closed
* Note 2: $depth is "correct" at this level
*/
function end_el ( &$output, $item, $depth = 0, $args = array())
{
$output .= '</li>';
return;
}
/* Add a 'hasChildren' property to the item
* Code from: http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633
*/
function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output)
{
// check whether this item has children, and set $item->hasChildren accordingly
$element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);
// continue with normal behavior
return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
在您的标题中.php(或您的菜单所在的任何位置)
<?php wp_nav_menu( array('walker' => new custom_names())); ?>
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- Steam Web API:I'我不知道该如何处理这个看起来像哈希的url来生成图像
- AngularJS:获取链接中没有哈希的查询字符串值
- 有没有一种漂亮的方法可以将列表/哈希数组转换为可用的字符串
- 将哈希插入 url 以将其转换为锚点
- 如何将 Python 字典转换为 JavaScript 哈希表
- jQuery Mobile URL在Android浏览器上将哈希(#)转换为%23
- Javascript正则表达式,用于将ruby哈希语法从1.8转换为1.9
- 将Javascript对象转换为Ruby哈希
- 如何将哈希值转换为数组
- 将长文本转换为数字(如哈希,md5),这将在PHP和JS中得到相同的结果
- Javascript到Perl数组/哈希转换
- 将普通javascript哈希转换为适当的对象
- 如何从联系人的Live API的响应中将哈希转换为文本
- 从c#到Javascript的哈希函数转换存在位数学问题
- 通过ajax传输哈希映射并转换为php数组
- 函数将URL哈希参数转换为对象(键值对)
- 流星:将电子邮件地址在服务器上转换为md5哈希,并在客户端上访问
- 在JavaScript中获取MD5哈希并将其转换为基64
- 将数组的数组重组为哈希数组并转换为JSON