Editor WordPress

WordPress es un sistema de gestión de contenidos (CMS) el cual permite crear y gestionar páginas web de cualquier tipo. El 43.4% de las páginas web en internet han sido creadas con WordPress.

¿Qué Tipo de Sitios Web Puede Hacer WordPress?

• Sitios web comerciales
• tiendas de eCommerce
• Blogs
• Portafolios
• Currículums
• Foros
• Redes sociales
• Sitios de membresía
• Entre otros

Cómo editar HTML en WordPress

Usando HTML se puede insertar cualquier tipo de contenido como lo es texto, imágenes, videos. WordPress tiene un editor visual y uno de texto (HTML). Se puede cambiar fácilmente del editor visual al editor HTML ya que están ubicados uno a otro.

Cómo Editar HTML de WordPress en el Editor Clásico (TinyMCE)

Si se está usando el editor clásico de WordPress (TinyMCE) se puede editar el texto de todas las publicaciones yendo a la pestaña de texto.

Cómo Editar HTML de WordPress en el Editor de Bloque (Gutenberg)

En el caso del editor Gutemberg existen dos formas de cambiar entre los editores de texto:

1. Al hacer clic en el botón de menú de tres puntos en cada bloque
2. Al hacer clic en el menú de tres puntos en la parte superior izquierda para editar la publicación completa

Sin embargo también se pueden editar bloques ya insertados, para hacer esto deberemos dar clic en las opciones para un bloque individual y elegir la opción de Editar como HTML como se puede ver en la siguiente imagen.

Si quiere editar todo el documento en HTML se puede acceder al editor de código del menú desplegable principal de Herramientas y Opciones. O también se puede acceder usando el atajo de teclado para cambiar entre los dos editores pulsando las teclas CTRL +SHIFT + ALT + M.

El código HTML que se añada debe estar bien formado y aparecer en las etiquetas permitidas. Con los botones botones en la parte superior del editor de texto, es más fácil y rápido insertar las etiquetas HTML más comunes. También debes saber que WordPress.com tiene algunas restricciones de código, por lo que no están permitidos JavaScript, los elementos incrustados ni los formularios personalizados por motivos de seguridad.

Editores de Terceros

En los sitios web plan Business o eCommmerce se pueden instalar plugins de editores de terceros como lo pueden ser Elementor y WP Bakery algunos de estos temas tienen su editor propio. Si se va a utilizar un editor de un tercero y se necesita soporte, lo mejor es acudir a la documentación que ellos tienen.

Las hojas de estilo en cascada o CSS aplican el estilo que tendrá el código HTML. Es responsable de determinar cómo se va a ver la página web.

Cuando se aplica un tema de WordPress, al sitio web se aplicará un diseño, color y fuentes especificos. Si no te gusta el tema predeterminado, puedes usar otro.

Si se desea mantener el tema pero se quiere cambiar la fuente utilizada, en este caso se deberá editar el CSS y el PHP en WordPress. Este método no es adecuado para principiantes de WordPress.

Existen dos maneras de editar el código PHP y CSS en WordPress: una es utilizando el editor de código WordPress, la otra es utilizar el cliente FTP.

Editor de códigos para WordPress

El primer método es accediendo al editor de código de WordPress. Hay que tener en cuenta que solo se puede usar este método si el sitio web funciona correctamente, es decir que el sitio web no se bloquea debido a ataques de Malware o actualizaciones fallidas. 

Una vez que hayas creado un tema secundario, actívalo. Luego, puedes ir a Apariencia -> Editor.

Asegúrate de seleccionar el tema secundario específico que deseas editar. Por ejemplo, si deseas editar el pie de página, puedes seleccionar footer.php en el lado derecho. Luego, puedes agregar o editar el código en el Editor de Código.

Después de editar el código, haz clic en el botón Actualizar archivo.

Cliente FTP

El siguiente método es usar un cliente FTP. Si bien este podría ser un método poderoso, no es recomendable usarlo. No es seguro y podría poner en peligro tu sitio web si se maneja de mala forma. 

Primero se deben crear las credenciales de inicio a tu FTP. luego puedes abrir tu cliente FTP e ingresar los detalles de tu host FTP como lo son el Nombre de Usuario y la Contraseña 

Una vez que se realice la conexión, se tendrá acceso al código fuente de WordPress. Selecciona cualquier archivo que desees editar, haz clic derecho y elige editar. Después de que termines de editar, puedes guardar los cambios.

Cómo Agregar CSS Personalizado a WordPress

Si solo quiere agregar un CSS personalizado en vez de editar el código HTML o PHP de WordPress no es necesario utilizar el editor de código dentro del dashboard o los métodos de Servidor FTP.

Se puede utilizar el personalizador de WordPress. Esta opción es mas simple, otro beneficio de este método es que se puede ver una imagen previa de los cambios en tiempo real.

Para empezar, vaya a Apariencia -> Personalizar en el dashboard de WordPress:

Luego, buscar la opción CSS Adicional en el Personalizador de WordPress:

Esto abrirá el editor de código en el cual se puede agregar el código CSS deseado. Mientras agrega CSS, la vista previa en vivo de su sitio automáticamente se actualizará de acuerdo a estos cambios:

Otra buena opción para agregar CSS es el plugin Simple CSS de Tom Usborne. Le da una opción similar en el Personalizador de WordPress, y también le permite agregar CSS personalizado a publicaciones individuales o páginas a través del meta box.

Finalmente, si quiere agregar un montón de CSS personalizado – como cientos o miles de líneas – otra opción es crear su propia hoja de estilo CSS personalizada y utilizar wp_enqueue_scripts para agregarlo a su tema.

Autor: Nicolás Romero Robayo

Editor: Carlos pinzón

Código: UPCW-8-1

Universidad: Universidad Central

Referencias

Kinsta. (2022). ¿Qué es WordPress? Explicación para Principiantes. Kinsta. https://kinsta.com/es/base-de-conocimiento/que-es-wordpress/

Kinsta. (2019). Cómo Editar el Código de WordPress – HTML, CSS, PHP (Guía Sencilla). Kinsta. https://kinsta.com/es/base-de-conocimiento/editar-codigo-wordpress/

Lopez, B. (2022). ¿Qué es WordPress, para qué sirve y cómo funciona?. Ciudadano 2.0. https://www.ciudadano2cero.com/que-es-wordpress/

WordPress. (s.f). Editores. WordPress. https://wordpress.com/es/support/editores/

Deyimar, A. (2021). ¿Cómo editar HTML en WordPress?. Hostinger. https://www.hostinger.co/tutoriales/editar-html-wordpress

Kinsta. (2019). Bloque personalizado de HTML de Gutenberg [Imagen]. Kinsta. https://kinsta.com/es/base-de-conocimiento/editar-codigo-wordpress/

Kinsta. (2019). Cómo editar un sólo bloque como HTML [Imagen]. Kinsta. https://kinsta.com/es/base-de-conocimiento/editar-codigo-wordpress/

Kinsta. (2019). Cómo acceder al editor completo de código en Gutenberg [Imagen]. Kinsta. https://kinsta.com/es/base-de-conocimiento/editar-codigo-wordpress/

Kinsta. (2019). Cómo acceder al Personalizador de WordPress [Imagen]. Kinsta. https://kinsta.com/es/base-de-conocimiento/editar-codigo-wordpress/

Kinsta. (2019). Donde encontrar la opción de CSS Adicional en el Personalizador de WordPress [Imagen]. Kinsta. https://kinsta.com/es/base-de-conocimiento/editar-codigo-wordpress/

Kinsta. (2019). Cómo editar CSS en el Personalizador de WordPress [Imagen]. Kinsta. https://kinsta.com/es/base-de-conocimiento/editar-codigo-wordpress/

Romero, B. (17 de Julio de 2022). Gutenberg WordPress Editor: Qué es y tutorial del nuevo editor de WordPress [Video]. Youtube. https://www.youtube.com/watch?v=GpUCO1FMwWo

fsweb. (2016). WordPress [Imagen]. Pixabay. https://pixabay.com/es/vectors/wordpress-c%c3%b3digo-wp-poes%c3%ada-tableta-1863504/

hostinger. (2021). switching between editors in the wordpress classic editor [Imagen]. hostinger. https://www.hostinger.co/tutoriales/editar-html-wordpress