• Home
  • Programación
    • Curso de Android
    • Todas las entradas sobre Android
    • Oracle
  • Diseño
    • Photoshop
  • Desarrollo y Diseño Web
    • Herramientas Online
    • WordPress
    • OpenCart
    • Web
  • Noticias
    • Curiosidades
    • Juegos
  • Todas la entradas
  • Portfolio
  • Home
  • Programación
    • Curso de Android
    • Todas las entradas sobre Android
    • Oracle
  • Diseño
    • Photoshop
  • Desarrollo y Diseño Web
    • Herramientas Online
    • WordPress
    • OpenCart
    • Web
  • Noticias
    • Curiosidades
    • Juegos
  • Todas la entradas
  • Portfolio
InicioDesarrollo y Diseño WebCrear una plantilla de WordPress con Bootstrap Par ...
Anterior Siguiente

Crear una plantilla de WordPress con Bootstrap Parte 2

Publicado por: Yolanda Jiménez , enero 31, 2014

Crear una plantilla de WordPress con Bootstrap III

Leer Resumen

Leer Parte 1

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”

Crear una plantilla de WordPress con Bootstrap

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.

Crear una plantilla de WordPress con Bootstrap

Si probamos la pantalla si visualmente tenemos la misma pantalla que al principio es que lo hemos hecho bien.

Crear una plantilla de WordPress con Bootstrap

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”

Crear una plantilla de WordPress con Bootstrap

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.

Crear una plantilla de WordPress con Bootstrap

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;
}

 

&nbsp:

Quizás también te interese...

  • Crear una plantilla de WordPress con Bootstrap Parte 3Crear una plantilla de WordPress con Bootstrap Parte 3
  • Crear una plantilla de WordPress con Bootstrap Parte 1Crear una plantilla de WordPress con Bootstrap Parte 1
  • Como crear un template para WordPress, Listar EntradasComo crear un template para WordPress, Listar Entradas
  • Crear una plantilla de WordPress con BootstrapCrear una plantilla de WordPress con Bootstrap
  • Agregar un nuevo campo en WooCommerce Print Invoices 3.2.2Agregar un nuevo campo en WooCommerce Print Invoices 3.2.2

Share!
Tweet

Yolanda Jiménez

Sobre el Autor

Fundadora de GeekPurple, Ingeniera informática y perseguidora de sueños.

8 Responder a: “Crear una plantilla de WordPress con Bootstrap Parte 2”

  1. Responder
    Jose Guzman
    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?

    • Responder
      Yolanda Jiménez
      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:

       <img  src="img/imagen1.jpg" alt="imagen1" />

      Por esta con la función de get_template_directory_uri() que te indica cual es la ruta. Quedaría de la siguiente forma:

      <img  src="<?php echo get_template_directory_uri().'/img/imagen1.jpg' ?>" alt="imagen1" />

      Haz lo mismo para todas las imágenes.

  2. Responder
    Jose Guzman
    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

    • Responder
      Yolanda Jiménez
      junio 27, 2014 at 11:50 am

      Prueba con la propiedad active

      .nav .current_page_parent.active a:focus {
      background-color: #EFC94C;
      }

  3. Responder
    Daniel
    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

    • Responder
      Yolanda Jiménez
      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.

  4. Responder
    carlos
    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?

  5. Responder
    Cesar
    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?

Deja un comentario Cancelar respuesta

Buscar

Entradas Recientes

  • Drastic el Emulador DS para Android
  • Los mejores Plugins Newsletter para WordPress
  • Retrica, una app perfecta para selfies
  • Boom Beach, uno de los juegos más descargados de este verano
  • Animaciones con JQuery: Mostrar, ocultar y animar un div
  • Ejemplos de CSS3. Caja Deslizante y Burbujas
  • Animación en CSS3. Como hacer un círculo animado
  • Animaciones con CSS3 – Animation CSS
  • Transiciones de CSS3 – Transition CSS
  • Reducir la transferencia mensual de ancho de banda

Categorías

  • Android
  • Curiosidades
  • Desarrollo y Diseño Web
  • Diseño
  • Frases
  • FreakDay
  • Herramientas Web
  • Juegos
  • OpenCart
  • Oracle
  • Photoshop
  • Programación
  • Web
  • Wordpress
  • YouTube

No te pierdas nada! ^_^

Archivo

  • diciembre 2016
  • septiembre 2014
  • agosto 2014
  • julio 2014
  • junio 2014
  • abril 2014
  • marzo 2014
  • febrero 2014
  • enero 2014
  • diciembre 2013
  • noviembre 2013
  • octubre 2013

Categorías

  • Android (12)
  • Curiosidades (3)
  • Desarrollo y Diseño Web (37)
  • Diseño (11)
  • Frases (1)
  • FreakDay (9)
  • Herramientas Web (10)
  • Juegos (2)
  • OpenCart (3)
  • Oracle (1)
  • Photoshop (7)
  • Programación (13)
  • Web (19)
  • Wordpress (10)
  • YouTube (3)

Social

  • Encuéntranos en redes sociales

    Páginas

    • Diseño
    • FreakDay
    • POLITICA DE COOKIES
    • Programación
    • Todas la entradas
    • Utilidades

    Mis Amigos

    • Que como hoy
    • Creaciones WebLab
    • CódigoJavaOracle
    • Proteinas Baratas
    • Tienda Proteinas

    Contacta


    ¿En que año estamos?
    • POLITICA DE COOKIES
    • Todas la entradas
    • Utilidades
    • Programación
    • Diseño
    • FreakDay