¿Quieres hacer tus páginas más potentes? Te enseñamos cómo incrustar código HTML en WordPress.

Como todos sabemos.WordPress proporciona un gran número de plugins y temas para ampliar su funcionalidad, pero a veces hay características o efectos específicos que pueden necesitar ser implementados a través de la aplicación Código HTML incrustado para conseguirlo. En este artículo se detalla cómo incrustar en WordPress Código HTMLy mejorar la funcionalidad y la interactividad de la página.

I. ¿Por qué utilizar código HTML?

• Mejorar la funcionalidad de la páginaAhora puedes utilizar ai para generar código y añadir fácilmente funciones interactivas adicionales como formularios, botones, vídeos incrustados, mapas, etc. incrustando código HTML.
• Mejorar la personalización de las páginas::WordPress Los editores integrados son potentes, pero a veces no se adaptan a las necesidades específicas del diseño de páginas. El uso directo del código HTML te da un control total sobre cómo se presenta el contenido de tu página.
• Incrustación de herramientas o código de terceros: por ejemplo, botones para compartir en redes sociales, herramientas analíticas (Google Analytics), código publicitario, código de seguimiento de marketing, etc., suelen requerir que incruste algún código HTML personalizado en la página.

En segundo lugar, la forma de incrustar código HTML en WordPress

WordPress ofrece a los usuarios diversas formas de incrustar código HTML, ya sea en una página, una entrada o un widget, lo que facilita la incrustación de código personalizado.

1. Insertar código HTML con el editor clásico

Si utiliza el Editor clásicoPuede seguir los pasos que se indican a continuación para incrustar el código HTML:

• Abrir artículo o páginaEn el backend de WordPress, seleccione escritos tal vez página webHaga clic en compilador.
• Cambiar a modo textoEn el editor, verá visualización responder cantando ejemplares Dos opciones, cambiar a ejemplares Tab.

• Insertar código HTMLEn el cuadro de edición de texto, puede escribir o pegar directamente código HTML. Por ejemplo, inserte un código de formulario personalizado, un código de vídeo o un código de incrustación para una herramienta de terceros.
• Guardar y ver los resultadosUna vez completada la inserción del código, haga clic en actualización tal vez escriba a, ver el efecto de la página o el artículo.

2. Incrustación de código HTML mediante el editor de bloques (Gutenberg)

Desde la versión 5.0, WordPress ha introducido la función Editor Gutenberg(editor de bloques), que es un editor más flexible y modular. Para incrustar código HTML en Gutenberg, puedes seguir estos pasos:

• Abrir artículo o página: Vaya a Backstage y seleccione escritos tal vez página webHaga clic en compilador.
• Añadir bloques HTML personalizados::
  • En la página de edición, haga clic en Añadir bloques (icono más).
  • Buscar y seleccionar HTML personalizado Bloques.

• Introduzca el código HTMLEscriba o pegue el código HTML que desea incrustar en este bloque.
• Preestrenos y lanzamientosPuede hacer clic en avances para ver el efecto del código y asegurarse de que no hay problemas, luego pulse el botón escriba a tal vez actualización.

3. Incrustación de código HTML en widgets

WordPress gadget También te permite incrustar código HTML, comúnmente utilizado en barras laterales, pies de página y otras ubicaciones, pero ten en cuenta que este widget no está disponible en todos los temas. Estos son los pasos:

• Ir a la configuración del widget::
  • En el backend de WordPress, seleccione estado exterior → gadget.
• Añadir widgets HTML personalizados::
  • Arrastrar y soltar desde los gadgets disponibles HTML personalizado gadget a la ubicación deseada.

• Insertar código HTMLEn el cuadro de texto del widget, escriba o pegue código HTML, como anuncios incrustados, botones de redes sociales, código para servicios externos, etc.

• Guardar y ver los resultadosCuando haya terminado, haga clic en guardar (un archivo, etc.) (informática)y, a continuación, ver la pantalla del gadget.

4. Incrustación de código HTML en plantillas de páginas

Para los desarrolladores o usuarios familiarizados con el código, modificar directamente los archivos de plantilla de página del tema es un método habitual. Este método permite un control total sobre la estructura HTML de la página. Los pasos son los siguientes:

• Abrir el archivo del tema::
  • En el backend de WordPress, seleccione estado exterior → Editor de temas.

• Edición de archivos de plantilla::
  • Busque el archivo de plantilla que debe editarse (por ejemplo single.phpypágina.php etc.), haga clic para editar.
• Insertar código HTMLInserte su código HTML personalizado en los lugares adecuados, por ejemplo, en la parte superior de la página, en la parte inferior, en el área de contenido, etc.

• Guardar y ver los resultadosUna vez finalizada la edición, pulse Documentos actualizadosy, a continuación, ver los resultados de la página.

tome nota de: Cuando edite directamente los archivos de plantilla, asegúrese de utilizar un tema hijo para realizar los cambios, de modo que no pierda los cambios cuando se actualice el tema.

Usos habituales del código HTML incrustado

• Formularios integradosLa incrustación de un formulario de contacto o de suscripción en un sitio web se realiza directamente a través del código HTML. Por ejemplo, utilizando un servicio de formularios de terceros como Formularios de GoogleyMailchimpo código de formulario personalizado.
• Vídeo y audio integrados: a través de HTML se puede poner fácilmente el YouTubeyVimeo o vídeos de otras plataformas se incrustan en la página para aumentar la interactividad del contenido.
• Código publicitario incrustadoSi desea mostrar anuncios en su sitio web, puede incrustar el código HTML proporcionado por una red de publicidad (como Google AdSense) en una página o barra lateral.
• Mapa integradoAl incrustar un archivo como Google Maps y otros códigos de mapa para que los usuarios puedan ver rápidamente la ubicación exacta de su empresa o tienda.
• Añadir botones de redes socialesBotones de compartir: puede incrustar botones de compartir para plataformas sociales como Facebook, Twitter, Instagram, etc., facilitando a los usuarios compartir contenidos en las redes sociales.

Precauciones al incrustar código HTML

• Garantizar la seguridad del códigoCuando incruste código HTML en WordPress, asegúrese de que el código es seguro. Evita insertar código malicioso, especialmente código de terceros de fuentes no fiables.
• diseño sensibleAsegúrate de que el código HTML que incrustas es adecuado para distintos dispositivos y tamaños de pantalla. Utiliza estilos CSS y consultas de medios adecuados para que la página se muestre correctamente en dispositivos móviles, tabletas y ordenadores de sobremesa.
• Optimización SEOCódigo HTML incrustado: el código HTML incrustado debe estar en consonancia con las mejores prácticas de SEO. Por ejemplo, debe hacerse un uso adecuado de las etiquetas de título (H1, H2, H3, etc., pero asegúrese también de que solo hay un H1 en una página) y de las etiquetas de enlace (H1, H2, H3, etc.).<a>) para mejorar la accesibilidad de la página y la facilidad de búsqueda.
• función de pruebaUna vez incrustado el código HTML, comprueba que funciona correctamente. Por ejemplo, comprueba que los formularios se envían correctamente, que los anuncios se muestran correctamente y que los botones para compartir en redes sociales funcionan.

V. Resumen

Al incrustar código HTML en WordPress puedes añadir muchas funciones personalizadas a tu sitio web, como formularios, vídeos, anuncios y mucho más. Estas funciones aumentan la interactividad de tus páginas y te ayudan a optimizar mejor tu sitio y a mejorar la experiencia del usuario. Tanto si utilizas el Editor clásico, el Editor de bloques o modificas un archivo de plantilla, WordPress ofrece una gran variedad de formas de incrustar código HTML para garantizar que puedas implementar fácilmente tus necesidades de personalización.

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