Cómo editar el código de WordPress (HTML, CSS, PHP, JavaScript)

Los complementos de WordPress lo ayudan a expandir la funcionalidad de su sitio y hacer trabajos digitales avanzados con un esfuerzo mínimo. Sin embargo, saber cómo editar HTML en WordPress, así como el otro código fuente de su sitio, es útil en diferentes situaciones.

Supongamos que su sitio es atacado con malware malicioso o actualiza un complemento y bloquea su sitio. Tal vez solo quieras hacer algunas personalizaciones avanzadas. En cualquiera de estos casos, la codificación de WordPress puede ser el siguiente paso. Afortunadamente, hay muchas maneras de hacer.
En esta publicación, lo presentaremos a través de las diferentes formas en que puede acceder y editar el código fuente de su sitio de WordPress, así como cómo puede cambiar el tema de WordPress sin codificar. ¡Vamos a empezar!
En este artículo ️
¿Por qué es importante saber cómo editar su código fuente de WordPress?
Cómo editar HTML en WordPress
Nociones introductorias sobre la edición del código fuente de su tema de WordPress
Cómo editar su código fuente de WordPress a través del editor de tareas
Cómo editar sus archivos JavaScript WordPress
Cómo editar tu WordPress CSS
Cómo editar su código fuente de WordPress a través de FTP (en 4 pasos)
Cómo editar su tema de WordPress sin codificar
conclusión
Complementos para editar el código de WordPress
Héroe CSS
Editor de estilo CSS visual
Microstemer
Tweker final para WordPress
Nuestro equipo de WP Buffs ayuda a los propietarios de sitios web, socios de la agencia y socios independientes a resolver problemas, incluida la edición y el mantenimiento del código fuente de su sitio. Ya sea que necesite que administremos un solo sitio. Web o admitir 1,000 sitios de clientes, lo haremos. Retroceda. ¿Por qué es importante saber cómo editar su código fuente de WordPress?
Por defecto, WordPress es una plataforma extremadamente intuitiva y fácil de usar. Hay muchas formas de personalizar y cambiar el sitio sin alcanzar una línea de código debido a temas y complementos.
Desde un punto de vista técnico, no necesita acceder a ninguno de los archivos o código de su sitio web para tener un sitio completamente funcional y bien diseñado. Panel, complementos y temas de WordPress, hacen que su sitio se ajuste y personalice fácil y fácil
Sin embargo, hay momentos en los que puede implementar más control y realizar personalizaciones avanzadas. Tal vez el cambio que desea hacer no es una opción con el tema o los complementos que utiliza
Otra posibilidad es que su sitio esté bloqueado o enfrentado con otro error que le impide acceder al tablero del administrador. Probablemente tendrá que editar su código fuente de WordPress para solucionar problemas
En tales casos, es útil saber cómo editar HTML en WordPress, así como cómo acceder y cambiar otra fuente, incluidos PHP, CSS y JavaScript. Simplemente aprendiendo los códigos básicos de WordPress lo posicione para ejercer más control y flexibilidad para diseñar, administrar y mantener su sitio de WordPress. Cómo se edita HTML en WordPress
Lo primero es lo primero: discutir cómo acceder a su código HTML en WordPress. Tenga en cuenta que cambiar el código de su sitio siempre presenta un cierto riesgo. Editar su HTML es relativamente seguro en comparación con otras técnicas que discutiremos en esta publicación, pero aún es inteligente proceder con precaución y primero crear una copia de seguridad.
Cómo editar HTML en WordPress Classic Editor
Si desea agregar o editar el código HTML de una página o publicación de WordPress, en realidad no necesita acceder al código fuente de su sitio web. En el editor clásico, todo lo que tienes que hacer es pasar del editor visual al editor de texto en la parte posterior. Esto mostrará el código HTML que funciona detrás de escena:
Desde el editor de texto, puede acceder, modificar y actualizar el código HTML en cualquier página o publicación con solo unos pocos clics. Puede ver los cambios en cualquier momento regresando al editor visual. Cuando haya terminado, asegúrese de guardar su publicación o página.
Editar el código HTML de su sitio es bastante simple. ¡Aprenda a hacer cambios simples en su código de sitio en nuestro blog! #Wordpress haga clic para enviar un tweet

Cómo editar HTML en WordPress Block Editor
Si usa el editor de bloques (Gutenberg), la transición del editor visual al editor de texto (o editor de código) requiere algunos pasos. Sin embargo, tiene varias opciones para editar el código HTML, que incluye cambiar la página completa o publicaciones o para bloques individuales. Para editar el código HTML de toda la página o publicaciones, haga clic en los tres puntos verticales ubicados en la esquina superior derecha de el editor, luego seleccione el editor de código:
Esto abrirá el editor HTML WordPress. Para cambiar del editor visual al editor de texto en un bloque en particular, haga clic en los tres puntos verticales en la barra de herramientas de bloque, luego seleccione Editar como HTML:
Otra forma de agregar HTML a una página o publicación es el uso de un bloque HTML personalizado:
Puede escribir el HTML directamente en el bloque, luego haga clic en Vista previa para ver cómo se verá en el frente:

Cuando haya terminado, guarde los cambios en la publicación o página.

Cómo editar HTML para su página de inicio de WordPress

¿Pero la edición del código HTML en su página de inicio? En algunos temas, la página principal actúa como su propia página individual. Por lo tanto, el proceso de edición de su HTML es el mismo que el descrito anteriormente. Simplemente elija la página relevante de la lista en el tablero:

También puede hacer clic en la edición de la página en la barra de administración en la parte superior de la página inicial para acceder al editor o bloque clásico:
Si ninguna de estas opciones funciona para editar el código HTML en su página de inicio, puede usar un generador de página o un tema con páginas iniciales construidas. Si este es el caso, puede consultar la documentación de la herramienta relevante. Cómo se edita HTML en un widget WordPress
Finalmente, es posible que desee agregar HTML a la barra lateral o en el sótano de WordPress. Muchos temas de WordPress también usan la sección Widget para controlar el contenido en la página de inicio de su sitio web.

Puede hacer estos ajustes de la página inicial, el encabezado y el sótano a través de un widget HTML personalizado:

Simplemente navegue por los widgets de aspecto, agregue el widget HTML personalizado a la barra lateral o al sótano y edítelo como desee. Haga clic en el botón azul Guardar para publicarlo en su sitio.
Nociones introductorias sobre la edición del código fuente de su tema de WordPress
Su tema de WordPress está formado por archivos de plantilla. A veces también nos referimos a estos como su código fuente de WordPress. Estos incluyen temas brutos (PHP), así como hojas de estilo en cascada (CSS) y JavaScript (JS) de su sitio de WordPress.
Si desea editar estos componentes (o la plantilla predeterminada de WordPress), hay dos formas principales de acceder a los archivos del tema:

Uso del editor de temas de WordPress, que le permite editar directamente el código fuente de WordPress en su tablero utilizando cualquier navegador web.
A través del Protocolo de transferencia de archivos (FTP), donde edita localmente los archivos de código fuente de WordPress, luego cargue los cambios en su entorno de alojamiento de WordPress.
Le presentaremos cómo revisar cada uno de estos métodos en breve, comenzando con el editor de temas de WordPress. Sin embargo, hay dos pasos que le recomendamos que tome antes de comenzar. El primero es hacer una copia de seguridad de su sitio. Esto asegurará que tenga una versión actualizada de contenido y configuración para regresar si algo se enreda mientras edita su código fuente.
El segundo es crear un tema para niños. Cuando cambia su tema de WordPress, la mejor práctica es hacer cambios en un niño. De lo contrario, la próxima vez que actualice su tema, los cambios se sobrescribirán.
Después de haber tomado estos pasos, está listo para comenzar. Primero veamos cómo editar su tema de WordPress directamente desde el tablero.
Cómo editar su código fuente de WordPress a través del editor de tareas
Si no está familiarizado, WordPress se entrega con un editor de construcción que le permite cambiar sus archivos de tema en línea. En el editor de temas, puede acceder a PHP, CSS, JavaScript y todos los demás archivos de desarrollo que componen su tema. Así es como puede hacerlo.
Acceder al editor de temas
Si su sitio de WordPress sigue siendo funcional y puede acceder al back-end, puede encontrar el código fuente de su sitio en el editor de temas Look>:
En este área de edición, puede hacer cualquier cambio que considere adecuado para su diseño y estructura:
Si tiene más tareas instaladas o usa una combinación de temas de adultos / niños, puede cambiar entre los temas en la esquina superior derecha del editor:
Para seleccionar algunos archivos temáticos de edición, puede elegir entre la lista a la derecha del editor: los archivos exactos disponibles aquí dependerán de su tema, pero al menos debería ver:
Style.css: esta es su hoja de estilo, que contiene muchas características relacionadas con el diseño, como las fuentes y el esquema de color.
Functions.php: El archivo de las funciones de su tema incluye el código PHP que cambia las funciones predeterminadas de WordPress.

Una vez que haya terminado de editar el código fuente de WordPress en el editor de temas, asegúrese de guardar los cambios. Simplemente haga clic en el botón Actualizar el archivo en la parte inferior de la pantalla para hacer esto.

WordPress le impedirá guardar sus cambios si nota que hay errores en el código. Esto es parte de lo que hace que el uso del editor de temas sea un poco más seguro que la edición del código de WordPress a través del FTP, que discutiremos más adelante.

¿Qué debes hacer si falta tu editor de temas?

Si el editor de temas no aparece en términos de punto de vista, su tema puede funcionar de manera un poco diferente. Esto no significa necesariamente que no pueda editar directamente los archivos de tema. Solo necesitas saber dónde mirar.
Compruebe si su sitio usa un editor de WordPress específico de WordPress, por otro lado, en el tablero. Alternativamente, el uso del editor de temas puede haber sido deshabilitado para su sitio. Por ejemplo, algunos complementos de seguridad ocultan esta opción para “fortalecer” a WordPress y hacer que los atacantes sean más difíciles de comprometer su sitio.
Puede haber otras razones por las cuales su editor de temas de WordPress está faltante o inaccesible. Le recomendamos que se comunique con otros de la comunidad de WordPress, especialmente aquellos con acceso a los temas o complementos que usa, para ver si hay algo único en su entorno. Cómo editar sus archivos JavaScript WordPress.
Antes de que pueda usar JavaScript en cualquier lugar de su sitio web de WordPress, deberá tener un archivo que contenga su código JavaScript. La mayoría de los temas, si no todos, se entregan con algunos archivos JavaScript, que se pueden alojar en otro lugar y “llamados” por código en Header.php, Footer.php u otros archivos de plantilla.
Si escribe su propio JavaScript, tendrá acceso a su trabajo en WordPress, donde puede ver una lista de sus archivos. Puede abrir cualquiera de ellos y realizar los cambios deseados directamente usando el editor de temas. Todos los archivos JavaScript terminan con la extensión .js:
Si agrega JavaScript usando un complemento de terceros, simplemente llame a un archivo externo alojado en otro lugar. Para usar el JavaScript escrito, deberá llamar al archivo donde quiera usarlo.
Puede llamar a JavaScript colocando el siguiente script (dirigiendo su página a la ubicación del archivo relevante) donde quiera cargar el código:
!
El mejor lugar para llamar a su archivo JavaScript depende de cómo desee usar el script. Por ejemplo, puede implementarlo varias veces en su sitio o solo una vez.
Cómo agregar JavaScript a su encabezado o sótano WordPressda Desea hacer cambios en su encabezado o sótano en su sitio, incluido el uso de JavaScript en varios lugares, puede hacerlo en los archivos Header.php y Footer.php de su base.
Muchas herramientas de terceros requieren agregar código al encabezado de su sitio. Esto significa que trabajará con el archivo Header.php (que debe figurar en el lado derecho del editor de temas), especialmente el área cerrada por etiquetas:
Cuando agrega JavaScript al archivo de encabezado, asegúrese de colocar el código en algún lugar entre estas dos etiquetas (después o debajo de la etiqueta de apertura y arriba o antes de la etiqueta de cierre).

La etiqueta puede ser difícil de encontrar. Si tiene problemas para localizarlo, presione las teclas de comando (o control) + F después de hacer clic en el editor. Luego, simplemente puede localizarlo escribiendo “cabeza” en la barra de búsqueda.
Aquí hay un ejemplo de cómo agregamos el Administrador de etiquetas de Google y un código de verificación AHREFS justo encima de la etiqueta:
Puede editar el sótano de la misma manera: seleccione el archivo Footer.php en lugar de Header.php:
Después de guardar los cambios, el último paso es verificar dos veces para asegurarse de que se haya agregado su código. Para esto, vaya a su página inicial y vea el código fuente.
Nuevamente, puede usar su orden de velocidad Fast + F para encontrar la etiqueta, luego verifique justo encima para asegurarse de que su código se haya agregado con éxito. Puede ser necesario eliminar el caché del navegador para que todo aparezca correctamente.
Cómo agregar el encabezado y los scripts del sótano usando un complemento
La adición manual de guiones de encabezado y sótano no es su única opción. Hay complementos para ayudarlo con estas tareas, y algunos temas y marcos vienen con tal funcionalidad construida. Por ejemplo, si usa Genesis Framework, la adición de scripts de encabezado y sótano simplemente es realizado por su editor construido. Sin embargo, puede usar la misma funcionalidad para cualquier tema a través de un complemento.

Este método es ventajoso porque WordPress normalmente sobrescribe su archivo de encabezado.php durante las actualizaciones. Al usar un complemento (o funcionalidades externas que imitan dichos complementos), garantiza menos trabajo. Puede actualizar WordPress Core sin preocuparse de que tenga que agregar su código manualmente.
Si esta solución suena atractiva, recomendamos los encabezados y los pies de inserción del complemento:
Proporciona una forma gratuita de agregar fácilmente el código simple al encabezado o el sótano de su sitio de WordPress. Ya sea que intente agregar scripts de Google Analytics, código AdSense o cualquier código de integración de terceros, este complemento puede hacerlo con solo unos pocos clics.

Una vez que instale y active el complemento, puede acceder al editor de JavaScript navegando en Configuración> Insertar encabezados y sótanos:

Habrá campos de texto donde puede agregar scripts a su encabezado, cuerpo y sótano de su sitio web. Cuando haya terminado, haga clic en el botón Guardar.
Cómo agregar JavaScript a las publicaciones y páginas de WordPress
En lugar de incorporarlo en los archivos Header.php o Footer.php que se utilizarán en todo el sitio web, puede agregar JavaScript a publicaciones o páginas individuales de WordPress. Para hacer esto, necesitará:
Agregue JavaScript a uno de los archivos temáticos de WordPress (o cree uno nuevo)

Llame al archivo en su publicación o página.
Entonces, ¿cómo llamas a tu archivo JavaScript desde tu publicación? Una forma es usar campos personalizados como una especie de widget JavaScript WordPress. En el editor de bloques, haga clic en los tres puntos verticales para iniciar el menú Drop -down, luego seleccione Opciones:
En la parte inferior del menú de opciones, en paneles avanzados, marque la casilla junto a los campos personalizados:

En el editor de publicaciones, ahora verá un espacio donde puede agregar campos personalizados:
Proporcione un nombre para su campo, ingrese el fragmento JavaScript como valor. Cuando haya terminado, haga clic en Agregar campo personalizado para guardar cambios.

Ahora puede usar JavaScript personalizado en cualquier lugar de la página. Para hacer esto, deberá usar la etiqueta de plantilla que personalice el tema que utiliza. También puede optar por el uso de un complemento que administra campos personalizados en su nombre.
Cómo editar su sitio de WordPress CSS ️
El proceso de edición de su sitio CSS de WordPress es bastante similar al de cambiar su JavaScript. Hay tres métodos que puede usar para hacer esto:
Edite los archivos CSS en el editor de inicio
Use el editor de CSS construido de su base en WordPress Customizer
Agregue CSS con un complemento

El método que funciona mejor para usted dependerá de la extensión de la edición que pretenda hacer, así como con qué frecuencia tiene la intención de hacer cambios.

Cómo editar su CSS de WordPress a través del editor de tareas

Todos los archivos CSS utilizados para el tema de su sitio de WordPress se pueden encontrar en el editor de temas (aspecto> Editor de temas). En la lista de la derecha, busque los archivos que terminan con la extensión .css: puede realizar los cambios deseados dentro del editor. Cuando haya terminado, haga clic en Actualizar archivo para guardar sus cambios.
Cómo editar su CSS de WordPress a través de Customizer WordPress
Además del editor de temas de WordPress, también puede cambiar CSS usando WordPress Customizer. Para acceder a él, explore el aspecto> Personalizar desde el tablero de WordPress:
Luego haga clic en el CSS adicional en la parte inferior del panel de navegación a la izquierda:
Se abrirá un editor de código en el que puede agregar CSS personalizado:
Como puede ver, este editor es bastante pequeño y está destinado principalmente a cambios menores, en lugar de la extensa reescritura del estilo de su sitio. Plugin.
Cuando haya terminado de agregar CSS personalizado a Customizer, haga clic en el botón de publicación para guardar sus cambios.
Cómo editar su CSS de WordPress usando un complemento
Si desea personalizar el aspecto de su sitio sin editar directamente los archivos temáticos, también puede usar un complemento. Este método es especialmente útil si tiene un conocimiento CSS limitado. También es ideal si tiene la intención de hacer cambios regularmente en el estilo de su sitio, ya que facilita sus finalizaciones.
Por ejemplo, CSS Hero es una herramienta intuitiva que le permite editar todos los aspectos del diseño y el estilo de su sitio sin cambiar los archivos del tema:

Es un pasador de WordPress en vivo que le permite almacenar sus cambios, incluidas diferentes versiones, y empujarlos en vivo. Se crea una hoja de estilo CSS adicional que sobrescribe la original entregada.
Fragmentos de estilo editables prefabricados
Integración y asistencia Google Font y Typekit

Un editor visual frontal para obtener la vista previa de los cambios a medida que realiza

Para comenzar, puede probar una demostración en vivo. Si está listo para comprar CSS Hero, tiene más ajuste de precios.

Después de descargar el complemento, puede cargarlo e instalarlo en su sitio de WordPress como lo haría. Solo deberá ingresar la clave de licencia, con la que se le proporcionará al comprar el plan.
Cómo editar su código fuente de WordPress a través de FTP
Como recordaría anteriormente en esta publicación, el uso del editor de temas de WordPress es solo un método para acceder y modificar el código fuente de su sitio web. Otro es usar un cliente FTP como FileZilla. Estos tipos de herramientas le permiten conectarse al servidor de su sitio web para acceder a los archivos almacenados allí.
Este enfoque implica el cambio local del archivo, luego recarga los archivos modificados a su entorno de alojamiento de WordPress. Esto es esencial si no puede acceder a su sitio Back-end o hacer PSD> WordPress.
Aquí le mostramos cómo comenzar con FTP en cuatro pasos.

Paso 1: Busque o cree credenciales FTP
Primero, para conectarse a su servidor a través de FTP, necesitará sus credenciales FTP, incluido un nombre de usuario, contraseña y nombre de host. Debería poder encontrarlos en su cuenta de host.
Si no es así, puede crear su nombre de usuario y contraseña en Cpanel en archivos> Cuentas FTP:
Haga clic en este icono, luego seleccione Agregar una cuenta FTP:
En la página Agregar cuenta FTP, complete lo siguiente:
Agregue un identificador único para el nombre de usuario FTP. Su nombre de usuario FTP estará [por correo electrónico protegido] , así que copie / péguelo en una ubicación segura.
Crear una contraseña segura. Recomendamos usar el generador de contraseñas para crear una contraseña que obtenga una resistencia de 100/100. Esta será su contraseña de FTP, así que cópiela y pégala a una ubicación segura.
Para la extensión del directorio, siempre use public_html.
Tu parte siempre debe ser ilimitada.
Haga clic en Crear una cuenta FTP y ¡está terminado! Si tiene problemas para crear información de registro de FTP, le recomendamos usar Google “[su proveedor de alojamiento] FTP”.
Por lo general, ofrecerá al menos algunos artículos y guías útiles. Por ejemplo, SiteGround * proporciona mucha asistencia en esta área:
Si no encuentra la documentación de asistencia, siempre puede comunicarse con su proveedor de alojamiento.
Paso 2: Descargue un cliente FTP como filezilla
Una vez que tenga datos de inicio de sesión Square FTP, el siguiente paso es descargar un cliente FTP como FileZilla:

Esta es una solución FTP gratuita que le permite transferir archivos hacia adelante y hacia atrás entre su computadora y el servidor de su sitio. Sin embargo, hay otros clientes de FTP, así que no dude en usar el que mejor se adapte a las necesidades de PAAS 3: Inicie sesión. En su entorno de alojamiento web a través de FileZilla

Después de que Filezilla haya terminado de descargarlo, ábralo e ingrese el nombre de host FTP, el nombre de usuario y la contraseña. Tuve que haber reunido toda esta información en el Paso 1:
Si Cpanel enumera una dirección IP, puede usarla como host. Después de ingresar estas credenciales, haga clic en el botón QuickConnect:
Debe conectarse a su servidor en unos segundos.
Paso 4: editar los archivos
Una vez que inicie sesión, tiene acceso a los archivos fuente de WordPress y puede hacer cambios HTML, CSS, PHP y JS como desee. Simplemente, haga clic en cualquier archivo y seleccione Ver / Editar:
Una vez que haya realizado los cambios (nuevamente, tenga cuidado de no mostrar su sitio blanco), puede guardar el archivo. Luego, Filezilla lo recargará automáticamente y reemplazará la versión anterior.
Cómo editar su tema de WordPress sin codificar

WordPress es una plataforma de código abierto, lo que la hace extremadamente flexible y potente. Sin embargo, entendemos que para algunos, la codificación de WordPress puede ser desalentadora. Afortunadamente, si no se siente incómodo con la manipulación del código fuente de su sitio, aún puede hacer cambios extensos.
Hecho divertido: puedes editar los temas #Wordpress como principiante y sin codificación. ¿Sabía usted que? Nuestra mente fue volada al principio. Haga clic para enviar un tweet
Aunque no podrá cambiar tanto como pueda con el código personalizado, puede hacer mucho con la ayuda de WordPress personalizada. Nuevamente, esto está en aspecto> Personalización: en esta área, verá un método guiado para personalizar el tema de WordPress que ha elegido. Puede comenzar con elementos de alto nivel en la identidad del sitio, lo que le permite cambiar el nombre de su sitio, eslogan e ícono, luego cambiar los colores del sitio, los menús, la página principal, etc.

Sin embargo, si desea hacer más de lo que proporciona el personalizador, puede usar complementos adicionales. Echemos un vistazo a algunos de los más útiles allí.
Complementos para editar el tema de WordPress sin codificar
Como mencioné anteriormente, hay muchos complementos y herramientas que pueden ayudarlo a personalizar el aspecto de su sitio sin ninguna codificación. Ya hemos resaltado algunos de estos en las secciones anteriores sobre la edición de JavaScript y CSS.

Si está buscando un editor de estilo visual, una opción Freemium sólida es el complemento YellowPencil:

Este complemento para el editor de estilo CSS WordPress hace la personalización rápida y fácil del diseño de su sitio. Puede realizar cambios en cualquier página o tema sin codificar. Además, puede obtener una vista previa de los cambios de tiempo real. Hay versiones gratuitas y premium disponibles.
Otra opción a considerar es el editor de WordPress de Microthemer CSS:
Este complemento es un editor en vivo de WordPress CSS, que presenta la funcionalidad de edición de diseño receptivo y de edición de clic en el clic que le permite personalizar tanto con precisión como fácilmente. Esta es una opción sólida si usa un generador de páginas, como Elementor o Beaver Builder, porque viene con integración incorporada. Finalmente, si desea cambiar más que el estilo y el aspecto de su sitio, puede usar Ultimate Tweker:

Este complemento premium incluye una herramienta de reducción HTML, interfaz de deslizamiento y colocación, iconos personalizados y más. Para tener una mejor idea de características y características, le recomendamos que explore la demostración de arado.
conclusión
Los complementos de WordPress le permiten lidiar con muchas tareas en su sitio web. Sin embargo, hay algunos casos en los que es posible que necesite acceder y modificar el código fuente de su sitio.
Como discutimos en esta publicación, el editor de temas de WordPress y FTP son las mejores maneras de acceder al código fuente del sitio de WordPress y modificar HTML, CSS, PHP y JavaScript. Además del poder de las opciones aparentemente interminables por complementos, esto le dará la oportunidad de personalizar completamente todo sobre su sitio.
Sin embargo, si la idea de editar el código fuente de WordPress es desalentador o el editor de temas no es lo suficientemente fuerte para sus necesidades, estamos aquí para ayudarlo. ¡En WP Buffs, ofrecemos planes de atención 24/7 para ayudar con todas las necesidades de mantenimiento y personalización!

¿Quieres darnos comentarios o unirte a la conversación? Agregue sus comentarios en Twitter.