Bootstrap Navbar не работи в темата на Wordpress

Опитвам се да се науча да използвам Bootstrap, за да създам навигационна лента за тема на Wordpress. Просто искам да си направя менюто и да не използвам Navwalker. Използвах прост пример за Bootstrap от W3 училища, но не работи. Ето желаната навигационна лента.

Желан резултат:

Тук имам същия код в заглавката си.

<!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="/bg<?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="/bg<?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="/bg#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
               <li class="active"><a href="/bg#">Home</a></li>
               <li><a href="/bg#">Page 1</a></li>
               <li><a href="/bg#">Page 2</a></li>
               <li><a href="/bg#">Page 3</a></li>
            </ul>
         </div>
      </nav>
      <div class="row">
         hello world
      </div>
      </header>

Ето как изглежда моята навигационна лента

Моят резултат:

Dave Spell 16.09.2018 източник

Отговори (2)

arrow_upward
2
arrow_downward

Опитайте да поставите вашите файлове в опашка чрез функциите на вашата тема, вместо да ги добавяте към вашия 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' );

Community 16.09.2018

arrow_upward
-1
arrow_downward

Ако приемем, че вашият bootstrap css е в директорията на вашата тема под папка css, опитайте да промените връзката на:

<link href="/bg<?php echo get_template_directory_uri(); ?>/css/bootstrap.css" rel="stylesheet">

Jon Bennett 16.09.2018

comment

Това не е начинът, по който скриптовете трябва да се зареждат в WP тема. - Hans; 17.09.2018

comment

Вярно е, но ако погледнете по-горе, някой вече е предложил поставяне на таблицата със стилове в опашка, което е предпочитаният и предложен начин за това, аз предлагах корекция на първоначално използвания метод... - Jon Bennett; 17.09.2018

Bootstrap Navbar не работи в темата на Wordpress

Отговори (2)

Подобни въпроси