我正在尝试将Bootstrap示例站点转换为Wordpress模板并卡在导航中
这是我的导航代码
<
!-- Navigation -->
<
a id="menu-toggle" href="http://www.srcmini.com/#" class="btn btn-dark btn-lg toggle">
<
i class="fa fa-bars">
<
/i>
<
/a>
<
nav id="sidebar-wrapper">
<
ul class="sidebar-nav">
<
a id="menu-close" href="http://www.srcmini.com/#" class="btn btn-light btn-lg pull-right toggle">
<
i class="fa fa-times">
<
/i>
<
/a>
<
li class="sidebar-brand">
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#top">
Start Bootstrap<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#top">
Home<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#about">
About<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#services">
Services<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#portfolio">
Portfolio<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#contact" onclick=$( "#menu-
close").click();
>
Contact<
/a>
<
/li>
<
/ul>
<
/nav>
【将Bootstrap侧边栏菜单添加到wordpress】和我的functions.php
<
?php
function mytheme_setup() {register_nav_menus(
array(
'footer_nav' =>
__( 'Footer Menu', 'bootpress' ), 'top_menu' =>
__( 'Top Menu', 'bootpress' )
));
}
add_action( 'after_setup_theme', 'mytheme_setup' );
require_once('wp_bootstrap_navwalker.php');
function bootstrap_nav()
{
wp_nav_menu( array(
'theme_location'=>
'header-menu', 'depth'=>
2, 'container'=>
'false', 'menu_class'=>
'nav sidebar-nav', 'fallback_cb'=>
'wp_bootstrap_navwalker::fallback', 'walker'=>
new wp_bootstrap_navwalker())
);
}function pwwp_enqueue_my_scripts() {
// jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true);
// all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_scripts');
function pwwp_enqueue_my_styles() {
wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
// this will add the stylesheet from it's default theme location if your theme doesn't already
//wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');
?>
及其显示此输出https://imagebin.ca/v/3aEVBnR3NOjd我是Web开发的新手, 并试图获得有关将Bootstrap模板转换为Wordpress的知识
#1你可能已经找到答案, 但这是我的两分钱:
如果要使用内置菜单功能的WordPress, 则无需创建菜单。因此, 你可以删除:
<
ul class="sidebar-nav">
<
a id="menu-close" href="http://www.srcmini.com/#" class="btn btn-light btn-lg pull-right toggle">
<
i class="fa fa-times">
<
/i>
<
/a>
<
li class="sidebar-brand">
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#top">
Start Bootstrap<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#top">
Home<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#about">
About<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#services">
Services<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#portfolio">
Portfolio<
/a>
<
/li>
<
li>
<
a class="js-scroll-trigger" href="http://www.srcmini.com/#contact" onclick=$( "#menu-
close").click();
>
Contact<
/a>
<
/li>
<
/ul>
实际的Navwalker函数位于你的headerp.php文件中。所以一定要删除
function bootstrap_nav()
{
wp_nav_menu( array(
'theme_location'=>
'header-menu', 'depth'=>
2, 'container'=>
'false', 'menu_class'=>
'nav sidebar-nav', 'fallback_cb'=>
'wp_bootstrap_navwalker::fallback', 'walker'=>
new wp_bootstrap_navwalker())
);
}
从你的functions.php文件。
在WP Bootstrap Navwalker Github页面上, 你的header.php文件应如下所示:
<
nav class="navbar navbar-default" role="navigation">
<
div class="container-fluid">
<
!-- Brand and toggle get grouped for better mobile display -->
<
div class="navbar-header">
<
button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<
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="http://www.srcmini.com/<
?php echo home_url();
?>">
<
?php bloginfo('name');
?>
<
/a>
<
/div>
<
?php
wp_nav_menu( array(
'theme_location'=>
'primary', 'depth'=>
2, 'container'=>
'div', 'container_class'=>
'collapse navbar-collapse', 'container_id'=>
'bs-example-navbar-collapse-1', 'menu_class'=>
'nav navbar-nav', 'fallback_cb'=>
'WP_Bootstrap_Navwalker::fallback', 'walker'=>
new WP_Bootstrap_Navwalker())
);
?>
<
/div>
functions.php中的唯一内容(当然是关于navwalker!)应该是:
<
?php require_once get_template_directory() . '/wp-bootstrap-navwalker.php';
你可以使用header.php中navwalker函数中的类, 就像常规的Bootstrap菜单一样。
该错误似乎是由于实际的navwalker文件不在主题文件夹中引起的。确保wp-bootstrap-navwalker.php文件位于主题文件夹(与functions.php相同的位置)中。如果要将wp-bootstrap-navwalker.php文件放置在其他位置, 请确保更改’ /wp-bootstrap-navwalker.php’ ;即’ path / to / file / wp-bootstrap-navwalker.php’ ; 在functions.php中指向文件。
希望有帮助!
推荐阅读
- 在logo旁边添加其他图像
- bootstrap自定义wordpress菜单的问题
- ACF库中的ACF中继器渲染不正确
- 中继器字段中的ACF多种图像尺寸
- 500内部服务器错误-WordPress htaccess
- 将类别添加到上传的图像媒体-WordPress
- 你无权访问此资源。服务器无法读取htaccess文件,因此拒绝访问是安全的
- 01|被k8s弃用的docker还值得学吗()
- #yyds干货盘点# linux Apache服务器的安装