Una guía para principiantes sobre cómo editar código en WordPress

Estás leyendo la publicación: Una guía para principiantes sobre cómo editar código en WordPress

A medida que comience a avanzar en la creación de sitios web de WordPress, es probable que desee comenzar a codificar para tener un mejor control de sus sitios web. Puede ser una batalla larga y cuesta arriba si quieres aprender a editar código en WordPress. Para ayudar, aquí hay una introducción sobre cómo puede comenzar.

Nota: este no es un tutorial para aprender CSS, HTML, PHP o Javascript. En cambio, esto le mostrará las diversas formas en que puede editar el código en WordPress.

Formas de editar el código de WordPress: una guía para principiantes

Lo primero que debe saber es que hay muchas formas diferentes de agregar o editar código en WordPress. Esto va desde editar el código fuente a través del acceso FTP o simplemente agregar CSS personalizado a su tema.

Lo importante es que sepas lo básico. Siempre asegúrese de hacer una copia de seguridad de su sitio web antes de manipular el código. Si es posible, trabaje en la puesta en escena de copias de su sitio web para que no se arriesgue a estropear su sitio en vivo.

Si su proveedor de alojamiento no ofrece pruebas, le recomiendo que se actualice a un mejor proveedor que sí lo haga. Uno de los mejores para esto es Siteground, pero otros incluyen Kinsta, WPX y Cloudways.

Cómo editar HTML con el editor de bloques de WordPress

Gutenberg Editor es el editor de bloques nativo de WordPress que hace que la creación de páginas y publicaciones en WordPress sea más sencilla que nunca. Usando el Editor Gutenberg, puede agregar HTML personalizado a través del bloque HTML.

El bloque HTML personalizado hace que sea realmente fácil obtener los diseños exactos que desea a través de una interfaz intuitiva.

Una de las mejores cosas de usar Gutenberg Editor es que es nativo de WordPress. Por lo tanto, no está agregando complementos o complementos adicionales que puedan ralentizar su sitio web. También significa que no tiene que desembolsar dinero extra por complementos premium.

El Editor Gutenberg viene en todas las instalaciones más nuevas de WordPress. Si tiene un sitio web antiguo que ha estado usando el editor clásico de WordPress, es posible que deba cambiar a Gutenberg manualmente.

Cómo editar HTML con el editor clásico de WordPress

El editor clásico de WordPress todavía se puede usar incluso en sitios web más nuevos mediante el uso del complemento Editor clásico. Puede agregar el complemento a su sitio web de WordPress a través del repositorio de complementos.

Puede agregar fácilmente HTML personalizado a través del editor de texto utilizando el complemento del editor clásico de WordPress. Simplemente haga clic en el botón que dice Texto y agregue su código personalizado a continuación. Puede hacer clic en el editor visual para ver cómo se ve su código en la interfaz.

Si bien es increíblemente fácil usar HTML con el editor clásico de WordPress, le recomiendo encarecidamente que no lo use. El editor de bloques de Gutenberg facilita la realización de muchas cosas sin necesidad de un código personalizado. Como se demostró anteriormente, puede agregar fácilmente cualquier código que necesite para las áreas sobre las que desea tener más control.

Cómo editar HTML con WordPress usando Page Builders

Otra forma de agregar HTML personalizado a su sitio web es mediante el uso de creadores de páginas. Al igual que Gutenberg, estos constructores agregan una interfaz visual intuitiva a WordPress, lo que facilita que los diseñadores principiantes y expertos obtengan los diseños deseados.

Todos estos creadores de páginas y complementos de creación de bloques ofrecen una forma de agregar código personalizado, incluidos bloques CSS personalizados, bloques HTML personalizados y bloques Javascript personalizados. Con constructores como Elementor, incluso puede agregar un estilo CSS personalizado a bloques específicos o editar el estilo global.

Algunos ejemplos de creadores de páginas y creadores de bloques populares incluyen:

  • Elementor
  • Constructor de oxígeno
  • Constructor brillante
  • Bloques de Kadence
  • Constructor Brix
  • divide
  • Compositor visual

Algunos de estos constructores los discutiré con más detalle a continuación como una alternativa para aprender a editar código en WordPress.

Cómo editar HTML con widgets de WordPress

Otra opción que tiene para agregar y editar HTML en su sitio web de WordPress es mediante el uso de Widgets.

Los widgets son elementos modulares en WordPress que se pueden usar para agregar funciones específicas. Estos se pueden agregar a diferentes áreas de su sitio web, como la barra lateral y las áreas de pie de página. Desde el primer momento, WordPress le proporciona dieciséis widgets diferentes con más que se pueden agregar a través de complementos de terceros.

Uno de estos widgets que puede agregar es el widget HTML personalizado. Puede agregar esto a su barra lateral, área de pie de página, publicaciones recientes, comentarios recientes y la sección de archivos. Con el widget HTML, puede agregar código personalizado para mejorar el diseño y la funcionalidad de su sitio web.

Cómo editar HTML con el editor de temas de WordPress

Para los usuarios más avanzados que entienden el back-end de WordPress, otra forma de editar el código es a través del editor de temas de WordPress.

El editor de temas es donde se encuentran todos los archivos de temas de WordPress. Tiene toda la información sobre el estilo de su tema y cómo se muestra a los usuarios en la interfaz.

Aquí es donde debe buscar si desea editar el estilo global para que los cambios aparezcan en todo su sitio web. Entonces, si desea realizar cambios en cosas como el encabezado o el pie de página, aquí es donde lo haría.

Es imperativo que realice copias de seguridad completas de su sitio web antes de realizar cambios en el tema. Si pierde el tiempo y algo se rompe, no podrá recuperar cosas sin una copia de seguridad.

Si es posible, intente editar su tema en una copia provisional de su sitio web. Especialmente si el sitio que desea editar es un sitio para ganar dinero. Lo último que desea es dañar su sitio en vivo sin una copia de seguridad adecuada y sin saber cómo recuperar las cosas.

Cómo editar HTML, CSS y JavaScript en WordPress usando FTP

FTP significa protocolo de transferencia de archivos. Este es un protocolo de red que le permite transferir archivos entre un servidor y una computadora y viceversa. Recomiendo solo tratar de editar el código a través de FTP si es un usuario avanzado.

🔥 Recomendado:  7 herramientas de investigación de hashtags para agregar a su estrategia de hashtags

Al usar FTP, tiene control total sobre todos los archivos que componen su sitio web. Puede editar fácilmente todo el código dentro de esos archivos y realizar los cambios que desee en su instalación de WordPress, complementos y cualquier otra cosa.

El primer paso para aprender a editar código de WordPress usando FTP es descargar un cliente FTP. Uno de los más populares, y el que se muestra arriba, es FileZilla. Es una solución gratuita de código abierto y ofrece una interfaz intuitiva que es sencilla tanto para principiantes como para usuarios avanzados.

Complementos para editar WordPress (opciones de código y sin código)

Si no se siente tan cómodo trabajando con SFTP para editar los archivos de su sitio web directamente, existen muchos complementos que pueden facilitar el proceso.

Incluso cuando se usan complementos de código, es fundamental hacer una copia de seguridad de su sitio web, trabajar en una copia provisional y trabajar con temas secundarios al aprender a editar código en WordPress.

El incumplimiento de cualquiera de estos puede hacer que su sitio web se altere permanentemente de una manera que no pretendía sin una forma de recuperar la copia anterior.

Héroe de CSS

CSS Hero es un complemento que facilita la edición del tema de su sitio web y otros elementos CSS. Si bien el complemento se anuncia como que no se requieren habilidades de codificación, creo que aún es importante comprender los fundamentos de CSS para comprender mejor cómo el complemento está editando sus archivos.

El complemento es una buena solución tanto para usuarios principiantes como experimentados. Funciona sin editar sus archivos de tema directamente, por lo que no corre el riesgo de estropear permanentemente su sitio web (todavía haga una copia de seguridad de todo).

Este es un complemento premium, lo que significa que deberá comprar una licencia antes de usarlo en su sitio web. En general, CSS Hero es una de las mejores opciones si está buscando comenzar a editar el código en su sitio web de WordPress.


Editor visual de estilos CSS

Visual Style Editor es un complemento similar a CSS Hero, que permite a los usuarios no técnicos editar más fácilmente la apariencia visual de su tema sin necesidad de alterar el código directamente.

Funciona con cualquier tema y ofrece un sencillo editor de CSS para las personas que desean editar el código directamente. Otras características del complemento incluyen la capacidad de ajustar más de sesenta propiedades de estilo, como colores, fuentes, tamaños, posiciones y más.

Para las personas que desean editar el código directamente, hay opciones para agregar su propio CSS personalizado para obtener el estilo exacto que desea para los diferentes elementos.


Personalizador de sitios WP

WP Site Customizer ofrece a los desarrolladores más de doscientos ajustes y herramientas para que los desarrolladores ayuden a optimizar el trabajo. Algunos ejemplos de estos incluyen agregar su logotipo a la página de inicio de sesión, personalizar el panel de administración, el control de temas y más.

El complemento le permite lograr todas estas cosas sin necesidad de tener conocimientos de codificación, lo que puede ahorrar tiempo a los desarrolladores. Algunas de las otras características incluyen un visor de registro de errores, control de publicaciones y páginas, control de complementos, control de actualizaciones, control del tablero de administración y muchas otras características útiles.

Puede probar el complemento con su prueba gratuita de cinco días. Sin embargo, deberá comprar una licencia después de la prueba, ya que se trata de un complemento premium.


microtemero

Microthemer es un editor visual de CSS que facilita cambiar los elementos visuales de su sitio web mediante una interfaz intuitiva de arrastrar y soltar. Hay más de ciento cincuenta opciones diferentes de CSS con opciones de edición, incluidas animaciones, transiciones, transformaciones, filtros, flexbox, tipografía, posición y más.

Uno de los principales beneficios de Microthemer es que se integra con editores de páginas y temas populares como Elementor, Oxygen, Beaver Builder y otros. Esto le brinda aún más opciones de personalización, lo que lo ayuda a obtener el sitio web exacto que desea sin necesidad de conocimientos avanzados de codificación.


WPide

WPide es un administrador de archivos y editor de código extremadamente poderoso que puede simplificar la edición del código de su sitio web de WordPress. El complemento le permite realizar cambios en los archivos de temas sin necesidad de pasar por FTP o cPanel (puede cambiar su página de índice predeterminada en WordPress fácilmente de esta manera).

Tenga en cuenta que este no es un editor visual y necesitará saber lo que está haciendo. Esto simplemente facilita la edición de los archivos de su sitio web de WordPress.

Algunas de las otras características que hacen que WPide sea increíble incluyen un administrador de base de datos, un editor de imágenes, un cargador masivo de archivos, descargas por lotes, búsqueda rápida de archivos y más. En general, si ya sabe un poco de CSS y HTML y se siente cómodo trabajando con sus velos temáticos, WPide puede facilitarle mucho las cosas.


Complementos para editar su tema de WordPress sin codificación

Si bien saber cómo editar CSS y otros tipos de código puede ser increíblemente útil, existen muchas alternativas. Una de las mejores alternativas es usar una página de WordPress y un complemento de creación de temas que puede facilitar mucho el diseño y el cambio de aspectos de sus páginas, publicaciones y temas de WordPress.

Elementor

Se estima que más del siete por ciento de todos los sitios web usan Elementor. A partir de 2022, fue uno de los creadores de páginas más utilizados en el mercado.

Uno de los principales beneficios del complemento es que tiene una sólida versión gratuita, lo que facilita la creación de páginas sin necesidad de conocimientos de codificación CSS.

La versión gratuita de Elementor ofrece todo lo que necesita para crear diseños de páginas web simples con videos, imágenes, texto, íconos y mucho más, incluida la capacidad de expandir sus funcionalidades utilizando extensiones de complementos adicionales y complementos de terceros.

Puede usar Elementor Pro si desea tener más control sobre su sitio web y diseño. Agrega algunas características adicionales, incluidas herramientas de estilo global y más opciones de elementos.

🔥 Recomendado:  Cómo encontrar la audiencia adecuada en TikTok

Cuando utilice Elementor por primera vez, tenga cuidado de no agregar demasiados elementos a la página. Si usa solo lo que realmente necesita, no habrá mayores problemas con la velocidad de carga del sitio.


divide

Divi es otro de los creadores de páginas y temas de WordPress más populares, junto con Elementor y otros como Beaver Builder. El complemento se lanzó en 2015 y se ha vuelto extremadamente popular por hacer que los temas de WordPress sean más fáciles de crear y administrar para quienes no son desarrolladores y aquellos con una experiencia mínima en codificación.

El complemento se ha mejorado varias veces desde su lanzamiento inicial. Ahora ofrece una variedad más amplia de widgets y temas preconstruidos que ayudan a los nuevos usuarios a comenzar rápida y fácilmente.

Es de destacar que Divi Builder es un complemento pago para WordPress. Si no está satisfecho con el Divi Builder después de los 30 días, no hay ningún cargo por deshacerse de él. Sin embargo, a diferencia de Elementor, deberá pagar por adelantado para usar el constructor.

Aunque personalmente no he usado Divi en algunos años, he oído hablar bien de él de muchos desarrolladores web profesionales. Si está buscando una solución necesaria sin código para diseñar su sitio web de WordPress, no dude en probar Divi.


brillante

Si desea algo similar a Elementor que tampoco tenga que pagar para obtener la versión básica, Brizy Page Builder podría ser una buena opción.

Con Brizy Builder, tiene dos opciones: puede usar el plan gratuito o pagar el premium. Si recién está comenzando, le recomiendo usar primero el plan gratuito para ver si el constructor es adecuado para usted.

Al igual que Elementor, este es un generador que no necesita código para que los no desarrolladores obtengan diseños increíbles. Brizy Builder es fácil de usar y tiene muchas funciones, pero carece de algunas capacidades avanzadas en comparación con constructores como Elementor y Oxigen. Sin embargo, para un sitio de nicho simple, Brizy es más que suficiente.

Un factor adicional a considerar es que Brizzy no tiene tantas extensiones de terceros como Elementor. Entonces, si está buscando más funcionalidad, entonces Elementor podría ser la mejor opción.


Constructor de castores

Entre todos los constructores mencionados hasta ahora, Beaver Builders se encuentra en la parte superior de la lista en términos de brindar una alternativa confiable a Elementor.

El constructor fue creado y lanzado en 2014 y proporciona una gran cantidad de widgets que permiten a los principiantes crear sus propios diseños sin ningún conocimiento de codificación.

Con la versión gratuita, puede comenzar a usar el constructor fácilmente sin pagar nada por adelantado para probarlo. Si decide que vale la pena usar el creador para un sitio web más avanzado, entonces puede actualizar a la versión paga.

Puede usar la versión gratuita para la mayoría de los sitios web a menos que sean particularmente complejos. Se pueden usar extensiones de terceros para mejorar la funcionalidad del creador de páginas.


Bloques de Kadence

Kadence es una herramienta de construcción de bloques de WordPress que le permite crear hermosos sitios web sin codificación. No es un constructor de arrastrar y soltar como Elementor u Oxygen, sino más bien un editor de bloques de back-end que funciona con el propio constructor de WordPress, Gutenberg.

Debido a que el complemento del editor de bloques funciona con el generador nativo de WordPress, puede esperar mejores velocidades de página y un mejor rendimiento general que cuando usa otros creadores de páginas. Esto puede ser un beneficio significativo para fines de SEO y UX.

Kadence ofrece una versión gratuita para funciones básicas de edición. Sin embargo, para acceder a la funcionalidad completa del editor de bloques, deberá actualizar a su plan premium.

Con la versión Premium, obtiene acceso completo e ilimitado a toda la colección de plantillas, lo que facilita el diseño de un hermoso sitio web. También tendrá acceso a más bloques personalizados para que pueda obtener más funciones sin necesidad de experiencia en codificación.


Constructor de oxígeno

Oxygen Builder es un generador de temas de WordPress fácil de usar que le brinda control total sobre su sitio. Es un editor de arrastrar y soltar similar a Elementor pero más orientado a personas con un poco de experiencia en desarrollo.

Con Live Page Designer de Oxygen Builder, puede crear una página exactamente como le gustaría al elegir entre docenas de diseños diferentes. Es fácil de usar, por lo que incluso si no sabe HTML o CSS, puede personalizar fácilmente el diseño de su sitio.

Vale la pena señalar que Oxygen Builder viene con una garantía de devolución de dinero de 30 días. Por lo tanto, puede probar el constructor y, si no se ajusta a sus necesidades, puede solicitar un reembolso total del dinero.

Si es un nuevo propietario de un sitio de WordPress que busca una forma sencilla de crear páginas, me saltearía Oxygen Builder. Tiene una curva de aprendizaje ligeramente más pronunciada que Elementor u otros editores de arrastrar y soltar. En cambio, Elementor o incluso Beaver Builder son las mejores opciones.

Una cosa más que debe tener en cuenta al evaluar Oxygen es que utiliza tecnología de código abreviado. Si alguna vez desea cambiar los temas, deberá reconstruir todo el sitio.


Compositor visual

El último creador de páginas de la lista es Visual Composer. Este es uno de los constructores más antiguos, desarrollado e implementado en 2011, y fue ampliamente reconocido como uno de los primeros editores visuales para WordPress que hizo que la creación de sitios web fuera un proceso mucho más fácil.

Si bien la primera versión de Visual Composer era un editor de cuadrícula de back-end, el complemento moderno ofrece un editor en vivo sólido que es mucho más fácil de usar.

Este es un complemento freemium con una versión muy básica si solo planea crear un sitio web extremadamente básico. Si desea probar la versión premium, puede beneficiarse de la garantía de devolución de dinero de 30 días, que le permite probar la versión premium sin riesgos.


Consejos para principiantes antes de editar código

Si decide ensuciarse las manos con la edición de código, en lugar de usar una de las soluciones simples sin código para crear y editar su sitio web de WordPress, hay algunas cosas que debe tener en cuenta.

Asegúrese de seguir los siguientes consejos y, si es posible, considere usar una solución sin código si va a trabajar en un sitio de dinero o en un sitio web ya establecido y aún no sabe lo que está haciendo jugando con el código.

🔥 Recomendado:  Cómo solucionar el error "Tu conexión no es privada" en Windows 10

Usar temas secundarios para ediciones directas de código

Una cosa que hace que usar WordPress sea más fácil que codificar un sitio web desde cero es el uso de temas. Estos le permiten configurar un sitio web sin necesidad de comenzar desde cero para completar el desarrollo de back-end.

Los temas secundarios son un siguiente paso esencial que le permite realizar cambios en el tema sin que esos cambios se eliminen durante una actualización.

Para facilitar las cosas, recomiendo ceñirse a los mejores temas como Astra o Kadence, que facilitan la generación de un tema secundario para su sitio web. Algunos de los temas más pequeños requerirán que active su propio tema secundario, lo que puede ser difícil cuando se inicia por primera vez con WordPress.

Use un complemento en lugar de editar código en un tema secundario

Puede sonar como un disco rayado aquí, pero es lo suficientemente importante como para decirlo una vez más. Si no sabe lo que está haciendo con el código, la mejor opción es evitar jugar con el código de su sitio web por completo.

Hay tantas alternativas enumeradas anteriormente, desde editores visuales hasta creadores de páginas y editores de temas, que no es necesario jugar con el código de su sitio web.

Si no sabe lo que está haciendo con WordPress, jugar con el código puede arruinar completamente su sitio web. Si no pudo hacer una copia de seguridad de su sitio, se puede perder de forma permanente.

Para sitios web de dinero o sitios que se establecen con tráfico entrante, elija un complemento en lugar de tratar de jugar con el código si no sabe lo que está haciendo. Si está tratando de aprender a codificar, configure una instalación en blanco que no le importe romper y que no le cueste dinero cuando se equivoque.

Asegúrese y haga una copia de seguridad de su sitio web

¡Haz una copia de seguridad de tu sitio web! Realice una copia de seguridad pronto y con frecuencia, y asegúrese de hacerlo ANTES de realizar cualquier cambio en la funcionalidad o el tema. Ya sea que esté jugando con el código o no, esto es algo que debería estar haciendo de todos modos.

Además, asegúrese de hacer una copia de seguridad de su sitio web fuera del sitio para que, si estropea algo, no pierda la copia de seguridad. Para esto, recomiendo usar un complemento como Updraft y hacer una copia de seguridad de su sitio localmente en su computadora o en Google Drive.

Si lo hace, se asegurará de que cuando arruine algo, y cuando aprenda a codificar por primera vez, arruine algo, puede restaurar su sitio a su funcionalidad anterior. Incluso una vez que conozca el backend de WordPress, aún se recomienda hacer una copia de seguridad de su sitio.

Use una copia provisional si es posible

Cuando busque proveedores de alojamiento web, asegúrese de encontrar uno que le permita configurar copias de prueba sin pagar extra. Para esto, mi proveedor de alojamiento web preferido es Cloudways.

Los sitios de prueba son copias de su sitio web que le permiten editar cosas y luego enviar esas ediciones al sitio en vivo. Esto significa que puede editar el código en su sitio web; si las cosas se rompen, su sitio web en vivo seguirá funcionando correctamente.

Incluso cuando se utiliza una copia provisional, sigue siendo importante que haga una copia de seguridad de su sitio en vivo. Hay cosas que pueden salir mal cuando se ejecuta una copia provisional, por lo que desea tener una copia de seguridad a mano en caso de mal funcionamiento.

Reflexiones finales sobre cómo editar código en WordPress

Si bien es útil saber cómo editar código en WordPress, la conclusión principal es que no es necesario. Ahora, más que nunca, existen muchas formas alternativas de editar el aspecto y la funcionalidad de su sitio web.

Aún mejor, WordPress se está moviendo hacia un sistema completamente basado en bloques. Esto facilitará la edición de su sitio web y tema sin necesidad de complementos de terceros. Esto eliminará casi por completo la necesidad de editar el código de su sitio web de WordPress para la mayoría de los propietarios de sitios.

Entonces, si bien aprender a editar código en WordPress puede ser útil, no debería ser algo que se esfuerce por aprender. Eso es a menos que quiera entrar en el trabajo de desarrollo. Si solo está buscando ejecutar un sitio web de nicho o autoridad, entonces hay muchas soluciones alternativas.

Aquí hay algunos artículos más de ‘cómo hacer’ que podrían ayudarlo con WordPress:

Tabla de Contenido