Inicio / Tutoriales Wordpress / Crear un theme WordPress con Bootstrap 4 y Underscores
26 marzo,2018
1
crear un theme wordpress
marzo 26, 2018| Escrito por | | en Tutoriales Wordpress

Crear un theme WordPress con Bootstrap 4 y Underscores

Crear un theme WordPress con Bootstrap 4 y Underscores
2 5
Si necesitamos crear un theme wordpress desde cero una buena idea es utilizar el framework bootstrap 4. Este es el framework HTML, CSS y JS más popular para crear proyectos responsivos y mobile first. Crear un theme WordPress no es una tarea imposible aunque tampoco es algo simple y se requieren algunos conocimientos de php, css y html.

La comunidad WordPress ha creado un gran número de starter theme o themes en blanco. En este tutorial  vamos a utilizar el starter theme denominado _S o  Underscores, este theme de partida es creado y mantenido por la propia Auttomatic. Unos 70 desarrolladores aportan mejoras de forma constante a este theme inicial de WordPress.

Comenzando a crear un theme wordpress con  bootstrap 4.

Antes de comenzar con la descarga de bootstrap 4 debemos descargar primero el theme WordPress de partida denomidado Underscores. Undercores o _S es un theme WordPress limpio en cuanto a css. Es decir, no tiene nada de coración pero tiene todo lo necesario  si pensamos en la codificacion php.

Vamos al sitio de Undercores y descargamos el theme en blanco. La primera ventaja con la que nos encontramos es que podemos rellenar algunos datos muy útiles para nuestro tema wordpress. Podemos indicarle al generador el nombre del theme, el slugo o nombre de la carpeta. También le podemos indicar el autor, la url del autor y la descripción del theme que deseamos crear. Tenemos otras opciones vinculadas a Sass pero las abordaremos en otros tutoriales.

Para nuestro ejemplo le colocaremos de nombre Wp Gym, slug wpgym y algunos datos para la descripción. Vamos a suponer que ya tenemos instalado WordPress en nuestra maquina y si no lo tenemos puedes pasarte por este post : instalar WordPress de forma local y luego continuar con esta guia wordpress.

Luego de rellenar los datos en el formulario, en la página de underscores.me, le damos a generate y nos descargara un theme WordPress. Este tema tendra algunos estilos css básicos y todos los archivos php necesarios paraun correcto funcionamiento. Vamos a instalar nuestro tema wordpress en el servidor local. Recordemos que según nuestro tutorial estamos utilizando xampp en nuestra máquina.

Si echamos un vistazo al principio del archivo style.css nos encontraremos con todas las características que tiene este nuevo theme, esto lo vemos en el apartado tags. Tenemos un fondo personalizado, un logo personalizado y un menú responsive.

Ya dentro de nuestra Instalacion de WordPress seleccionamos el theme creado, en este caso WpGym. Observamos que no tiene ningun estilo pero que funciona correctamente. Podemos navegar por los post, paginas, categorias y demas archivos php.Es el momento de obtener bootstrap 4.

Descargar Bootstrap 4 para agregarlo a nuestro WordPress Theme.

Nos dirigimos a la pagina de bootstrap y buscamos la seccion para descargar los archivos css y js. Descargamos los archivos boostramin.css y bootstrapmin.js. Luego de las descarga introducimos estos archivos en las carpetas css y js respectivamente de nuestro theme.

Wordpress y Bootstrap 4

Ahora toca llamar a estos nuevos archivos desde nuestro tema wordpress. Para esto nos valemos de las funciones  wp_equene_stylewp_equene_script que debemos agregar en nuestro archivo functions.php de la siguiente forma:

function nuestro_scripts() {
wp_enqueue_style( 'bootstrap_4', get_template_directory_uri() .'/css/bootstrap.min.css');
wp_enqueue_script( 'bootstrap_js_4', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '20151215', true );
}
add_action( 'wp_enqueue_scripts', 'nuestro_scripts' );

El archivo bootstrapmin.js es descargado en la carpeta js y el archivo boostramin.css en la carpeta css. Ahora podemos llamarlos desde nuestro archivo functions.php. Estos archivos son incluidos en el encabezado de nuestro theme o en el pie de pagina. Esto depende de las varaibles que le coloquemos a las funciones wp_equene_style y wp_equene_script respectivamente. Si ya tenemos los archivos de bootstrap 4 incluidos en nuestro theme podemos comenzar a utilizar sus clases css para darle forma a nuestro sitio.

Creando un menu responsive en nuestro theme wordpress

Abrimos el archivo header.php. Vamos a utilizar el concepto de una fila dividida en dos columnas para colocar el logo o nombre del sitio a la izquierda y el menu a la derecha. En el archivo header.php realizamos las siguiente modificacion.


<header id="masthead" class="site-header container-fluid">
<div class="row">
<div class="site-branding col-md-4">
Logo o nombre del sitio
</div>

<nav id="site-navigation" class="main-navigation col-md-8">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'txtdomain' ); ?></button>
<?php             
 wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id'        => 'primary-menu',
) );

?>

</nav><!-- #site-navigation -->

</div> <!-- .row -->

</header><!-- #masthead -->

Notamos como dentro de la etiqueta header del sitio colocamos la clase “container-fluid”, y luego creamos una fila con la clase “row”.  Finalmente creamos 2 secciones una con la clase “col-md-4” y otra con la clase “col-md-8”. En estas secciones colocamos el logo o nombre del sitio y el menu respectivamente. Ya habras notados que las clases col-md-4 y col-md-8 suman 12, esto es por la estructura de rejilla que tiene bootstrap y que es mobile-first.

De esta forma el encabezado de nuestro sitio ya es responsive y en una pantalla mobil se verá primero el logo ocupando toda la pantalla y posteriormente el menú hamburguesa.

Trabajando con el Index de nuestro sitio WordPress.

Ahora toca modificar el blog del sitio, donde mostraremos un listado de entradas y una barra lateral a la derecha. Para comenzar a trabajar abrimos nuevamente el archivo header.php y agregamos lo siguiente al final del archivo :

<div id="content" class="site-content container">

<div class=”row”>

Esto lo hacemos justo debajo de la etiqueta </header>, la idea en este caso es que el contenido del sitio quede englobado dentro de las clases css container y row.

Ahora toca abrir el archivo footer.php para cerrar los div que abrimos. Al comienzo del archivo footer.php antes de la etiqueta html <footer> colocamos las siguientes etiquetas de cierre.

</div> <!– fin .row –>

</div><!– fin  #container –>
 

Con esto hemos creado un contenedor alrededor de todo nuestro sitio y en particular alrededor de nuestro archivo index.php. Ahora finalmente abrimos nuestro archivo index.php y al comienzo del mismo realizamos la siguiente modificación:

<div id="primary" class="content-area col-md-8">
 

Con esto decimos que el contenido de las noticias tendrá un ancho de 8 columnas. Ahora modificamos el ancho de nuestra barra lateral para decirle que tengan un ancho de 4 columnas y así completar el tamaño de 12 columnas que nos permite al crear un theme wordpress con bootstrap 4.

Al final del archivo index.php envolvemos nuestra barra lateral en la clase “col-md-4” para que la misma quede de la siguiente forma.



<div class="col-md-4">

<?php get_sidebar(); ?>

</div>
 

Que hemos hecho hasta aqui ¿Como va nuestro WordPress Theme?

Ya tenemos el encabezado del sitio con un comportamiento responsive y ahora nuestro index.php que se utilizara para mostrar el blog del sitio o listado de entradas tambien con un comportamiento responsive.
Ahora para terminar vamos a incluir las clases de boostrap 4 en nuestro archivo footer.php. Abrimos el archivo footer.php y realizamos las siguientes modificaciones :

<footer id="colophon" class="site-footer">

<div class="container">
<div class="row">

Estamos agregando un contenedor dentro del pie de pagina y una fila, luego introduciremos las columnas que creamos necesarias. Ahora en el final del archivo footer.php y con mucho cuidado vamos a cerrar las etiquetas div que abrimos.

</div> <!– #fin container–>
</footer><!– fin footer –>

</div><!– # fin page –>

<?php wp_footer(); ?>

</body>
</html>

 

Observamos que cerramos los div que abrimos nosostros y algunas etiquetas html que venian abiertas desde el archivo header.php. Este paso es de vital importancia ya que si dejamos abierta alguna etiqueta nuestro sitio se vera mal y tendera a roper su decoracion.En el archivo footer.php crearemos una columna para mostrar los creditos del sitio.

<div class="site-info col-md-12">
Creditos del sitio.

</div><!– fin site-info –>
</html>

Con esto tenemos un sitio, con escasa decoracion css , pero completamente responsive. Hemos conseguido crear un theme wordpress con bootstrap 4.

Ventajas de crear un theme wordpress con bootstrap 4 y Undercores

  • Tenemos la garantia que toda la codificación en php esta realizada de forma correcta. Todas las funciones que utilzamos estan probadas por expertos.
  • Solo incluimos los archivos css y js que son extrictamente necesarios. Esto será útil para que nuestro theme cargue lo mas rapido posible. No cargara archivos innesesarios, archivos que no utilizemos.
  • Tendremos algunas caracteristicas adicionales, como un menu responsive, un index y footer que estaran adaptados para mobiles.
  • Utilizando undescores como theme de partida, dispondremos de un logo que podremos perzonalizar, asi como algunos colores para el fondo del sitio y para los textos.

Solo nos queda dar rienda suelta a nuestra creatividad y combinado underscores con el framework bootstrap 4 podremos crear los themes mobile-first mas llamativos y quizas los màs populares.

One thought on “Crear un theme WordPress con Bootstrap 4 y Underscores

  • Buena guia, estaba buscando algo como esto. Gracias por compartir

    Responder
  • Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *