{"id":32884,"date":"2024-11-25T16:47:41","date_gmt":"2024-11-25T08:47:41","guid":{"rendered":"https:\/\/fwq.ai\/blog\/32884\/"},"modified":"2024-11-25T16:47:41","modified_gmt":"2024-11-25T08:47:41","slug":"%e5%a6%82%e4%bd%95%e5%b0%86bootstrap%e5%af%bc%e8%88%aa%e6%a0%8f%e9%9b%86%e6%88%90%e5%88%b0wordpress%e4%b8%bb%e9%a2%98%e4%b8%ad","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/32884\/","title":{"rendered":"\u5982\u4f55\u5c06Bootstrap\u5bfc\u822a\u680f\u96c6\u6210\u5230WordPress\u4e3b\u9898\u4e2d"},"content":{"rendered":"<\/p>\n

\u60a8\u662f\u5426\u66fe\u60f3\u52a0\u5feb\u4e3b\u9898\u5f00\u53d1\u8fc7\u7a0b\uff1f\u6211\u8ba4\u4e3a\u7b54\u6848\u662f\u201c\u662f\u201d\uff0c\u5e76\u4e14\u60a8\u5df2\u7ecf\u4e86\u89e3 \u5e76\u5728\u6a21\u578b\u4e2d\u4f7f\u7528\u5b83\u8fdb\u884c\u5f00\u53d1\u3002\u8fd9\u5c31\u63d0\u51fa\u4e86\u4e00\u4e2a\u95ee\u9898\uff1a\u201c\u5982\u4f55\u5c06 bootstrap \u7ec4\u4ef6\u96c6\u6210\u5230 \u4e3b\u9898\u4e2d\uff1f\u201d<\/p>\n

\u672c\u7cfb\u5217\u6559\u7a0b\u5c06\u4ecb\u7ecd\u5982\u4f55\u5c06\u6700\u6d41\u884c\u7684 Bootstrap \u7ec4\u4ef6\u96c6\u6210\u5230 WordPress \u4e3b\u9898\u4e2d\u3002\u8ba9\u6211\u4eec\u4ece Navbar \u7ec4\u4ef6\u5f00\u59cb\uff0c\u5b83\u53ef\u4ee5\u8f7b\u677e\u521b\u5efa\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f\u3002\u4e3a\u4e86\u4f7f\u672c\u6559\u7a0b\u6613\u4e8e\u7406\u89e3\uff0c\u6211\u5c06\u4f7f\u7528\u4e00\u4e2a\u4ec5\u5305\u542b\u5fbd\u6807\u548c\u83dc\u5355\u7684\u5bfc\u822a\u680f\u3002<\/p>\n

\n

1.<\/span> \u4f7f\u7528 Bootstrap \u6846\u67b6\u7f16\u5199\u5bfc\u822a\u680f<\/h2>\n

\u4ee5\u4e0b\u662f Bootstrap \u6587\u6863\u9875\u9762\u7684\u6e90\u4ee3\u7801\uff1a<\/p>\n

<nav class=\"navbar navbar-default\" role=\"navigation\"><!-- Brand and toggle get grouped for better mobile display --><div class=\"navbar-header\"> \n    <button type=\"button\" class=\"navbar-toggle\" data-toggle=\"collapse\" data-target=\".navbar-ex1-collapse\"> \n      <span class=\"sr-only\">Toggle navigation<\/span> \n      <span class=\"icon-bar\"><\/span> \n      <span class=\"icon-bar\"><\/span> \n      <span class=\"icon-bar\"><\/span> \n    <\/button> \n    <a class=\"navbar-brand\" href=\"#\">Brand<\/a> \n  <\/div> \n  <!-- Collect the nav links, forms, and other content for toggling --> \n  <div class=\"collapse navbar-collapse navbar-ex1-collapse\"> \n    <ul class=\"nav navbar-nav\">\n<li class=\"active\"><a href=\"#\">Link<\/a><\/li> \n      <li><a href=\"#\">Link<\/a><\/li> \n      <li class=\"dropdown\"> <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">Dropdown <b class=\"caret\"><\/b><\/a> \n        <ul class=\"dropdown-menu\">\n<li><a href=\"#\">Action<\/a><\/li> \n          <li><a href=\"#\">Another action<\/a><\/li> \n          <li><a href=\"#\">Something else here<\/a><\/li> \n          <li><a href=\"#\">Separated link<\/a><\/li> \n          <li><a href=\"#\">One more separated link<\/a><\/li> \n        <\/ul>\n<\/li> \n    <\/ul>\n<\/div>\n<\/nav><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u8ba9\u6211\u4eec\u4ed4\u7ec6\u770b\u770b\u4ee3\u7801\u5e76\u6f84\u6e05\u4e00\u4e9b\u4e8b\u60c5\uff0c\u4ee5\u4fbf\u66f4\u597d\u5730\u7406\u89e3\u672c\u6559\u7a0b\u7684\u4e0b\u4e00\u90e8\u5206\u3002<\/p>\n
<nav role=\"navigation\">\u2026<\/nav><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5305\u88c5\u5668<\/em> – \u4e00\u4e2a <\/p>\n
 \u6807\u7b7e\uff0c\u5176\u7c7b\u4e3a\u201cnavbar\u201d\uff0c\u89d2\u8272\u4e3a\u201cnavigation\u201d\uff0c\u5305\u88c5\u4e86\u5bfc\u822a\u680f\u7684\u5168\u90e8\u5185\u5bb9\u3002 <\/p>\n
<div class=\"navbar-header\">\u2026<\/div>\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u6807\u9898<\/em> \u2013 \u4e00\u4e2a <\/p>\n
 \uff0c\u5176\u7c7b\u4e3a\u201cnavbar-header\u201d\uff0c\u5728\u4efb\u4f55\u5c3a\u5bf8\u7684\u5c4f\u5e55\u4e0a\u90fd\u53ef\u89c1\u3002 <\/p>\n
<button class=\"navbar-toggle\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-ex1-collapse\">\u2026<\/button>\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5207\u6362\u6309\u94ae<\/em> – \uff0c\u4ee3\u8868\u5c0f\u5c4f\u5e55\u4e0a\u6298\u53e0\u7684\u5185\u5bb9\uff1b\u6b64\u6309\u94ae\u662f\u5fc5\u987b\u7684\uff0c\u4f46\u60a8\u53ef\u4ee5\u66f4\u6539\u5176\u4e2d\u7684\u5185\u5bb9\u3002<\/p>\n
<a class=\"navbar-brand\" href=\"#\">Brand<\/a>\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u54c1\u724c<\/em> \u2013 \u5e26\u6709\u5fbd\u6807\u7684\u94fe\u63a5\uff1b\u5b83\u662f\u53ef\u9009\u7684\uff0c\u60a8\u53ef\u4ee5\u5728\u6b64\u5904\u7701\u7565\u5b83\u5e76\u5c06\u5176\u5305\u542b\u5728\u5176\u4ed6\u5730\u65b9\u3002<\/p>\n
<div class=\"collapse navbar-collapse navbar-ex1-collapse\">\u2026<\/div>\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u53ef\u6298\u53e0\u5185\u5bb9<\/em> – \u5177\u6709\u201ccollapse\u201d\u7c7b\u548c\u201cnavbar-collapse\u201d\u7c7b\u7684 <\/p>\n
 \uff1b\u5b83\u5305\u542b\u5e94\u5728\u5c0f\u5c4f\u5e55\u4e0a\u6298\u53e0\u7684\u6240\u6709\u5185\u5bb9\u3002 <\/p>\n
<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \n  \u2026\n<\/ul>\n
    \u83dc\u5355<\/em> \u2013 \u4e00\u4e2a <\/p>\n
      \n  \uff0c\u5176\u7c7b\u4e3a\u201cnav navbar-nav\u201d\uff0c\u4ee3\u8868\u7ad9\u70b9\u5bfc\u822a\u3002 <\/p>\n
      \n
       2.<\/span>\u5c06\u6a21\u578b\u96c6\u6210\u5230\u6a21\u677f\u4e2d<\/h2>\n
      \u6b64\u6b65\u9aa4\u5047\u8bbe\u60a8\u5df2\u5b89\u88c5 WordPress \u5e76\u4e14\u60a8\u6b63\u5728\u5f00\u53d1\u7684\u4e3b\u9898\u5df2\u6fc0\u6d3b\u3002<\/p>\n
      2.1\u3002\u4e3a\u83dc\u5355\u51c6\u5907\u4e3b\u9898<\/h3>\n
      \u6253\u5f00\u60a8\u7684 functions.php<\/strong> \u6587\u4ef6\u5e76\u6ce8\u518c\u60a8\u7684\u5bfc\u822a\uff08\u5982\u679c\u5c1a\u672a\u6ce8\u518c\uff09\u3002<\/p>\n<\/ul>\n
      <?php \/* Theme setup *\/\nadd_action( 'after_setup_theme', 'wpt_setup' );\n    if ( ! function_exists( 'wpt_setup' ) ):\n        function wpt_setup() {\t\n            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );\n        } endif;\n?><\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u6ce8\u518c\u5f15\u5bfc\u6587\u4ef6\u548c jQuery\uff1a<\/p>\n
      function wpt_register_js() {\n\twp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '\/js\/bootstrap.min.js', 'jquery');\n\twp_enqueue_script('jquery.bootstrap.min');\n}\nadd_action( 'init', 'wpt_register_js' );\nfunction wpt_register_css() {\n\twp_register_style( 'bootstrap.min', get_template_directory_uri() . '\/css\/bootstrap.min.css' );\n\twp_enqueue_style( 'bootstrap.min' );\n}\nadd_action( 'wp_enqueue_scripts', 'wpt_register_css' );\n<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u4ece GitHub \u4e0b\u8f7d Edward McIntyre \u7684 wp-bootstrap-navwalker \u7c7b\u3002\u5c06\u6587\u4ef6\u653e\u5165\u4e3b\u9898\u6839\u6587\u4ef6\u5939\u4e2d\u3002\u8fd4\u56de\u5230\u60a8\u7684 functions.php<\/strong> \u5e76\u7c98\u8d34\u4ee5\u4e0b\u4ee3\u7801\uff1a<\/p>\n
      <?php \/\/ Register custom navigation walker\n\trequire_once('wp_bootstrap_navwalker.php');\n?><\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      2.2\u3002\u5728\u540e\u7aef\u521b\u5efa\u83dc\u5355<\/h3>\n
      \u5bfc\u822a\u5230\u60a8\u7684 WordPress \u7f51\u7ad9\u540e\u7aefAppearance->Menu<\/strong>\u3002\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a\u201cPrimary\u201d\u7684\u65b0\u83dc\u5355\u5e76\u5411\u5176\u4e2d\u6dfb\u52a0\u9879\u76ee\u3002\u8f6c\u5230\u7ba1\u7406\u4f4d\u7f6e<\/strong>\u9009\u9879\u5361\uff0c\u5e76\u4e3a\u540d\u4e3a\u201c\u4e3b\u8981\u201d\u7684\u4e3b\u9898\u4f4d\u7f6e\u6307\u5b9a\u83dc\u5355\u201c\u4e3b\u8981\u201d\u3002\u4fdd\u5b58\u66f4\u6539\u3002<\/p>\n
      \"\u5982\u4f55\u5c06Bootstrap\u5bfc\u822a\u680f\u96c6\u6210\u5230WordPress\u4e3b\u9898\u4e2d\u63d2\u56fe\"
      \n\"\u5982\u4f55\u5c06Bootstrap\u5bfc\u822a\u680f\u96c6\u6210\u5230WordPress\u4e3b\u9898\u4e2d\u63d2\u56fe1\"
      \n\"\u5982\u4f55\u5c06Bootstrap\u5bfc\u822a\u680f\u96c6\u6210\u5230WordPress\u4e3b\u9898\u4e2d\u63d2\u56fe2\" WordPress\u83dc\u5355\u7ba1\u7406\u9875\u9762 <\/p>\n
      2.3\u3002\u5c06\u5bfc\u822a\u680f\u6a21\u578b\u96c6\u6210\u5230\u6a21\u677f\u4e2d<\/h3>\n
      \u6253\u5f00\u60a8\u7684 header.php<\/strong> \u5e76\u5c06\u5bfc\u822a\u680f\u6a21\u578b\u590d\u5236\u5e76\u7c98\u8d34\u5230\u60a8\u5e0c\u671b\u5176\u663e\u793a\u7684\u4f4d\u7f6e\u3002\u73b0\u5728\u6211\u4eec\u7528 WordPress \u7684\u6a21\u677f\u529f\u80fd\u66ff\u6362\u90e8\u5206\u6a21\u578b\u3002\u9996\u5148\u653e\u7f6e\u5fbd\u6807\u7684\u6b63\u786e\u94fe\u63a5\u3002\u66f4\u6539\u6b64\u884c\uff1a<\/p>\n
      <a class=\"navbar-brand\" href=\"#\">Brand<\/a>\n<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u81f3\uff1a<\/p>\n
      <a class=\"navbar-brand\" href=\"&lt;?php%20bloginfo('url')?&gt;\"><?php bloginfo('name')?><\/a>\n<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u4e0b\u4e00\u6b65\u662f\u4ece\u540e\u7aef\u8f93\u51fa\u83dc\u5355\u800c\u4e0d\u662f\u6a21\u578b\u83dc\u5355\u3002\u5bf9\u4e8e\u8fd9\u4e9b\u884c\uff1a<\/p>\n
      <\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
        \n
      • <\/li>\n
      • <\/li>\n
      • \n
          \n
        • <\/li>\n
        • <\/li>\n
        • <\/li>\n
        • <\/li>\n
        • <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
          \u4e0e\uff1a<\/p>\n
          <?php \/* Primary navigation *\/ \nwp_nav_menu( array(\n  'menu' => 'top_menu',\n  'depth' =&gt; 2,\n  'container' =&gt; false,\n  'menu_class' =&gt; 'nav',\n  \/\/Process nav menu using our custom nav walker\n  'walker' =&gt; new wp_bootstrap_navwalker())\n);\n?&gt;\n<\/pre>\n
           \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
          \u73b0\u5728\u60a8\u5df2\u5c06\u5f15\u5bfc\u5bfc\u822a\u680f\u7ec4\u4ef6\u96c6\u6210\u5230\u60a8\u7684\u4e3b\u9898\u4e2d\u3002<\/p>\n
          \n
          \u7ed3\u8bba<\/h2>\n
          \u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u6211\u4eec\u7814\u7a76\u4e86\u5982\u4f55\u5c06\u4f7f\u7528 Bootstrap CSS \u6846\u67b6\u521b\u5efa\u7684\u5bfc\u822a\u680f\u96c6\u6210\u5230 WordPress \u4e3b\u9898\u4e2d\u3002\u8981\u52a0\u5feb\u4e3b\u9898\u5f00\u53d1\u901f\u5ea6\uff0c\u60a8\u53ea\u9700\u4e0b\u8f7d\u6e90\u6587\u4ef6\u5e76\u5c06\u5176\u7c98\u8d34\u5230\u60a8\u7684\u4e3b\u9898\u4e2d\u5373\u53ef\u3002<\/p>\n
          \u60a8\u8fd8\u53ef\u4ee5\u5728 Envato Market \u4e0a\u627e\u5230\u4e00\u4e9b\u5f88\u68d2\u7684 Bootstrap \u4e3b\u9898\u548c\u6a21\u677f\uff0c\u4f8b\u5982 Neon Bootstrap \u7ba1\u7406\u6a21\u677f\u6216 Selphy Electronics \u7535\u5b50\u5546\u52a1 Boostrap \u6a21\u677f\u3002<\/p>\n
          \"\u5982\u4f55\u5c06Bootstrap\u5bfc\u822a\u680f\u96c6\u6210\u5230WordPress\u4e3b\u9898\u4e2d\u63d2\u56fe3\"<\/p>\n
          \u4ee5\u4e0a\u5c31\u662f\u5982\u4f55\u5c06Bootstrap\u5bfc\u822a\u680f\u96c6\u6210\u5230WordPress\u4e3b\u9898\u4e2d\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
          \u60a8\u662f\u5426\u66fe\u60f3\u52a0\u5feb\u4e3b\u9898\u5f00\u53d1\u8fc7\u7a0b\uff1f\u6211\u8ba4\u4e3a\u7b54\u6848\u662f\u201c\u662f\u201d\uff0c\u5e76\u4e14\u60a8\u5df2\u7ecf\u4e86\u89e3 \u5e76\u5728\u6a21\u578b\u4e2d\u4f7f\u7528\u5b83\u8fdb\u884c\u5f00\u53d1\u3002\u8fd9\u5c31\u63d0\u51fa\u4e86\u4e00\u4e2a\u95ee\u9898\uff1a\u201c\u5982\u4f55\u5c06 bootstrap \u7ec4\u4ef6\u96c6\u6210\u5230 \u4e3b\u9898\u4e2d\uff1f\u201d \u672c\u7cfb\u5217\u6559\u7a0b\u5c06\u4ecb\u7ecd\u5982\u4f55\u5c06\u6700\u6d41\u884c\u7684 Bootstrap \u7ec4\u4ef6\u96c6\u6210\u5230 WordPress \u4e3b\u9898\u4e2d\u3002\u8ba9\u6211\u4eec\u4ece Navbar \u7ec4\u4ef6\u5f00\u59cb\uff0c\u5b83\u53ef\u4ee5\u8f7b\u677e\u521b\u5efa\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f\u3002\u4e3a\u4e86\u4f7f\u672c\u6559\u7a0b\u6613\u4e8e\u7406\u89e3\uff0c\u6211\u5c06\u4f7f\u7528\u4e00\u4e2a\u4ec5\u5305\u542b\u5fbd\u6807\u548c\u83dc\u5355\u7684\u5bfc\u822a\u680f\u3002 1. \u4f7f\u7528 Bootstrap \u6846\u67b6\u7f16\u5199\u5bfc\u822a\u680f \u4ee5\u4e0b\u662f Bootstrap \u6587\u6863\u9875\u9762\u7684\u6e90\u4ee3\u7801\uff1a <nav class=”navbar navbar-default” role=”navigation”><!– Brand and toggle get grouped for better mobile display –><div class=”navbar-header”> <button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-ex1-collapse”> <span class=”sr-only”>Toggle navigation<\/span> <span class=”icon-bar”><\/span> <span class=”icon-bar”><\/span> <span class=”icon-bar”><\/span> <\/button> <a class=”navbar-brand” href=”#”>Brand<\/a> <\/div> <!– Collect […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-32884","post","type-post","status-publish","format-standard","hentry","category-cms"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=32884"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32884\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=32884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=32884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=32884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}