引导导航栏在Wordpress主题中不工作
我试图学习使用引导为Wordpress主题创建导航栏。我只想做菜单,不想用Navwalker。我使用了一个来自W3学校的简单引导示例,但它不起作用。这是所需的导航栏 预期结果: 在这里,我的头中有相同的代码引导导航栏在Wordpress主题中不工作,wordpress,twitter-bootstrap-3,themes,navbar,Wordpress,Twitter Bootstrap 3,Themes,Navbar,我试图学习使用引导为Wordpress主题创建导航栏。我只想做菜单,不想用Navwalker。我使用了一个来自W3学校的简单引导示例,但它不起作用。这是所需的导航栏 预期结果: 在这里,我的头中有相同的代码 <!doctype html> <html <?php language_attributes();?>> <head> <meta charset="<?php bloginfo('charset'); ?&g
<!doctype html>
<html <?php language_attributes();?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="<?php bloginfo('description'); ?>">
<title><?php bloginfo('name'); ?> |
<?php is_front_page() ? bloginfo('description') : wp_title(); ?>
</title>
<!-- Bootstrap core CSS -->
<link href="<?php bloginfo('template_url');?>/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
<link href="<?php bloginfo('stylesheet_url')?>" rel="stylesheet">
<?php wp_head(); ?> <!-- This adds other information like plugins to the head -->
</head>
<body>
<div class="container">
<div class="row">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="row">
hello world
</div>
</header>
尝试通过主题函数将文件排队,而不是将它们添加到header.php
// Load main files
function enqueue_styles_and_scripts() {
// Bootstrap
wp_enqueue_style ('bootstrap_css', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
wp_enqueue_script ('bootstrap_js', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery'), 1.1, true );
// Main files
wp_enqueue_style ('style_css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script ('main_js', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), 1.1, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_and_scripts' );
假设引导css位于css文件夹下的主题目录中,请尝试将链接更改为:
<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css" rel="stylesheet">
这不是在WP主题中加载脚本的方式。是的,但是如果你看上面有人已经建议将样式表排队,这是首选的和建议的方法,我正在提供一个对最初使用的方法的修复。。。