Plantilla PHP con un menú de 2 niveles

Icono carpeta PHP

  • Inserta los contenidos de cada página
  • Genera un menú desplegable
  • Le da un título a cada página
  • Genera enlaces amigables a las páginas
  • Muestra la ruta de migas de pan

Modo de empleo

Supongamos que vamos a hacer una web con la siguiente estructura:

  • Inicio
  • Dibujos animados
    • Los Simpson
    • Los Picapiedra
    • Dragones y mazmorras
  • Tebeos
    • Conan el bárbaro
    • Las aventuras de Tintín
    • El hombre araña
  • Contáctanos

Descargar la web del ejemplo desde ejemplo.7z

Pasos a seguir:

  1. Crea el archivo menu.php con la estructura de la web:

    <?php
    $menu = array(
    'start' => "Inicio",
    'dibus' => "Dibujos animados",
    'tbo' => "Tebeos",
    'contacto' => "Contáctanos",
    );
    $submenu = array();
    $submenu['dibus'] = array(
    'simpsons' => "Los Simpsons",
    'picapiedra'=> "Los Picapiedra",
    'dragmaz' => "Dragones y mazmorras",
    );
    $submenu['tbo'] = array(
    'conan' => "Conan el bárbaro",
    'tintin' => "Las aventuras de Tintín",
    'spiderman' => "El hombre araña",
    );
    ?>

    La clave start del menú indica la página de inicio de la web

  2. Crea la subcarpeta paginas y dentro haz los siguientes archivos siguiendo las claves propuestas en el menú anterior:

    • start.php
    • dibus.php
    • dibus_simpsons.php
    • dibus_picapiedra.php
    • dibus_dragmaz.php
    • tbo.php
    • tbo_conan.php
    • tbo_tintin.php
    • tbo_spiderman.php
    • contacto.php

    En cada archivo escribe el código HTML que iría dentro del <body>; sin poner ni la etiqueta <html> ni <head>

  3. Descarga el archivo Plantilla6.php y ponlo en la raíz de tu web

  4. Crea la página index.php en la raíz de tu web. Esta será la plantilla de la web y contendrá las etiquetas <html> y <head> que no pusimos antes.

    <?php
    require_once("menu.php");
    require_once('Plantilla6.php');

    $plantilla = new Plantilla();
    $plantilla->setMenu($menu, $submenu);
    $plantilla->setFriendly(false);
    $plantilla->setWebTitle('Ilustraciones internacionales');
    $plantilla->setDirContents('paginas/');

    ?><!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title><?php echo $plantilla->getPageTitle(); ?></title>
    <link href="estilos.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="<?php echo $plantilla->getClassBody(); ?>">

    <div id="cabecera">
    <h1>Ilustraciones internacionales</h1>
    </div>

    <div id="menu">
    <?php echo $plantilla->getMenu(); ?>
    </div>

    <div id="contenido">
    <?php $plantilla->writePageContent(); ?>
    </div>

    </body>
    </html>

    Con este paso ya funciona la web, pero lo vamos a mejorar un poco más

  5. Crea el archivo estilos.css donde vamos a poner los estilos mínimos para que el menú sea desplegable

    #menu > ul > li  { /* Menú principal horizontal */
    display:inline-block;
    }
    #menu ul ul { /* Oculta los submenús */
    display:none;
    position:absolute;
    background-color:white;
    border:1px solid black;
    }
    #menu > ul > li:hover ul { /* Mostrar submenú */
    display:block;
    }

    Puedes mejorar más el aspecto del menú con estilos.css

  6. Por último vamos a hacer que las URL sean amigables convirtiendo las direcciones de tipo index.php?item=tbo&subitem=spiderman a este formato tbo_spiderman.html.

    1. Crea el archivo .htaccess el cual configurará el servidor Apache

      Options +Indexes
      Options +FollowSymlinks
      RewriteEngine on
      RewriteBase /
      RewriteRule ^([^/]+)_([^/]+).html$ index.php?item=$1&subitem=$2 [NC,L]
      RewriteRule ^([^/]+).html$ index.php?item=$1 [NC,L]

      Modifica RewriteBase para que apunte a la carpeta donde esté tu web si no estuviese en la raíz

    2. En el archivo index.php da la orden de activar las URL amigables

      $plantilla->setFriendly(true);

Historial de versiones

Descargar todo desde versiones.7z

Direcciones URL amigables

Para tener direcciones URL amigables para usuario (y de paso también para los motores de búsqueda) hemos de ocultar la dirección real (con parámetros GET) mediante un alias. Esto se consigue con ayuda del módulo REWRITE de Apache y configurando adecuadamente el fichero .htaccess en la raíz de nuestra web.

El fichero .htaccess

Options +Indexes
Options +FollowSymlinks
RewriteEngine on
RewriteBase /ruta_web
RewriteRule ^([^/]+)_([^/]+).html$ index.php?item=$1&subitem=$2 [NC,L]
RewriteRule ^([^/]+).html$         index.php?item=$1            [NC,L]

Para activar el módulo REWRITE de Apache, en el caso de que estuviese desactivado, hay que introducir por línea comando la siguiente orden: a2enmod rewrite

Ejemplos de equivalencias entre contenidos y las direcciones web

Ruta del
contenido
Dirección URL paramétrizada con GET
Dirección URL amigable
contenidos/start.php http://dominio/index.php?item=start
http://dominio/start.html
contenidos/bus.php http://dominio/index.php?item=bus
http://dominio/bus.html
contenidos/metro_blau.php http://dominio/index.php?item=metro&subitem=blau
http://dominio/metro_blau.html
contenidos/tren_ave.php http://dominio/index.php?item=tren&subitem=ave
http://dominio/tren_ave.html

Ayuda de la clase Plantilla6.php

Configuración previa de la plantilla

  • Incluye el archivo:

    require_once('Plantilla6.php');
  • Crea la plantilla:

    $plantilla = new Plantilla();
  • Añade el menú y submenú:

    $plantilla->setMenu($menu, $submenu);
  • Activa las direcciones amigables:

    $plantilla->setFriendly(true);
  • Pone el título general de la web:

    $plantilla->setWebTitle('Título');
  • Indica la subcarpeta con los contenidos:

    $plantilla->setDirContents('paginas/')

Uso de la plantilla en el HTML

  • Obtiene el título de la página actual:

    $plantilla->getPageTitle()
  • Obtiene la clase del <body> para configurar cada página con CSS:

    $plantilla->getClassBody()
  • Obtiene el menú como una lista anidada de enlaces:

    $plantilla->getMenu()
  • Obtiene la ruta actual como migas de pan:

    $plantilla->getBreadcrumbs()
  • Escribe el contenido de la página:

    $plantilla->writePageContent()

Comentarios

  1. 1 Alexis M. 2013-06-25 Hace 4 años
    Muy interesante su plantilla.
    Sin embargo me he encontrado que los archivos no poseen bloqueo de acceso directo. Es decir que si por ejemplo quiero acceder desde la web al archivo "tbo_spiderman.php" lo puedo hacer colocando toda la ruta hacia el archivo y se ve el contenido del mismo ("Entre sus superpoderes se encuentra una gran agilidad...").
    Es posible solucionar lo mencionado o hay que hacerlo por parte del sercidor?
    Muchas gracias de antemano.

    Alexis M.
  2. 2 Francisco 2013-06-25 Hace 4 años
    Ummm,

    Hola Alexis,

    Interesante cuestión...

    En PHP puedes saber con __FILE__ la ruta del actual fichero PHP
    Y con $_SERVER['SCRIPT_FILENAME'] la ruta del actual script. Puede ser diferente
    del actual fichero PHP porque el fichero puede estar incluido dentro de otro fichero PHP.

    Con la función basename() se puede extraer el nombre del fichero eliminando la información de las carpetas.

    Si coloco la siguiente línea de código al principio del fichero "tbo_spiderman.php"

    <?php if (basename(__FILE__) == basename($_SERVER['SCRIPT_FILENAME'])) die(); ?>

    se verá bien cuando se haga a través de la plantilla pero se verá en blanco
    si se intenta mostrar directamente.

    Saludos
  3. 3 rengin 2016-03-20 Hace un año
    Veo muy calidad esta plantilla gracias por compartir tus conocimientos, comienzo a aprender php y estoy sintiendo muy costoso pero nunca me daré por vencido.
Proinf.net, ©2003-2017 ci 3.1.6 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL