Adding Custom Code to WordPress

Cómo agregar código personalizado a su sitio de WordPress

Escribir PHP, CSS y HTML5 para editar un sitio de WordPress puede ser bastante frustrante, pero una buena guía puede facilitarle las cosas. Esta no es esta guía. Es solo una cuestión de saber cómo agregar el código a su sitio una vez que ya está hecho. No se preocupe, esto es igual de importante. Dado que hay varias formas de hacer esto, es útil conocer las diferencias entre las diferentes opciones. Pero primero, dos advertencias:

  1. Antes de cambiar algo, guárdelo. De hecho, siga guardando su trabajo durante todo el proceso. También es útil tener un archivo separado en el que pegar los fragmentos eliminados o que se utilizarán pronto.
  2. Si instaló el tema de otra persona, nunca agregue ningún código a su tema functions.php o style.css archivos. Si lo hace, cuando el tema se actualice, todo su arduo trabajo desaparecerá.

Durante el resto de este artículo, exploraré algunas alternativas, ordenadas de la más simple a la más compleja.

Complementos de WordPress

Complementos de WordPress para agregar código

Así como existen varios tipos de modificación de código, existen varios tipos de complementos de código personalizados. Los 2 tipos más comunes son PHP y CSS. Como sabrá, PHP gobierna la arquitectura y la función de WordPress. Entonces, si está intentando cambiar las funciones principales de su sitio web, agregue o cambie alguna característica, hay muchos complementos PHP disponibles para descargar para ayudarte con eso.

Del mismo modo, probablemente también sepa lo que hace CSS: mejora las cosas. Y si eso es todo lo que quieres cambiar, un Complemento CSS personalizado le permitirá hacer esto con un mínimo de esfuerzo. JavaScript, que tiene una relación compleja con los complementos, acecha en segundo plano. Para aclarar, es un poco diferente porque funciona perfectamente bien si lo agrega al encabezado, pie de página o tema secundario, pero para usarlo en una publicación, debe usar un complemento especial. Algo como Kit de herramientas CSS y Javascript debería hacer el truco. Como nota al margen, por la rapidez de tu página, es preferible ponerla al pie de página.

Escribe tus propios complementos

Hay un montón de fragmentos de WordPress disponibles en Internet para cambiar, deshabilitar o modificar ciertas funciones. Sin embargo, saber dónde colocarlos es fundamental para la funcionalidad. Por ejemplo, si tiene un fragmento de código que cambia la función de un complemento, querrá que funcione independientemente del tema que haya habilitado. Lo mismo ocurre con los fragmentos que se ocupan de los cambios en todo el sitio. Entonces, en cualquier caso, podría ser una buena idea crear un nuevo complemento para ellos. No te preocupes lo es no tan intimidante según parece.

Una de las principales ventajas de crear un complemento es que le permitirá activar o desactivar el complemento a pedido. También le permite mostrar información contextual sobre el complemento en las páginas del complemento. El único inconveniente importante es que cualquier otra persona que tenga permiso para editar el sitio puede deshabilitarlo accidentalmente, pero una advertencia severa debería poder evitarlo.

Como nota al margen, también puede crear una carpeta llamada complementos mu en vuestro contenido de wp carpetas. Los archivos PHP insertados en él se seguirán ejecutando y no se pueden habilitar ni deshabilitar. Esto mantiene el código personalizado alejado de las carpetas de temas y complementos. Pero solo haga esto con complementos con los que aún se sienta cómodo ejecutando en segundo plano.

Archivos CSS personalizados

Si los cambios que está planeando son menores, puede crear un custom-style.css bajar ó dejar algo. Si desea obtener una vista previa de sus cambios antes de realizarlos, siempre puede usar DevTools si está utilizando Chrome o una aplicación similar. Otra posibilidad es agregar CSS personalizado a través de su tema de WordPress. Algunos temas premium, como nuestro Cuadro total, incluya una opción de panel de tema para agregar CSS personalizado donde pueda encontrarlo y editarlo fácilmente. Además, cuando actualice su tema, la configuración del panel de tema no debe modificarse, para que su CSS personalizado permanezca intacto.

Recuerde que CSS va en cascada hacia atrás, lo que significa que las reglas que aparecen más tarde siempre tienen prioridad sobre las reglas que aparecen antes. Entonces, cualquier CSS aplicado a una hoja separada anulará el código predeterminado de la página. Esto también se aplica a CSS insertado en …

Temas secundarios de WordPress

Crea un tema hijo de WordPress

Para los no iniciados, un tema hijo hereda la funcionalidad de otro tema, lo que le permite cambiar su diseño a voluntad (puede aprender todo lo que quiera saber en nuestra guía de temas hijo de WordPress). Fueron inventados con el propósito específico de permitirle cambiar un tema sin perder sus cambios al actualizar. Los temas secundarios reflejan cualquier cambio que realice en el tema externo o “principal”. Por lo tanto, como aplicar un efecto de capa de Photoshop, en realidad no edita el contenido; puede eliminarlo en cualquier momento para restaurar las cosas a su estado actual.

Crear un tema hijo cuando desee editar su código le ahorrará muchos dolores de cabeza y es bastante fácil (a medida que avanzan las ediciones de WordPress). Simplemente vaya a su sitio a través de FTP y cree una carpeta, luego cree una style.css archivo que corresponde a esta carpeta. Es una práctica común nombrarlo tema del nombre del niño. Después de eso, todo lo que necesita es una línea en su nuevo style.css ‘encabezado para definir la plantilla. Pero también hay cosas que es útil tener, que se pueden encontrar en la Página del Codex de WordPress.

A continuación, realice los cambios necesarios en el tema actual en el @importar doble. El único inconveniente de los temas secundarios es la cantidad de investigación que debe realizar sobre el tema principal antes de poder editarlo, sin causar conflictos o efectos secundarios extraños. Y recuerde que con los temas secundarios, solo necesita especificar qué será diferente del tema original. Para aplicar los cambios, simplemente ZIP, descárguelo a través del Apariciones> Temas página en su panel de WordPress y actívela a través de WordPress. Esto supone que su tema principal también se descargó, por supuesto.

Visualización de código

Visualización del código añadido

Hay otro tipo de código de adición que no hemos cubierto: mostrarlo. Si es diseñador web y desea mostrar cómo se hizo algo, presentado de manera que los espectadores puedan copiarlo y pegarlo, entonces es importante calificarlo correctamente. La forma en que WordPress interpretará su código depende de si se utiliza o no la sección HTML del Editor de publicaciones visuales. Escribirlo directamente en el editor visual funcionará para neutralizarlo, pero no hay forma de ponerlo en el formato correcto o en un cuadro de código. El editor visual simplemente lo formateará de la misma manera que el texto normal. Por otro lado, el editor HTML lo convertirá en código y arruinará su sitio web. No se preocupe, puede deshacer esto.

Sin embargo, existe una compensación. Puede resaltar y poner su código en un bloque usando el et etiquetas, pero eso no evitará que el código se active. Todo lo que hará es ponerlo en la fuente Montoype, en un cuadro, para mostrar que es código oficialmente. Para evitar que se active, debe cambiar los símbolos activos a lo que se llama entidades de personajes divertidos. Las versiones más comunes de estos, y las que son suficientes para neutralizar la mayor parte del código, cambian en & lt; y & gt;, respectivamente (puede obtener más información sobre cómo mostrar código en nuestro artículo sobre cómo escribir código personalizado en sus publicaciones de WordPress).


Como puede ver, hay muchas formas de agregar código personalizado a WordPress, y lo animo a experimentar, jugar con ellos y ver cuáles son adecuados para usted. ¿Hay formas adicionales de agregar código personalizado que me perdí? Házmelo saber en los comentarios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba