¡Hola de nuevo! Continuando con el post anterior sobre el desarrollo de temas para WordPress. Inevitablemente, ya sea más tarde o más temprano, llegaremos a querer desligarnos totalmente de modificar los temas de otros. Todos hemos empezado haciendo pequeños arreglos con el editor que tiene WordPress. Si has seguido el post anterior sobre cómo hacer un theme hijo de otro te habrás quedado con ganas de más, así que continuándolo vamos a crear uno básico 100% tuyo para lo que necesites.
Ahora bien, lo normal es que si estás aquí alguna vez hayas jugueteado con temas de WordPress de otros, modificándolos y llegando a un punto en el que no puedes actualizarlo porque perderías las modificaciones. Por otro lado si haces un tema hijo siempre vas a depender del padre, y también puede que haya actualizaciones del padre que rompan tu diseño. Así que la forma más profesional de solucionar esto es hacer tu propio tema, 100% tuyo, y totalmente desligado de cualquier otro.
Punto de partida
WordPress, aunque sea simple y sencillo, no usa ningún framework avanzado como lo puede ser Symfony, Laravel.. y es lo bastante maduro como para no ser fácil crear un tema desde cero. Es más, me atrevo a decir que en la práctica es una pérdida de tiempo. Lo que recomiendan todos los CMS de los que me he documentado es que cojamos la plantilla básica que trae y que la modifiquemos para hacer nuestro tema.
Así pues, hacemos un duplicado del tema de este año de WordPress, el Twenty Sixteen (2016), que está en el directorio:
wp-content/themes/twentysixteen
En mi caso he creado el directorio copia llamado:
wp-content/themes/jnjsite
Como indican en la documentación oficial de WordPress, ahora vamos al fichero:
wp-content/themes/jnjsite/style.css
Y editamos los datos de la cabecera, en mi caso he puesto lo siguiente:
/* Theme Name: Jnjsite Theme URI: https://jnjsite.com Author: Jnjsite.com Author URI: https://jnjsite.com/ Description: Jnjsite theme is a Twenty Sixteen based theme from WordPress. Version: 0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: jnjsite Text Domain: jnjsite This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
Ya con esto tenemos un buen punto de partida. Tenemos una hoja en blanco lista para dibujar. Si vamos a dibujar o pintar algo sobre el papel, ¿a que prefieres una buena hoja en blanco? Si te dan una hoja ya dibujada, tendrás que borrar cosas, quizá te quedan manchones, borrones, o como quieras llamarlo. Lo mismo pasa con WordPress, si partes de una plantilla de otro demasiado elaborada, tendrás muchos ficheros de su padre y de su madre, sobre los que probablemente acabes marraneando y gastando demasiado tiempo en buscar lo que necesitas. Por esto que mejor partir del tema limpio de este año, en este caso el 2016.
Este es el tema de este año con 3 páginas que he puesto en el menú principal y mostrando la entrada de ejemplo. Nuestra hoja en blanco lista para pintar 😉
Comenzando a modificar, añadiendo algunos recursos
Podemos ver en el código fuente que ya tenemos jQuery incluido. Así que directamente podemos ir a añadir las librerías que tanto me gustan de Bootstrap. ¿Os suena Bootstrap? Si no, debería de sonaros. Aquí la web de Bootstrap
Así para no complicarlo de momento, incluimos las librerías con la primera opción que tenemos, usando el CDN. Para esto podemos ir al editor de plantillas que tenemos en el panel de control de WordPress. En Apariencia > Editor y veremos una pantalla como esta:
Ahora en la derecha buscamos el archivo header.php y le damos click. Y así podemos editarlo y ponemos el siguiente código para insertar entre las etiquetas <head>..</head> las librerías de Bootstrap con el siguiente código usando el CDN de Bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Guardamos el fichero y ya lo tenemos para trabajar nuestra plantilla con Bootstrap.
La barra de navegación de Bootstrap
Ahora si queremos añadir la famosa barra de navegación que se puede quedar fija arriba y que es compatible con móviles de Bootstrap, necesitamos modificar más a fondo cosas de la plantilla. No es trivial a partir de ahora hacer modificaciones, pero si te gusta programar, eres autodidacta y tienes un poco de paciencia lo encontrarás bien divertido ir modificando y viendo los resultados.
Para la barra hay aquí un proyecto publicado:
Descargamos el fichero wp_bootstrap_navwalker.php al directorio de nuestro tema. Añadimos esto en el fichero de funciones como nos indican en sus instrucciones:
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
Y luego llamamos a la función que pinta en nuestro header.php la barra de navegación, yo lo he añadido así para ajustar algunas cosas más:
<body <?php body_class('container-fluid'); ?> style="padding-left: 1px; padding-right: 1px;">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- botón desplegable con el menú o logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>
</div>
<?php
/* esto pinta la barra de menú usando el walker incluído anteriormente */
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
<?php endif; ?>
Con esto ya tenemos en nuestro nuevo tema la magnífica barra responsive, que se ajusta al dispositivo, y carga automáticamente las páginas que tengamos configuradas en el menú. De aquí en adelante es cuestión de esfuerzo e imaginación. No es trivial, pero tampoco es un infierno, y seguro que con algo de tiempo podemos llegar a crear un tema personalizado 100% nuestro bastante decente:
Si todo ha ido bien tendremos que ver la barra de navegación que se comporta como en las imágenes de aquí arriba.
Para terminar otro extra
Ahora un extra para ver algo más de resultados haciendo pocas modificaciones. Vamos a incluir un tema de Bootstrap. Para esto podemos ir a la siguiente web en donde tenemos disponibles temas esta vez de Bootstrap. Ojo, no son temas de WordPress, sino que son unos ficheros extra que aplican unos estilos sobre Bootstrap dándole aún más estilo. Aquí la web donde publican unos cuantos gratis:
Simplemente tenemos que cambiar el CSS de la cabecera para poner el nuestro. Elijo el tema Bootstrap de Cyborg así que las tres etiquetas del principio del fichero header.php se pueden quedar en dos:
<link rel="stylesheet" href="https://bootswatch.com/cyborg/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Si todo ha ido bien se tiene que ver el tema como el de la primera imagen del post, que lo pongo aquí abajo también, con la barra de navegación y cabecera con fondo negro. Fíjate que sólo he cambiado el CSS y he borrado el tema de Bootstrap que trae. Ahora ya sólo queda darle imaginación y esfuerzo, que seguro que sale un buen diseño. Y con esto ya tenemos preparado el tema de WordPress para ir trabajando el resto de elementos, disfrutando de una plantilla 100% tuya y con el excelente Bootstrap. Y claro está, con las herramientas que te sirve Bootstrap seguro que podremos modificar la plantilla muy bien con todo tipo de virguerías. Podría ser buena idea ir jugando con las cajas de los widgets para ponerles paneles, a las entradas y páginas también, hacer una rejilla responsive para toda la estructura, y un largo etcétera.. Espero que sirva.
Para cualquier cosa no dudes en dejar un mensaje, comentario aquí, al email, comparte.. 😉
I am no long?r cert?in where you ar? getting yo?r info, but go?? topic.
I must spend som? time learning mor? ?r understanding m?re.
Thanks for wonderful inf?rmation I was searching for t??s information for my mission.
You are welcome Cristina!
Thanks for your comment. I use to write about things that I do when I need something like this. Sometimes I must search a lot and mix knowledge to do things, later I write about these. If I get something from official docs or other sites I put the origin of data.
Regards.