No es de extrañar que WordPress impulse más de un tercio de todos los sitios web. No existe ningún otro sistema de gestión de contenidos (CMS) gratuito que ofrezca tanta flexibilidad desde el primer momento. Con una idea en cabeza, puedes crear prácticamente cualquier tipo de sitio web, ¡sin tocar una línea de código! Para la mayoría de los usuarios, los temas y complementos son suficientes para que su sitio web haga lo que quieren. Sin embargo, a veces se necesita un poco más de flexibilidad. Quizás la forma en que se muestra algo no sea exactamente de tu agrado. Quizás incluso prefieras codificar un hipervínculo a mano (si tienes los conocimientos necesarios) o quizás quieras ajustar el tamaño del encabezado. Cualquiera sea el motivo, estos son los momentos en los que necesitas dar un paso más y modificar las cosas. En el editor Gutenberg de WordPress, esto significa agregar o editar HTML en el editor de código. Por eso, en esta publicación, cubriremos cuándo es necesario editar HTML en WordPress y explicaremos cómo hacerlo. ¡Empecemos!
Qué es HTML (y por qué es importante)
HTML significa lenguaje de marcado de hipertexto. Usamos HTML para agregar instrucciones o (marcar) contenido como texto e imágenes. En WordPress, obtienes dos tipos de editores, el sencillo editor visual donde un clic crea código detrás de escena y el editor de código donde puedes ver y editar el código. Puede alternar y utilizar ambas vistas para desarrollar su contenido. Si no estás familiarizado con HTML, mira la imagen a continuación:
En la primera impresión, parece como si alguien se hubiera caído sobre su teclado. Sin embargo, si se examina más de cerca, se puede ver el contenido que describe la página a continuación:
Puedes encontrar el texto, pero todo lo que lo rodea son las instrucciones HTML y CSS que controlan su apariencia, formato y diseño. ¿Por qué necesitas agregar HTML en WordPress? Desde el primer momento, WordPress está diseñado para que los usuarios puedan evitar tener que mirar una sola línea de código. Y, gracias a Managed, también podrás instalar WordPress y empezar a publicar en cuestión de minutos, sin ningún conocimiento técnico. También es el alojamiento de WordPress más rápido disponible, por lo que no tiene que preocuparse por la velocidad de su sitio, y mucho menos por el administrador del servidor. Por lo tanto, nunca ha sido tan fácil para alguien sin conocimientos técnicos crear un sitio de WordPress. Cuando llegó el nuevo editor de bloques de WordPress, Gutenberg, obtuvimos una forma aún más fácil de formatear contenido y agregar archivos, imágenes y videos. Si bien el editor visual es más que suficiente para las necesidades básicas de formato, como agregar títulos y cambiar fuentes, para tareas específicas puede resultar un desafío. Para agregar un enlace nofollow, por ejemplo. Insertar código HTML personalizado en su página o publicación de WordPress es la única opción para hacer esto. Afortunadamente, no es necesario ser el desarrollador front-end más capacitado para manejar HTML. Simplemente abre el Editor de código y ponte a trabajar. Ahora está listo para ver cómo se ve en la práctica agregar HTML a WordPress. Empecemos. Cómo utilizar el editor de código de WordPress: con ejemplos Hay dos formas de ver el HTML de su publicación y página en el editor de código. Puede editar una publicación o página completa o centrarse en un bloque individual para editar. Antes de que podamos comenzar, asegúrese de haber iniciado sesión en el Panel de administrador de WordPress y abra la publicación o página que desea editar. Veamos algunos ejemplos básicos de cómo se puede utilizar este lenguaje de marcado. Edite una publicación o página con el Editor de código. Haga clic en los tres puntos en la esquina superior derecha de su publicación o página:
Haga clic en el Editor de código para cambiar el editor a este modo. En esta pantalla, puede realizar los cambios que desee en su publicación o página:
Para este ejemplo, asumiremos que estás escribiendo una publicación de blog para tu sitio de WordPress y se trata de qué tecnología esperas que explote en 2021. Para presentar y discutir los méritos de cada tecnología, la presentas como una nueva. sección. Para hacer esto, utilizará un título que se destaque del resto del texto. Naturalmente, puedes hacer esto con un solo clic en el editor visual a través del menú desplegable de encabezado. Lo haremos con HTML en la opción Editor de Código. Comience ubicando el texto donde agregará su título:
Luego agregue las etiquetas de encabezado al principio y al final, así:
Una vez que haya terminado y esté listo para guardar los cambios, haga clic en el botón Actualizar o Publicar en la esquina superior derecha:
Aquí hay una instantánea de cómo se ve la página con el nuevo encabezado:
Editar un bloque específico Ahora vamos a centrarnos en un bloque específico para editarlo en HTML. La única diferencia con el ejemplo anterior es cómo acceder al código. Nuevamente, deberá iniciar sesión en el Panel de administrador de WordPress. Luego abra una página o publicación lista para editar. Para comenzar, haga clic en el bloque individual que desea editar. A la derecha del bloque, verás 3 puntos verticales. Haga clic en los puntos:
Aparecerá un menú emergente. Seleccione la opción Editar como HTML. Ahora verá el bloque mostrado en el código. Este es el lugar para realizar cambios o adiciones al bloque:
En este ejemplo, agregaremos un enlace de no seguimiento a un bloque de texto. Un enlace nofollow es una etiqueta que le indica al motor de búsqueda que ignore ese enlace. Un enlace HTML típico que siguen los motores de búsqueda es el siguiente:
Con una etiqueta nofollow, se convierte en: Como puedes ver, agregar una etiqueta nofollow simplemente significa agregar el rel=”no seguir” atributo al enlace:
Una vez que haya terminado, deberá hacer clic en las opciones Actualizar o Publicar en la esquina superior derecha del editor para guardar los cambios. ¡Felicitaciones, ahora sabe cómo agregar HTML a una página o publicación de WordPress! Si está interesado en ampliar sus conocimientos de HTML, encontrará una gran cantidad de recursos que, y seamos realistas, es genial si no tiene que depender de otros para realizar pequeños cambios en el sitio. ¡Feliz personalización! Una de las mejores cosas de WordPress es lo fácil que es de usar, razón por la cual mucha gente se aleja del HTML. Sin embargo, puedes lograr mucho más fuera de los límites del editor visual. Aprender cualquier lenguaje de programación es un desafío, hay nuevos términos que descifrar y formatear para hacerlo bien. Pero como hemos visto, el lenguaje de marcado HTML es notablemente sencillo y amigable para los recién llegados. Tomarse un tiempo para familiarizarse con el Editor de código le brindará una experiencia más gratificante al editar sus páginas tal como las imaginó, e incluso podría ahorrarle algo de dinero al contratar a alguien para que haga el trabajo por usted.
¿Tiene alguna pregunta sobre el editor de código de WordPress? ¡Háganos saber en la sección de comentarios!
Facebook Comments
Disqus