0

Olá, Meu nome é Bruno Barreto e estou desenvolvendo um simples site para uma empresa que pretende vender cosméticos, porém estou enfrentando algumas dificuldades ao migrar este site para WordPress(pedido do cliente.) A inicio, tinha construindo o site apenas pelo Bootstrap, geralmente eu criava ou apenas em WP ou usando o React.Js+Bootstrap, nesse caso resolvi migrar o template que eu tinha feito em Bootstrap para o WP; A inicio ocorreu tudo bem como de costume, mas ao carregar a classe 'toggle' do Btstrap e dropdown com a classe collapse, o WP não consegue interpretar, ou seja, tanto o Button para recolhimento do menu quando a tela muda ou o Dropdown de uma das opções do menu não funcionam.

Tentei remediar usando o que a documentação do WP utiliza, que é criar uma função no arquivo 'functions.php' do meu tema em criação, para permitir o uso de navbar do bootstrap, no caso o arquivo 'wp-bootstrap-navwalker.php', com isso criei como a documentação manda uma function dentro do arquivo de cabeçalho 'header.php', com uma lista de arrays indicando as classes para o navbar; mesmo assim não funcionou.

Avistei o que o console dizia e apareceu isso: 'Failed to load resource: bootstrap.bundle.min.js:1 : the server responded with the server responded with a status of 404 (Not Found)'

e não acho o porque de está dando o 404.

segue abaixo o script do '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('&laquo;', 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('&laquo;', 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');

?>
2
  • Erro 404 é pq não acho o arquivo no path especificado no código, tente conferir pelo DevTools onde a requisição do documento está procurando esse arquivo e confere a pasta
    – hugocsl
    23/08/2019 às 19:49
  • Sem uma captura de tela, mostrando toda a estrutura de diretórios usada por você, não é possível saber se as URLs montadas no seu código estão realmente corretas. O que é claro (porém esquisito) no seu código, é uma diferença de padrão entre o caminho do CSS (sem pasta "vendor") e o caminho do JS (com pasta "vendor"). 2/07/2021 às 17:56

1 Resposta 1

-2

Use actions e filters do wordpress para enqueue os scripts no seu site. Procure saber mais como funciona o wordpress.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .