WordPress3.X菜单功能讲解进阶 – WordPress 教程

2022年 10月 24日 发表评论
腾讯云正在大促:点击直达 阿里云超级红包:点击领取
免费/便宜/高性价比服务器汇总入口(已更新):点击这里了解

WordPress3.X菜单功能讲解进阶 – WordPress 教程
wordpress

从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;}

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: