{"id":131568,"date":"2022-08-30T16:37:26","date_gmt":"2022-08-30T11:07:26","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=131568"},"modified":"2022-09-06T12:43:08","modified_gmt":"2022-09-06T07:13:08","slug":"how-to-add-custom-css-and-javascript-to-astra-theme","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-add-custom-css-and-javascript-to-astra-theme\/","title":{"rendered":"C\u00f3mo a\u00f1adir CSS y JavaScript personalizados al tema Astra"},"content":{"rendered":"

Es crucial que los dise\u00f1adores y desarrolladores sepan c\u00f3mo incluir correctamente los archivos JavaScript y CSS en los temas y plugins de WordPress. No solo porque deben funcionar correctamente, sino tambi\u00e9n por la raz\u00f3n de que no deben afectar al tema ni a ninguno de los plugins de tu sitio web. <\/p>\n\n\n\n

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\u00e1cticas.<\/p>\n\n\n\n

\u00bfQu\u00e9 es el CSS personalizado?<\/h3>\n\n\n\n

Las hojas de estilo en cascada, o CSS, son una forma de a\u00f1adir directivas de estilo al c\u00f3digo back-end de su sitio web. Es un componente crucial de su sitio web que establece su apariencia y sensaci\u00f3n. Sin CSS, su sitio web no ser\u00e1 m\u00e1s que una colecci\u00f3n de scripts poco atractivos. <\/p>\n\n\n\n

Cuando instala un tema o importa una plantilla, se crea un archivo Style.PHP en su sitio web. Aqu\u00ed es donde se guarda el c\u00f3digo que indica a WordPress el aspecto que debe tener su sitio web. Cuando anulas el aspecto existente de tu sitio web utilizando c\u00f3digo personalizado y lo guardas en el archivo style.css, esos c\u00f3digos se denominan CSS personalizado.<\/p>\n\n\n\n

\u00bfQu\u00e9 es una consulta JavaScript?<\/h3>\n\n\n\n

Javascript es un lenguaje de secuencias de comandos que le permite hacer pr\u00e1cticamente de todo, incluida la creaci\u00f3n de material actualizado din\u00e1micamente y la gesti\u00f3n multimedia. Es sorprendente lo que se puede conseguir con unas pocas l\u00edneas de c\u00f3digo JavaScript. En pocas palabras. Javascript a\u00f1ade las funciones a su sitio web.<\/p>\n\n\n\n

M\u00e9todo 1: Insertar directamente el CSS y JavaScript personalizados en su sitio web<\/h3>\n\n\n\n

Por defecto, WordPress crea etiquetas para el CSS y etiquetas para las consultas JavaScript. Por lo tanto, si est\u00e1 insertando cualquier CSS interno, tendr\u00e1 que envolverlo dentro de la etiqueta y para las consultas internas de JavaScript, tendr\u00e1 que envolverlo dentro de la etiqueta . Por ejemplo, WordPress entender\u00e1 que el siguiente c\u00f3digo es un CSS y har\u00e1 que todos los encabezados 1 y 2 tengan un color de fondo del c\u00f3digo de color #7bdcb5.<\/p>\n\n\n\n

Add_action( \u2018admin.head\u2019, \u2018custom_internal_css\u2019);\nFunction custom_internal_css(){\n<style>\n.h1, h2 {\nbackground-color: #7bdcb5;\n}\n<\/style>;\n}\n<\/code><\/pre>\n\n\n\n
Ahora bien, si se trata de una consulta JavaScript, tendremos que envolverla con las etiquetas . Por ejemplo, <\/p>\n\n\n\n
add_action( 'astra_entry_before', function() {\n\t<script>\n\tadd_filter( 'astra_get_option_enable-related-posts', '__return_true' );\n\t<\/script>;\n} );\n<\/code><\/pre>\n\n\n\n
WordPress entender\u00e1 que se trata de un c\u00f3digo Javascript y habilitar\u00e1 la opci\u00f3n de entradas relacionadas en su sitio web.<\/p>\n\n\n\n
Si est\u00e1 insertando un c\u00f3digo externo que no existe en su tema o sitio web, debe utilizar el gancho de acci\u00f3n<\/p>\n\n\n\n
wp_enqueue_scripts\n<\/code><\/pre>\n\n\n\n
No puedes simplemente imprimir etiquetas  o  dentro de estos ganchos, tienes que usar funciones especiales, como por ejemplo<\/p>\n\n\n\n