0

Tengo una pagina con mas de 250 paginas, en las cuales me serviría utilizar el include y colocar dicho header y footer.

El punto es el siguiente, tengo dicho header y footer en la pagina, en el index me cargan perfecto, con su style, imagenes y todo en su lugar, a la hora de entrar a la carpeta de "categorías" y cargar dicho header y footer me carga solo el codigo html y no con su style ni imagenes (Cosa que esta incluido dentro del header y el footer original que estoy llamando).

La idea/pregunta es se puede logar que con solo tener un header y un footer se llegue a cargar en diferentes carpetas llamándolo con el include o requiere?

Paso parte del codigo del header y sus ubicaciones y como lo estoy llamando...

Index que carga perfecto

Index Skin (Carpeta contenedora)(header.php / footer.php)

    <!DOCTYPE html>
    <html lang="es">
    
        <?php include ("Skin/header.php") ?>
        <?php include ("Skin/categoria.php") ?>
        
        <?php include ("Skin/nuevos.php") ?>   
        <?php include ("Skin/destacados.php") ?>   
            
            <p class="VM"><a href="Categorias/Categorias">Ver todas las categorias</a></p>
    
        <?php include ("Skin/carrucel.php") ?>
        
        <?php include ("Skin/footer.php") ?>
    
    
        </body>
    </html>

Aquí empieza el problema

El section esta vacio para no poner código de mas....

El punto es que ahora tomo el archivo header.php y footer.php de la misma carpeta y no carga su style ni imagenes (Cosa que esta escrito dentro del mismo)

<!DOCTYPE html>
<html lang="es">
    
    <?php include '../Skin/header.php';?> 
    <link rel="stylesheet" href="../css/style.css">
       
    
<!-- /HEADER -->

        <!-- SECTION -->
        <div class="section">
            <!-- container -->
        </div>
        <!-- /SECTION -->
<br><br>
        
<!--/Sub Footer-->
    <?php include '../Skin/footer.php';?> 
    
        <!-- jQuery Plugins -->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/slick.min.js"></script>
        <script src="js/nouislider.min.js"></script>
        <script src="js/jquery.zoom.min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

Archivo header.php

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="TorniShop, TruckShop, Repuestos, Tornilleria, Ferreteria industrial, Repuesto camiones"/>
  
  <!-- EVITAR CACHE -->
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Last-Modified" content="0">
  <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
  <meta http-equiv="Pragma" content="no-cache">
   <!-- EVITAR CACHE -->
   
  <title>TorniShop | TruckShop, Repuestos, Tornilleria, Ferreteria industrial, Repuesto camiones</title>
  <link rel="icon" href="img/icon/Ts.png">

        <!-- Google font -->
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">

        <!-- jQuery Plugins -->
        <script src="js/js/jquery.min.js"></script>
        
        <!-- Font Awesome Icon -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link href="https://file.myfontastic.com/9FNtGvFZYgKtdCoP5J8xHf/icons.css" rel="stylesheet">

        <!-- Custom stlylesheet -->

        <link href="css/Bootstrap/bootstrap.css" rel="stylesheet">
        <link href="css/Bootstrap/animate.css" rel="stylesheet">
        <link href="css/Bootstrap/bootstrap-theme.css" rel="stylesheet">
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="js/buscar.js"></script>
       
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176776839-1"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'UA-176776839-1');
        </script>
   
   
    </head>
    <body id="fix">    

        <!-- Google Tag Manager (noscript) -->
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PDG96ZK"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <!-- End Google Tag Manager (noscript) -->
    

    <header class="headerr">
        <div class="containerM">
        <div class="btn-menu1">
            <label class="btn-label" for="btn-menu1">☰</label>
        </div>
            <div class="logo">
                <h1><a href="index"><img src="img/icon/Ts.png" alt=""></a></h1>
            </div>
       
                        <div class="iconB" id="iconB"></div>  
        <div>
                   
            <nav class="menuu">
                <a href="index" class="active">Home</a>
                <a href="Categorias/Categorias">Categorias</a>
                <a href="Contacto/contacto">Contacto</a>
                <a href="Catalogo/Solicitud-Cat">Catalogo</a>
                <a id="action-list-1" href="https://www.google.com/maps/dir//TORNISHOP+repuestos+-+tornilleria+-+ferreteria+industrial/data=!4m8!4m7!1m0!1m5!1m1!1s0x95a1d2a2c4acb877:0x273ef70e59ff68a5!2m2!1d-56.223701899999995!2d-34.7340471" target="_blank" data-tracking-element-type="5" jslog="// LINT.IfChange(PostCTAType)56039; track:impression,click" itemprop="hasMap" data-enable-ga="true" data-ga-prefix="action-list">Cómo llegar</a>
            </nav>
        </div>
        </div>
    </header>
    
    <div class="capa"></div>
<!--    --------------->
<input type="checkbox" id="btn-menu1">
<div class="container-menu1">
    <div class="cont-menu1">
        <nav class="MDesp">
            <a href="index" class="activee">Home</a>
            <a href="Categorias/Categorias">Categorias</a>
            <a href="Contacto/contacto">Contacto</a>
            <a href="Catalogo/Solicitud-Cat">Catalogo</a>
            <a id="action-list-2" href="https://www.google.com/maps/dir//TORNISHOP+repuestos+-+tornilleria+-+ferreteria+industrial/data=!4m8!4m7!1m0!1m5!1m1!1s0x95a1d2a2c4acb877:0x273ef70e59ff68a5!2m2!1d-56.223701899999995!2d-34.7340471" target="_blank" data-tracking-element-type="5" jslog="// LINT.IfChange(PostCTAType)56039; track:impression,click" itemprop="hasMap" data-enable-ga="true" data-ga-prefix="action-list">Cómo llegar</a>
        </nav>
        <label class="btn-label" for="btn-menu1">✖️</label>
    </div>
</div>

       
        <div class="searchh" id="searchh" >
          <div class="inputFB">
           <input class="inputB" type="text" name="termino" id="termino" placeholder="Buscar por OEM / Codigo / Nombre" aria-label="Search">
          </div>
       </div>
               
               <script>
                   
                   
                     $(document).ready(function(){
                           Act1(); 
                           Act2(); 

                      });
                   
                        function Act1(){
                            $('#iconB').on('click', function(event) {
                                $('#iconB').toggleClass('activa');
                                $('#searchh').toggleClass('activo');
                                $('#bgg').toggleClass('bggA');
                                $('#fix').toggleClass('fix');
                                $('#termino').toggle('show');
                                $('#TablaB').toggle('show');
                                $('#termino').val('');
                            });
                        };
                   
                            $(document).keyup(function(e){
                                if(e.which==27) {
                                    $('.iconB.activa').click();
                                }
                       })
                        
                        function Act2(){
                            $('#clear').on('click', function(event) {
                                $('#iconB').toggleClass('activo');
                            });
                        };
                        
                   
                   </script>
       
        <div class="bgg" id="bgg"></div>
    
        <div class="TablaB" id="TablaB">

            <section class="content-area">
                <div class="table-area" id="tabla_resultados">

                </div>
            </section>

               
        </div>
   
    <!--/Torni-->
    
    <div class="torni">
        <img src="img/boddy/Boddy-Pagina2.jpg" alt="Torni" class="torniS">
    </div>        

    </body>
</html>
11
  • Te estas haciendo un lio con las rutas absolutas y relativas. Seguramente dentro del header.php (que no has puesto en la pregunta) estás usando rutas relativas, y al invocarlo desde un subdirectorio distinto del que contiene el index.php que sí funciona, esas rutas se quedan mal puestas. Pásate a las rutas absolutas en ese header.php para que eso no ocurra, o bien en toda tu web, pues tal como lo estas estructurando te puede pasar a menudo en cualquier sitio donde estes usando las rutas relativas dentro de tu código.
    – masterguru
    el 3 may. 2022 a las 15:23
  • Okey, edito y agrego el archivo header.php para que lo puedan ver el 3 may. 2022 a las 15:25
  • 1
    Lo que decia, el header.php lo tienes lleno de referencias relativas, y cuando ese archivo lo incluyes en una ruta que no es la raiz entonces se pierden. La solución es poner la barra inicial a todas ellas, que apunta a la raiz de la web, para que sea desde donde sea que se llame a ese archivo, siempre este apuntando correctamente a sus enlaces, imagenes, archivos css, js, etc. Es decir, por ejemplo, donde pone esto: href="css/Bootstrap/bootstrap.css" pon esto: href="/css/Bootstrap/bootstrap.css" con una barra inclinada / al principio.
    – masterguru
    el 3 may. 2022 a las 16:40
  • 1
    Eso será porque tu ruta no empieza en la raiz del dominio... es decir, tu index.php no está en http://www.midominio.com/index.php sino que quizás lo tienes en una carpeta, por ejemplo: http://www.midominio.com/carpeta/index.php ... con lo cual, lo dicho antes lo debes cambiar de / a /carpeta/ (o si la ruta es más larga pues tambien lo pones /carpeta/carpeta/carpeta/etc/
    – masterguru
    el 3 may. 2022 a las 17:14
  • 1
    No es por la puntuación, aunque tampoco la desprecio, pero acabo de poner la respuesta para que la pregunta no quede pendiente y porque segun parece ya lo tienes claro y arreglado, y supongo que mi información de los comentarios ha colaborado en ello. Gracias y saludos!
    – masterguru
    el 3 may. 2022 a las 17:55

1 respuesta 1

1

Según parece, tal como el OP ha indicado en los comentarios, sus archivos parten de una subcarpeta del dominio y no de la raíz, por lo tanto, para solucionarlo usando rutas absolutas debe usar esa subcarpeta en lugar de la raíz del dominio para apuntar correctamente a sus archivos de forma inequívoca.

Es decir, su index.php no está en:

http://www.midominio.com/index.php

sino que lo tiene en una carpeta, por ejemplo:

http://www.midominio.com/carpeta/index.php

con lo cual, en su archivo header.php (y cualquier otro que sea incluido usando rutas relativas) ha optado por modificar sus rutas relativas por absolutas, pero partiendo de esa carpeta.

Por ejemplo, ahora tiene así (ruta relativa) uno de sus enlaces del header.php:

<script src="js/js/jquery.min.js"></script>

pues finalmente debe ponerlo así para que funcione bien en sus diversos include desde cualquier carpeta del dominio:

<script src="/carpeta/js/js/jquery.min.js"></script>

donde:

  • la primera barra inclinada / apunta a la raíz de su dominio
  • y el texto carpeta/ representa el nombre de carpeta desde donde van a incluirse el resto de archivos del header.php.

Este tipo de pregunta ya la habia respondido en varias ocasiones con distintos matices en las siguientes respuestas:

En cada una de ellas he dado diversidad de información que puede ayudar a comprender el típico problema de las rutas que no funcionan en los diversos escenarios que se pueden dar en un proyecto web.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.