Cómo personalizar el estilo de tema con temas infantiles en wordpress veinte quince

Un WordPress tema se compone de una colección de archivos de plantillas, hojas de estilo, imágenes y archivos javascript. El tema controla el diseño y el diseño que ven sus visitantes en el sitio. Cuando un tema como está configurado correctamente como tema principal, que permite una tema de los niños, o un subconjunto de instrucciones, para anular sus archivos. Esto asegura que un tema niño puede modificar selectivamente el diseño, el estilo y la funcionalidad del tema de los padres.

La forma más rápida para entender temas niño es con el ejemplo. A continuación, se descubre cómo crear un tema simple niño que modifica el estilo del tema de los padres. En la actualidad, el tema de WordPress por defecto es de veinte Quince.

Es probable que tenga veinte Quince en su sitio de WordPress, y veinte Quince es el tema-ready niño, por lo tanto, es un gran candidato para la creación de un tema de ejemplo del niño.

Creación de un tema infantil

Al igual que los temas regulares, un tema niño tiene que residir en un directorio dentro del / wp-content / themes directorio. El primer paso para crear un tema infantil es añadir el directorio que lo sostienen. Para este ejemplo, crear un nuevo twentyfifteen-niño directorio dentro del / wp-content / themes directorio.

Para registrar el twentyfifteen-niño directorio como un tema y para que sea un niño del tema Veinte Quince, crear una style.css archivo y agregue los encabezados de tema apropiado. Para ello, escriba el siguiente código en su código preferida o editor de texto sin formato, como el Bloc de notas (Windows) o TextMate (Mac), y guardar el archivo como style.css:

/ * Nombre del Tema: Veinte Quince ChildDescription: Mi hijo magnífica themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentyfifteen * /

Por lo general, se encuentran las siguientes cabeceras en un tema de WordPress:

Video: Como quitar el Creado con WordPress o Powered by WordPress - VitaminasWP

• Nombre Tema: El usuario ve el tema de este nombre en la parte final de WordPress.

• Descripción: Esta cabecera proporciona al usuario información adicional sobre el tema. Actualmente, esta cabecera sólo aparece en la página Administrar Temas (elija Apariencia → Temas).

• Autor: Esta cabecera se incluyen uno o más autores temáticos. Actualmente, esta cabecera se muestra sólo en la página administrar temas (elija Apariencia → Temas).

• Versión: El número de versión es muy útil para hacer el seguimiento de versiones no actualizadas del tema. Actualizar el número de versión cuando se modifica un tema es siempre una buena idea.

• Modelo: Esta cabecera cambia un tema en un tema menor. El valor de esta cabecera le dice a WordPress el nombre del directorio del tema de los padres. Debido a que su hijo utiliza el tema ejemplo Veinte Quince como el padre, su style.css debe tener un encabezado de plantilla con un valor de twentyfifteen.

  Video: modificar footer child theme

Activar el nuevo tema Veinte Quince niño como su tema activo.

Se puede ver que el nuevo tema no se ve del todo bien. El problema es que el nuevo tema niño sustituyó a la style.css archivo del tema de los padres, sin embargo, el nuevo tema del niño style.css archivo está vacío. Se podía copiar y pegar el contenido de la matriz del tema style.css archivo, pero eso sería perder parte del potencial de temas infantiles. En su lugar, desea modificar únicamente los estilos y / o características que desea modificar y dejar el resto solo.

Cargando el estilo de un tema de los padres

Una de las mejores cosas de Cascading Style Sheets (CSS) es cómo las reglas pueden anular mutuamente. Si lista la misma regla dos veces en el CSS, la regla que ocupa el último tiene prioridad.

Por ejemplo:

un {color: azul-} un {color: rojo-}

Este ejemplo es demasiado simple, pero ilustra muy bien el concepto. La primera regla dice que todos los enlaces (un tags) deben ser de color azul, mientras que el segundo dice que los enlaces deben ser de color rojo. Debido a las reglas CSS afirman que la última instrucción tiene prioridad, los enlaces serán rojas.

Video: Herramienta para Personalizar el pie de página de un sitio web creado con Divi

Usando esta característica de CSS, puede heredar todo el estilo del tema de los padres y modificar selectivamente sobreescribiendo las reglas del tema de los padres. Pero ¿cómo se puede cargar al niño del tema style.css archivo para que hereda el estilo del tema de los padres?

Afortunadamente, CSS tiene otra gran característica que le ayuda a hacer esto con facilidad. Sólo tiene que añadir una línea con el tema de Veinte Quince Niño style.css archivo:

/ * Nombre del tema: Veinte Quince ChildDescription: Mi hijo magnífica themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentyfifteen * / @ url de importación ( ‘../ twentyfifteen / style.css’) -

Una serie de cosas que están pasando aquí, así que vamos a dividirla en parte por parte:

• @importar: Esto le dice al navegador que cargue otra hoja de estilo. El uso de este le permite arrastrar en la hoja de estilos de los padres de forma rápida y sencilla.

• url (‘...’): Esto indica que el valor es un lugar y no un valor normal.

• (‘../twentyfifteen/style.css’) -: Esta es la ubicación de la hoja de estilos de los padres. Note la / twentyfifteen nombre del directorio. Esto necesita ser cambiado para que coincida con el Modelo: valor en la cabecera de la CSS de modo que se carga la hoja de estilo apropiado.

Después de actualizar su sitio, se ve que el diseño y el diseño del tema de los niños coinciden con el tema original Veinte Quince.

Personalización del estilo del tema de los padres

Su tema Veinte Quince niño está configurado para que coincida con el tema de Veinte Quince padres. Ahora puede agregar un nuevo diseño con el tema de Veinte Quince Niño style.css archivo. Un ejemplo sencillo de cómo funciona la personalización es la adición de un estilo que convierte todos los H1, H2, H3 y encabezados en mayúsculas.

/ * Nombre del Tema: Veinte Quince ChildDescription: Mi hijo magnífica themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: url twentyfifteen * / @ import (` ../ twentyfifteen / style.css`) - h1, h2, h3 {text-transform : uppercase-}

Se puede ver cómo el tema niño se ve con las adiciones de estilo CSS aplicados - cada vez mejor, ¿verdad?

Como se puede ver, con sólo unas pocas líneas en una style.css archivo, puede crear un tema nuevo niño que añade personalizaciones específicas a un tema existente. No sólo es rápido y fácil de hacer, pero usted no tiene que modificar nada en el tema de los padres para hacer que funcione.