• 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 / Recursos / Qué debes tener en cuenta para modificar código en WordPress

Qué debes tener en cuenta para modificar código en WordPress

Qué debes tener en cuenta para modificar código en WordPress

[ 10 febrero 2020 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

funcionalidad herramientas

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Quieres empezar a profundizar más en WordPress?, entonces verás que no sólo se trata de instalar y configurar plugins y temas, sino que que posiblemente requieras hacer modificaciones y personalizaciones más avanzadas a nivel de código.

 

Generalidades

Como todo software moderno, WordPress se puede extender en funcionalidad y diseño, en cuanto a funcionalidad lo haces a través de plugins y para el diseño puedes construir temas.

Pero claro no siempre un plugin se adapta exactamente a lo que quieres o un tema no tiene exactamente el diseño que buscas, es en estos casos, si no tienes la opción de cambiar esto a nivel de configuración, busca hacerlo a través de código.

Cada caso puede ser diferente, sin embargo hay algunas generalidades que hay que tener en cuenta cuando quieres hacer modificaciones a nivel de código.

 

1- Modificaciones de Diseño

logo css

La mayoría de las veces las modificaciones que buscas son simplemente ajustes de diseño, por lo tanto puedes hacer estos cambios usando código CSS.

 

¿Cómo probar los cambios CSS?

Para probar los cambios puedes usar el Inspector de Código del Navegador.

En el caso de Firefox, tienes la opción de agregar nuevo archivo o adjuntar un archivo local, de esta última forma no perderás los cambios si refrescas accidentalmente el navegador.

Firefox opción de editar CSS en inspector de código

 
En el caso de Google Chrome, puedes usar la funcionalidad de overrides, haciendo referencia a un archivo CSS cargado que se guardará en el disco, de esta forma no perderás los cambios.

Google Chrome, opción de override para estilos CSS

Ten en cuenta que estos cambios son sólo temporales, por lo que al final deberás poner este código en algún lugar permanente.

 

¿En dónde colocar el código?

Los cambios en el Inspector de Código son temporales, tienes que guardar los cambios de forma permanente, tienes 3 opciones para agregar código CSS:

  1. A través de un tema hijo
    Usar el archivo style.css del tema hijo para agregar los cambios
  2. A través de la opción de Apariencia > Personalizar > CSS
    Esta es una opción que incluye el tema para agregar código CSS como parte del documento HTML generado.
  3. Usando un plugin de Snippets
    Es posible igualmente usar un plugin de Snippets para agregar código CSS.

 

¿Qué tener en cuenta?

  • Lo recomendable más que modificar el código CSS existente es agregar nuevo código.
  • Si sólo quieres cambiar una parte del diseño, ten en cuenta cuando hagas modificaciones CSS ser lo más específico posible.
  • Ayudarse de las clases generadas a nivel del body, de acuerdo a las clases CSS que genera WordPress

 
 

2- Modificaciones PHP

logo php

Si quieres cambiar el comportamiento del core de WordPress, de plugins o de temas, tienes que hacerlo a través de programación usando código en PHP.

Core de WordPress
En este caso sólo será posible hacer modificaciones a través de los Hooks
El código lo puedes agregar en el archivo functions.php del tema o usar algún plugin de snippets.

Temas
En el caso de los temas la mejor manera de hacer modificaciones es que uses un child theme y en este tema hijo sobrescribir los archivos del tema padre con las modificaciones deseadas

Plugins
Para los plugin hay dos opciones que puedes usar:

  • Usar Hooks para hacer modificaciones.
  • Algunos plugins permite hacer sobreescritura copiando los archivos al theme, por ejemplo WooCommerce, Sensei, etc.
  •  

    Algunos temas también permiten hacer modificaciones a través de Hooks, por ejemplo los temas basados en el Framework Genesis
    El core también permite para ciertas clases hacer modificaciones, tal como vimos en el artículo: Cambiar la estructura de menú en WordPress.

     

    ¿En dónde colocar el código?

    • Si la modificación se realizará usando Hooks, podemos colocar el código en el archivo functions.php del tema hijo, la otra opción para colocar el código es usar algún plugin de Snippets.
    • Si la modificación es a los archivos, podemos copiar los archivos al tema hijo y allí hacer las modificaciones.

     

    ¿Qué tener en cuenta?

    • La ejecución de Hooks tienen prioridad, por lo tanto necesitamos tener en cuenta el parámetro de prioridad en las funciones add_action y add_filter.
    • Habilitar el modo debug en WordPress.

     
     

    3- Modificaciones Javascript

    logo js

    Estas modificaciones son menos comunes, usualmente son realizadas cuando necesites cambiar alguna parte de diseño que no es posible con CSS o cuando quieras modificar funcionalidad del front-end de tu sitio.

     

    ¿Cómo probar los cambios Javascript?

    Para detectar las modificaciones a realizar puedes usar el Inspector de Código del Navegador, por ejemplo a través de Google Chrome en la opción de overrides.

    Modificar javascript overrides Google Chrome

    También es posible hacerlo a través de la opción de Snippets de Google Chrome.

     

    ¿En dónde colocar el código?

    Tienes algunas opciones, las principales que podrías considerar son:

    • Podrías registrar un nuevo archivo javascript, tal como lo vimos en: Cómo agregar código javascript en WordPress
    • La otra opción es a través de un plugin de Snippets

     

    ¿Qué tener en cuenta?

    Tenemos que tener en cuenta lo siguiente:

    • Si registras un nuevo archivo es preferible que cargue al final.
    • Puedes usar jQuery ya que WordPress carga esta librería por defecto.

     
     

    Conclusión

    Como has podido ver existen modificaciones que puedes hacer a nivel de código tanto para diseño como para funcionalidad. Las modificaciones pueden ser usando CSS, PHP y Javascript, y en cada una de ellas tienes que tener en cuenta algunas consideraciones para realizar estas modificaciones de código correctamente.

     

    ¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

    Suscríbete a DecodeCMS:  

     

    ¿Me ayudas a llegar a más gente?

    Twittear Compartir LinkedIn WhatsApp

    Artículos Relacionados

    • 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
    • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
    Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
    Cargando...

Interacciones con los lectores

Comentarios

  1. joaquin

    15 febrero, 2020

    Gracias. Dá gusto leerte

  2. Elba Calao

    19 abril, 2020

    Genial, gracias por la información

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

Modificar contenido usando código en WordPress

Clases CSS basadas en el Rol de usuario en WordPress

Optimizar la carga de imágenes con Lazy Load

Formulario de login sin plugins en WordPress

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