Es un poco complicado determinar cómo Agregar CSS o Javascript externos a WordPress si solo eres un usuario principiante de WP. Por lo tanto, antes de comenzar a dar algunas instrucciones sobre cómo agregar CSS / Javascript externo a su sitio web, me gustaría explicar las dos áreas principales en las que podría necesitar usar CSS externo:
1) Personalizaciones de sitios web
El uso de CSS y Javascript externos es una gran opción para personalizar su sitio web porque puede mantener fácilmente el código, editar y mantener los archivos y/o códigos. Sin embargo, tenemos que dividir estas personalizaciones en dos tipos principales: mini personalizaciones y personalizaciones más grandes. Volveré a esos tipos más adelante y explicaré qué formas de agregar códigos CSS / JS serán mejores para diferentes situaciones.
2) Integraciones de servicios de terceros
Como todos sabemos, algunos de los servicios proporcionan archivos CSS y JS que deben agregarse a su sitio web, como Servicios de formularios, Cuadros de Chat, agregar código de píxel de Facebook e incluso Google Analytics. Por ejemplo, admitimos Google Analytics y, en realidad, el proceso de integración en nuestras Opciones de temas es muy fácil y simple, pero si desea realizar un seguimiento de algunos análisis diferentes y de una manera diferente, debe usar los códigos externos que genera Google.
3 Formas de agregar CSS / JavaScript externo
Usando las Opciones de tema
Si necesita agregar otros códigos o agregar un CSS y Javascript rápido y pequeño para personalizar su sitio web, Opciones de tema es la solución más adecuada. Es una función incorporada y es fácilmente accesible desde su panel de control de WordPress.
Vaya a Júpiter > Opciones de tema > Avanzado > Sección CSS personalizada o JS personalizada.
Tenga en cuenta que al agregar CSS o JavaScript externos en Opciones de tema, no puede agregar un código que comience con <script></script> en la sección JS personalizada. Debe eliminar el script < > < / script> de su código porque el código que escribe en la sección JS personalizada ya se está publicando con una etiqueta < script> < / script>.
PROS:
- La mejor manera de personalizar cosas pequeñas con CSS y Javascript en Jupiter
- La mejor manera de agregar códigos CSS y Javacscript de rango pequeño a medio en Jupiter
- No se requiere configuración / instalación, ¡ya está incorporado!
CONTRAS:
- Más difícil de mantener y actualizar
- No puede agregar archivos directamente (.css or .archivos js externos) a menos que conozca la codificación AJAX.
- No puede seleccionar si el código se insertará en wp_header o wp_footer.
Usando un plugin
Los plugins son nuestros leales ayudantes mientras usamos WordPress. También puede agregar sus códigos con un complemento como Insertar encabezados y pies de página. Es una excelente manera de agregar sus códigos a su sitio web y funciona de la misma manera que nuestra función incorporada. Lo bueno de este complemento es que puede seleccionar si desea agregar su código al pie de página o al área del encabezado, lo que a veces es crucial para algunas integraciones.
A diferencia de nuestra solución incorporada, puede agregar etiquetas <script></script> en el complemento Insertar encabezados y pies de página.
PROS:
- Puede seleccionar la ubicación del código
- Excelente alternativa a nuestra solución incorporada
- De manera rápida y fácil de agregar códigos de Píxel de Facebook o de Google Analytics personalizados.
- Excelente manera de integraciones de terceros
CONTRAS:
- Necesita instalación / configuración de complementos
- Difícil de mantener y actualizar
- No puede agregar archivos directamente como nuestra solución incorporada.
Usar el tema Hijo y el Estilo Enqueqe
Usar el Tema Hijo es lo que recomendamos si desea realizar personalizaciones de rango medio a grande porque es la forma más segura de personalizar su sitio web. Con el Tema Hijo, podrá mantener sus códigos y actualizar fácilmente sus archivos de temas principales.
Puede instalar nuestro tema infantil oficial o puede crear el suyo propio. A continuación, puede comenzar a agregar sus códigos CSS y personalizar su sitio web de inmediato en el editor de apariencia >. Sin embargo, si desea agregar archivos CSS externos y archivos JAVASCRIPT, debe llamarlo y escribir algunos códigos en funciones.php.
Así es como funciona:
- Prepara tu archivo CSS o Javascript o, si se trata de una fuente remota, prepara el enlace.
- Crear un archivo con nombre functions.php
- Agregue el siguiente código en funciones.php
<?php
function add_theme_codes() {
wp_enqueue_style (‘style’, get_stylesheet_directory_uri().mi código externo.css’, ‘all’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
Con este código, está creando una nueva acción para su hoja de estilos y llamándola desde el directorio de temas secundarios. Digamos que tienes una «costumbre».archivo css » que debe agregarse a su sitio web.
Agregue ese archivo en wp-content / themes / jupiter-child a través de FTP, y luego cree una función.archivo php. Luego, agregue el código anterior y cambie el ‘ / myexternalcode.css ‘ a ‘ personalizado.css ‘ o como sea el nombre de tu archivo. Por último, debe agregar sus funciones.php para el tema de su hijo también.
Aquí hay otro ejemplo, si no tiene un archivo, pero necesita agregar una fuente remota:
<?php
función add_theme_codes() {
wp_enqueue_style( ‘style’, ‘https://code.jquery.com/jquery-3.2.1.js’, ‘todos’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
En el ejemplo anterior, no usamos get_stylesheet_directory_uri () porque el archivo fuente es remoto. Además, puede llamar a diferentes archivos desde su servidor utilizando enlaces como los anteriores.
PROS:
- Lo mejor para todo tipo de personalizaciones
- Lo mejor para Integraciones complejas y de terceros
- Fácil de mantener y editar
- Puede agregar archivos locales o remotos directamente
- Uno de los métodos más seguros para actualizaciones
CONTRAS:
- Necesita un poco de configuración
- Requiere un poco de conocimiento de codificación (o al menos debería estar dispuesto a aprender)
- No es la forma más rápida para pequeñas personalizaciones
¿Cuál es la mejor opción para diferentes situaciones?
Si desea realizar cambios rápidos o personalizaciones, las opciones de tema serán la mejor opción para usted. Sin embargo, si desea más flexibilidad y control en su código y ubicación de código, y aún tiene personalizaciones de rango pequeño a medio, Insertar encabezados y pies de página funcionará bien para usted.
Pero, si desea realizar personalizaciones grandes, integraciones de terceros o si desea tener un entorno de desarrollo que se pueda mantener, el Tema Secundario es su mejor opción. Si necesita más ayuda para agregar CSS o Javascript externos a su sitio web, siempre puede solicitar la ayuda de Artbees Care.
