A?adir botónPuede mejorar el efecto visual y la experiencia del usuario de la página. Este artículo presentará tres métodos:Insertar HTML manualmente responder cantando CSS(matem.) génerohacer uso deplug-in (componente de software)y la combinación de Plugin TinyMCE AdvancedRápida implementación de la funcionalidad de los botones.

Método 1: Insertar HTML y CSS manualmente

Este método es adecuado para los usuarios que no confían en los plugins para conseguir efectos de botón totalmente personalizados mediante la edición de HTML y CSS.

Pasos:

1. Cambiar al modo "Texto
   Abra el editor clásico de WordPress y haga clic en la pesta?a Texto para ir a la vista Texto.

2. A?ada el código HTML del botón
   Inserte el siguiente código en el lugar donde debe a?adirse el botón:<a class="custom-button" href="https://example.com" target="_blank">Pulse aquí</a>Aquí:
   • href: La dirección del enlace del botón.
   • target="_blank": Configure el enlace para que se abra en una ventana nueva.

3. A?adir CSS personalizado
   Abra "Apariencia -> Personalizar -> CSS Extra" y a?ada el siguiente código:
   • Estas propiedades CSS:
   • color de fondo: El color de fondo del botón.
   • color: Color del texto del botón.
   • acolchado: El margen interior controla el tama?o del botón.
   • border-radius: Efecto de esquinas redondeadas.
   • :hover: Cambio de estilo al pasar el ratón por encima.

.custom-button { color de fondo: #3498db; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 5px; display. inline-block; } .custom-button:hover { background-color: #2980b9; }

4. Guardar y previsualizar
   Pulse el botón "Actualizar" o "Publicar" para previsualizar la página y ver el aspecto que tendrá.

Método 2: A?adir un botón mediante un plug-in

Si no está familiarizado con el código, puede optar por un plugin para implementar rápidamente la funcionalidad del botón.

Plugin recomendado:Shortcodes Ultimate

1. Instalación de plug-ins
   • Vaya al panel de control de WordPress -> Plugins -> A?adir nuevo plugin.
   • buscar algo Shortcodes UltimateA continuación, haga clic en "Instalar" y active el plugin.

2. A?adir botón
   • Para editar un post o una página, en la barra de herramientas del editor, busque "Inserte el código corto"Botón
   • Seleccione de la lista "Botón"Opciones.
   • Rellene los atributos pertinentes, como el texto del botón, la dirección del enlace, el color, el tama?o, etc.
   • Pulse el botón "Insertar", el complemento generará automáticamente el siguiente código corto:

[su_button url="https://example.com" target="blank" style="flat" background="#3498db" color="#ffffff" size="5" radius="5"]Haga clic aquí[/ su_button]

3. Guardar y ver los resultados
   El plugin aplica automáticamente los estilos y usted puede ver el aspecto de los botones personalizados directamente en el front-end.

Método 3: Combinar con el plugin TinyMCE Advanced

Si se requiere que esté en el Barra de herramientas del editor clásicoPara a?adir una opción de botón directamente al Herramientas avanzadas del editor Complementos.

1. Instalación de plug-ins
   • Vaya a Plugins -> A?adir nuevo plugin, Buscar Herramientas avanzadas del editor.
   • Haga clic en "Instalar" y active.

2. Barras de herramientas personalizadas
   • Una vez activado el plugin, vaya a "Configuración -> Herramientas avanzadas del editor".
   • Arrastre la herramienta relacionada con el "Botón" a la barra de herramientas.

3. A?adir botón
   Seleccione la opción de botón en el editor y edite el texto, el enlace y el estilo del botón.

Notas y consejos

• dise?o sensible: Asegúrese de que los botones se visualizan bien en dispositivos móviles y de que se pueden establecer estilos específicos para diferentes tama?os de pantalla mediante consultas de medios.
• Optimizar la velocidad de carga: Minimice el código CSS innecesario para evitar que afecte al rendimiento del sitio.
• seguridad: A?adir para enlaces rel="noopener noreferrer" atributo para aumentar la seguridad y evitar operaciones potencialmente maliciosas.

resúmenes

Existen varias formas de a?adir botones al editor clásico de WordPress. Insertando manualmente HTML y CSS, puede conseguir un aspecto totalmente personalizado, mientras que el uso de un plugin proporciona una forma cómoda de hacerlo, adecuada para quienes no están familiarizados con elcodificaciónusuarios; en combinación con el complemento TinyMCE Advanced, también es posible a?adir directamente una nueva cuenta de usuario en elUso de los botones de la barra de herramientasOpciones.

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