Guía de códigos cortos para botones de WordPress: explicación de plugins, códigos personalizados y optimización del diseño

WordPressbotonesEl uso de códigos cortos puede añadir interactividad y atractivo visual a su sitio web. Los botones con estilo pueden añadirse fácilmente con códigos cortos de botones, sin codificación compleja, o pueden hacerse rápidamente con plugins o funcionalidades integradas.

Este artículo detallará la implementación y las mejores prácticas para los códigos cortos de botones de WordPress desde los siguientes aspectos:

• Método del código corto
• Método Plug-in
• Método directo para añadir botones
• Consejos para el diseño y la optimización de botones
• Preguntas frecuentes

1. Añada botones de WordPress utilizando shortcodes

Los códigos cortos son fragmentos concisos de código que pueden incrustar funcionalidades complejas en una página o artículo. Por ejemplo, se pueden crear rápidamente botones de enlace y personalizar sus estilos mediante shortcodes.

Paso 1: Añadir shortcode de botón

1. Inicie sesión en el panel de administración de WordPress.
2. Ir a "estado exterior > Editor de archivos temáticos", encontrar funciones.php archivo. Si le preocupa que la modificación de los archivos del tema pueda afectar a las actualizaciones, utilice la opción subtema o complementos personalizados.

3. existe funciones.php Añada el siguiente segmento de código al archivo:

// Funciones que definen los códigos cortos de los botones
function custom_button_shortcode($atts) {
    // Definir propiedades por defecto
    $atts = shortcode_atts(
        array(
            'url' => '#', // enlace por defecto
            'text' => 'click me', // texto del botón por defecto
            'class' => 'custom-button', // clase CSS por defecto
        ),
        $atts.
        'botón'
    );
 
    // Devuelve el código HTML del botón
    return '' . esc_html($atts['text']) . '';
}
 
// Registrar el código corto
add_shortcode('botón', 'custom_button_shortcode');

Paso 2: Establezca el estilo del botón

1. Ir a "estado exterior > personalización > CSS adicional".

2. Añada el siguiente CSS:

.custom-button {
    display: inline-block;
    acolchado: 10px 20px;
    color de fondo: #0073aa;
    color: #fff.
    decoración del texto: ninguna;
    borde-radio: 5px;
    font-size: 16px;
}

.custom-button:hover {
    color de fondo: #005177.
}

Paso 3: Utilice códigos cortos

Inserte el siguiente código corto en el lugar en el que desee que aparezca el botón (por ejemplo, en una página, en un post):

[botón url="https://example.com" text="Más información" class="my-custom-class"]

Descripción de la propiedad

• url: El enlace de destino del botón.
• texto: El texto de visualización del botón.
• clase: Clase CSS personalizada (puede estar vacía).

2. Añada el shortcode del botón de WordPress utilizando el plugin

Los plugins son una solución práctica si no está familiarizado con la codificación. Aquí están los pasos detallados para añadir un shortcode botón a través de un plugin.

Plug-ins recomendados::Códigos cortos de WP

WP Shortcodes es un potente plugin que le permite crear rápidamente códigos cortos para elementos como botones.

procedimiento

• Instalación de plug-ins::
  • Inicie sesión en el panel de control de WordPress.
  • Buscar e instalar Códigos cortos de WP para activarlo.

• Código corto del botón de configuración::
  • Abra la página o el artículo al que desea añadir un botón.
  • En el editor, busque el botón de código corto Iconos.
  • Seleccione "botones" para configurar el texto, el enlace, el color, el tamaño, etc. del botón según sus necesidades.

• Guardar y previsualizar::
  • Una vez completada la configuración, guarde la página y previsualice el efecto del botón.

vantage

• Proporciona visualización sin necesidad de escribir código manualmente.
• Hay disponible una amplia gama de estilos y características.

3. Añadir botones directamente usando el editor Gutenberg

El editor Gutenberg tiene un módulo "botón" incorporado, que es la forma más directa de hacerlo sin plugins o shortcodes adicionales.

mover

• Abrir el editor::
  • Cree o edite páginas/posts.
  • Pulse el botón "+" para añadir un nuevo bloque.

• Añadir un bloque de botones::
  • Busque el bloque "Botón" e insértelo.
  • Introduzca el texto del botón y establezca el enlace de destino.

• Estilos de botones personalizados::
  • Utilice la barra de herramientas para ajustar el color, el tamaño, la alineación, etc. de los botones.
  • Estilos conmutables, por ejemplo, botones rellenos o perfilados.

• Guardar y previsualizar::
  • Tras confirmar que está satisfecho con el aspecto, guarde y publique.

4. Diseño de botones y técnicas de optimización

Diseño del texto de los botones

• Hágalo sencillo, por ejemplo: "Más información", "Inscríbase ahora".
• Utilice verbos que potencien la acción, como "descargar" e "iniciar".

comparación visual

• Los colores de los botones deben contrastar con el fondo para atraer la atención.
• Se recomienda una paleta de colores de marca, coherente con el estilo general del sitio.

clicabilidad

• Asegúrese de que los botones son lo suficientemente grandes para adaptarse a los dispositivos con pantalla táctil.
• Utilice esquinas redondeadas para mejorar el confort visual.

Pruebas y optimización

• Compruebe la visualización de los botones en diferentes dispositivos (por ejemplo, teléfonos móviles, tabletas, ordenadores de sobremesa).
• Asegúrese de que los enlaces de los botones funcionan para evitar problemas de experiencia de usuario.

5. Preguntas más frecuentes

¿Puedo añadir botones al pie de página o a la barra lateral?

Sí, es posible utilizar shortcodes en los widgets. Por ejemplo, configure el [botón] El código corto se inserta simplemente en el widget de texto.

¿Se pueden aplicar botones a los tipos de entrada personalizados?

Puede. Sólo tiene que insertar el shortcode en el tipo de post personalizado y el efecto será el mismo que el de un post/página normal.

¿Cómo puedo personalizar aún más el estilo del botón?

Añadiendo CSS personalizado, puede ajustar los colores de los botones, las fuentes, los efectos de animación y mucho más. También hay disponibles complementos que admiten estilos avanzados.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres