欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」WordPress3.X菜单功能讲解进阶

作者 : 自学哈 本文共2796个字,预计阅读时间需要7分钟 2022-11-6 共166人阅读
也想出现在这里? 联系我们

WordPress3.X菜单功能讲解进阶

从WordPress3.0开始已集成菜单管理功能,使得创建和管理(导航)菜单变得轻而易举。

现在,创建并显示一个菜单需要的无非就是一行代码( wp_nav_menu ),似乎已经失去“手动”添加我们自己需要的东西空间。 例如,菜单功能默认没有“返回首页”的任何链接,虽然可以很容易地在自定义菜单功能中手动添加一个返回首页的链接,但返回首页链接基本是网站必须的功能

因此,自动添加此功能是很有必要的。有一个更简单的方法,使用WordPress filters.

利用导航菜单“ filters”功能,可以使我们能够加入特定菜单项。

举一反三,经过挖掘研究,将以下三段代码,添加到主题 functions.php 文件中,会实现自动增加一个登录/注销链接、添加一个搜索框和一个返回首页的链接到你的WordPress3.0导航菜单。

一、新增一个登录/注销链接到您的导航菜单

add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);function add_login_logout_link($items, $args) {ob_start();wp_loginout('index.php');$loginoutlink = ob_get_contents();ob_end_clean();$items .= '<li>'. $loginoutlink .'</li>';return$items;}

说明:

First we add a function add_login_logout_link to the wp_nav_menu_items filter. Then, the ob_start, ob_get_contents and ob_end_clean (lines 4, 6 and 7) functions are “output Buffering” PHP functions that will “intercept” the information that would otherwise be sent to the browser. wp_loginout(‘index.php’); will add the logic and html code to login (if not logged in yet), or logout (if logged in). Since we don’t want to send that code to the browser yet, we “capture” the output (using ob_get_contents) in a variable ($searchform), and finally include that variable as a list item in the menu.

二、为导航菜单自动添加搜索框

add_filter('wp_nav_menu_items','add_search_box', 10, 2);function add_search_box($items, $args) {ob_start();get_search_form();$searchform = ob_get_contents();ob_end_clean();$items .= '<li>' . $searchform . '</li>';return$items;}

创建自己的搜索模板add_search_box是利用默认的searchform菜单栏。但是这可能不是理想的布局(也许它包含前文本”搜索:”与“搜索”键),那么你就应该创建一个模板文件searchform.php在你的主题模板目录,加入下面代码: 该 add_search_box 功能是利用默认的searchform模板。 但这未必是理想的布局(也许它包含前面的文本“搜索:”和一个“搜索”按钮),所以你可创建一个自己的searchform.php模板文件 ,放到在你的主题模板目录中,并添加以下代码:

<form method="get" class="search-form" id="search-form" action="<?php bloginfo( 'home' ); ?>/"><div class="formfield"><input class="formInputText" type="text" name="s" id="search-text" value="Search ..." size="12" maxlength="16" tabindex="1" onfocus="if (this.value == 'Search ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search ...';}" /></div></form>

或者,您可以添加表单样式以匹配您的导航风格,例如:

input.formInputText {margin-top: 7px;color: #666;padding: 3px;background: #ccc;}input.formInputText:hover {cursor: help;color: 555;background: #ccc;}

三、添加一个主页链接到您的导航菜单

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );function add_home_link($items, $args) {if (is_front_page())$class = 'class="current_page_item"';else$class = '';$homeMenuItem ='<li ' . $class . '>' .$args->before .'<a href="' . home_url( '/' ) . '" title="Home">' .$args->link_before . 'Home' . $args->link_after .'</a>' .$args->after .'</li>';$items = $homeMenuItem . $items;return$items;}

只在特定的位置添加上述新增项目

新增项目默认将显示在所有自定义菜单中,这可能不是你所想要的,因此需要添加一个条件代码,让上述代码只执行在一个特定的菜单位置。

function add_login_logout_link($items, $args) {if($args->theme_location == 'Primary') {ob_start();wp_loginout('index.php');$loginoutlink = ob_get_contents();ob_end_clean();$items .= '<li>'. $loginoutlink .'</li>';}return$items;}

翻译水平有限,有不准确之处,请见谅,上述代码经测试全部有效。

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」WordPress3.X菜单功能讲解进阶
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号