0
Hello, My name is Bruno Barreto and I am developing a simple website for a company that intends to sell cosmetics, but I am facing some difficulties when migrating this site to Wordpress(client request.) At first, had building the site only by Bootstrap, I usually created either only in WP or using React.Js+Bootstrap, in this case I decided to migrate the template I had made in Bootstrap to WP; At first everything went well as usual, but when loading the toggle class of Btstrap and dropdown with the Collapse class, WP is unable to interpret, that is, either the menu drop-down button when the screen changes or the dropdown of one of the menu options does not work.
I tried to remedy using what the WP documentation uses, which is to create a function in the file 'functions.php' of my theme in creation, to allow the use of bootstrap navbar, in case the file 'wp-bootstrap-navwalker.php', with this I created how the documentation sends a Function inside the header file 'header.php', with a list of arrays indicating the classes for the navbar; even so it didn’t work.
I saw what the console said and this came up: 'Failed to load Resource: bootstrap.bundle.min.js:1 : the server responded with the server responded with a status of 404 (Not Found)'
and I can’t think why the 404 is on.
follows below the script of 'header.php'e , 'index.php'e 'functions.php'
###########################header################################
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class="container-fluid">
<!----Arte visual-------->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Identitade visual entra aqui!!!!</h1>
<p class="lead">Aqui fica a descrição do baner!!</p>
</div>
</div>
<!----------Menu---->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<?php bloginfo('name'); ?>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Carrinho</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Revendedores</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Produtos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Perfume-1</a>
<a class="dropdown-item" href="#">Perfume-2</a>
<a class="dropdown-item" href="#">Perfume-3</a>
<?php
/* wp_nav_menu(array(
'theme_location' => 'meu_menu',
'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>
</li>
</ul>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Busca">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busca</button>
</form>
</div>
</nav>
</header>
</body>
</html>
############index
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class="container-fluid">
<!----Arte visual-------->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Identitade visual entra aqui!!!!</h1>
<p class="lead">Aqui fica a descrição do baner!!</p>
</div>
</div>
<!----------Menu---->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<?php bloginfo('name'); ?>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Carrinho</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Revendedores</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Produtos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Perfume-1</a>
<a class="dropdown-item" href="#">Perfume-2</a>
<a class="dropdown-item" href="#">Perfume-3</a>
<?php
/* wp_nav_menu(array(
'theme_location' => 'meu_menu',
'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>
</li>
</ul>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Busca">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busca</button>
</form>
</div>
</nav>
</header>
</body>
</html>
####################functions
<?php
require_once get_template_directory() . '\wp-bootstrap-navwalker.php';
register_nav_menus(
array(
'meu_menu' => __('Menu Principal', 'meu-text-domain')
)
);?>
<?php
function themebs_enqueue_styles() {
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'core', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'themebs_enqueue_styles');
function themebs_enqueue_scripts() {
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/vendor/bootstrap.bundle.min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themebs_enqueue_scripts');
?>
Error 404 is pq do not find the file in the path specified in the code, try to check by Devtools where the document request is looking for that file and check the folder
– hugocsl
Without a screenshot, showing the entire directory structure used by you, it is not possible to know if the Urls mounted in your code are really correct. What is clear (but odd) in your code, is a difference of pattern between the CSS path (no "vendor" folder) and the JS path (with "vendor folder").
– aldemarcalazans