调整,自定义WordPress网站顶部导航,底部导航,侧边栏,增添顶部小工具和底部小工具

调整,自定义WordPress网站顶部导航,底部导航,侧边栏,增添顶部小工具和底部小工具

作者:DIYzhan.com |  浏览:23545 |  9 条评论
Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

在WordPress网站中,顶部导航,底部导航和侧边栏分别是哪些部分呢?请看图:

header_footer_sidebar

一般情况下,WordPress建起来的网站的顶部导航都是在后台建立的页面(Pages),底部导航(需要使用的主题支持)则是空白,侧边栏则是系统默认的文章分类目录,最近文章和评论,功能等等小工具(Widgets)。但我们有时候希望顶部导航还有文章分类,商品分类或者是一个链接;侧边栏不想要最近文章,功能等小工具怎么办呢?这些可以通过自定义WordPress菜单(在外观(Appearance)->菜单(Menu))和小工具(在外观(Appearance)->小工具(Widgets))里面进行调整设置来达到目的。

  • 顶部,底部导航(菜单)

顶部导航(菜单)

  1. 顶部导航自定义是通过点击外观(Appearance)->菜单(Menus)进入自定义顶部导航菜单;
  2. 点击“创建新菜单(create a new menu)”或选择你要编辑的菜单;
  3. 给你新创建的新菜单一个名字,这个名字是用来识别这个菜单的,你可以根据你想要放的位置起个名,然后点击创建菜单(create menu);header_menu_0
  4. 在左边选中页面(Pages),链接(Links),分类目录(Categories),产品目录(Product Categories)注意,你得预先在左侧导航的页面(Pages),文章(Post),产品目录(Product Categories)添加了页面,文章,产品或者产品目录才能在左边有东西可以勾选点击添加至菜单(Add to Menu);header_menu
  5. 在右边拖放各个项目到您喜欢的顺序,还可以拖一个项目到另一个项目的下面做为下级菜单,点击右侧的箭头可进行更详细的设置;
  6. 拖放好顺序后保存菜单,然后指定菜单的位置。add_top_menu_2

底部导航(菜单)

有些主题支持底部菜单,有些不支持,支持底部导航(菜单)的也可以通过像顶部导航那样,为底部导航建立一个菜单,然后把建立好的菜单指定位置为底部菜单即可。

注意:如果在Appearance->Menus中没有Products Categories这些可以添加到菜单的,请在Menus页面中点击右上角的Screen Options,勾选上Products Categories。原来系统默认的(导航)菜单将不会再出现,被新定义的导航菜单替换了。

  • 侧边栏

有些主题支持左右两边侧边栏,有些支持左边或者右边一个侧边栏;侧边栏要放小工具(Widgets)才会显示这个侧边栏;侧边栏上放着各种小工具(Widgets)用来显示分类目录,近期文章和评论,文章归档等等;他们的显示是通过外观(Appearance)->小工具(Widgets)来控制。

  1. 点击外观(Appearance)->小工具(Widgets)进入小工具(Widgets)管理页面;
  2. 点击左边的小工具在出来的选项中把小工具拉到侧边栏,或者直接把这个小工具(Widgets)鼠标按住不放拖到边栏里。sidebar_widgets_1

 

  • 顶部,底部小工具

有些主题支持顶部,底部小工具(Widgets),可以往里面添加些小工具(Widgets),在顶部,底部显示一些按钮,链接,工具等;常用的是使用Text小工具,然后往里面添加代码,来实现一定的效果,如图:

head_widgets

footer_widgets_4

有些主题虽然不支持底部导航,但我们也可以把小工具(Widgets)拖到Footer区域,自定义一个网站底部导航(菜单),如下图,添加文本(Text)小工具:

通过Widgets做个Footer

  1. 点击外观(Appearance)->小工具(Widgets)进入小工具(Widgets)管理页面;
  2. 添加3个文本(Text)小工具到Footer,分别修改Text的标题为 Company,Product,Support;footer_widgets_0
  3. 在Text文本框能添加链接代码 (支持Html代码,链接代码写法为:<a href=”url”>链接的瞄文本</a> ),链接到网站其他页面;footer_widgets_2footer_widgets_3

注意:通过Widgets做底部多栏Footer,还有一个方法:先在外观(Appearance)->菜单(Menus)那里创建几个菜单,分别为Company,Products,Support,添加页面,产品分类等到这几个菜单,保存,不用指定位置;然后在外观(Appearance)->小工具(Widgets)那里,添加三个自定义菜单Custom Menu)小工具加到Footer,每个自定义菜单(Custom Menu)小工具设置分别选择前面创建的Company,Products,Support三个菜单,这样就不用像方法一那样写代码了。

往Header添加Text小工具来做社交媒体分享按钮

  1. 点击外观(Appearance)->小工具(Widgets)进入小工具(Widgets)管理页面;
  2. 添加1个文本(Text)小工具到Header,标题留空;head_widgets_1
  3. 到sharethis.com去获取社交媒体分享按钮代码:head_widgets_7
  4. 把代码添加到Header中的Text小工具文本框中,保存即可;head_widgets_8

效果如下:

head_widgets

总结:

经常我们需要不同的页面显示不同的菜单,侧边栏,在哪些地方去设置呢?请看下面总结:

  1. 外观->菜单,指定菜单位置;
  2. 外观->小工具,添加自定义菜单(custom menus)来指定菜单位置;
  3. 有些主题设置(Themes Options)那里,设置页面使用那些侧边栏来指定菜单位置;
  4. 有些主题,在编辑页面时,可以选择显示哪个侧边栏,来设置侧边栏位置;

 

原创文章,转载请注明: 转载自DIYzhan.com-从零开始自己做外贸网站和海外网络营销
本文链接地址:https://www.diyzhan.com/2014/03/wordpress-header-footer-sidebar/

相关推荐
更多

  1. 木头 2014-7-26 23:16 #1

    大侠 为毛我按照你的方法添加了小工具 也修改了样式 但是底部就是显示不了像你一样的效果 是直的 不是横的

    • 你的是什么主题?你的主题支持底部添加小工具吗?可以往底部添加自定义菜单来实现

长按扫我微信
需要帮助?
点击这里给我发消息