wordpress 模块

wordpress商品展示型网站模板：XSdh

wordpress公司产品展示网站模板是一款现代化风格、通用型产品展示的Wordpress公司建站模板，采用经典的颜色搭配、精致的模块布局、完善的列表模板、响应式自适应技术以及配置的大幅全屏轮播图、公司简介、主推产品、图片展示、新闻资讯、联系信息、合作伙伴等常用展示模块，不仅外观精美大气，还具有优秀的移动端浏览体验，是一款面向所有具有产品展示及官方主页搭建需求的中小型企业公司的WordPress企业主题。

单独页面Banner设置

分类目录、单页面提供单独的Banner图片管理，可以自定义各自的banner图片，自由上传、删除，不一样的banner体验

商品式产品展示

内容页产品以商品展示方式，更加直观，后台可批量上传图片，告别杂乱无章的图片排版

完善的SEO基础设置

主题内置各页面完善的基础SEO设置功能；，支持自定义首页、文章页、单页面、分类栏目页面的标题、关键词和描述；消除要面对代码的烦恼。

响应式自适应移动终端设备

模板完善支持自适应各种常用智能终端访问设备，PC电脑、平板电脑、智能手机等；能根据用户的行为以及访问设备屏幕大小自动切换最适合的网页结构；从而极好地保证网站在各种设备环境下都能有更好的用户体验。

wordpress网站模板开发中，怎样创建自定义导航菜单？#学浪计划#

在前面的章节中，我们介绍了wordpress网站模板开发中，使用wp_list_pages()和wp_list_categories()这2个函数来创建基于page页面的导航菜单和基于分类目录的导航菜单。但是，这2种方式创建出来的菜单不够灵活，基于页面的导航菜单就添加不了分类目录，基于分类目录的导航菜单也添加不了page页面作为菜单。那么，wordpress有没有提供灵活一点的创建导航菜单的方法，能包含page页面、分类目录，甚至其它的选项。答案是肯定的。通过wordpress提供的方法，我们可以为wordpress网站模板创建自定义导航菜单。下面，就随我一起来看看吧。

第一步：给主题注册菜单功能。

wordpress网站后台默认情况下，没有提供菜单选项，需要我们在wordpress主题模板中来添加这个功能。这个，我们可以进入到wordpress后台的外观去看看，如下图：

所以，我们要先在wordpress主题的functions.php文件中注册菜单，代码如下：

//菜单register_nav_menus( array('menu_top' => '头部导航','menu_bottom' => '底部导航',) );

添加完上面的代码，我们再到wordpress网站后台的外观中看一下，这时，我们会发现多了一个“菜单”，这就是我们需要的自定义菜单。如下图：

第二步：后台创建菜单。

给wordpress网站后台添加了菜单功能后，我们就可以在wordpress后台的菜单中创建前台网页的自定义导航菜单了。点击“外观”中的“菜单”，右侧内容栏进入到菜单界面，如下图：

点击上图中的“创建新菜单”，进入到创建界面，如下图：

填写菜单名，点击“创建菜单”，进入到菜单结构界面，如下图：

在这个菜单结构界面，我们可以选择左侧的“添加菜单项”中的页面、分类目录、文章、自定义链接这几个选项中的子项，然后点击“添加到菜单”，就添加到右侧的菜单结构中，想在wordpress网站前台导航菜单中显示什么，就选择什么。如下图：

?然后，勾选“显示位置”，再点击保存菜单按钮，就可以了。

第三步：在头部调用这个菜单。

wordpress后台创建好了菜单后，我们要想在wordpress网站前台显示，还需要我们在wordpress网站模板中调用它。在给functions.php文件添加菜单功能时，我们设置了2个菜单位置：头部菜单和底部菜单。这里，我们以头部菜单为例，在wordpress网站模板的头部模板header.php中添加如下代码：

$menu = array( 'container' => false, //最外层标签名 'theme_location' => 'menu_top', //菜单类名 'depth' => 0, //菜单深度);wp_nav_menu( $menu );

这样，我们就可以在wordpress网站的前台头部看到我们添加的导航菜单，如下图：

?有点难看，是吧，我们可以给这个菜单添加CSS样式，来让它好看一点，这里就不演示了。上面的代码中，我们用到了wordpress的一个函数——wp_nav_menu()，这个函数的功能，就是把后台创建好的菜单在前台打印出来。这个函数的参数跟wp_list_pages()和wp_list_categories()这2个函数的参数类似，可以是字符串类型，也可以是数组类型。

wp_nav_menu()函数的参数如下：

wp_nav_menu( array('theme_location' => '',//导航别名'menu' => '', //期望显示的菜单'container' => 'div', //容器外层标签'container_class' => '',//ul父节点class类名'container_id' => '', //ul父节点id名'menu_class' => 'menu', //ul节点class类名'menu_id' => '', //ul节点id名'echo' => true,//是否输出菜单，默认为真，true或1时，打印输出；false或0时，不输出。'fallback_cb' => 'wp_page_menu', //菜单不存在时，返回默认菜单，设为false则不返回'before' => '', //链接前文本'after' => '', //链接后文本'link_before' => '', //链接文本前'link_after' => '',//链接文本后'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', //如何包装列表'depth' => 0, //菜单深度，默认0'walker' => '' //自定义walker) );

可见，wp_nav_menu()函数的参数还是挺多的，但实际使用中，不需要全部设置，往往我们只需要使用其它的几个常规参数就可以了，如上例中，我们就只用了3个参数，就打印出了wordpress网站的头部导航菜单。

通过以上这几步，我们就为wordpress网站模板添加好了自定义导航菜单的功能，看起来有点复杂，是吧。的确，跟wp_list_pages()和wp_list_categories()这2导航菜单相比，是要复杂一点。但是，多做几次后，你会发现，这种自定义导航菜单使用起来更加灵活多变。不管怎样，这3种添加导航菜单的方式我们都要掌握，可以在不同的需求中使用不同的方式。

怎样在wordpress网站模板中，添加面包屑导航功能模块？

几乎在所有的wordpress网站中，我们都可以看到面包屑导航的身影（如下图）。面包屑导航，可以很方便地让我们了解到我们在这个wordpress网站中所在的位置，而且，我们还可以通过点击面包屑导航中的链接，进入到对应的页面。?可见面包屑导航不仅让wordpress网站更加便利，而且提升了wordpress网站的用户体验。

那么，我们怎样在wordpress网站模板中添加面包屑导航呢？请随我来，我们可以通过2种方式来实现。具体操作，可以观看我在本站发表的《wordpress网站模板开发中，怎样添加面包屑导航功能？》视频教程。

面包屑导航的视频教程

?方法一：每个wordpress模板页添加对应的面包屑导航代码。

也就是说，我们可以在wordpress模板中，想要显示面包屑导航的地方，添加面包屑导航代码就可以了。一般情况下，需要面包屑导航的地方有：wordpress网站的分类页模板、文章页模板、单页面模板、tag标签页模板、搜索页模板、作者页模板等等。

wordpress网站分类页模板面包屑导航代码：

<?php echo '< a href="'.get_option("home_url").'">首页</a> > '; the_category(' > '); ?>

wordpress网站文章页模板面包屑导航代码：

<?php echo '< a href="'.get_option("home_url").'">首页</a> > '; the_category(' > '); echo " > ";the_title(); ?>

wordpress网站单页面模板面包屑导航代码：

<?php echo '< a href="'.get_option("home_url").'">首页</a> > '; the_title(); ?>

这种方式的缺点：需要在wordpress网站的每个需要面包屑导航的模板中添加面包屑导航代码，后期维护比较麻烦。

方法二：在wordpress模板中创建面包屑导航的函数。

为了更加方便地在wordpress网站模板中调用面包屑导航，我们可以给面包屑导航创建一个函数，然后，只需要用到面包屑导航的页面直接调用这个函数就可以了。因为面包屑导航会在wordpress网站的很多页面中使用，所以，我们在函数中要做不同页面的判断，根据不同的页面调用不同的面包屑导航。

在wordpress网站模板的functions.php文件中添加如下代码：

// 面包屑导航function the_breadcrumb() {echo '<ul id="crumbs">';if (!is_home()) { //如果不是首页echo '<li><a href="'.get_option("home_url").'">首页</a> > </li>';if (is_category() || is_single()) { //如果是分类或文章页echo '<li>';the_category(' </li><li> ');if (is_single()) { //如果是文章页echo " > </li><li>".get_the_title().'</li>';}} elseif (is_page()) { //如果是单页面echo '<li>'.get_the_title().'</li>';}elseif(is_tag()){ //如果是tag标签页single_cat_title(); }elseif (is_author()) { //如果是作者页echo"<li>作者页面"; echo'</li>';}elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { //如果是分页echo "<li>列表分页"; echo'</li>';}elseif (is_search()) { //如果是搜索页echo"<li>搜索页"; echo'</li>';}elseif (is_day()) {echo"<li>日期归档（天） "; the_time('F jS, Y'); echo'</li>';}elseif (is_month()) {echo"<li>日期归档（月）r "; the_time('F, Y'); echo'</li>';}elseif (is_year()) {echo"<li>日期归档（年） "; the_time('Y'); echo'</li>';}}echo '</ul>';}

面包屑函数创建好了，就可以在wordpress网站模板中调用它，代码如下：

< div class="breadcrumb"><?php the_breadcrumb(); ?></div>

通过上面的2种方式，我们都可以为我们的wordpress网站模板添加面包屑导航的功能。当然，我们还可以通过wordpress的面包屑导航插件来实现，不过，这么简单的功能，没必要耗费系统资源来使用插件，纯代码更加有效。

如果还有什么疑问，欢迎在下面给我留言，我会尽快给你回复。谢谢参阅。