Crear una plantilla de WordPress con Bootstrap III
Leer Parte 3 (Descarga incluida)
Esta es la segunda entrada para crear una plantilla de WordPress con Bootstrap, vamos a ver los siguientes puntos:
3. Creamos un homepage para nuestra web
Creamos el fichero Home.php y configuramos el entorno
4. Agregamos la navegación entre páginas
Actualizaremos el fichero header.php para obtener las diferentes páginas y poder agregarlas a la barra de navegación, además modificaremos el css para marcar la página activa
3. Creamos un homepage para nuestra web
Para crear nuestro Home vamos a mover parte de nuestro código del index.php a una nueva página Home. Vamos por pasos.
Paso 1.
Siempre hacer una copia de seguridad para poder volver a la versión anterior y evitar la pérdida de código.
Paso 2.
Abrimos el index.php y cortamos el contenido del
<div class="hero-unit"> [..] </div> |
Dejaremos solo las líneas:
<?php get_header(); ?> <?php get_footer(); ?> |
Paso 3.
En el panel de control de WordPress hacemos click en Pages->Add New
La nueva página se llamará Home, en la parte de “Text” pegamos el código que hemos cortado anteriormente del index.php y pulsamos “Publish”
Paso 4.
Para que wordpress incluya el contenido que hemos insertado en nuestra nueva página “Home” necesitaremos utilizar un Loop en el fichero index.php. Incluiremos el siguiente código entre las líneas
<?php get_header(); ?> |
y
<?php get_footer(); ?> |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p><?php _e('No se han encontrado resultados para el criterio de búsqueda.'); ?></p>
<?php endif; ?> |
Este código quiere decir que mientras haya entradas que escriba el contenido del post. Si no encuentra ningún resultado mostrará un mensaje indicándolo.
Paso 5.
Tenemos que indicar que la primera página que se muestre al entrar en nuestra web sea “Home”, para hacer esto en el panel de administrador de wordpress vamos a Seatting->Reading y marcamos la casiila Front page displays -> A static page (select below) y selecionamos “Home” en Front Page.
Si probamos la pantalla si visualmente tenemos la misma pantalla que al principio es que lo hemos hecho bien.
Paso 6.
Para que nos aparezca el nombre de la página en la barra de navegación en vez del id tendremos que ir a Settings->Permalinks y seleccionar “Post name”
4. Agregamos la navegación entre páginas
Ahora mismo la navegación entre diferentes páginas de nuestra web es un código estático. WordPress nos ofrece la sentencia wp_list_pages() que nos devuelve una lista con todas las páginas que tengamos creadas, esto nos ayudará a no tener que tocar el código y poder administrar nuestras páginas desde el panel de administrador.
Vamos hacer los cambios paso a paso.
Paso 1.
Abrimos el fichero header.php , buscamos el código correspondiente a la navegación.
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul> |
Este código lo tenemos que sustituir por
<ul class="nav">
<?php wp_list_pages(array('title_li' => '')); ?>
</ul> |
Ahora nuestra barra de navegación contiene las páginas que tenemos creadas y podremos navegar entre ellas.
Paso 2.
Vamos a modificar el fichero wpbootstrap/css/ bootstrap.css para que marque de forma correcta la pestaña de la página activa en ese momento. Para conseguir este efecto tendremos que cambiar la propiedad current_page_item.
Añadiremos el código siguiente:
.nav .active > a,
.nav .active > a:hover,
.nav .active > a:focus,
.nav .current_page_item a,
.nav .current_page_item a:hover,
.nav .current_page_item a:focus,
.nav .current_page_parent a,
.nav .current_page_parent a:hover,
.nav .current_page_parent a:focus {
background-color: #EFC94C;
} |
 :
junio 25, 2014 at 9:19 pm
Hola Yolanda excelente tutorial, solo que tengo un problema. he llegado a esta parte del tutorial y me he quedado atascado porque el theme no me muestra las imagenes, no entiendo el por que, ya que cuando subí el theme, las imagenes estaban incluidas. ¿sera que me puedes ayudar?
junio 27, 2014 at 11:16 am
Hola Jose,
El problema va a ser de rutas, seguramente tu theme no está colgando de la raíz y esté en una subcarpeta, para solucionarlo tienes que indicarle cuál es la ruta completa de la carpeta donde están las imágenes, para ello simplemente tienes que sustituir la línea donde indicar la ruta de la imagen:
Por esta con la función de get_template_directory_uri() que te indica cual es la ruta. Quedaría de la siguiente forma:
Haz lo mismo para todas las imágenes.
junio 25, 2014 at 9:21 pm
olvide decirte que no consigo la parte de modificar el css bootstrap para indicar la opcion activa de la barra. uso bootstrap 3. ¿sera que agrego manualmente el codigo que insertaste en el paso 2 de la navegacion entre paginas? gracias y mucho exito
junio 27, 2014 at 11:50 am
Prueba con la propiedad active
.nav .current_page_parent.active a:focus {
background-color: #EFC94C;
}
agosto 20, 2014 at 5:10 pm
He podido subir mi tema a wordprees pero no se pueden ver las imagenes. cuando lo cargue por el filezilla y acutalice la pagina igual no se ven ¿como puedo subir mis imagenes a wordpress?
Gracias
agosto 21, 2014 at 8:29 am
Hola Daniel,
Comprueba la ruta de las imágenes, arriba he contestado como arreglar el problema en el caso de que tu wp esté en subcarpetas, lo más seguro es que esa sea la razón por la que no se visualizan.
enero 20, 2016 at 6:27 pm
Hola Yolanda, estoy intentando adaptar la plantilla con la que cree la web http://www.ibergroup.com.es para incluir un blog con el mismo aspecto pero no consigo que el wordpress me coja los estilos, como puedes ver. Me puedes echar una mano?
junio 28, 2016 at 1:56 pm
Hola Yolanda me gusto mucho tu tutorial, pero necesito que me expliques como adaptar el menu desplegable, como seria en el header?