Cómo crear un widget en el tema de su hijo

Publicado: 2022-10-23

Si desea personalizar su sitio de WordPress más allá de los cambios básicos, debe aprender a crear un widget en su tema secundario . Los widgets de WordPress son pequeños bloques de contenido que puede agregar a las barras laterales de su sitio web u otras áreas listas para widgets. Estas áreas generalmente se encuentran en el pie de página o en el encabezado de su sitio. Los widgets pueden contener cualquier cosa, desde texto e imágenes hasta reproductores de video y audio. Incluso puede encontrar complementos que conviertan sus barras laterales en fuentes de redes sociales. En este artículo, le mostraremos cómo crear un widget en su tema hijo y le explicaremos los beneficios de usar uno.

Creé un tema secundario y me gustaría agregar un área de logotipo patrocinado arriba del pie de página. ¿Supongo que la forma de hacerlo sería usar un widget? ¿Cómo creo un nuevo widget o utilizo uno de los widgets de pie de página existentes para que se muestre donde quiero? Al ir a Apariencia. Se requiere el paso 1 si desea un control total sobre la barra lateral o desea cambiar su configuración. Es técnicamente posible lograr lo que necesita, pero se requiere un desarrollo personalizado. Puede consultar https://theme.co/x/member/custom-development para obtener más información.

¿Cómo creo un widget personalizado en WordPress?

Crédito: Zendesk

Puede buscar y seleccionar Widgets en el menú Apariencia. Debería ver el widget de ejemplo de Hostinger en la lista de widgets disponibles. Al arrastrar el widget, puede cargarlo en la barra lateral en el lado derecho de la página. Puede visitar su sitio web después de haber realizado los cambios.

Un widget de WordPress es una pequeña colección de contenido que se agrega a áreas específicas de widgets . Hay varios tipos de widgets que le permiten mostrar varios tipos de información en cualquier página, dependiendo de dónde los coloque. Algunos widgets están disponibles como característica estándar, mientras que otros están disponibles como complementos o como tema. Los cuatro métodos enumerados anteriormente deben incluirse en su clase si va a crear un widget básico. Para usar el Widget en el tablero, también debe registrarlo usando la función register_widget(). Antes de estudiar el ejemplo que proporcionamos para este artículo, repasaremos el propósito de cada sección del código, además de explicar por qué cada sección es importante. Cada uno de los cuatro métodos de Custom_Widget es único.

El widget se creó como resultado del método __construct() utilizando el parámetro custom_widget. Al usar register_widget() al final, se puede registrar el mismo widget. Debido a que cada una de las partes debe agregarse a las opciones del widget con la declaración if*…*, nos hemos asegurado de que solo se muestre si está incluida. El método widget() proporciona una manera de mostrar textos de varios párrafos y usamos la función nl2br() para hacerlo. La función sanitize_text_field() elimina los espacios en blanco, tabulaciones o saltos de línea innecesarios. El último también tiene un valor predeterminado establecido como predeterminado dentro del campo de selección, lo que significa que el destino del enlace está configurado en blanco de forma predeterminada. Puede seleccionar el título, el texto, el enlace y si el enlace debe estar presente en una nueva pestaña o no.

Una vez que haya terminado de completar las opciones, presione el botón Guardar. Si elige un tema diferente para su widget, se generará de manera diferente. En nuestro caso, Lekker WordPress tiene un widget similar al que se muestra a continuación.

Cómo crear un tema hijo

Crédito: TemplateToaster

Para crear un tema secundario, debe crear una nueva carpeta para el tema secundario y agregar una hoja de estilo. El tema secundario heredará el estilo y la funcionalidad del tema principal, pero puede agregar reglas CSS personalizadas a la hoja de estilo del tema secundario para anular los estilos del tema principal. También puede agregar funciones personalizadas al archivo functions.php del tema secundario para anular las funciones del tema principal.

Puede agregar nuevas funciones al tema secundario siempre que no herede la funcionalidad del tema principal. No hay vínculo entre los temas secundarios y los temas principales ; los temas secundarios están separados de los temas principales. Con un tema hijo, puede mantener su sitio web actualizado y mantenerlo fácilmente. También lo ayudará a reducir la probabilidad de sobrescribir y perder la apariencia de su sitio web. Es fundamental tener en cuenta que el tema secundario contiene todos los mismos elementos que el tema principal. Incluimos todos los archivos de plantilla, funciones y activos en esta categoría, como JavaScript e imágenes. El archivo style.css del tema secundario se puede modificar para satisfacer las necesidades del niño.

Una de las formas más sencillas de crear un tema de WordPress para su hijo es usar un complemento. Si su tema principal muestra un mensaje de error, selecciónelo en el menú desplegable y haga doble clic en Analizar. A continuación, se le pedirá que ingrese el directorio para su tema secundario. Aparecerá un nombre de carpeta en los archivos que componen su sitio web. Si el término es exclusivo de su sitio web, puede nombrarlo como desee. Si tiene la intención de utilizar su tema principal como base para un nuevo tema, es posible que desee incluir una breve descripción y un nombre exclusivo. Si desea realizar cambios en su sitio, asegúrese de que esté en funcionamiento antes de hacerlo.

Puede realizar todos los cambios que desee en un momento específico creando manualmente un tema secundario de WordPress . El paso 1 es crear una carpeta para el tema de su hijo. hojas de estilo de los temas padre e hijo. Es hora de cambiar el nombre del archivo style.css. El cuarto paso es incluir el archivo style.css en el directorio del tema secundario. Podrás configurar tu tema hijo manualmente si vas a Apariencia. El uso de un tema secundario garantiza que no tenga que editar un tema principal directamente.

Puede realizar fácilmente cambios importantes en su sitio web utilizando un tema secundario porque es fácil de ajustar. También debe encontrar un proveedor de alojamiento confiable. Un paquete de alojamiento compartido de DreamHost te permitirá mejorar el rendimiento de tu sitio web a un precio asequible.

3 cosas a tener en cuenta al crear un tema infantil

La creación de un tema secundario requerirá que cree una carpeta en la que se almacenará el tema. Configure una hoja de estilo y una función en esa carpeta. Luego, en la carpeta del tema secundario, copie los archivos del tema principal. Vamos a la cama.
Un tema infantil debe pensarse de varias maneras. Recuerde incluir el nombre de archivo del tema principal en el primer paso. Por ejemplo, si su tema principal es WPBakery Page Builder, su tema secundario debe llamarse WPBakery Page BuilderChild. Lo segundo que debe hacer es guardar los archivos del tema principal, además de la hoja de estilo y los archivos functions.php. Asegúrese de que los archivos del tema estén actualizados y que estén en la ubicación correcta.
Si está creando un tema secundario para un complemento, querrá mantener los archivos del complemento en la carpeta del tema secundario. Un tema secundario del complemento WPBakery Page Builder debe incluir la carpeta del complemento WPBakery Page Builder, así como la carpeta del tema secundario del complemento WPBakery Page Builder.

Tema hijo de WordPress

Un tema hijo de WordPress es un tema que hereda la funcionalidad de otro tema, llamado tema padre. Los temas secundarios son la forma recomendada de modificar un tema existente. Cuando se activa un tema secundario, anulará la hoja de estilo, los archivos de plantilla y las funciones del tema principal.

Con la plataforma WordPress, puede personalizar un sitio web completamente sin conocimientos de HTML, CSS o PHP. La desventaja es que cualquier cambio realizado en el tema después de que el desarrollador lo haya actualizado se borrará. En lugar de usar un tema secundario, puede usar uno que le permita realizar cambios en un sitio web sin tener que volver a tocar los archivos originales. Los archivos de un tema existente se pueden modificar o agregar como un tema secundario. Este tema solo cambiará las partes que desee cambiar y usará las mismas partes del tema principal. Las tres partes más importantes de un tema hijo son una carpeta, una hoja de estilo y un archivo functions.html. Un tema hijo debe tener tres componentes: su propia carpeta, una hoja de estilo y su archivo functions.php.

Los temas secundarios, como todos los temas, se encuentran en WP-content/themes de la instalación de WordPress. Todo lo que necesita hacer es ingresar el nombre y la plantilla del tema. Es importante recordar que es solo si tiene la intención de usar su tema, no yo. El archivo functions.php es la base de código que le permite cambiar y agregar funciones y características a un sitio web de WordPress. Crear el archivo es tan simple como crear una hoja de estilo. Si no tiene la intención de usar PHP en el futuro para modificar su tema, puede hacerlo sin él. Si está utilizando un tema principal, probablemente ya sepa cómo debería verse su sitio web.

Para obtener este estado, debe copiar y pegar las hojas de estilo de sus temas principales. Puede hacer esto usando CSS o la regla @import. El tema de su hijo debe ser exactamente como su padre si todo lo demás va según lo planeado. Ahora podemos comenzar a personalizar nuestro tema y cambiar las cosas para lograr el resultado deseado. Las personalizaciones se pueden realizar de varias maneras, y repasaremos muchas de ellas. Los estilos personalizados se pueden agregar a un tema secundario, pero no se pueden agregar a un tema principal. Siguiendo los pasos a continuación, puede realizar cualquier cantidad de cambios en su sitio web.

Asegúrese de que el tema secundario siga la misma estructura de carpetas que el tema principal. Si desea modificar un archivo en una carpeta denominada plantillas de página en su tema principal, debe crear una carpeta en el directorio de su tema secundario denominada plantillas de página. Simplemente renombramos custom-full-width.php del tema principal para crear nuestra plantilla de página personalizada. Como ejemplo, en footer-custom.php, creamos una clase de ancho completo en el elemento de pie de página. Lo único que queda es ingresar algo de código en nuestra hoja de estilo. Como resultado, puede ver nuestra página de ancho completo. Estamos bien hasta que necesitamos pulirlo.

Los ganchos de tema le permiten personalizar un tema secundario sin tener que modificar los archivos principales. Los enlaces temáticos son pequeños íconos que aparecen en los archivos de un tema y le permiten agregar contenido, funciones y otros elementos. Los anzuelos vienen en dos variedades: anzuelos de acción y anzuelos de filtro. Un enlace de filtro modifica las funciones que se encuentran en la ubicación del enlace, mientras que los enlaces de acción agregan funcionalidad personalizada a las funciones existentes. Es simple crear un tema hijo en WordPress: todo lo que necesita es una sola línea de código. Por esta razón, tenemos la intención de apuntar a una función que maneje los créditos de pie de página en el tema Twenty Fifteen. El archivo footer.php modificado en el archivo functions.html en su tema secundario debe eliminarse.

Los ganchos en los temas infantiles se pueden usar de varias maneras. Si usamos un tema hijo, podemos personalizar completamente un sitio web sin tener que cambiar sus archivos subyacentes. Si desea agregar un tema o marco, puede hacerlo sin escribirlo desde cero y sus cambios están a salvo de actualizaciones; si algo sale mal, el tema siempre estará ahí.

3 ocasiones en las que un tema infantil es ventajoso

Hay algunas situaciones en las que un tema secundario sería beneficioso. Un tema principal no incluye todas las características necesarias. Ha habido cambios en el tema principal, pero estos no aparecen en el tema secundario. No es compatible con las actualizaciones más recientes de WordPress.

Cómo crear un tema hijo en WordPress paso a paso

Un tema hijo es un tema de WordPress que hereda su funcionalidad de otro tema de WordPress, llamado tema padre. Los temas secundarios a menudo se usan cuando desea personalizar o cambiar el estilo de un tema de WordPress existente sin perder la capacidad de actualizar ese tema. Para crear un tema hijo, deberá tener un conocimiento básico de cómo codificar en PHP. Una vez que haya creado el tema secundario, puede agregar sus propias personalizaciones en el directorio del tema secundario.
1. Cree un nuevo directorio para su tema hijo.
2. Cree una hoja de estilo para su tema hijo.
3. Incluya la hoja de estilo en su tema hijo.
4. Activa el tema hijo.

Cómo crear un tema hijo en WordPress

Puede adjuntar su tema a una carpeta llamada child creando una nueva carpeta. Entonces tendrá una hoja de estilo secundaria en la misma carpeta. Para completar la tarea, crea una función. Debe incluir el archivo child.php en la misma carpeta que el archivo parent.php. Antes de que pueda comenzar a usar su nuevo tema secundario , deberá copiar los archivos principales de WordPress. Los temas secundarios heredan los archivos y configuraciones de sus padres porque es su responsabilidad. Como resultado, si desea utilizar cualquiera de las funciones o configuraciones de sus temas principales, debe copiarlas en su tema secundario.

Widget personalizado de WordPress

Un widget de WordPress personalizado es un tipo de complemento de WordPress que le permite agregar un widget personalizado a su sitio de WordPress. Los widgets personalizados de WordPress generalmente son creados por desarrolladores externos y se pueden encontrar en el repositorio de complementos de WordPress.org.

¿Qué más puede hacer WordPress además de incluir un widget para texto? Este tutorial lo guiará a través de los pasos para crear un widget de WordPress personalizado. Si eres nuevo en la programación, este tutorial puede no ser para ti. Le recomendamos que eche un vistazo a nuestra serie Desarrollo de WordPress para principiantes para obtener más información. Se debe usar una función constructora para especificar una identificación, un título, un nombre de clase y una descripción para un widget. Con el método widget(), puede generar el contenido real de su widget. Para nuestro ejemplo, usaremos get_bloginfo() para mostrar el título del widget.

De lo contrario, simplemente usaría el widget de texto de WordPress para crear la página. Todo el método widget() debe estar anidado dentro de la instancia jpen_Example_Widget. El método form() se usa para agregar campos de configuración a un widget que se mostrará en el área de administración de WordPress. Aquí es donde muchos widgets con muchas opciones obtienen su nombre. En el caso de nuestro widget de ejemplo, solo queremos que los usuarios puedan agregarle un título personalizado. Creé un tutorial para mostrarte cómo convertir cualquier plantilla HTML5 en un tema de WordPress. Para hacer una lista de todas las categorías, ordénelas en orden alfabético y luego organícelas en dos listas.

Un segundo widget, de la plantilla HTML5 de publicación de blog, será el widget de la barra lateral de la lista de categorías. Es fundamental emplear la clase WP_Widget para desarrollar un widget de barra lateral personalizado . Deberá perfeccionar sus conocimientos para crear los widgets personalizados más potentes. Si enfoca su atención en las cinco funciones, podrá crear un widget de WordPress basado en cualquier idea.

¿Cómo agrego estilos personalizados a los widgets de WordPress?

La sección Apariencia se puede encontrar aquí. Seleccione el widget al que desea agregar estilos personalizados haciendo clic en él en la página de widgets . Después de eso, debe desplazarse hacia abajo hasta la pestaña Avanzado en Panel de bloqueo. Se puede agregar una clase CSS personalizada haciendo clic en ella. Al hacer clic en el botón Actualizar, puede guardar los cambios.

¿Cómo cambio la apariencia de un widget de WordPress?

En las pantallas de administración de WordPress, vaya a Apariencia > Personalizar. Puede acceder a la pantalla de personalización del widget haciendo clic en el menú Widget en el Personalizador de temas. Para encontrar el widget que ya está registrado, haga clic en la flecha hacia abajo en el área de widgets.