Como crear “Child Themes” en WordPress – Imagen previa y traslado del CSS – Parte 5 de 5

Como crear “Child Themes” en WordPress – Imagen previa y traslado del CSS – Parte 5 de 5
4.5 (90%) 2 votos

Introducción

Llegamos hoy al último capítulo de esta serie dedicado a la personalización de un tema de WordPress mediante la creación de los denominados “Temas hijos” o Child Themes.

Tras analizar el porqué elegir el desarrollo y creación de “Child Themes”, escoger nuestro tema base dando los primeros pasos, crear la estructura de directorios, y finalmente preparar todo para ser reconocido por el gestor de temas de WordPress, veremos ahora como crear la imagen de previsualización del tema y como mover los css existentes a nuestro Child Theme.

Trasladando el CSS

Capturadepantalla2015-02-21alas23.09.43.pngLo primero será localizar el archivo .css que contienen los estilos que teníamos creados.

Dependiendo de la estrategia con la que trabajáramos este tema, pueden estar o bien en el propio archivo .css del “Tema padre” (mala práctica sin duda pues actualizarlo supondrá que desaparecan nuestros cambios), o bien en alguna hoja de estilos accesible desde el panel de control de WordPress, como las que genera un plugin.

En nuestro caso empleamos originalmente Simple Custom CSS, que dicho sea de paso realiza perfectamente su cometido. Lo que haremos será copiar la totalidad de estilos en el style.css de nuestro “Tema hijo”, que creamos en capítulos anteriores, y los pegaremos justo debajo de el punto que indicamos en esta captura:

Capturadepantalla2015-05-17alas13.41.15.png

Tendremos que prestar especial atención a no modificar la cabecera del archivo, y a guardarlo en el mismo sitio que el original, sobreescribiéndolo.

Capturadepantalla2015-02-21alas18.48.17.png

Creando la imagen de portada y el readme.txt

A continuación crearemos una imagen que llamaremos screenshot, con un tamaño de 880x660px y en formato .png, que será la imagen de portada de nuestro tema en el gestor del backend de WordPress.

Colocaremos dicha imagen en la raíz de nuestra carpeta. Deberá quedar algo así:

Capturadepantalla2015-05-17alas13.55.46.png

En este caso vemos diversos archivos, ya que la captura de pantalla corresponde a una versión más avanzada del Child-Theme, recordar por tanto que solo deberíamos tener los siguientes ficheros:

  • style.css
  • screenshot.png
  • readme.txt

Capturadepantalla2015-05-17alas13.59.49.png

Aunque no hemos tratado aún sobre este archivo readme.txt comentar simplemente que tanto para nosotros mismos como para los usuarios de nuestros desarrollos, es interesante agregar toda la información útil que podamos tanto sobre las modificaciones que hacemos, licencia de uso, o bien tus datos de contacto. Por ejemplo puede quedar algo como en la imagen que acompaña este texto.

Volviendo a nuestra portada, podemos poner la imagen que queramos, aunque siempre es interesante poner una captura del tema tal y como queda con la modificación, el nombre de nuestro tema, y un resumen de las modificaciones o características que incluimos.

1_screenshot.pngEn nuestro caso he mejorado estéticamente la barra superior de menú, la hemos dejado fija en la parte de arriba pasando el contenid al hacer scroll por debajo y además he modificado el footer para que pueda albergar 4 widgets en lugar de los 3 con los que viene el tema “Sparkling” de serie.El nombre elegido, “Sparkling Evo ilustra perfectamente que se trata de una evolución del tema original, y es también interesante dar cuantas más pistas posibles para que el usuario capte el cometido de tu “Tema hijo” lo antes posible.

Comprobaciones finales

Llega el momento de la verdad, donde comprobaremos que todo funciona correctamente. Abriremos nuestro Backend de gestión de nuestra instalación de WordPress, y desde el gestor de temas comprobaremos que todo está correcto. Deberíamos ver algo así:

Captura de pantalla 2015-05-17 a las 13.54.47

Efectivamente, los más perspicaces se habrán dado cuenta de que hay una actualización para el tema original. Pues bien, dado que tenemos nuestro Child-Theme correctamente creado y albergando todas nuestras personalizaciones, podemos tranquilamente actualizar el tema base sin miedo a perder nada.

Obviamente, nunca está de más realizar un Backup previo siempre que realicemos este tipo de tareas.

Conclusión

Y con esto llegamos al final de esta serie de capítulos del tutorial destinado a conocer, y crear nuestro propio “Tema hijo” ó Child-Theme.

En próximas entregas veremos como crear nuestras propias plantillas y más tutoriales que nos permitirán sacar más partido a nuestro recién creado tema.

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+

Deja un comentario