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

¡Nos gusta WordPress! Puede tomar una instalación simple de WP y convertirla en el sitio web de sus sueños, y es probablemente por eso que WordPress sigue siendo el CMS más usado del mundo. Aunque los complementos son valiosos para que su sitio se vea y actúe como lo desee, hay días en que tiene que editar sus códigos de WordPress (HTML, CSS, JavaScript, PHP) en el archivo base, publicaciones y páginas. En este artículo, le daremos un procedimiento de paso por paso sobre cómo agregar/editar los códigos de WordPress. Contenido
Códigos de edición en WordPress
Edite el código HTML en WordPress (editor clásico)
Agregar o editar el código HTML al editor de Gutenberg
Cómo agregar o editar el código HTML en WordPress Widget
Edición del código fuente en su tema de WordPress
Cómo editar el sitio de WordPress CSS
Cómo editar CSS WordPress a través del editor de inicio
Edite su CSS de WordPress usando un complemento
Edición del código CSS WordPress a través de WordPress Customizer
Cómo agregar JavaScript a su sitio web de WordPress
Cómo agregar scripts para encabezado y sótano usando un complemento
Agregue JavaScript a las publicaciones y páginas de WordPress
Edición de PHP en WordPress
Conclusión
Los códigos de edición en WordPress HTML, CSS, PHP y JavaScript son los cuatro lenguajes de programación utilizados por WordPress, cada uno con su propia función.
HTML, por ejemplo, define la estructura del contenido de su sitio, mientras que CSS define la apariencia visual de su sitio JavaScript, por otro lado, cambia HTML y CSS para proporcionar funcionalidad dinámica. Ahora veamos cómo agregar y editar estos códigos en WordPress. Cómo editar el código HTML en WordPress (WP Classic Editor) Editar el código HTML de una publicación o página de WordPress es bastante simple. No tienes que ir más allá del tablero para hacer esto. Simplemente, haga clic en la pestaña “Texto” en la publicación/página de su texto le permite agregar, editar y eliminar el código HTML. Para ver los cambios, haga clic en la pestaña “Visual”. No olvides guardar tus cambios.

Cómo agregar o editar el código HTML en el editor de Gutenberg con el editor de Gutenberg (bloques), tiene aún más flexibilidad. Puede realizar cambios en toda la página/publicaciones o un bloque individual. Para cambiar el código HTML de una publicación o páginas completa, haga clic en los tres puntos ubicados en la parte superior derecha de la pantalla. Haga clic en el “Editor de código”.
Ahora, puede editar la publicación HTML. Para salir del editor, presione el “Editor de código de salida” en la parte superior del editor.

Como probablemente sepa, el editor Gutenberg consiste en bloques individuales que se pueden publicar de forma independiente. Para editar el HTML de un bloque individual, simplemente vaya al bloque. Luego presione los tres puntos sobre el bloque y seleccione “Editar como HTML”.

También puede usar un bloque HTML personalizado. Presione el símbolo “Agregar” desde la esquina superior izquierda del editor para agregar un bloque. Luego, haga clic en el bloque “HTML personalizado” e ingrese el código en el cuadro resultante. Puede hacer clic en “Vista previa” para ver cómo se ve en el frente.

No olvides guardar tus cambios. Cómo agregar o editar el código HTML al widget de WordPress Hay días en que es posible que necesite agregar código HTML a la barra lateral o en el sótano de su sitio.

Busque el widget “HTML personalizado” y haga clic en el menú desplegable para seleccionar dónde desea crear el widget. Luego presione “Agregar widget”.

Ingrese el código HTML y haga clic en “Guardar”.

¡Y eso es! Editar el código fuente en su tema Los temas de WordPress WordPress consisten en diferentes archivos. Estos incluyen archivos CSS, PHP y JavaScript para su sitio, en lugar de editar su sitio HTML, se debe tomar atención adicional al editar el código fuente. Esto se debe al hecho de que podría romper todo el sitio mediante cambios en la base. Aquí hay algunas cosas para recordar antes de editar el código fuente del tema. Edite el tema del niño y no el padre: si tiene que cambiar el código en los archivos del tema, es aconsejable hacerlo en un niño.

Esto se debe al hecho de que todos los cambios desaparecerán en la próxima actualización. Pero cuando se usa un tema infantil, sus cambios permanecen, incluso cuando actualiza el tema principal. Para descubrir cómo crear un tema para niños para usted, vea nuestro tutorial completo sobre los niños de WordPress. Haga una copia de copia de seguridad completa del sitio: antes de editar los archivos fuente de WordPress, asegúrese de hacer una copia de seguridad de su sitio. Vea nuestra publicación sobre cómo crear una copia de seguridad para saber cómo hacerlo. Por otro lado, puede renunciar al estrés de crear hijos de repuesto cuando obtenga un plan de reparación. Tenemos una reserva por la noche. Hay 3 formas principales de editar el código fuente del tema: editor de tema, complemento y ftp. Cómo editar el sitio de WordPress CSS Como mencioné anteriormente, el CSS de su sitio es responsable de su aspecto visual. Si necesita cambiar la familia de fuentes, tamaño, esquema de color, etc., editar CSS. Puedes editar CSS:

Por el editor de tareas
Uso del personalizador de WordPress
Con un complemento
Cualquiera de estos funcionará bien. Cómo editar CSS WordPress a través del editor de temas Si no lo sabe, WordPress viene con un editor de tareas construido. Puede hacer cambios en plantilla de archivos directamente desde aquí.
Para acceder al editor de temas, acceda al Editor de Aspectos >>.
El editor de códigos y una barra lateral derecha se abrirán en la pantalla. Seleccione cualquiera de los archivos de temas en la barra lateral y realice cambios en el archivo.
Los archivos que ve varían de un tema a otro. Sin embargo, todos los temas de WordPress contienen estos 2 archivos: style.css: Aquí puede cambiar las fuentes, el esquema de color y la apariencia visual general.
Functions.php: este archivo contiene código PHP que cambia las características predeterminadas de su sitio.

Los archivos que terminan con la extensión .css son los archivos CSS. Haga los cambios deseados y haga clic en “Actualizar el archivo” para guardar.

Cómo editar el código CSS WordPress usando un complemento Si no conoce CSS o prefiere mantenerse alejado de los códigos, puede usar un complemento. De esta manera, cambiará el aspecto de su sitio sin tener que editar los archivos de temas. Por ejemplo, CSS y JS personalizados es un complemento que le permite personalizar el aspecto de su sitio sin tener que cambiar sus archivos de tema. El complemento viene con un editor de texto fácil de usar, con resaltados de sintaxis.
Puede agregar cuántos códigos desea y no los perderá cuando cambie el tema. Para usar el complemento, simplemente descargue, instale y active.
Otros complementos de WordPress utilizados para la edición de CSS incluyen CSS Hero, Genesis Extender Plugin, WordPress personalizado, etc. Edición del código CSS WordPress a través de WordPress Customizer En lugar de usar el editor de temas de WordPress, puede usar el Prinatory WordPress Custom. Para visitar el personalizador de WordPress, vaya a “Personalización” en el tablero:

Luego haga clic en el CSS adicional.
Se abrirá un editor de código. Agregue CSS personalizado y presione el botón Publicar.

Cómo agregar JavaScript a su sitio web de WordPress Cuando necesita agregar contenido dinámico, como animaciones, computadoras, diapositivas, reproductor de video o elementos interactivos asociados con su sitio, JavaScript también es útil. También puede ser necesario agregar JavaScript a su WordPress sitio cuando necesite:
Mejorar la funcionalidad de un complemento.

Conecte un elemento externo como Google Analytics, a su sitio.

Ocultar o mostrar elementos HTML.

Ejecute operaciones complejas en variables CSS.
Ahora, agregar o editar JavaScript no es tan fácil como la edición HTML o CSS.Debe tener cuidado de cómo escribe el código y dónde lo agrega.En primer lugar, hay dos lugares donde puede agregar JavaScript:
El encabezado o el sótano de su base: JavaScript agregado en estos lugares funciona a nivel de todo el sitio
En una página o publicación
Cómo agregar scripts para el encabezado y el sótano utilizando una forma más simple de agregar encabezado y scripts del sótano es a través de un complemento. Este método es más valioso si desea agregar scripts de tema independientes que permanezcan incluso cuando cambia su tema. WordPress predeterminado el archivo Header.php durante una actualización. Pero al usar un complemento, no debe preocuparse por agregar el código nuevamente, incluso cuando realiza una actualización o cambia su tema. Un ejemplo de este complemento es el complemento de insertos encabezados y pies de página: le permite agregar fácilmente el código de inserción al encabezado y al sótano de su sitio WP. Cuando necesita agregar las Escrituras de Google Analytics o el código de píxeles de Facebook, este complemento es útil. Para usar el complemento, instale y active. Luego vaya al editor de JavaScript abriendo la configuración> Insertar la sede y los sótanos: la página contiene 3 cuadros de texto donde puede agregar scripts a su encabezado, cuerpo y sótano de su sitio.
Después de haber agregado el script a la sección deseada, presione el botón de rescate en la parte inferior de la página. Nota secundaria: algunos temas (como Genesis Framework) vienen con este tipo de funcionalidad (le permite ingresar códigos en cualquier lugar de su sitio), por lo que no necesitaría un complemento. Cómo agregar JavaScript a las publicaciones y páginas de WordPress Además de agregar códigos JS a su encabezado y sótano (que funciona en todo el sitio), puede agregarlos individualmente a publicaciones y páginas. Lo primero que debe hacer es instalar el complemento de incrustación de código. Luego activarlo. A continuación, deberá activar los campos personalizados para su publicación o página si usa el editor clásico, abra la página o la publicación para agregar el código JS a su editor WP. Luego, haga clic en “Opciones de pantalla” en la esquina superior derecha de la placa y verifique la opción “Campos personalizados”. Si usa el editor de Gutenberg, así es como puede acceder a la característica de los campos personalizados WP: haga clic en las 3 verticales puntos en la esquina en la parte superior derecha de la pantalla y seleccione opciones:
Luego marque la casilla “Campos personalizados” en la sección Panel avanzado.
Ahora, la opción “Fields personalizados” funciona completamente en su sitio. Esto es lo que hay que hacer. Desplácese hacia abajo hasta la parte inferior de su publicación (ya sea en el editor clásico o en el editor de Gutenberg), verá una sección donde se pueden agregar campos personalizados.
Haga clic en Ingrese nuevo e ingrese un nombre para el nuevo campo personalizado en el cuadro “Nombre” (inicie el nombre con el código de Word, por ejemplo, CodeJSFORPAGE). Luego, en el cuadro “Valor”, ingrese el fragmento del código JS. Finalmente, guarde los cambios presionando el botón “Agregar campo personalizado”. En este momento puede ingresar su código JS en cualquier lugar de la publicación o página. Simplemente agregue el código de incorporación: {{CodeJSForPage}} donde desea ser el código. Edición de PHP en WordPress Hay 2 formas principales de editar PHP en WordPress: editor de código WP y cliente FTP. 1. El editor de código de WordPress es la forma más fácil de editar PHP, por lo que puede conectarse al tablero de WordPress. Para comenzar, cree un tema infantil y activelo. Luego acceda al Editor de temas Look >>. Seleccione el tema infantil que desea editar. Haga clic para abrir el archivo que desea editar (los archivos PHP terminen con la extensión .php). Por ejemplo, si tiene que editar el sótano de su sitio, haga clic en el archivo Footer.php en el lado derecho de la pantalla. Ahora edite el archivo en su editor de WordPress.
Recuerde hacer clic en el botón Actualizar el archivo.Esto ahorrará sus cambios.2. Edición del código PHP a través de FTP El uso de un cliente FTP es otro método para editar archivos PHP.Es el más útil cuando no tiene acceso al tablero de WordPress, probablemente como resultado de un error de WordPress o un ataque de malware.Si tiene acceso al editor de código de WordPress, úselo por todos los medios.Es más rápido.Dicho esto, lo primero que debe hacer aquí es descargar un cliente FTP (preferiblemente Filezilla).Luego abra y haga clic en “Archivo >> Sitio Manager”. Luego ingrese su FTP (dominio, nombre de usuario y contraseña).Estos detalles suelen ser los mismos que los detalles de la conexión a CPANEL.Si no lo sabe, comuníquese con su empresa de alojamiento de WordPress.Ahora, haga clic en “Conectar”.