WordPress教程:输出Bootstrap结构的导航栏菜单

前端之家收集整理的这篇文章主要介绍了WordPress教程:输出Bootstrap结构的导航栏菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

站长朋友们在使用的过程中,当做成自适应网站,引入Bootstrap框架的时候,希望可以输出Bootstrap结构的导航栏菜单,这样就够利用Bootstrap提供的样式进行菜单的显示。这篇WordPress教程里我们就向大家介绍一下如何在wordpress网站中输出Bootstrap结构的菜单。

我们先来看一下Bootstrap导航栏结构HTML代码:

Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-4">Crayon-i "> Crayon-r ">
Crayon-line" id="Crayon-5c891cff2528d566379863-5">Crayon-i "> Crayon-r ">
Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-6">Crayon-i "> Crayon-r ">
    Crayon-e ">classCrayon-o">=Crayon-s ">"nav navbar-nav"
Crayon-line" id="Crayon-5c891cff2528d566379863-7">Crayon-i "> Crayon-r ">
  • Crayon-e ">classCrayon-o">=Crayon-s ">"active"Crayon-r ">Crayon-r ">
  • Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-8">Crayon-i "> Crayon-r ">
  • Crayon-r ">Crayon-r ">
  • Crayon-line" id="Crayon-5c891cff2528d566379863-9">Crayon-i "> Crayon-r ">
  • Crayon-e ">classCrayon-o">=Crayon-s ">"dropdown"
  • Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-10">Crayon-i "> Crayon-r ">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-14">Crayon-i "> Crayon-r ">
      Crayon-e ">classCrayon-o">=Crayon-s ">"dropdown-menu"
    Crayon-line" id="Crayon-5c891cff2528d566379863-15">Crayon-i "> Crayon-r ">
  • Crayon-r ">Crayon-r ">
  • Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-16">Crayon-i "> Crayon-r ">
  • Crayon-r ">Crayon-r ">
  • Crayon-line" id="Crayon-5c891cff2528d566379863-17">Crayon-i "> Crayon-r ">
  • Crayon-r ">Crayon-r ">
  • Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-18">Crayon-i "> Crayon-r ">
  • Crayon-r ">Crayon-r ">
  • Crayon-line" id="Crayon-5c891cff2528d566379863-19">Crayon-i "> Crayon-r ">
  • Crayon-r ">Crayon-r ">
  • Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-20">Crayon-i "> Crayon-r ">
  • Crayon-r ">Crayon-r ">
  • Crayon-line" id="Crayon-5c891cff2528d566379863-21">Crayon-i "> Crayon-r ">
  • Crayon-r ">Crayon-r ">
  • Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-22">Crayon-i "> Crayon-r ">
    Crayon-line" id="Crayon-5c891cff2528d566379863-23">Crayon-i "> Crayon-r ">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-24">Crayon-i "> Crayon-r ">
    Crayon-line" id="Crayon-5c891cff2528d566379863-25">Crayon-i "> Crayon-r ">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2528d566379863-26">Crayon-r ">

    wordpress一般采用wp_nav_menu函数输出导航栏菜单,而通过该函数输出菜单是得不到上述的html结构的。可喜的是wp_nav_menu函数支持自定义输出html结构。

    wordpress中wp_nav_menu函数的参数如下所示:

    Crayon-5c891cff25298031844818" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
    Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">
    Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">
    Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
    Crayon-button-icon">
    Crayon-button Crayon-plain-button" title="Toggle Plain Code">
    Crayon-button-icon">
    Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
    Crayon-button-icon">
    Crayon-button Crayon-expand-button" title="Expand Code">
    Crayon-button-icon">
    Crayon-button Crayon-copy-button" title="Copy">
    Crayon-button-icon">
    Crayon-button Crayon-popup-button" title="Open Code In New Window">
    Crayon-button-icon">
    Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
    Crayon-plain-wrap">
    Crayon-main" style="">Crayon-table">Crayon-row">
    Crayon-nums " data-settings="show">
    Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
    Crayon-num" data-line="Crayon-5c891cff25298031844818-1">1
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-2">2
    Crayon-num" data-line="Crayon-5c891cff25298031844818-3">3
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-4">4
    Crayon-num" data-line="Crayon-5c891cff25298031844818-5">5
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-6">6
    Crayon-num" data-line="Crayon-5c891cff25298031844818-7">7
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-8">8
    Crayon-num" data-line="Crayon-5c891cff25298031844818-9">9
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-10">10
    Crayon-num" data-line="Crayon-5c891cff25298031844818-11">11
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-12">12
    Crayon-num" data-line="Crayon-5c891cff25298031844818-13">13
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-14">14
    Crayon-num" data-line="Crayon-5c891cff25298031844818-15">15
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-16">16
    Crayon-num" data-line="Crayon-5c891cff25298031844818-17">17
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-18">18
    Crayon-num" data-line="Crayon-5c891cff25298031844818-19">19
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff25298031844818-20">20
    Crayon-num" data-line="Crayon-5c891cff25298031844818-21">21
    Crayon-code">
    Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    Crayon-line" id="Crayon-5c891cff25298031844818-1">Crayon-ta">PHPCrayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-2">Crayon-h"> Crayon-v">$defaultsCrayon-h"> Crayon-o">=Crayon-h"> Crayon-t">arrayCrayon-sy">(Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-3">Crayon-h"> Crayon-s">'theme_location'Crayon-h">Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-4">Crayon-h"> Crayon-s">'menu'Crayon-h">Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-5">Crayon-h"> Crayon-s">'container'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">'div'Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-6">Crayon-h"> Crayon-s">'container_class'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-7">Crayon-h"> Crayon-s">'container_id'Crayon-h">Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-8">Crayon-h"> Crayon-s">'menu_class'Crayon-h">Crayon-o">=Crayon-h"> Crayon-s">'menu'Crayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-9">Crayon-h"> Crayon-s">'menu_id'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-10">Crayon-h"> Crayon-s">'echo'Crayon-h">Crayon-o">=Crayon-h"> Crayon-t">trueCrayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-11">Crayon-h"> Crayon-s">'fallback_cb'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">'wp_page_menu'Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-12">Crayon-h"> Crayon-s">'before'Crayon-h">Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-13">Crayon-h"> Crayon-s">'after'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-14">Crayon-h"> Crayon-s">'link_before'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-15">Crayon-h"> Crayon-s">'link_after'Crayon-h">Crayon-o">=Crayon-h"> Crayon-s">''Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-16">Crayon-h"> Crayon-s">'items_wrap'Crayon-h">Crayon-o">=Crayon-h"> Crayon-s">'
      'Crayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-17">Crayon-h"> Crayon-s">'depth'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-cn">0Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-18">Crayon-h"> Crayon-s">'walker'Crayon-h">Crayon-o">=Crayon-h"> Crayon-s">''Crayon-h">
    Crayon-line" id="Crayon-5c891cff25298031844818-19">Crayon-h"> Crayon-sy">)Crayon-sy">;Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff25298031844818-20">Crayon-h"> Crayon-e">wp_nav_menuCrayon-sy">(Crayon-h"> Crayon-v">$defaultsCrayon-h"> Crayon-sy">)Crayon-sy">;
    Crayon-line" id="Crayon-5c891cff25298031844818-21">

    我们要修改的是walker参数。

    1. 切换到主题目录,打开functions.PHP文件,加入以下代码

    Crayon-5c891cff2529a927894366" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
    Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">functions.PHP
    Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">
    Crayon-button Crayon-nums-button" title="Toggle Line Numbers">
    Crayon-button-icon">
    Crayon-button Crayon-plain-button" title="Toggle Plain Code">
    Crayon-button-icon">
    Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">
    Crayon-button-icon">
    Crayon-button Crayon-expand-button" title="Expand Code">
    Crayon-button-icon">
    Crayon-button Crayon-copy-button" title="Copy">
    Crayon-button-icon">
    Crayon-button Crayon-popup-button" title="Open Code In New Window">
    Crayon-button-icon">
    Crayon-language">PHP
    Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">
    Crayon-plain-wrap">
    Crayon-main" style="">Crayon-table">Crayon-row">
    Crayon-nums " data-settings="show">
    Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-1">1
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-2">2
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-3">3
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-4">4
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-5">5
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-6">6
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-7">7
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-8">8
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-9">9
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-10">10
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-11">11
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-12">12
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-13">13
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-14">14
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-15">15
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-16">16
    Crayon-num" data-line="Crayon-5c891cff2529c774914483-17">17
    Crayon-num Crayon-striped-num" data-line="Crayon-5c891cff2529c774914483-18">18
    Crayon-code">
    Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    Crayon-line" id="Crayon-5c891cff2529c774914483-1">Crayon-o"><Crayon-e">nav Crayon-t">classCrayon-o">=Crayon-s">"navbar navbar-default"Crayon-h"> Crayon-v">roleCrayon-o">=Crayon-s">"navigation"
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-2">Crayon-h"> Crayon-o"><Crayon-e">div Crayon-t">classCrayon-o">=Crayon-s">"navbar-header"
    Crayon-line" id="Crayon-5c891cff2529c774914483-3">Crayon-h"> Crayon-o"><Crayon-i">aCrayon-h"> Crayon-t">classCrayon-o">=Crayon-s">"navbar-brand"Crayon-h"> Crayon-v">hrefCrayon-o">=Crayon-s">"#"Crayon-e">TENNFYCrayon-h"> Crayon-e">WUCrayon-o"><Crayon-o">/Crayon-e">a
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-4">Crayon-h"> Crayon-o"><Crayon-o">/Crayon-e">div
    Crayon-line" id="Crayon-5c891cff2529c774914483-5">Crayon-h"> Crayon-o"><Crayon-e">div
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-6">Crayon-h"> Crayon-ta">PHPCrayon-h">
    Crayon-line" id="Crayon-5c891cff2529c774914483-7">Crayon-h"> Crayon-e">wp_nav_menuCrayon-sy">(Crayon-h"> Crayon-t">arrayCrayon-sy">(Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-8">Crayon-h"> Crayon-s">'theme_location'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">'cat_nav'Crayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff2529c774914483-9">Crayon-h"> Crayon-s">'depth'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-cn">2Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-10">Crayon-h"> Crayon-s">'container'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-t">falseCrayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff2529c774914483-11">Crayon-h"> Crayon-s">'menu_class'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">'nav navbar-nav'Crayon-sy">,Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-12">Crayon-h"> Crayon-s">'fallback_cb'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-s">'wp_page_menu'Crayon-sy">,Crayon-h">
    Crayon-line" id="Crayon-5c891cff2529c774914483-13">Crayon-h"> Crayon-c">//添加或更改walker参数
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-14">Crayon-h"> Crayon-s">'walker'Crayon-h"> Crayon-o">=Crayon-h"> Crayon-r">newCrayon-h"> Crayon-e">wp_bootstrap_navwalkerCrayon-sy">(Crayon-sy">)Crayon-sy">)Crayon-h">
    Crayon-line" id="Crayon-5c891cff2529c774914483-15">Crayon-h"> Crayon-sy">)Crayon-sy">;Crayon-h">
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-16">Crayon-h">
    Crayon-line" id="Crayon-5c891cff2529c774914483-17">Crayon-h"> Crayon-o"><Crayon-o">/Crayon-v">div
    Crayon-line Crayon-striped-line" id="Crayon-5c891cff2529c774914483-18">Crayon-o"><Crayon-o">/Crayon-v">nav

    猜你在找的wordpress相关文章