En las siguientes líneas os explicamos los pasos a seguir para iniciaros en la creación de un nuevo theme para vuestro sitio WordPress. Tanto si os dedicáis a la creación de Themes de WordPress como si os pica la curiosidad os acercamos una manera sencilla de comenzar vuestro nuevo Theme.
¿Qué es UNDERSCORES O _S?
Underscores es una creación de la gente de Automattic para proporcionar un framework a partir del cual construir Theme de WordPress. Para ello han creado un sitio web (underscores.me) desde el que poder descargar el framework listo para iniciar nuestro trabajo con él.
Sus características son las siguientes:
- Una hoja de estilos mínima con lo básico en style.css.
- Una template para el encabezado personalizado en inc/custom-header.php.
- Plantillas de etiquetas personalizadas en inc/template-tags.php para evitar código duplicado.
- Un script en js/navigation.js que hace que tu menú pase a ser un menú desplegable como el habitual de Bootstrap para pantallas de smartphones o tablets, extensible con tu CSS.
- 2 CCS de ejemplo con sidebar a cada lado del contenido principal.
- Preparado para la traducción.
- Licencia publicada bajo GPLv2 (econtrarás información sobre esta licencia aquí).
Puedes encontrar más información en su web o bien en su sitio de github.
¿Qué es bootstrap 3?
Bootstrap es un framework para la maquetación de la vista de una web. Fue creado por el equipo de Twitter y liberado para el uso y disfrute de todos los mortales.
Está enfocado al diseño responsive y en su última versión está orientada hacia el diseño mobile first, en el enlace encontraréis más información sobre esta filosofía de diseño.
MANOS A LA OBRA
Lo primero que haremos será descargar el framework _s desde el sitio de underscores rellenando un nombre para nuestro nuevo theme, por ejemplo, lumenhaus que es un cliente nuestro ;).
Descomprime el contenido descargando en RUTA-WORPRESS/wp-content/themes.
A continuación descargamos Bootstrap 3 desde su sitio web
Descomprime el contenido en la ruta que desees y entra en la carpeta con el contenido de Bootstrap. Dentro de la carpeta /dist encontrarás las carpetas /css, /fonts y /js
A continuación deberás copiar estas carpetas a RUTA-WORPRESS/wp-content/themes/lumenhaus
Ahora abre el fichero functions.php que se encuentra en ese mismo directorio y modifica la función lumenhaus_scripts(), recuerda sustituir lumenhaus por el nombre que le hayas dado a tu template. Deberás añadir estas tres líneas al final de la función:
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array( ), false, 'all' );
wp_enqueue_script('jquery');
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array( ), false, 'all' );
A continuación descargamos desde aquí la barra de navegación que implementa los estilos de Bootstrap 3 https://github.com/twittem/wp-bootstrap-navwalker y copiamos el archivo wp_bootstrap_navwalker.php a nuestro directorio RUTA-WORPRESS/wp-content/themes/lumenhaus
Ahora añadimos la dependencia en nuestro fichero functions.php para lo cuál añadimos la siguiente línea en la parte superior:
require_once('wp_bootstrap_navwalker.php');
Para finalizar debemos dirigirnos al fichero header.php para añadir el código HTML siguiente de tal forma que el código nos quede de la siguiente manera:
Si ahora accedes a tu Worpress ya tendrás la barra de navegación y los estilos de Bootstrap 3. Ahora el resto queda modificarlo echándole imaginación.
Sobre Santiago Gonzalez
Santy es uno de los creadores y desarrolladores que componen Developando. Además es profesor en el Master Business Entrepreneurship de la Universidad Complutense de Madrid.
Si quieres conocer más sobre Santiago González Courel visita su perfil.
- Find more about me on:
Deja tu comentario