Il est un peu difficile de déterminer comment ajouter du CSS ou du Javascript externe à WordPress si vous n’êtes qu’un utilisateur débutant de WP. Donc, avant de commencer à donner quelques instructions sur l’ajout de CSS / Javascript externe à votre site Web, j’aimerais expliquer les deux principaux domaines dans lesquels vous pourriez avoir besoin d’utiliser du CSS externe:
- 1) Personnalisations de site Web
- 2) Intégrations de services tiers
- 3 Façons d’ajouter du CSS / JavaScript externe
- En utilisant les Options de thème
- Utilisation d’un plugin
- Utiliser le Thème Enfant et le style Enqueqe
- Voici comment ça se passe:
- Laquelle est la meilleure option pour différentes situations?
1) Personnalisations de site Web
L’utilisation de CSS et Javascript externes est un excellent choix pour personnaliser votre site Web car vous pouvez facilement maintenir le code, modifier et conserver les fichiers et / ou les codes. Cependant, nous devons diviser ces personnalisations en deux types principaux: les personnalisations mini et les personnalisations plus grandes. Je reviendrai sur ces types plus tard et expliquerai quelles façons d’ajouter des codes CSS / JS seront meilleures pour différentes situations.
2) Intégrations de services tiers
Comme nous le savons tous, certains services fournissent des fichiers CSS et JS qui doivent être ajoutés à votre site Web, comme des services de formulaire, des boîtes de discussion, l’ajout de code de pixel Facebook et même Google Analytics. Par exemple, nous prenons en charge Google Analytics et en fait, le processus d’intégration dans nos options de thème est très facile et simple, mais si vous souhaitez suivre différentes analyses et d’une manière différente, vous devez utiliser les codes externes générés par Google.
3 Façons d’ajouter du CSS / JavaScript externe
En utilisant les Options de thème
Si vous devez ajouter d’autres codes ou ajouter un CSS et Javascript rapide et petit pour personnaliser votre site Web, Options de thème est la solution la plus appropriée. C’est une fonctionnalité intégrée et est facilement accessible depuis votre tableau de bord WordPress.
Accédez à Jupiter > Options de thème > Avancé > Section CSS personnalisée ou JS personnalisée.
Notez qu’en ajoutant du CSS ou du JavaScript externe dans les options de thème, vous ne pouvez pas ajouter un code commençant par < script > </ script > dans la section JS personnalisée. Vous devez supprimer le script < > </script > dans votre code car le code que vous écrivez dans la section JS personnalisée est déjà publié avec une balise < script > </script >.
AVANTAGES:
- Meilleure façon de personnaliser de petites choses avec CSS et Javascript dans Jupiter
- Meilleure façon d’ajouter des codes CSS et Javacscript de petite à moyenne gamme dans Jupiter
- Aucune configuration / installation requise – c’est déjà intégré!
INCONVÉNIENTS:
- Plus difficile à maintenir et à mettre à jour
- Vous ne pouvez pas ajouter de fichiers directement (.css ou .fichiers js externes) sauf si vous connaissez le codage AJAX.
- Vous ne pouvez pas sélectionner si le code sera poussé dans wp_header ou wp_footer.
Utilisation d’un plugin
Les plugins sont nos fidèles aides lors de l’utilisation de WordPress. Vous pouvez également ajouter vos codes avec un plugin tel que Insérer des en-têtes et des pieds de page. C’est un excellent moyen d’ajouter vos codes à votre site Web et cela fonctionne de la même manière que notre fonctionnalité intégrée. La bonne chose avec ce plugin, c’est que vous pouvez sélectionner si vous souhaitez ajouter votre code au pied de page ou à la zone d’en-tête, ce qui est parfois crucial pour certaines intégrations.
Contrairement à notre solution intégrée, vous pouvez ajouter des balises < script > </ script > dans le plugin Insérer des en-têtes et des pieds de page.
LES PLUS:
- Vous pouvez sélectionner l’emplacement du code
- Excellente alternative à notre solution intégrée
- Moyen rapide et facile d’ajouter des codes Facebook Pixel ou Google Analytics personnalisés.
- Excellent moyen pour les intégrations tierces
INCONVÉNIENTS:
- Nécessite une installation / configuration du plugin
- Difficile à maintenir et à mettre à jour
- Vous ne pouvez pas ajouter de fichiers directement comme notre solution intégrée.
Utiliser le Thème Enfant et le style Enqueqe
Utiliser le Thème Enfant est ce que nous recommandons si vous souhaitez effectuer des personnalisations de taille moyenne à grande, car c’est le moyen le plus sûr de personnaliser votre site Web. Avec le thème Enfant, vous pourrez conserver vos codes et mettre à jour facilement vos fichiers de thème de base.
Vous pouvez installer notre thème enfant officiel ou créer le vôtre. Vous pouvez ensuite commencer à ajouter vos codes CSS et personnaliser votre site Web tout de suite dans l’éditeur Appearance >. Cependant, si vous souhaitez ajouter des fichiers CSS externes et des fichiers Javascripts, vous devez l’appeler et écrire des codes dans les fonctions.php.
Voici comment ça se passe:
- Préparez votre fichier CSS ou Javascript ou si c’est une source distante, préparez le lien.
- Créez un fichier nommé fonctions.php
- Ajoute le code suivant dans les fonctions.php
<?php
fonction add_theme_codes() {
wp_enqueue_style(‘style’, get_stylesheet_directory_uri().’ / monexternalcode.css’, ‘tout’);
}
il est possible d’utiliser les paramètres de l’application.’ );
?>
Avec ce code, vous créez une nouvelle action pour votre feuille de style et vous l’appelez depuis le répertoire du thème enfant. Disons que vous avez une « coutume.fichier « css » qui doit être ajouté à votre site Web.
Ajoutez ce fichier dans wp-content/themes/jupiter-child via FTP, puis créez une fonction.fichier php. Ensuite, ajoutez le code ci-dessus et modifiez le ‘/myexternalcode.css ‘ à’ personnalisé.css ‘ ou quel que soit votre nom de fichier. Enfin, vous devez ajouter vos fonctions.php à votre thème enfant aussi.
Voici un autre exemple, si vous n’avez pas de fichier mais qu’une source distante doit être ajoutée:
<?php
fonction add_theme_codes() {
wp_enqueue_style(‘style’, ‘https://code.jquery.com/jquery-3.2.1.js’,’tous’);
}
il est possible d’utiliser les paramètres de l’application.’ );
?>
Dans l’exemple ci-dessus, nous n’avons pas utilisé get_stylesheet_directory_uri() car le fichier source est distant. En outre, vous pouvez appeler différents fichiers à partir de votre serveur en utilisant des liens comme ceux ci-dessus.
AVANTAGES:
- Idéal pour toutes sortes de personnalisations
- Idéal pour les intégrations tierces et complexes
- Facile à maintenir et à modifier
- Vous pouvez ajouter directement des fichiers locaux ou distants
- Une des méthodes les plus sûres pour les mises à jour
INCONVÉNIENTS:
- Nécessite un peu de configuration
- Nécessite un peu de connaissances en codage (ou du moins vous devriez être prêt à apprendre)
- Pas le moyen le plus rapide pour les petites personnalisations
Laquelle est la meilleure option pour différentes situations?
Si vous souhaitez apporter des modifications ou des personnalisations rapides, les options de thème seront la meilleure option pour vous. Cependant, si vous souhaitez plus de flexibilité et de contrôle sur votre code et votre emplacement de code, et que vous avez toujours des personnalisations de petite à moyenne gamme, Insérer des en-têtes et des pieds de page vous conviendra.
Mais, si vous souhaitez effectuer de grandes personnalisations, des intégrations tierces ou si vous souhaitez disposer d’un environnement de développement maintenable, le thème Enfant est votre meilleur choix. Si vous avez besoin d’aide supplémentaire pour ajouter du CSS ou du Javascript externe à votre site Web, vous pouvez toujours faire appel à Artbees Care.
