Cómo hacer un Sitio Web o Blog en 2024 - Guía fácil y Gratuita para Crear un Sitio Web

Cómo usar códigos cortos en tus temas de WordPress

¿Quieres utilizar códigos cortos en tu tema de WordPress?

Normalmente, utilizará códigos cortos dentro de áreas de contenido como publicaciones, páginas o widgets de barra lateral. Sin embargo, a veces es posible que desees agregar un código corto dentro de tu tema de WordPress.

En este artículo, le mostraremos cómo agregar fácilmente cualquier código corto a su tema de WordPress.

Cómo usar códigos cortos en tus temas de WordPress

¿Por qué utilizar códigos cortos en tus temas de WordPress?

Los códigos cortos le permiten agregar todo tipo de funciones a su sitio web, incluidas galerías de imágenes, formularios, feeds de redes sociales y mucho más.

WordPress viene con algunos códigos cortos integrados, pero también hay muchos complementos populares de WordPress que agregan códigos cortos a su sitio.

Por ejemplo, Formularios WP tiene bloques fáciles de usar, pero también proporciona códigos cortos para que pueda agregar módulos a otras áreas de su sitio web.

Un ejemplo de un código corto de WordPress, proporcionado por WPForms

En la mayoría de los casos, agregará códigos cortos dentro de áreas de contenido como publicaciones y páginas.

Para obtener más información, consulte nuestra guía completa sobre cómo agregar un código corto en WordPress.

Agregar un bloque de código corto a una página o publicación de WordPress

Sin embargo, a veces es posible que desees utilizar un código corto dentro de tus archivos de tema de WordPress.

Esto le permite agregar elementos dinámicos a áreas que no puede editar usando el editor de publicaciones estándar de WordPress, como la página de archivo. También es una manera fácil de usar el mismo código corto en varias páginas.

Por ejemplo, puedes agregar un código corto a la página de tu tema o a la plantilla de publicación.

Con esto en mente, veamos cómo puedes usar códigos cortos en tu tema de WordPress. Simplemente use los enlaces rápidos a continuación para ir directamente al método que desea utilizar:

Método 1: uso del editor completo del sitio (solo temas en bloque)

La forma más sencilla de utilizar códigos cortos en su tema de WordPress es utilizar el editor de sitio completo. Esto le permite agregar un bloque Shortcode a cualquier parte de su sitio web.

🔥 Leer:  Cómo desbloquear sitios web: una guía completa

Sin embargo, este método solo funciona con temas basados ​​en bloques como Hestia Pro. Si no estás usando un tema habilitado para bloques, necesitarás usar un método diferente.

Para comenzar, vaya a Apariencia » Editor en su panel de WordPress.

Abrir el editor de sitio completo de WordPress (FSE)

De forma predeterminada, el editor completo del sitio muestra la plantilla de inicio de su tema, pero puede agregar códigos cortos a cualquier plantilla.

Para ver todas las opciones disponibles, seleccione «Plantillas».

Agregar códigos cortos a una plantilla de WordPress usando el editor de sitio completo

Ahora puedes hacer clic en la plantilla que deseas editar.

Por ejemplo, agregaremos un código corto a la plantilla de página 404, pero los pasos serán exactamente los mismos independientemente de la plantilla que seleccione.

Agregar un código corto a un tema de WordPress usando un editor de sitio completo (FSE)

WordPress ahora mostrará una vista previa de la plantilla.

Para agregar un código corto, continúe y haga clic en el pequeño ícono de lápiz.

Edite la plantilla 404 de un tema de WordPress utilizando el editor de sitio completo (FSE)

Una vez hecho esto, haga clic en el icono azul «+» en la esquina superior izquierda.

En la barra de búsqueda, debes escribir «Código corto».

Agregar un bloque de código corto a un tema de WordPress

Cuando aparezca el bloque derecho, arrástrelo a la plantilla del tema.

Ahora puedes pegar o escribir el código corto que deseas usar.

Agregar bloques de código corto a un tema de WordPress

Después de eso, continúa y haz clic en el botón «Guardar».

Ahora simplemente visita tu blog de WordPress para ver el shortcode en acción.

Un código abreviado de ejemplo, en una plantilla de página 404

Método 2: editar archivos de temas de WordPress (funciona con cualquier tema de WordPress)

También puedes agregar códigos cortos a tu tema de WordPress editando los archivos del tema. Este método es más avanzado, pero funciona con todos los temas de WordPress.

Si nunca antes ha agregado código a su sitio, consulte nuestra guía paso a paso sobre cómo copiar y pegar código en WordPress.

Puede editar directamente archivos de temas individuales, pero esto dificulta la actualización de su tema de WordPress sin perder la personalización. Por este motivo, recomendamos sobrescribir los archivos del tema creando un tema hijo.

Si está creando un tema personalizado, puede agregar o editar código en archivos de temas existentes.

Cuando editas tus archivos de temas, no puedes agregar el código corto en el mismo formato que usas con las áreas de contenido estándar. En lugar de ver el resultado del shortcode, verá el shortcode en sí en la pantalla.

🔥 Leer:  Cómo borrar el historial visto recientemente en la aplicación Wish

Esto se debe a que WordPress no ejecuta códigos cortos dentro de los archivos de plantilla de temas. En su lugar, deberá indicarle explícitamente a WordPress que ejecute el código corto usando la función do_shortcode.

Para obtener más información, consulte nuestra guía sobre cómo agregar fácilmente código personalizado.

Aquí hay un ejemplo del código que agregará a sus archivos de tema de WordPress:

echo do_shortcode('');

Simplemente reemplace «galería» con el código corto que desea usar.

Si no está seguro de dónde agregar el código corto, consulte nuestra guía para principiantes sobre la jerarquía de plantillas de WordPress.

Si agrega un código corto con parámetros adicionales, deberá usar un fragmento de código ligeramente diferente.

Imagine que ha creado un formulario de contacto utilizando WPForms. En este caso, deberá utilizar el código abreviado estándar de WPForms más el ID del formulario:

echo do_shortcode("[wpforms id='92']");

Solución de problemas: qué hacer cuando do_shortcode no funciona

A veces, puede agregar un código corto a un archivo de tema, pero el resultado del código no aparece en su sitio web de WordPress. Por lo general, esto significa que el código corto depende de un complemento de WordPress o de algún otro código de su sitio web.

Si la función do_shortcode no funciona, asegúrese de que el complemento que proporciona el código corto esté instalado y activado yendo a Complementos » Complementos instalados.

En la imagen a continuación, WPForms está instalado pero deshabilitado, por lo que el código echo do_shortcode no funcionará.

Cómo instalar y activar un complemento de WordPress

También puede verificar si hay un código corto disponible para usar agregando la función shortcode_exists() a su archivo index.php.

En el siguiente fragmento, verificamos si el fragmento de WPForms está disponible para su uso en nuestro sitio web:

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

Si aún no ve el resultado del código abreviado en su sitio web, intente borrar su caché de WordPress, ya que es posible que vea una versión desactualizada de su sitio.

Método 3: cree su propio tema de WordPress (totalmente personalizable)

Otra opción es crear un tema personalizado de WordPress. Este es un método más avanzado, pero te permite agregar tantos códigos cortos como quieras a cualquier área de tu tema de WordPress. También puedes realizar otros cambios para crear un tema que tenga exactamente las características y el diseño que deseas.

🔥 Leer:  ¿Adiós Google? Mozilla prueba Bing como el nuevo motor de búsqueda en Firefox

En el pasado, tenías que seguir complicados tutoriales de WordPress y escribir código para crear un tema personalizado de WordPress. Sin embargo, ahora puedes crear un tema personalizado sin escribir una sola línea de código usando SemillaProd.

SeedProd es el mejor creador de páginas de WordPress y viene con un creador de temas. Esto le permite diseñar sus propios temas usando arrastrar y soltar.

Función avanzada de creación de temas de SeedProd

Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo crear un tema de WordPress personalizado (sin ningún código).

Una vez que haya creado un tema, puede agregar códigos cortos a cualquier parte de su sitio web de WordPress yendo a SeedProd » Creador de temas.

Plantillas temáticas personalizadas de WordPress

Aquí, busque la plantilla donde desea utilizar el código corto.

Luego, coloca el cursor sobre la plantilla y haz clic en «Editar diseño» cuando aparezca.

Creando un tema personalizado usando SeedProd

Esto abrirá la plantilla en el generador de páginas de arrastrar y soltar de SeedProd.

En el menú de la izquierda, desplácese hasta la sección «Avanzado». Aquí, busque el bloque Shortcode y arrástrelo a su diseño.

Agregar un bloque Shortcode a un tema usando SeedProd

En la vista previa en vivo, simplemente haga clic para seleccionar el bloque Shortcode.

Ahora puede agregar su código corto al cuadro «Código corto».

Agregar un formulario de contacto a un tema de WordPress usando un código corto

De forma predeterminada, SeedProd no muestra la salida del shortcode en la vista previa en vivo.

Para ver su código corto en acción, haga clic en el botón «Mostrar opción de código corto».

Vista previa de la salida del shortcode en SeedProd

A continuación, es posible que desees agregar un estilo a la salida del shortcode seleccionando la pestaña «Avanzado».

Aquí puede cambiar el espaciado, agregar CSS personalizado e incluso agregar efectos de animación CSS.

Diseñar la salida del shortcode usando el generador de temas SeedProd

Cuando esté satisfecho con el aspecto de la página, simplemente haga clic en el botón «Guardar».

A continuación, seleccione «Publicar» para activar el código abreviado.

Publicar un tema personalizado de WordPress usando SeedProd

Ahora puede visitar su sitio web para ver el código abreviado personalizado en acción.

Esperamos que este tutorial te haya ayudado a aprender a usar códigos cortos en tus temas de WordPress. Es posible que también desee consultar nuestra guía sobre cómo crear una página de destino en WordPress y nuestras selecciones de expertos para los mejores complementos de redes sociales para WordPress.