Empezando con los temas de WordPress Child

Artículo escrito por:
  • WordPress
  • Actualizado: Jul 27, 2013

Entonces, imagina que están comenzando sus ajustes en el mundo de WordPress y que ha encontrado muchos temas asombrosos. Incluso puedes encontrar muchos temas premium y la mayoría de ellos realmente vale la pena el precio (algunos libros para un aspecto y código profesional). Y la mayoría de los temas que encuentras son tan cerca, pero ninguno es exactamente lo que quieres. Sería bueno poder mover un poco la barra de menú, reemplazar la fuente y agregar un nuevo bloque de texto.

Bueno, si esto te suena familiar, esta guía es para ti. Aquí nos sumergiremos en el mundo de los temas infantiles, donde puedes hacer prácticamente todo lo que quieras sin romper el increíble tema que has comprado o perder futuras actualizaciones porque todo lo que hagas se deshará.

Edición de la apariencia sin modificar los archivos de temas.

En resumen, de eso se trata el tema infantil: Personalización sin modificar archivos originales. Básicamente, un tema secundario tendrá las mismas funcionalidades y apariencia de su tema principal (padre), a menos que explícitamente diga lo contrario.

Contendrá al menos archivos 2, el archivo style.css y functions.php, todos los demás archivos se tomarán del tema principal, de modo que, a menos que cree un nuevo archivo en el directorio de temas secundarios, utilizará los archivos principales.

Tenemos muchas posibilidades aquí, pero la principal ventaja es que puede volver al tema original fácilmente, y así también puede actualizar su tema principal sin perder ninguna edición, ya que se realizan en una carpeta completamente diferente.

Ensuciémonos las manos

Entonces, el primer paso es crear un nuevo directorio de temas secundarios en su carpeta / wp-content / themes /. Llamémoslo "Twenty-Child" y creemos nuestro archivo styles.css básico:

/ * Nombre del tema: Twenty Child Tema URI: http://www.webrevenue.co Descripción: Aprendizaje de temas infantiles en este momento Autor: Rochester Oliveira URI del autor: http://www.webrevenue.co/author/rochester/ Plantilla: twentytwelve * / / * Llamando al archivo CSS del tema principal * / @import ("../ twentytwelve / style.css"); / * Agrega lo que quieras debajo * /

Los parámetros son (entre otros parámetros opcionales omitidos):

  • Nombre del tema: el nombre que verá en la pantalla de selección de temas
  • Tema URI: El enlace que se mostrará allí.
  • Descripción: Una breve descripción para que recuerdes de qué se trata.
  • Autor: ¿Quién ha creado el tema infantil?
  • Autor URI: si desea enlazar al sitio del autor
  • Plantilla: la carpeta del tema principal (por lo tanto, si desea usar un tema diferente como el principal, simplemente reemplace este parámetro)

Una vez que agregue este código, verá el tema infantil en WP admin> Apariencia> Temas. Puede seleccionarlo ahora y todos los cambios realizados se verán en su sitio.

Ediciones de temas infantiles 101

Esto puede ser inútil si no tienes conocimiento de CSS, ¿verdad? ¡Incorrecto! CSS es bastante sencillo y puedes encontrar muchos fragmentos para ayudarte. Aquí hay algunos consejos simples para ayudarlo en sus personalizaciones.

#1 Instalar Firebug

A mucha gente le encantan Chrome y Safari (¡yo también!), Pero para mí FireFox es mucho mejor para el desarrollo. Por lo tanto, si desea usarlo, le recomiendo que también instale Firebug, que es una herramienta increíble para comprender todos los selectores que están activos en el elemento actual.

Una vez que lo instale, puede presionar F12 o hacer clic con el botón derecho en algún lugar de la página y seleccionar "Inspeccionar elemento". Verá una nueva ventana con la página actual HTML y CSS (y muchas otras pestañas que son útiles, tal vez podamos hablar de ellas más adelante).

En el cuadro de CSS verá de arriba a abajo todas las reglas de CSS aplicadas al elemento actual, y la regla más "específica" en la parte superior. Eso es genial, pero veamos que puedes hacer con esta información

#2 Considerar la especificidad de CSS (o el peso del selector)

Cada regla CSS tiene su selector, las propiedades y los valores. Pero cuando el navegador encuentra 2 o más reglas que afectarán el mismo elemento, tiene que elegir cuál de ellas es más adecuada. Por lo general, tenemos esta "regla" para entender lo que se considerará:

  • ! Declaración importante sobrescribirá cualquier otra cosa.
  • ¡El CSS en línea sobrescribirá cualquier cosa menos! reglas importantes
  • ID's (#header, #footer, # container…) que valen puntos 100
  • Clases (.main, .nav, .box) que valen puntos 10
  • Etiquetas (cuerpo, div, p, a) por valor de 1
  • Selector universal y pseudo clases (*,: hover,: after) que valen 0, pero se aplicarán si hay un "empate"

Ok, veamos un ejemplo para entender mejor esto. Haga clic con el botón derecho en el encabezado de su sitio usando los veinte doce y verá que el primer CSS que aparece es el siguiente:

.site-header {relleno: 1.71429em 0; } artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, nav, sección {pantalla: bloque; }

El primer selector tiene puntos 10 (ya que es una clase), y el segundo tiene puntos 1 cada uno (ya que las comas solo separan los diferentes selectores) es por eso que aparece en la parte superior. Si tuvieras algo como #header div, ese selector sería el primero en aparecer.

¿Por qué esto es tan importante?

Porque para poder editar el tema principal sin editar sus archivos CSS, SIEMPRE deberá usar reglas que tengan más puntos que las reglas definidas en el tema principal. Y puedes ser inteligente en esto y usar código simple. Por ejemplo, para sobrescribir esta propiedad:

.site-header {relleno: 1.71429em 0; }

Puede agregar esto en el tema de su hijo CSS, pero no debe:

.site-header {relleno 15px 0! importante; }

Debido a que este es un código incorrecto, y es mucho más difícil sobrescribirlo nuevamente si necesita cambiarlo en una sola página, por ejemplo. Así que simplemente puedes usar esto:

body .site-header {relleno: 15px 0; }

Este selector tiene puntos 11, que es mayor que el 10 original y, por lo tanto, se aplicará este código.

#3 Hacer buen uso de las funciones.

El archivo funciones.php hijo es el único archivo que se cargará ADICIONAL al archivo original. Esa es una solución inteligente realizada por el equipo de WP, para que pueda mantener las funciones originales y agregar sus propias funciones. El problema es que las funciones del tema secundario se cargarán primero y el desarrollador del tema DEBE hacer algo como esto para evitar conflictos al declarar funciones:

if (! function_exists ('top_menu')) {function top_menu () {// cool code here} add_action ('wp_head', 'top_menu'); }

Esto se debe a que si define una función en el archivo de tema secundario, puede sobrescribir la original. Si el desarrollador de temas no lo hace de esta manera, terminará con un feo error de PHP (ya que la misma función se está creando dos veces).

#4 Aprende algunas propiedades CSS

¿Sabías que puedes ocultar y agregar cosas usando CSS? Necesitará instalar el firebug para encontrar el selector correcto, pero puede ocultar un elemento agregando este código:

body a {display: none}

Para agregar es más complicado, ya que solo puede agregar textos pequeños, si desea un texto “¡En rebajas!” Después de una etiqueta de precio, por ejemplo, podría usar este código:

.price del: after {color: red; contenido: "¡En venta!"; }

¿Qué piensas?

¿Qué te parece esta guía? ¿Considerarías usar temas infantiles? ¿Ya lo estás usando? Háganos saber usando la sección de comentarios a continuación!

Acerca de Rochester Oliveira

Soy un diseñador web y empresario de Itajubá (MG), Brasil. Me encanta escribir sobre temas oscuros y hacer cosas interesantes.