Cómo crear un tema de WordPress desde cero (sin saber PHP) – 3

Cómo crear un tema de WordPress desde cero (sin saber PHP) – 3

Hola a todos y saludos desde el área Web de la Escola Espai. En el artículo de hoy terminaremos de ver como crear un tema de WordPress desde cero sin saber PHP. Si no habéis leído los dos artículos anteriores, podéis encontrar el primero aquí: como crear un tema de WordPress desde cero (sin saber PHP).

Como hacer un menú responsive en WordPress

Nuestra página de inicio está prácticamente acabada, pero para crear un tema en condiciones nos falta algo muy importante; y es que el menú sea adaptable para que funcione correctamente en dispositivos móviles.

Lo primero que vamos a hacer es añadir, mediante Font Awesome, un icono para el menú. Para ello modificaremos un poco el archivo header.php de nuestro tema. Vamos a añadir una única línea. Para ello buscamos el div de la clase logo y al final de dicho div, justo después del elemento <a>, añadimos un elemento <i> de Font Awesome con el típico icono del menú con las tres barras.

 <!-- logo -->
 <div class="logo">
  <a href="<?php echo home_url(); ?>">
   <img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo" class="logo-img">
  </a>
  <i id="menu-bars" class="fa fa-bars fa-3x" aria-hidden="true"></i>
 </div>
 <!-- /logo -->

Ya tenemos nuestro icono del menú, pero ahora debemos de introducir el código CSS para que no sea visible en la versión escritorio de nuestra web, y las media queries necesarias para que aparezca al cambiar a una resolución de dispositivo móvil. Para ello vamos a buscar la sección RESPONSIVE en el archivo styles.css de nuestro tema, borramos las media queries vacías que hay, y añadiremos el siguiente código. Si no encuentras dicha sección, puedes añadir el código al final del archivo.

/*------------------------------------*\
RESPONSIVE
\*------------------------------------*/

#menu-bars {
 display: none;
 float: right;
}

@media only screen and (max-width:768px) {
 header .logo {
  overflow: hidden;
  float: none;
 }
 header .logo a {
  float: left;
 }
 #menu-bars {
  display: block;
 }
 header .nav {
  display: none;
  float: none;
 }
 .nav>ul>li {
  display: block;
  position: static;
 }
 .nav>ul>li>ul {
  padding-left: 20px;
  display: block;
  background: transparent;
  position: static;
 }
 .nav>ul>li>ul>li {
  display: block;
 }
 #services li {
  width: 50%;
 }
}

Con esto ya hemos logrado que el icono aparezca y desaparezca según estemos en la versión móvil o escritorio de la web. Pero si pulsamos el botón del menú no hará nada todavía. Para lograr que funcione, vamos a modificar el archivo js/scripts.js de la carpeta de nuestro tema, añadiendo un poco de código JavaScript, concretamente un poco de código jQuery.

(function ($, root, undefined) {
 
 $(function () {
  'use strict';
   $("#menu-bars").click( function() {
     $("nav.nav").fadeToggle();
   });

   $(window).resize(function () {
     $("nav.nav").css('display', '');
   });
 });
 
})(jQuery, this);

Una vez añadido el código en cuestión, podremos hacer click sobre el icono del menú en la versión móvil para que el menú aparezca. Esto lo logra jQuery añadiendo un estilo en línea al elemento en cuestión cuando llamamos al método fadeToggle(). Del mismo modo, si volvemos a pulsar el icono, el menú desaparecerá pero se quedará un estilo en línea. Es por ello que también hemos añadido un poco de código para que al cambiar el tamaño del navegador se borre este estilo en línea.

Ya tenemos listo el aspecto de la página principal, ahora para terminar nuestro sencillo tema de WordPress deberíamos de mejorar un poco el aspecto del resto de páginas.

Como modificar el resto de páginas

Lo primero que vamos a hacer es modificar un poco la plantilla por defecto de las páginas. Para ello iremos a la carpeta de nuestro tema y abriremos el archivo page.php. Lo único que tenemos que hacer es englobar el main y el sidebar dentro de un elemento div al que le pondremos un atributo id con valor “content”. Para ello abriremos nuestra etiqueta justo debajo de <?php get_header(); ?> y la cerraremos justo antes de <?php get_footer(); ?>.

<?php get_header(); ?>
<div id="content"> <!-- abrimos nuestro elemento div -->

 <main role="main">

 ...

 </main>

<?php get_sidebar(); ?>

</div> <!-- cerramos nuestro elemento div -->
<?php get_footer(); ?>

Tan solo hemos modificado la plantilla por defecto de las páginas (page.php), tendremos que hacer lo mismo (añadir ese elemento div) en otras plantillas que nos interese, como por ejemplo category.php (la plantilla para las categorías), single.php (la plantilla para las entradas), archive.php (la plantilla para la recopilación de entradas), search.php (la plantilla para las búsquedas), 404.php (la plantilla para cuando no se encuentra una página), y cualquier otra que puedas considerar necesario (cualquiera que tenga el main y el sidebar).

Finalmente necesitamos añadir un poco de código CSS al archivo styles.css de nuestro tema para que nuestras páginas se muestren mejor.

#content {
 max-width: 960px;
 overflow: auto;
 margin: 10px auto;
}
#content a {
 color: royalblue;
}
#content main {
 width: 70%;
 float: left;
}

#content .sidebar {
 float: left;
 width: 30%;
 padding-left: 20px;
}

.sidebar ul {
 list-style: none;
}

@media only screen and (min-width:481px) and (max-width:768px) {
 #content main {
 width: 60%;
 } 
 #content .sidebar {
 width: 40%;
 }
}

@media only screen and (max-width:480px) {
 #content main {
 width: 100%;
 float: none;
 }
 #content .sidebar {
 max-width: 300px;
 width: 100%;
 margin: 0 auto;
 float: none;
 }
}

Como podéis ver, este código CSS tan solo le dará un aspecto mínimamente aceptable, obviamente si lo queréis más bonito tendréis que trabajar un poco más el CSS.

Crear un tema sin saber PHP no ha sido tan difícil, ¿verdad?

Aspecto a una entrada de nuestro tema

Dejar un único campo de búsqueda

Si os pasa como a mí, puede que os salgan dos campos de búsqueda en el sidebar. Uno es por culpa de un widget que tengo en dicha sidebar, por lo que la solución es tan sencilla como eliminar dicho widget de la sidebar desde el propio WordPress. El otro campo, es culpa del generador de temas que hemos usado. Si queremos podemos eliminarlo abriendo el archivo sidebar.php y eliminando el siguiente código:

<?php get_template_part('searchform'); ?>

Personalmente os recomiendo la segunda opción, ya que vais a tener más libertad para elegir donde queréis colocar el campo de búsqueda.

¡ Ya sabemos crear un tema !

Y bueno, nada más. Con esto doy por concluida esta serie de artículos sobre como crear un tema en WordPress sin saber PHP. Espero que os hayan sido de interés. Si os ha sabido a poco, no os preocupéis; en próximos artículos aprenderemos más cosas sobre como modificar temas de WordPress.

Escribe un comentario