¿Busca crear un tema hijo en WP? Cuando haya aprendido los conceptos básicos de WP, seguramente deseará aprender a personalizar su lugar de WP. Los temas secundarios son un genial punto de inicio para cualquiera que busque personalizar temas de WP. En el presente artículo, le vamos a mostrar de qué forma crear un tema hijo en WP.
¿Por qué razón precisas un tema hijo?
Contents
Un tema hijo es un tema de WP que hereda la funcionalidad, la funcionalidad y el estilo de otro tema de WP, el tema primordial. Ahora, puede personalizar el tema secundario sin efectuar ningún cambio en el tema primordial. Los temas secundarios son la mejor forma de personalizar un tema de WP pues ahorra tiempo y esmero. El tema primordial ya viene con un sinnúmero de formatos y funciones, con lo que no debe codificar todo desde cero. Asimismo le dejan actualizar sus temas de WP de manera segura. Puesto que cambió el tema secundario y no el tema primordial, no va a perder ninguna personalización cuando actualice el tema primordial. Cuando esté satisfecho con el tema de su hijo, aun puede utilizarlo en otro lugar de WP.
Antes de comenzar a crear un tema hijo
Para crear un tema hijo, ha de saber que va a trabajar con código. Precisará un conocimiento básico de HTML y CSS para entender los cambios que debe efectuar en el código para conseguir sus objetivos. Asimismo es útil tener ciertos conocimientos de PHP. Por lo menos, ha de estar familiarizado con copiar y pegar fragmentos de otras fuentes. Le aconsejamos que practique en su ambiente de desarrollo local. Puede desplazar un lugar de WP en vivo a un servidor local para efectuar pruebas o bien emplear contenido falso de cara al desarrollo de temas. Por último, debe escoger un tema primordial. Debe escoger un tema primordial que sea afín en apariencia y funcionalidad a su objetivo final. La meta es efectuar la menor cantidad de cambios posible. En el presente artículo, usaremos el tema Twenty Twenty-One, que es uno de los temas predeterminados de WP.
Crea tu primer tema hijo
Puede crear un tema hijo manualmente creando la carpetita y los ficheros precisos. O bien puede crear un tema hijo utilizando un complemento. El procedimiento manual es útil pues le va a ayudar a familiarizarse con los ficheros con los que va a deber trabajar más adelante en el tutorial. El procedimiento del complemento se puede emplear si tiene contrariedades para crear estos ficheros. Solo precisa emplear un procedimiento y puede mudar al procedimiento que prefiera utilizando los links ahora.
Método 1: crear un tema hijo utilizando código
Primero, debe abrir / wp-content / themes / en su carpetita de instalación de WP y crear una nueva carpetita para su tema hijo. Puede nombrar esta carpetita como desee. Para este tutorial, lo vamos a llamar wpbdemo.
Entonces, debe crear los 2 primeros ficheros para su tema hijo. Empiece abriendo un editor de texto como el Bloc de notas. Entonces, debe pegar el próximo código en el documento en blanco. Nombre del tema: WPB Child Tema Tema URI: https://www.MundoCMS.com/ Descripción: A Twenty Twenty-One child theme Autor: MundoCMS Autor URI: https://www.MundoCMS.com Plantilla: vingttwentyone Versión: diez. 0 Dominio de texto: vingttwentyonechild Este código contiene información sobre el tema hijo, con lo que no dude en alterarlo para amoldarlo a sus necesidades. Ahora guarde este fichero con el nombre style.css en la carpetita del tema hijo que termina de crear. Esta es la hoja de estilo primordial para el tema de su hijo. Lo próximo que debe hacer es crear un segundo fichero que va a importar o bien va a poner en cola las hojas de estilo del tema primordial. Para hacer esto, cree un nuevo documento en su editor de texto y copie el próximo código. / * poner scripts y estilo en la cola del tema primordial * / function vingttwentyone_styles () {wp_enqueue_style (‘estilo hijo’, get_stylesheet_uri (), array (‘veintiuno-estilo’), wp_get_theme () -> get (‘ Versión’)); } add_action (‘wp_enqueue_scripts’, ‘twentytwentyone_styles’); Este código va a funcionar cuando use Twenty Twenty-One como tema primordial. Si está utilizando un tema primordial diferente, debe emplear un código diferente como se describe en el manual de temas de WP. Si tiene inconvenientes para alterar el código de un tema primordial diferente, puede emplear el procedimiento del complemento en su sitio. Ahora guarde este fichero como functions.php en la carpetita de su tema secundario. Regresaremos a este fichero más adelante para añadir funcionalidad a su tema hijo.
Notar: Previamente, el tema primordial se importaba con el comando @import en style.css. Ya no aconsejamos este procedimiento, en tanto que va a aumentar el tiempo que lleva cargar las hojas de estilo. Ahora ha creado un tema hijo muy básico, y cuando accede Apariencia »Temas debería ver el tema hijo de WPB. Va a deber hacer click en el botón Activar para empezar a emplear el tema hijo en su lugar.
Puesto que todavía no ha alterado nada en su tema secundario, su lugar empleará la funcionalidad y apariencia de su tema primordial. Ahora puede pasar a la próxima sección donde personalizará el tema hijo.
Método 2: crea un tema hijo utilizando un complemento
Child Tema Configurator es un complemento de WP simple de emplear que le deja crear y personalizar de forma rápida temas secundarios sin emplear ningún código. La primera cosa que debe hacer es instalar y activar el complemento Configurador de temas secundarios. Para conseguir más detalles, consulte nuestra guía punto por punto sobre de qué forma instalar un complemento de WP. Al activar, debe navegar a Herramientas »Temas infantiles en su panel de WP. En la pestañita Padre / Hijo, se le va a pedir que elija un tema primordial de un menú desplegable. Vamos a escoger el tema Twenty Twenty-One.
Cuando haga click en el botón Examinar, el complemento se cerciorará de que el tema sea conveniente para su empleo como tema primordial. 21 está bien.
Ahora, se le va a pedir que nombre la carpetita donde se va a guardar el tema hijo y escoja dónde guardar los estilos. Vamos a dejar la configuración predeterminada.
En la próxima sección, se le va a pedir que escoja de qué forma acceder a la hoja de estilo del tema primordial. De nuevo, usaremos la configuración predeterminada.
Cuando llegue a la sección siete, va a deber hacer click en el botón etiquetado «Haga click para editar los atributos del tema secundario». Ahora, puede llenar los detalles del tema de su hijo.
Cuando crea manualmente un tema secundario, pierde los menús y widgets del tema primordial. El configurador de temas secundarios puede copiarlos del tema primordial al tema secundario. Marque la casilla de la Sección ocho si quiere hacerlo.
Por último, haga click en el botón para crear su nuevo tema hijo. El complemento va a crear una carpetita para los temas de su hijo y añadirá los ficheros style.css y functions.php que empleará para personalizar el tema más adelante. Ya antes de activar el tema, debe hacer click en el link en la parte superior de la pantalla para conseguir una vista anterior y cerciorarse de que se vea bien y no rompa su lugar.
Si todo semeja estar marchando, haga click en el botón Activar y publicar y se va a cargar su tema hijo.
En este punto, el tema hijo se va a ver y se comportará precisamente como el tema padre. Entonces comenzaremos a personalizarlo.
Personaliza el tema de tu hijo
Ahora vamos a personalizar el tema secundario a fin de que sea un tanto diferente del tema primordial. Para hacer esto, añadimos código al fichero style.css, que requiere cierta familiaridad con CSS. Puede facilitar el proceso copiando y alterando el código existente del tema primordial. Puede localizar este código utilizando Google Chrome o bien Mozilla Firefox Inspector, o bien copiándolo de forma directa desde el fichero style.css del tema primordial.
Método 1: copie el código del inspector de Google Chrome o bien Firefox
La manera más fácil de descubrir qué código CSS precisa editar es emplear las herramientas de inspección que vienen con Chrome y Mozilla Firefox. Estas herramientas le dejan ver el HTML y CSS tras cualquier elemento en una web. Por poner un ejemplo, si quiere ver el CSS usado para el cuerpo de la publicación, sencillamente ponga el mouse sobre la publicación y haga click con el botón derecho para escoger Inspeccionar.
Esto va a dividir la pantalla de su navegador en 2 partes. En la parte inferior de la pantalla, va a ver el código HTML y CSS de la página. En dependencia de la configuración de su navegador, HTML y CSS pueden aparecer a la derecha de la pantalla.
Conforme mueve el mouse sobre diferentes líneas HTML, el Inspector de Google Chrome las destaca en la ventana superior. Asimismo le enseñará las reglas CSS relacionadas con el factor destacado. Puede procurar alterar el CSS acá para poder ver de qué forma se vería. Procuremos mudar el tono de fondo del cuerpo a # fdf8ef.
Va a ver que el tono de fondo de la página cambiará, mas el cambio es solo temporal. A fin de que sea permanente, va a deber copiar esta regla CSS y pegarla en el fichero style.css de su tema hijo. cuerpo {color de fondo: # fdf8ef; } Guarde los cambios que efectuó en el fichero style.css y después consiga una vista anterior de su lugar. Puede continuar repitiendo el proceso para cualquier cosa que desee mudar en la hoja de estilo de su tema. Acá está la hoja de estilo completa que creamos para el tema hijo. Siéntase libre de probar y alterarlo. Nombre del tema: WPB Child Tema Tema URI: https://www.MundoCMS.com/ Descripción: A …
){kind=link}