M谩s

    C贸mo usar c贸digos cortos en sus temas de WordPress

    - Advertisement -

    驴Quieres usar c贸digos cortos en tu tema de WordPress?

    Normalmente, usar谩 c贸digos abreviados dentro de 谩reas de contenido como publicaciones, p谩ginas o widgets de barra lateral. Sin embargo, a veces es posible que desee agregar un c贸digo abreviado dentro de su tema de WordPress.

    En este art铆culo, le mostraremos c贸mo agregar f谩cilmente cualquier c贸digo abreviado a su tema de WordPress.

    驴Por qu茅 usar c贸digos cortos en sus temas de WordPress?

    Los c贸digos abreviados le permiten agregar todo tipo de funciones a su sitio web, incluidas galer铆as de im谩genes, formularios, fuentes de redes sociales y mucho m谩s.

    WordPress viene con algunos c贸digos cortos incorporados, pero tambi茅n hay muchos complementos populares de WordPress que agregan c贸digos cortos a su sitio.

    Por ejemplo, WPForms tiene bloques f谩ciles de usar, pero tambi茅n proporciona c贸digos abreviados para que pueda agregar formularios a otras 谩reas de su sitio web.

    Un ejemplo de un shortcode de WordPress, proporcionado por WPForms

    La mayor铆a de las veces, agregar谩 c贸digos abreviados 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 shortcode en WordPress.

    Agregar un bloque de shortcode a una p谩gina o publicaci贸n de WordPress

    Sin embargo, a veces es posible que desee utilizar un c贸digo abreviado dentro de sus archivos de temas 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 su p谩gina 404. Tambi茅n es una manera f谩cil de usar el mismo shortcode en varias p谩ginas.

    Por ejemplo, puede agregar un c贸digo abreviado a la plantilla de p谩gina o publicaci贸n de su tema.

    Con eso en mente, veamos c贸mo puede usar c贸digos abreviados en su tema de WordPress. Simplemente use los enlaces r谩pidos a continuaci贸n para saltar directamente al m茅todo que desea usar.

    M茅todo 1: usar el editor de sitio completo (solo temas de bloque)

    La forma m谩s f谩cil de usar c贸digos abreviados en su tema de WordPress es usar el editor de sitio completo. Esto le permite agregar un bloque de Shortcode a cualquier parte de su sitio web.

    Sin embargo, este m茅todo solo funciona con temas basados 鈥嬧媏n bloques como Hestia Pro. Si no est谩 utilizando un tema habilitado para bloques, deber谩 utilizar un m茅todo diferente en su lugar.

    Para empezar, dir铆gete a Temas 禄 Editor en el tablero de WordPress.

    Abrir el editor de sitio completo de WordPress

    De forma predeterminada, el editor completo del sitio muestra la plantilla de inicio de su tema, pero puede agregar c贸digos abreviados a cualquier plantilla o parte de la plantilla, como el encabezado o el pie de p谩gina.

    Para ver todas las opciones disponibles, simplemente seleccione ‘Plantillas’ o ‘Partes de plantilla’.

    Agregar un shortcode a una plantilla de WordPress

    Ahora puede hacer clic en la plantilla o parte de la plantilla que desea editar.

    Como ejemplo, agregaremos un shortcode a la plantilla de la p谩gina 404, pero los pasos ser谩n exactamente los mismos sin importar la plantilla que seleccione.

    Agregar un shortcode a un tema de WordPress usando un editor de sitio completo (FSE)

    WordPress ahora mostrar谩 una vista previa de la plantilla o parte de la plantilla.

    Para agregar un c贸digo abreviado, contin煤e y haga clic en el icono de l谩piz peque帽o.

    Edici贸n de la plantilla 404 de un tema de WordPress usando 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, debe escribir ‘C贸digo corto’.

    Agregar un bloque de shortcode a un tema de WordPress

    Cuando aparezca el bloque correcto, arr谩strelo y su茅ltelo en la plantilla del tema.

    Ahora puede pegar o escribir el c贸digo abreviado que desea usar.

    Agregar bloques de Shortcode a un tema de WordPress

    Despu茅s de eso, contin煤e y haga clic en el bot贸n ‘Guardar’.

    Ahora, simplemente visite su blog de WordPress para ver el shortcode en acci贸n.

    Un ejemplo de un shortcode, en una plantilla de p谩gina 404

    M茅todo 2: Edici贸n de los archivos de su tema de WordPress (funciona con cualquier tema de WordPress)

    Tambi茅n puede agregar c贸digos abreviados a su tema de WordPress editando los archivos del tema. Este m茅todo es m谩s avanzado, pero funciona con todos los temas de WordPress.

    Si no ha agregado c贸digo a su sitio antes, consulte nuestra gu铆a paso a paso sobre c贸mo copiar y pegar c贸digo en WordPress.

    Puede modificar los archivos de temas individuales directamente, pero esto dificulta la actualizaci贸n de su tema de WordPress sin perder la personalizaci贸n. Por este motivo, recomendamos anular los archivos de tema creando un tema secundario.

    Si est谩 creando un tema personalizado, puede agregar o modificar el c贸digo en sus archivos de tema existentes.

    Al editar sus archivos de temas, no puede agregar el c贸digo abreviado en el mismo formato que usa con las 谩reas de contenido est谩ndar. En lugar de ver la salida del c贸digo abreviado, ver谩 el c贸digo abreviado en la pantalla.

    Esto sucede porque WordPress no ejecuta c贸digos abreviados dentro de los archivos de plantilla de tema. En su lugar, deber谩 decirle expl铆citamente a WordPress que ejecute el c贸digo abreviado usando el do_shortcode funci贸n.

    Para obtener m谩s informaci贸n, consulte nuestra gu铆a sobre c贸mo agregar f谩cilmente un c贸digo personalizado.

    Aqu铆 hay un ejemplo del c贸digo que agregar谩 a sus archivos de temas de WordPress:

    echo do_shortcode('[gallery]');
    

    Organizado con 鉂わ笍 por C贸digo WP

    Usar con 1 clic en WordPress

    Simplemente reemplace ‘galer铆a’ con el c贸digo abreviado que desea usar.

    Si no est谩 seguro de d贸nde agregar el c贸digo abreviado, consulte nuestra gu铆a para principiantes sobre la jerarqu铆a de plantillas de WordPress.

    Si est谩 agregando un c贸digo abreviado con par谩metros adicionales, el fragmento de c贸digo tambi茅n cambiar谩 un poco.

    Imagina que has creado un formulario de contacto usando WPForms. En este caso, deber谩 usar el c贸digo abreviado est谩ndar de WPForms m谩s la ID del formulario:

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

    Organizado con 鉂わ笍 por C贸digo WP

    Usar con 1 clic en WordPress

    Soluci贸n de problemas: qu茅 hacer cuando do_shortcode no funciona

    A veces, puede agregar un c贸digo abreviado a un archivo de tema, pero la salida del c贸digo no aparece en su sitio web de WordPress. Esto generalmente significa que el c贸digo abreviado depende de un complemento de WordPress o alg煤n otro c贸digo en su sitio web.

    Si la funci贸n do_shortcode no funciona, aseg煤rese de que el complemento que proporciona el c贸digo abreviado est茅 instalado y activado yendo a Complementos 禄 Complementos instalados.

    En la siguiente imagen, WPForms est谩 instalado pero desactivado, por lo que el echo do_shortcode el c贸digo no funcionar谩.

    C贸mo instalar y activar un complemento de WordPress

    Tambi茅n puede verificar si hay un shortcode disponible para que lo use agregando el shortcode_exists() funci贸n a su archivo index.php.

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

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

    Organizado con 鉂わ笍 por C贸digo WP

    Usar con 1 clic en WordPress

    Si a煤n no ve la salida del c贸digo abreviado en su sitio web, intente borrar el cach茅 de WordPress, ya que puede estar viendo una versi贸n desactualizada de su sitio.

    M茅todo 3: crear su propio tema de WordPress (totalmente personalizable)

    Otra opci贸n es crear un tema de WordPress personalizado. Este es un m茅todo m谩s avanzado, pero le permite agregar tantos c贸digos abreviados como desee a cualquier 谩rea de su tema de WordPress. Tambi茅n puede realizar otros cambios para crear un tema que tenga exactamente las caracter铆sticas y el dise帽o que desea.

    En el pasado, necesitabas seguir complicados tutoriales de WordPress y escribir c贸digo para crear un tema de WordPress personalizado. Sin embargo, ahora es posible crear un tema personalizado sin escribir una sola l铆nea de c贸digo usando Producto de semilla.

    SeedProd es el mejor creador de p谩ginas de WordPress y tambi茅n 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 paso a paso, consulte nuestra gu铆a sobre c贸mo crear un tema de WordPress personalizado (sin ning煤n c贸digo).

    Despu茅s de crear un tema, puede agregar c贸digos abreviados a cualquier parte de su sitio web de WordPress yendo a SeedProd 禄 Creador de temas.

    Plantillas de temas personalizados de WordPress

    Aqu铆, encuentre la plantilla en la que desea usar un c贸digo abreviado.

    Luego, pase el mouse sobre esa plantilla y haga 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谩zate hasta la secci贸n 芦Avanzado禄. Aqu铆, encuentra el bloque Shortcode y arr谩stralo a tu dise帽o.

    Agregar un bloque de 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 en el cuadro ‘C贸digo corto’.

    Agregar un formulario de contacto a un tema de WordPress usando shortcode

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

    Para ver su shortcode en acci贸n, haga clic en el interruptor ‘Mostrar opci贸n de shortcode’.

    Vista previa de la salida del shortcode en SeedProd

    Despu茅s de eso, es posible que desee agregar algo de 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.

    Dar estilo a la salida de shortcode utilizando el generador de temas SeedProd

    Cuando est茅 satisfecho con el aspecto de la p谩gina, simplemente haga clic en el bot贸n ‘Guardar’.

    Despu茅s de eso, seleccione ‘Publicar’ para hacer que el shortcode est茅 activo.

    Publicar un tema de WordPress personalizado usando SeedProd

    Ahora puede visitar su sitio web para ver el shortcode personalizado en acci贸n.

    Esperamos que este tutorial le haya ayudado a aprender a usar c贸digos abreviados en sus temas de WordPress. Tambi茅n puede 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.

    Si te ha gustado este art铆culo, suscr铆bete a nuestro Canal de Youtube para tutoriales en v铆deo de WordPress. Tambi茅n puedes encontrarnos en Gorjeo y Facebook.

    La publicaci贸n C贸mo usar c贸digos cortos en sus temas de WordPress apareci贸 por primera vez en AprenderWP.


    Fuente: C贸mo usar c贸digos cortos en sus temas de WordPress

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.