El crear un tema hijo en WordPress es un tópico que cada vez se hace más llamativo para los usuarios. Ya que queremos que nuestro blog tenga mejores funcionalidades y claro está, sin perder los cambios con cada actualización que hagamos. Si eres una de esas personas que está interesada en el campo, te invitamos a leer este artículo que seguro te será de muchísima utilidad.
¿Por qué crear un tema hijo en WordPress?
Antes de darte las razones por la cual hacer uso de esta herramienta, lo primero que debemos explicarte qué es un tema hijo, siendo así una página que va a heredar las funciones básicas de un contenido que vamos a denominar father theme. Esto con el fin de mejorar, modificar y ampliar a nuestro gusto con nuevas características.
Claro está, lo correcto es que el tema hijo mantenga el mismo código, diseño y funcionalidad que el padre, pero agregando extras como miniaturas a las publicaciones, el introducir tamaños adicionales a las imágenes, el uso de Widgets en WordPress y gadgets por supuesto, usar otro tipo de fuentes o estilos en el escrito, en pocas palabras usamos una plantilla y luego la editamos a nuestro gusto.
Ahora que ya tienes la idea, te debemos explicar por qué crear un tema hijo en WordPress, la principal razón es por el funcionamiento de la página, ya que cuando creamos un blog usamos una plantilla fija, claro está, podemos agregar una extensión para pasarelas de pago, luego una para indicar qué hora es en otros países, pero a medida que sumes estos extras te fijarás que los cambios se van a ir borrando a medida de cada actualización.
Caso práctico
Claro está, vamos a darte un ejemplo más preciso para que entiendas la importancia de un tema hijo en tu página de WordPress, ¿te parece? Así que imagina que estás creando tu plataforma de E-commerce desde cero, entonces decides usar un plugin de PayPal para dejar en claro que las compras que hagan tus clientes serán manejadas por esta empresa que actuará como intermediario.
Pero a la hora de usar el código de PayPal en tu página web, lo más probable es que decidas ahorrar recursos de hosting, entonces la mejor opción es colocar esta modalidad en la cabecera de la página, ya que no importa en qué sección esté el cliente, siempre observará de forma clara y concisa el logo de PayPal mientras esté navegando.
Entonces ya que tienes una idea y un objetivo claro, abres el header.php y luego introduces el código en la sección correspondiente. La otra opción es usar una función desde functions.php del tema que estás utilizando. Claro al agregarlo verás que está operativo, aparecerán los datos a la página de PayPal, el potencial cliente podrá completar la operación sin probable alguno.
Es una solución a la pérdida de cambios
Pero después de unos días, quizá semanas, te das cuenta de que el logo de PayPal sigue allí, das clic sobre el mismo, pero no funciona o en su defecto dejó de aparecer, entonces ahora tienes un problema, entonces vamos de nuevo a la sección de configurar los PHP y HTML de la página y te das cuenta en la sección de header está en su forma base y te preguntas, ¿qué pasó con los cambios que he hecho?
La respuesta a tu duda es la siguiente: Los temas principales tienden a actualizarse de forma periódica, entonces proceden a sobrescribir sus archivos con el fin de mantenerlos, pero cualquier modificación realizada al mismo procede a borrarse. Claro, siempre puedes tener un documento guía en tu editor de textos de preferencia, el mismo tendrá todas las actualizaciones que hayas hecho y entonces cada vez que ocurra un cambio lo que haces es copiar y pegar.
Eficaz para ahorrar tiempo y esfuerzo
De hecho suena como una alternativa a usar, en teoría no suena tan tedioso, pero en práctica lo es, ya que el proceso se volverá engorroso, conlleva a la que página esté fuera de servicio de forma periódica, permitiendo así la pérdida de clientes y por supuesto, consumirá tiempo que es lo único que jamás se podrá recuperar. Por esa razón te recomendamos crear un tema hijo en WordPress
La gran ventaja de un tema hijo es que no importa la cantidad de actualizaciones que se hagan, todos los cambios van a prevalecer, no importa lo que hagas. El Child theme heredará las funciones del Father theme, entonces se perfila como la opción más recomendable en estos casos.
Útil para crear páginas nuevas
Claro está, no podemos dejar de lado que es recomendable crear un tema hijo en WordPress cuando tu objetivo es hacer múltiples reestructuraciones a la página o ediciones a un diseño o funcionalidad. Ya que en estos casos una alternativa es crear una página desde cero. Pero es obvio que esto consume muchísimo tiempo y esfuerzo, claro el plan a la larga es hacer las cosas de la forma más óptima posible.
Entonces en el caso que estamos tratando, la opción más eficaz es crear una plantilla que comparta la mayor parte de su código y estilo con un tema principal. Pero claro, vamos a modificar los archivos necesarios para marcar las diferencias y así tener nuestra nueva página operativa en poco tiempo. Ciertamente el uso de esta herramienta es superútil para los usuarios de WordPress.
¿Es recomendable el uso de los child theme?
Si todavía tienes dudas, nosotros en Intelecto Universal te recomendamos que aprendas a crear temas hijos en WordPress, ya que te permitirá realizar todos los cambios que deseas, sin la necesidad de hacer ediciones en el código y los archivos de la plantilla original, sumado a la gran ventaja que no importan las actualizaciones que se hagan, el contenido jamás se irá a perder.
Si eres un usuario nuevo en el mundo de WordPress de seguro pensarás que jamás vas a editar una plantilla principal, ya que quizá no te sientas en la capacidad de hacerlo o simplemente no se te hace para nada llamativo el tema, pero tranquilo, porque debemos decir que la creación de un tema hijo es sumamente fácil y en algún futuro sí o sí te gustará hacer cambios a tu blog para hacerlo mucho más personal.
Además los temas hijos a diferencia de las plantillas fijas de WordPress es que permiten aprovechar las ventajas de los distintos frameworks disponibles en la plataforma, como son el Génesis, Themify, Tesla, Headway, Beans, Unyson, entre otros. Si quieres saber más sobre el tema, luego te explicaremos un poco sobre ello.
En resumen, el objetivo de crear un tema hijo en WordPress es el adaptar nuestras necesidades a nuestra página web, con el fin de hacerla personal, enfocada a nuestra área de trabajo y así ahorrarnos tiempo o en su defecto dinero en un administrador que mantendrá nuestro sitio en Internet de forma operativa. Además que nos ayudará a obviar el proceso de crear un portal desde el inicio.
¿Cómo puedo crear un tema hijo en WordPress?
Ahora que ya sabes las utilidades de crear un tema hijo en WordPress de seguro te preguntas qué necesitas para incluir alguno en tu proyecto, claro está, acabas de llegar a la sección indicada, pues aquí en Intelecto Universal nos vamos a encargar de brindarte varios tutoriales paso a paso para que puedas contar un child theme en tu página web.
A través de un código
Claro está, si eres de las personas que está familiarizada con el tema y entiendes del manejo de varios lenguajes de programación, lo más probable es que esta sea la alternativa de tu preferencia, claro está es obligatorio que cuentes con dos archivos vitales el primero de ellos es el style.css y luego el functions.php, al tener ambos podrás ponerte manos a la obra.
Es necesario que sepas que si deseas hacer algún cambio sobre otro archivo de tu parent theme, lo único que vas a necesitar es crear una copia de ambos e ir modificando cualquier sección que consideres oportuna. En el caso del style.css y functions.php, no es necesario que copies la información del tema padre, sino que creas un archivo vacío y allí incluyes el fragmento del código.
Style.css
El primer paso es crear un documento llamado style.css, ya que tu hoja de estilos en cascada se encargará de almacenar todos los datos referentes a la apariencia del tema que vamos a crear en WordPress. Para originar este archivo puedes usar algún editor de código gratuito como Atom o en su defecto el mismo bloc de notas que tienes instalado en tu equipo, no importa que sea el de Windows, Ubuntu o Mac.
Una vez ejecutes la aplicación, vas a crear un archivo con el nombre de «style.css» y claro, tendrás que copiar este fragmento de código que te brindaremos aquí en Intelecto Universal, luego tendrás que cambiar la información según las exigencias y preferencias relacionadas con tu proyecto para que funcione de forma óptima.
/* Theme Name: Aquí colocas el nombre de tu child theme. Description: Esto es opcional, pero en esta línea describe tu proyecto. Author: Indica quién es el creador del tema hijo. Author URI: Menciona para qué página web fue creado. Template: Aquí pondrás el nombre del tema padre. Version: 1.0.0 */
Functions.php
El otro archivo que deberás crear es el de functions.php, que es el que se encargará que alguna tarea en específico se ejecute en nuestro child theme, claro está, recuerda que a la hora de trabajar con esta modalidad no puedes tener errores de sintaxis PHP, porque en caso de que llegue a ocurrir lo más probable es que tu sitio web no funcione para nada.
En fin nuestro archivo de functions.php le informará a WordPress sobre el proceso de carga de nuestro tema hijo, según las indicaciones del parent theme. En todo caso igual vamos a crear un nuevo código, ya sea a través de Atom o el bloc de notas, así que te invitamos a que hagas copia y pega de esto:
<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Subir el tema hijo a la página web
Ahora que tenemos ambos archivos, tendremos que crear una carpeta, allí vamos a guardar ambos documentos y después los vamos a comprimir en un archivo ZIP o RAR, claro está, tendrás que ponerle un nombre fácil de identificar como por ejemplo «child-theme-de-mi-página-web» recuerda que en las buenas prácticas de la programación no se utilizan espacios, sino guiones para separar palabras.
Una vez hayas comprimido la carpeta, tendrás que subirla a WordPress, para ello tendrás que ir a la sección de «Apariencia» que se encuentra en el menú lateral del panel de administrador, luego tendrás que ir a «Temas» posterior «Subir Tema» tras ello selecciona nuestra carpeta recién creada.
Claro está, aquí no acaba el proceso, porque nuevamente tendrás que ir al panel de administrador, para ser precisos a la opción de «Apariencia» y luego a «Temas» y elegir nuestro style.css y functions.php para así empezar a personalizar nuestro sitio web de la forma que desees.
Crear un tema hijo en WordPress con un plugin
Para muchos el tener una página en Internet no significa que estemos familiarizados con las prácticas de crear y editar un código, entonces si deseamos crear una plantilla en WordPress pero no estamos familiarizados con las prácticas, lo mejor es utilizar un plugin. Ya que esta herramienta se encargará de realizar todas esas tareas relacionadas con los distintos lenguajes de programación.
Claro está, en Internet podrás encontrar muchísimos plugins que se encargarán de crear un tema hijo para tu página web, aunque en el caso nuestro, el más popular y fácil de usar es Child Theme Configurator. Si deseas descargar y utilizar esta aplicación, solo tendrás que buscarlo con el navegador de tu preferencia y da clic en el primer enlace, lo mejor de todo es que esta herramienta es totalmente gratuita.
El plugin es una extensión que se instalará en tu navegador, entonces una vez hayas completado este paso, tendremos que entrar a tu página web de WordPress y luego te vas a dirigir a la sección de «Herramientas», «Child Themes» y de último pero no menos importante «Parent / Child» como podrás ver el plugin te ofrecerá crear un nuevo tema hijo que será editable con base en una plantilla.
Cuenta con varios diseños
Ahora deberás elegir alguno de los diseños que está disponible en el plugin, cada uno tiene distintas funciones y estilos, así que te invitamos a que visualices uno de forma detallada para que así te decantes por la opción que más te agrade. Posterior tendrás que dar clic en el botón que dice «Analizar» ya que el programa se encargará de verificar si el child theme está en buenas condiciones.
La razón de ser de esta acción es comprobar que actualmente no hay algún problema con el tema principal o en su defecto la plantilla que vas a utilizar le falta algún archivo, en caso de que no haya fallas, entonces tendrás que elegir una carpeta en tu equipo para así guardar el child theme que acabas de crear.
Datos adicionales
Lo más probable es que te salgan un montón de opciones luego del paso que acabamos de explicar, honestamente, lo mejor es dejarlas intactas, ya que son alternativas ideadas para las personas que saben manejar distintos lenguajes de programación, claro la razón por la cual estamos usando un plugin es porque no estamos familiarizados con el tema.
En todo caso es momento de ir nuevamente a la sección de apariencia de nuestra página web en WordPress y luego vamos a ir al apartado de «Temas», entonces como te podrás ver que habrá varios descargados en el sistema, pero solo uno va a tener el nombre que es el child theme que hemos creado hace poco, en todo caso tendremos que activarlo.
Tras iniciar el child theme, nuestro deber ser es probar que esté funcionando de forma eficiente y todas las herramientas que se han agregado estén operativas. Ahora te vamos a dar un consejo y lo correcto es que desinstales el plugin que instalamos hace poco ya que no le vamos a dar más uso, así reducimos el uso de recursos de nuestro equipo.
Cómo personalizar nuestro child theme
Claro está, ya tenemos nuestro child theme, pero si te puedes fijar, es prácticamente idéntico a nuestro tema padre, entonces es momento de agregar esas extensiones para hacerlo lo más personalizado posible, ya sea incluirle algunas plantillas WooCommerce gratis, alguna herramienta para aportar la hora o el clima según la zona de la persona que visite nuestra página y muchísimo más. Nosotros en Intelecto Universal te vamos a explicar cómo mejorar tu child theme.
Editar el style.css
Ya que tu objetivo es hacer tu child theme, diferente a la plantilla padre, lo correcto es modificar el código CSS ya que la hoja de estilos en cascada es la encargada de brindarle la apariencia a tu sitio web, entonces deberás ir al panel de administrador de tu sitio web en WordPress y luego ir a la sección de «Apariencia» posterior «Personalizar» y de último pero no menos importante irás a «CSS Adicional» ya que acá podrás pegar, crear o editar los fragmentos de código que quieras.
Por cierto, podrás modificar el archivo style.css de tu child theme a través del panel de administración de WordPress siempre y cuando el plugin de seguridad lo permita o accediendo mediante el FTP y así editando los archivos directamente desde el servidor. Fíjate bien en las comas porque en caso de que falte alguna, tendrás un error de código y la página quedará en blanco.
Editar el functions.php
Lo primero que debes saber, que al utilizar un child theme, estamos utilizando dos functions.php al gestor de la página es decir, WordPress. Esto no significa que haya una incompatibilidad entre ambos documentos, sino que la forma en la que trabaja el servidor es la siguiente, primero se cargará el tema base y luego el hijo. Dando a entender que se está ampliando el primero texto con funciones del segundo, algo similar a un complemento.
Entonces lo correcto es que las functions.php del hijo tengan las bases de la del padre, para darte un ejemplo, imagina un edificio que no tiene planta baja pero sí una terraza, en cierta forma jamás podrá funcionar porque sin un soporte la estructura colapsará en totalidad.
A la hora de editar este archivo, trata de corroborar que el código sea coherente, es decir, que a pesar de ser distinto que el original, el mismo cuente con sus bases. Entonces para agregar o editar las funciones a nuestro child theme vamos a ir al panel de administrador de WordPress y luego a la sección de «Apariencia», «Personalizar» y podrás observar el HTML, PHP, CSS del blog.
Ahora tendrás que ir a la sección donde está el archivo functions.php, para hacer fácil la búsqueda siempre puedes teclear la combinación de «Control» y «F» y luego buscar la palabra clave, tras ello, vas a editar aquellas líneas de código con el fin de agregar nuevas utilidades a tu página.
Editar el screenshot.png
Ahora que ya modificaste el style.css y el functions.php de seguro te interesa cambiar la fotografía de perfil del tema con el cual estuviste trabajando arduamente últimamente, ¿no? Ya que el plan es darle ese toque personal a tu página web, lo correcto es usar un logo o diseño que te identifique a ti o tu marca.
Ciertamente esto no es tan importante como las dos secciones anteriores, pero es un toque extra y que puedes cambiar con muchísima facilidad en un par de minutos. Lo único que vas a necesitar es una imagen en formato PNG y deberá tener las medidas de 1200×900 y el nombre tendrá que ser «screenshot.png». Nuevamente vamos a ir al panal de administrador de WordPress.
Para ser precisos en «Apariencia», «Personalizar» y allí aparecerá todo el código de nuestro blog, claro está, vamos a dirigirnos a la raíz del código y podrás visualizar la imagen que tiene tu página web por defecto, entonces vamos a cargar la nueva al sistema y posterior moverla a la línea indicada, tras guardar cambios y actualizar podrás ver tu nueva foto de perfil.
¿Qué son frameworks?
Al inicio de este artículo mencionamos la palabra «Frameworks» y que los child themes permiten aprovechar el uso de los mismos de la mejor forma posible, entonces es momento de explicarte qué son y para qué funcionan, ¿te parece? Un framework es un entorno de trabajo o soporte que ofrece una serie de herramientas para crear una página web sin necesidad de tenerla desde cero.
Es decir el framework incluye una biblioteca de códigos que te permiten llamar a las funciones que necesites sin la urgencia de tener que programarlas, siendo así algo sumamente útil. De por sí las plantillas que utilizamos en WordPress son un framework, ya que es el tema que hará de imagen a un sitio web pero con sus claras ediciones.
Claro está, un tema no es lo mismo que un framework ya que la gran diferencia es la programación del diseño, ya que este entorno de trabajo no es vulnerable a los cambios que podamos realizar, siendo así un conjunto de archivos que no se podrán alterar bajo ninguna situación.
Ventajas de los frameworks
La ventaja de los frameworks disponibles para WordPress es que poseen un buen soporte técnico, ya sea por parte de sus creadores y la gran comunidad que cada día crea nuevos entornos de trabajo para que distintos usuarios puedan hacer libre uso del mismo.
Esto sumado a que nos ahorra el tiempo y esfuerzo, ya que son de fácil uso, nos permitirá gestionar nuestra página web sin la necesidad de tener conocimientos en algún lenguaje de programación. Además debemos mencionar que un frameworks con un código de calidad te ayudará a Mejorar el SEO de tu sitio en Internet a niveles que no podrás imaginar.
Lo mejor de todo, a diferencia de las plantillas y temas padre. Las actualizaciones que se hagan de forma recurrente en el sistema no hará que se borren datos y/o funcionalidades de tu página web. Entonces lo mejor es usar esta herramienta como un guía para tu child theme y así lograr que tu página se posicione entre las mejores del Internet en poco tiempo.