Cómo crear un tema infantil de WordPress (Video)

¿Quieres crear un tema infantil en WordPress? Una vez que aprendas los conceptos básicos de WordPress, probablemente quieras aprender a personalizar tu sitio de WordPress. Creemos que los temas infantiles son un gran punto de partida para cualquiera que desee personalizar temas de WordPress. En este artículo, le mostraremos cómo crear un tema infantil en WordPress.

Video Tutorial:

Suscribirse a AprenderWP

Para aquellos que no quieran ver el video, pueden continuar leyendo el artículo a continuación.

¿Por qué necesita crear un tema infantil?

Los temas infantiles se consideran la mejor manera de personalizar los temas de WordPress. Un tema hijo hereda todas las características y apariencia de su tema padre. Puede personalizarlo sin afectar al tema principal. Esto le permite actualizar fácilmente el tema principal sin preocuparse de perder los cambios.

Puedes aprender más sobre temas infantiles en nuestro artículo ¿Qué es un Tema Infantil de WordPress? Ventajas, desventajas y más.

Requisitos

Se requiere un conocimiento básico de CSS/HTML, para que usted pueda hacer sus propios cambios. Algún conocimiento de PHP ciertamente ayudaría. Si eres bueno copiando y pegando fragmentos de código de otras fuentes, entonces eso también funcionaría.

Le recomendamos que practique en su entorno de desarrollo local. Puede mover un sitio de WordPress en vivo al servidor local con fines de prueba o utilizar contenido ficticio para el desarrollo del tema.

Introducción

Cualquier buen tema de WordPress puede ser usado como tema principal. Sin embargo, hay muchos tipos diferentes de temas y algunos pueden no ser los más fáciles de trabajar. Por el bien de este tutorial, usaremos Twenty Thirteen , que es uno de los temas por defecto de WordPress.

Creando su primer tema infantil

Primero necesita abrir /wp-content/themes/ en su carpeta de instalación de WordPress y crear una nueva carpeta para su hijo thme. Puedes ponerle el nombre que quieras a esta carpeta. Para este tutorial lo llamaremos wpbdemo.

Abra un editor de texto como el Bloc de notas y pegue este código:

1234567891011/* Nombre del tema:   WPB Child Theme Theme URI: https://www.wpbeginner.com/ Descripción:  Un autor de veintitrés temas infantiles:       AprenderWP Author URI: https://www.wpbeginner.com Plantilla: twentythirteen Versión: 1.0.0*/ @import url(«…/twinthirteen/style.css»);

Ahora guarde este archivo como style.css en la carpeta de temas hijo que acaba de crear.

La mayoría de esas cosas en este archivo son auto-explicativas. A lo que realmente quieres prestar atención es a la Plantilla: twentythirteen .

Esto le dice a WordPress que nuestro tema es un tema infantil y que el nombre de nuestro directorio de temas para padres es veintitrés. El nombre de la carpeta principal distingue entre mayúsculas y minúsculas. Si proporcionamos WordPress con Template: Veintitrés años, entonces no funcionará.

La última línea de este código importa la hoja de estilo de nuestro tema padre al tema hijo.

Este es el requisito mínimo para crear un tema infantil. Ahora puede ir a Apariencia » Temas donde verá WPB Child Theme. Necesita hacer clic en el botón de activar para empezar a usar el tema hijo en su sitio.

Dado que aún no ha cambiado nada en el tema hijo, su sitio utilizará toda la funcionalidad y apariencia del tema padre.

Personalizando el tema de su hijo

Cada tema de WordPress tiene un archivo style.css en su directorio principal. La mayoría de las veces esta es la hoja de estilo principal de tu tema donde va todo el CSS. Sin embargo, es posible que algunos temas sólo contengan la información del encabezado del tema. Estos temas suelen tener archivos CSS ubicados en un directorio separado.

Para esta sección necesitarás un poco de conocimiento de CSS.

Google Chrome y Firefox incluyen herramientas de inspección integradas. Estas herramientas le permiten ver el HTML y CSS detrás de cualquier elemento de una página web.

Si desea ver el CSS utilizado para el menú de navegación, simplemente pase el ratón por encima del menú de navegación y haga clic con el botón derecho del ratón para seleccionar Inspeccionar elemento.

Esto dividirá la pantalla de su navegador en dos partes. En la parte inferior de la pantalla, verá el HTML y CSS de la página.

Al mover el ratón sobre diferentes líneas HTML, Chrome inspector las resaltará en la ventana superior. Como puede ver, tenemos el menú de navegación seleccionado en la captura de pantalla de arriba.

También le mostrará las reglas CSS relacionadas con el elemento resaltado en la ventana de la derecha.

Puedes intentar editar el CSS justo ahí para ver cómo se vería. Intentemos cambiar el color de fondo de .navbar a #e8e5ce.

Verá que el color de fondo de la barra de navegación cambiará. Si te gusta esto, entonces puedes copiar esta regla CSS y pegarla en el archivo style.css de tu Child Theme.

123.navbar {color de fondo: #e8e5ce;}

Guarda los cambios que hiciste en el archivo style.css y luego previsualiza tu sitio.

Repita el proceso para cualquier cosa que desee cambiar en la hoja de estilo de su tema. Aquí está la hoja de estilo completa que hemos creado para el tema infantil. Siéntase libre de experimentarlo y modificarlo.

1234567891011121314141516171718192021222324252627282930313233/* Nombre del tema:   WPB Child Theme Theme URI: https://www.wpbeginner.com Descripción:  Un autor de veintitrés temas infantiles:       AprenderWP Author URI: https://www.wpbeginner.com Plantilla: twentythirteen Versión: 1.0.0*/ @import url(«…/twinthirteen/style.css»); .site-title {padding: 30px030px;} .site-header .home-link {altura mín.: 0px;}.navbar {color de fondo: #e8e5ce;} .widget { color de fondo: #e8e5ce;}.site-footer {color de fondo: #d8cdc1;} .site-footer .sidebar-container { color de fondo:#533F2A}}.

Edición de los archivos de plantillas

Cada tema de WordPress tiene un diseño diferente. Veamos el diseño del tema Veintitrés. Tiene cabecera, menús de navegación, bucle de contenido, área de widgets de pie de página, área de widgets secundaria y pie de página.

Cada una de estas secciones es manejada por diferentes archivos en la carpeta veintitrés. Estos archivos se denominan plantillas.

La mayoría de las veces, estas plantillas llevan el nombre del área para la que se utilizan. Por ejemplo, la sección de pie de página se maneja normalmente con el archivo footer.php, el encabezado y las áreas de navegación se manejan con el archivo header.php. Algunas áreas, como el área de contenido, son manejadas por múltiples archivos llamados plantillas de contenido.

Lo primero que debe hacer es seleccionar el archivo de tema que desea modificar y luego copiarlo en el tema hijo.

Por ejemplo, desea eliminar el enlace$0027powered by WordPress$0027 del área de pie de página y añadir un aviso de copyright allí. Simplemente copie el archivo footer.php en el tema de su hijo y luego ábralo en un editor de texto plano como el bloc de notas. Averigüe las líneas que desea eliminar y sustitúyalas por las suyas propias. Así:

12345678910111213141415161718181920212223242526 «colophon «role=»contentinfo»> >                

Copyright Todos los derechos reservados.

                                              

En este código, hemos sustituido Veintitrés créditos por un aviso de copyright.

La resolución de problemas es mucho más fácil cuando se crean temas hijo. Por ejemplo, si eliminó accidentalmente algo que el tema principal requería, puede simplemente eliminar el archivo del tema secundario y comenzar de nuevo.

Adición de una nueva funcionalidad a un tema infantil

Encontrarás muchos tutoriales de WordPress que te piden copiar y pegar fragmentos de código en el archivo functions.php de tu tema.

Agregar fragmentos de código al archivo functions.php de un tema principal significa que los cambios se sobrescribirán cada vez que haya una nueva actualización para el tema principal. Por eso siempre se recomienda utilizar un tema hijo y añadir todos los fragmentos de código personalizados en el archivo functions.php del tema hijo.

Vamos a crear un nuevo archivo en la carpeta del tema de su hijo y le pondremos el nombre functions.php. En este ejemplo vamos a añadir un pequeño fragmento de código que cambiará la imagen del encabezado por defecto a nuestra propia imagen hecha a medida.

Ya hemos creado una imagen de cabecera y una miniatura editando la imagen de cabecera predeterminada de Twenty Thirteen. Luego, lo subimos al tema hijo dentro de la carpeta /images/headers/.

Después de eso necesitamos decirle a WordPress que use esta imagen como la imagen de cabecera por defecto para nuestro tema. Podemos hacerlo añadiendo este fragmento de código en el archivo functions.php de nuestro tema hijo:

1234567891011121314141516 $0027%s/images/headers/circle-wpb.png$0027) ); register_default_headers( array( $0027caramelo$0027=> array($0027url$0027 => $0027%2$s/images/headers/circle-wpb.png$0027, $0027thumbnail_url$0027=> $0027%2$s/images/headers/circle-wpb-thumbnail.png$0027, `descripción$0027 => __( `caramel$0027, `caramel header$0027, `thirteen$0027) ), ) ); } add_action( } after_setup_theme( ` after_setup_theme$0027, ` wpbdemo_custom_cheader_setup$0027);?>

Ahora si visitas Apariencia » Encabezado , podrás ver la imagen que hemos añadido como imagen por defecto.

Puede agregar cualquier fragmento de código personalizado que necesite en el archivo functions.php del tema de su hijo. Echa un vistazo a estos más de 25 trucos extremadamente útiles para el archivo de funciones de WordPress.

Solución de problemas

Como principiantes, se espera que cometan errores al trabajar en el tema de su primer hijo. No te rindas demasiado rápido. Echa un vistazo a nuestra lista de los errores más comunes de WordPress para encontrar una solución.

El error más común que usted vería es probablemente el error de sintaxis que ocurre generalmente cuando usted ha omitido algo en el código. Aquí hay una guía rápida que explica cómo encontrar y corregir el error de sintaxis en WordPress.

Resultado Final

Descargar tema de demostración

Puedes descargar el resultado final de nuestro tutorial de temas infantiles de WordPress haciendo clic aquí. Recuerde que este es un tema muy básico para niños basado en Veintitrés Trece.

Otros temas infantiles basados en veintitrés

Aquí hay algunos otros temas infantiles de WordPress basados en Twenty Thirteen. Eche un vistazo a ellos y vea cómo estos desarrolladores de temas personalizaron Twenty Thirteen.

Holi

Flor de Cerezo

2013 Azul

Cartera de pisos

Esperamos que este artículo le haya ayudado a aprender a crear un tema infantil de WordPress. Recuerde que hay mucho apoyo disponible para aquellos que lo necesitan.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Google+.

Deja un comentario