Es crucial que los diseñadores y desarrolladores sepan cómo incluir correctamente los archivos JavaScript y CSS en los temas y plugins de WordPress. No solo porque deben funcionar correctamente, sino también por la razón de que no deben afectar al tema ni a ninguno de los plugins de tu sitio web.
Ahora, hay varias maneras que usted puede utilizar para insertar CSS personalizado y javascript en su sitio web, sin embargo, en este documento, vamos a compartir algunas de las mejores prácticas.
¿Qué es el CSS personalizado?
Las hojas de estilo en cascada, o CSS, son una forma de añadir directivas de estilo al código back-end de su sitio web. Es un componente crucial de su sitio web que establece su apariencia y sensación. Sin CSS, su sitio web no será más que una colección de scripts poco atractivos.
Cuando instala un tema o importa una plantilla, se crea un archivo Style.PHP en su sitio web. Aquí es donde se guarda el código que indica a WordPress el aspecto que debe tener su sitio web. Cuando anulas el aspecto existente de tu sitio web utilizando código personalizado y lo guardas en el archivo style.css, esos códigos se denominan CSS personalizado.
¿Qué es una consulta JavaScript?
Javascript es un lenguaje de secuencias de comandos que le permite hacer prácticamente de todo, incluida la creación de material actualizado dinámicamente y la gestión multimedia. Es sorprendente lo que se puede conseguir con unas pocas líneas de código JavaScript. En pocas palabras. Javascript añade las funciones a su sitio web.
Método 1: Insertar directamente el CSS y JavaScript personalizados en su sitio web
Por defecto, WordPress crea etiquetas para el CSS y etiquetas para las consultas JavaScript. Por lo tanto, si está insertando cualquier CSS interno, tendrá que envolverlo dentro de la etiqueta y para las consultas internas de JavaScript, tendrá que envolverlo dentro de la etiqueta . Por ejemplo, WordPress entenderá que el siguiente código es un CSS y hará que todos los encabezados 1 y 2 tengan un color de fondo del código de color #7bdcb5.
Add_action( ‘admin.head’, ‘custom_internal_css’);
Function custom_internal_css(){
<style>
.h1, h2 {
background-color: #7bdcb5;
}
</style>;
}
Ahora bien, si se trata de una consulta JavaScript, tendremos que envolverla con las etiquetas . Por ejemplo,
add_action( 'astra_entry_before', function() {
<script>
add_filter( 'astra_get_option_enable-related-posts', '__return_true' );
</script>;
} );
WordPress entenderá que se trata de un código Javascript y habilitará la opción de entradas relacionadas en su sitio web.
Si está insertando un código externo que no existe en su tema o sitio web, debe utilizar el gancho de acción
wp_enqueue_scripts
No puedes simplemente imprimir etiquetas o dentro de estos ganchos, tienes que usar funciones especiales, como por ejemplo
- wp_register_script() / wp_register_style()
- wp_deregister_script() / wp_deregister_style()
- wp_enqueue_script() / wp_enqueue_style()
- wp_localize_script()
- wp_add_inline_script()
Hay más funciones como esta en el directorio de WordPress; sin embargo, generalmente con usar estos hooks es suficiente. Por ejemplo,
add_action( 'wp_enqueue_script', function() {
Wp_enqueue_script( add_filter
{'astra_get_option_enable-related-posts', '__return_false'
};
} );
Método 2: Utilizar el plugin Astra Hooks
También puedes hacerlo utilizando un sencillo plugin llamado Astra Hooks que hemos desarrollado. Puedes descargar este increíble plugin gratuito desde aquí. Astra utiliza el WordPress Hooks API para insertar acciones en todo el tema. Este plugin te permite "enganchar" tu contenido personalizado, Shortcodes o código Java Script en las distintas ubicaciones de los ganchos. Puede obtener más información sobre este plugin aquí.
