¡Hola de nuevo! Estoy trabajando últimamente mucho con WordPress, así que he pensado que sería bueno ponerse al día indagando un poco más en cómo está hecho WordPress y cómo funcionan los llamados themes. Los themes son diseños que se pueden instalar en tu WordPress y lo hacen más atractivo a la vista, mejorando cosas de UI/UX que llaman los expertos. Es decir, mejoran el diseño, la interfaz de usuario, la usabilidad, la accesibilidad.. Estas materias en el desarrollo de software son principales para todos los que trabajamos con software con interfaz de usuario. Por esto que en la mayoría de estudios relacionados hemos tenido asignaturas destinadas única y exclusivamente a esta materia (Diseño web, Programación en Internet, Interfaces, Gráficos por computador..), algunas más hueso y otras más de sentido común.
La importancia de la accesibilidad para el SEO
En el caso de las webs, ¡la accesibilidad de una web es muy importante para el SEO! Pensemos pues en los robots indexadores que crawlean nuestras webs y pongámonos en su lugar. Estos robots son entes ciegos, que leen de arriba a abajo, de izquierda a derecha en occidente, de igual manera que lo hace el software para personas invidentes o sordas. Es importante si tienes marcado el menú, reducidas las imágenes, un diseño accesible desde cualquier dispositivo, si la web también funciona sin Javascript, flujo contínuo de navegación, encabezados descriptivos, y un larguísimo etcétera.. Hace mucho tiempo que ya colgué enlaces y páginas dedicadas a esto, con enlaces a material de expertos y mucho material didáctico haciendo click aquí.
Internet nació precisamente para hacer un sistema universalmente accesible para todo el mundo. No perdamos de vista este objetivo principal de cuando Tim Berners-Lee diseñó la web. Entonces, dentro de la accesibilidad también entraría el tema de hacer una web responsive (sensible al dispositivo), en la que todo dispositivo podría navegar e interpretar el contenido. Una web accesible, entonces, NO SÓLO ES UNA WEB PARA CIEGOS O SORDOS, es una web que cumpliría con los objetivos iniciales para los que se creó Internet. Es un tema complejo en el que intervienen muchos factores y desarrollar nuestro propio tema nos ayudará mucho para adaptarlo a nuestro antojo. De lo contrario, algo sencillo en teoría de modificar se puede volver complicado porque el tema ‘nos lo han dado hecho’.
Volviendo a WordPress
Todas estas cosas muchos temas los tienes hechos, pero quizá adaptarlos a la imagen de marca de la empresa es complicado. Esto es más sencillo si partimos de un tema limpio y contruimos sobre éste. En este año 2016 en el que escribo esto, tenemos el tema Tweenty Sixteen que trae por defecto WordPress listo para construir.
El primer paso es hacer un tema hijo de otro y modificar sólo los ficheros necesarios para adaptarlo a lo que queramos. De los temas que tenemos en el directorio wp-content/themes/ podemos hacer otros hijos y trabajarlos. Vamos con un ejemplo. Se recomienda no partir de cero, aunque en la documentación de WordPress también encontramos como construir un tema completo desde cero.
Haciendo un tema hijo de otro
Partiremos del último tema que trae nuestro WordPress. En este caso, el Twenty Sixteen, y vamos a crear el hijo Tweenty Sixteen Jnjsite. Simplemente creamos otro directorio llamado wp-content/themes/twentysixteen-jnjsite/ e incluimos los ficheros functions.php, style.css y screenshot.png.
Como podemos ver en la imagen tenemos que poner unos comentarios en el fichero style.css para que WordPress interprete que este nuevo directorio contiene una plantilla hija de ‘twentysixteen’.
Theme Name: Twenty Sixteen Jnjsite child Theme URI: https://jnjsite.com/ Author: Jnjsite.com Author URI: https://jnjsite.com/ Template: twentysixteen Description: A child theme for testing purpuoses only. 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: twentysixteen-jnjsite-child
Creo que es bastante sencillo como indica su traducción para qué es cada línea y no hace falta explicarlo. La principal que indica que este theme es hijo de tweentysixteen es la línea marcada en negrita. Nos falta ahora continuar con el segundo fichero necesario, el fichero de funciones llamado functions.php:
<?php
function my_theme_enqueue_styles()
{
$parent_style = 'parent-style';
wp_enqueue_style($parent_style, get_template_directory_uri().'/style.css');
wp_enqueue_style('child-style',
get_stylesheet_directory_uri().'/style.css',
array($parent_style),
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
Aquí tenemos declarado cómo se encola el fichero style.css del theme padre y luego se encola nuestro nuevo style.css que acabamos de crear. Esto quiere decir que primero se aplicará el estilo padre, y sobre este el estilo hijo. Aquí podremos encolar tantos ficheros CSS como necesitemos de la misma forma.
Ya sólo con esto y un fichero de imagen screenshot.png en el que se suele poner una previsualización del theme ya tendremos listo el tema hijo para usarlo. Podemos activarlo y configurarlo igual que podemos hacer con el original Tweenty Sixteen. También podremos actualizar el theme padre sin perder los cambios hechos porque los cambios los haremos en el theme hijo.
Muy importante, trabajando con el theme hijo
Ahora podremos actualizar el theme padre y todas las modificaciones sobre el theme hijo serán nuestras. Nos beneficiaremos de las mejoras en las actualizaciones y no se romperá nuestro diseño al actualizar el theme. Aplicaremos entonces nuestro estilos y lo más importante, si queremos modificar cualquier fichero del theme padre, simplemente lo copiamos con su misma estructura de directorios a nuestro nuevo theme y lo modificamos.
Esto es lo que se llama hacer overriding, se aplica habitualmente en programación, y es lo que deberíamos de hacer siempre. No deberíamos de modificar los themes originales. Este overriding llevado al extremo sería copiar todos los ficheros del theme padre al hijo y modificarlos. Podremos hacerlo y simplemente trabajar sobre el hijo pero llegados a esto lo que deberíamos de hacer es nuestro propio theme completo.
Por ejemplo, si queremos modificar el fichero wp-content/themes/twentysixteen/comments.php simplemente lo copiamos al directorio wp-content/themes/twentysixteen-jnjsite/comments.php y se aplicará el fichero del tema hijo. Ya con esto hemos hecho overriding del script de comentarios. ¿Fácil no? Y así no tocamos el original para nada.
Terminando
Ahora que tenemos nuestro theme hijo, deberíamos de ir a ver nuestro site, y si se ve tal y como se veía el theme Twenty Sixteen es que todo ha ido bien.
¿Creo que es sencillo verdad? Hacer un theme completo, o mejor dicho, preparar un theme para hacer uno 100% nuestro es igualmente sencillo, pero esto lo dejo para otro post 😉 a ver si pronto tengo un rato y escribo otro post..
Si has llegado hasta aquí te agradecería que dejaras un comentario, que compartieras, o lo que sea 😉
¡Un saludo!
