• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Recomendaciones para editar código en WordPress

Recomendaciones para editar código en WordPress

Recomendaciones para editar código en WordPress

[ 26 noviembre 2020 ] [ Actualizado: 27 noviembre 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Básico] [ Patrocinado ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Muchas veces tenemos la idea equivocada de que si queremos modificar una parte de nuestro sitio web en WordPress debemos buscar un archivo HTML y allí buscar el código para hacer las modificaciones

En WordPress el código HTML que se muestra en el navegador se crea dinámicamente y por lo tanto no existe un archivo físico HTML que editar.

En este artículo veremos qué recomendaciones debemos tener en cuenta para editar código en WordPress, ya sea código PHP, Javascript o CSS.

 

¿Dónde esta el código HTML?

Como te había comentado el código HTML es un código creado dinámicamente desde código PHP con la información que hay en la base de datos.

La siguiente imagen describe este proceso de creación de HTML en WordPress

Esquema general cliente servidor

 
En el gráfico puedes observar que los archivos JS y CSS se envían directamente al navegador y es sólo el código PHP el que es interpretado y es el que forma el código HTML final.

 

¿Entonces cómo editar código en WordPress?

Como ya lo habrás sospechado, tendrías entonces que trabajar con archivos PHP, CSS y JS

  • Usualmente harás modificaciones con código PHP cuando quieras cambiar la estructura HTML y editar o agregar funcionalidad a nivel de servidor. Es común hacer esto a través de los Hooks de WordPress.
  • Harás modificaciones en los archivos CSS cuando quieras cambiar el diseño de tu sitio web por ejemplo: colores, tipos de letra, posicionamiento de elementos, etc.
  • Las modificaciones de funcionalidad de tu sitio en el navegador las harás con javascript por ejemplo validaciones, efectos, controles HTML personalizados, etc.

 

Empezando con las modificaciones

Para hacer modificaciones en WordPress veremos dos formas, la primera de ellas es usando un tema hijo y la otra es usando un plugin de Snippets; pero antes veremos cómo instalar nuestro sitio web en el servidor.

 

– Instalación WordPress

Recuerda que ahora en clouding.io tienes una imagen pre-instalada de WordPress, la cual te facilitara el trabajo de instalar WordPress, ya que tendrás un sitio instalado con unos cuantos clics.

Lo puedes hacer desde Mis Servidores, crear un nuevo servidor, dar un nombre y luego seleccionar el origen del disco, seleccionar Apps y luego WordPress, tal como se muestra en la siguiente imagen.

Nuevo servidor

 
Luego de instalar el servidor aparecerá una pantalla que mostrará un nuevo registro en la lista de tus servidores.

Instalación sitio

 
¡Listo, ya instalaste WordPress!, puedes ver de los detalles de tu instalación ingresando al enlace de tu sitio, verás que para WordPress por defecto te crea un usuario administrador con la clave similar a la clave de acceso al servidor.

clave acceso WordPress

 

– Modificaciones de código en un tema hijo

La instalación anterior nos creará un sitio web nuevo con el tema por defecto, para hacer nuestras modificaciones de código crearemos un tema hijo.

La ventaja de tener un tema hijo es que tendremos las modificaciones de código centralizadas y además no se perderán cuando actualicemos el sitio.

Puedes crear un tema hijo de manera manual, pero lo más práctico es hacerlo a través de un plugin, no te preocupes que una vez creado el tema hijo puedes eliminar el plugin.

Desde el menú Plugins, Añadir nuevo, busca por el texto: child theme

Instalar plugin tema hijo

 
Luego de instalar y activar el plugin busca en el menú de Herramientas la opción de menú: Temas hijo.

Aparecerá la siguiente pantalla, desde aquí creas un nuevo tema hijo en base al tema activo, primero tienes que analizar el tema padre luego podrás configurar y crear el tema hijo

creacion tema hijo

 
Luego de que el tema hijo esta creado tienes que asegurarte de que se encuentre activo, para esto puedes comprobarlo desde el menú de Apariencia, temas

Activar tema hijo

 
Para agregar tus modificaciones de código entonces usarás ahora los archivos del tema hijo, puedes revisar los archivos que se han creado desde Apariencia, Editor de temas.

Como puedes ver en la siguiente imagen tienes por defecto un archivo style.css y un archivo functions.php, en estos archivos puedes agregar tu código CSS y PHP respectivamente.

style.css tema hijo

 

Siempre agrega tu código adicional al final del archivo correspondiente.
Ten en cuenta que adicional a estos dos archivos puedes agregar también archivos Javascript adicionales como parte del tema hijo, lo puedes hacer usando código PHP, con la función de encolado de archivos de scripts

 

– Modificaciones de código usando un plugin de Snippets

La otra opción para agrega código a un sitio web WordPress es usar un plugin de Snippets, en este caso tendrás que mantener el plugin activo siempre que quieras que tu código tenga efecto.

Existen varios plugins para lograr esto, sin embargo uno de los más usados es Code Snippets, puedes instalarlo directamente desde WordPress, desde el menú Plugins, Añadir nuevo y buscar por el texto: Code Snippets

Instalación plugin snippets

 
Luego de instalar y activar el plugin verás una nueva opción de menú llamada Fragmentos de código, el plugin por defecto te crea algunos fragmentos de código que puedes modificar para adaptar tu nuevo código.

Lo interesante de este plugin es que te permite crear fragmentos o Snippets CSS y Javascript a través de Hooks de WordPress, es decir a través de código PHP.

ejemplo snippets

 
Algunas de las características más importantes de este plugin:

  • Te da la opción de activar o desactivar un fragmento de código
  • Puedes ejecutar código en la administración, en el front-end o en ambos.
  • Puedes ejecutar el código sólo una vez
  • Puedes definir una prioridad de ejecución
  • Puedes agregar una descripción adicional del código, útil para documentarlo
  • Puedes organizar tus Snippets con etiquetas
  • Puedes exportar e importar tus Snippets.

 

Conclusión

Con Clouding.io, proveedor cloud de confianza, puedes instalar tu WordPress de manera simple, pero muchas veces necesitarás trabajar con código.

Puedes agregar código PHP, CSS, o Javascript a tu sitio web WordPress, y tal como hemos visto en este artículo, existen básicamente dos formas recomendadas para hacer esto, ya sea a través de un tema hijo o usando un plugins de Snippets.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Luis Mendoza

    26 noviembre, 2020

    ¡Excelente contenido! El blog es increíble.

    Sigue así, adelante 🙂

    • Jhon Marreros Guzmán

      26 noviembre, 2020

      Gracias Luis. Saludos.

  2. ruben

    20 febrero, 2021

    El blog es una Maravilla.
    Deseando que cree unos cursos mas extensos y que los ponga a la venta/suscripcion en alguna plataforma como Udemy etc….

    Muchas gracias.

    • Jhon Marreros Guzmán

      21 febrero, 2021

      Hola Ruben, gracias por la sugerencia, sí, estoy evaluando hacer contenido de pago, espero tenerlo pronto. Saludos.

  3. Osvaldo Baigorrai

    3 mayo, 2021

    Jhon, Realmente increíble tu trabajo. Gracias

    • Jhon Marreros Guzmán

      4 mayo, 2021

      Gracias!

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar Microdatos en campos de productos en WooCommerce

Fijar Widget lateral en WordPress sin plugins

Administrar tabla wp_options desde el Backend de WordPress

Cabecera fija en theme WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados