Sélectionner une page


WordPress et Divi font tout de suite beaucoup de choses merveilleuses pour nous faciliter la création d’un site Web. Cependant, nous avons parfois besoin de fonctions avancées qui ne peuvent être exécutées qu’avec JavaScript.

Divi facilite l’ajout d’extraits de code JavaScript ou jQuery (morceaux de code) à votre sujet ou site Web sans plugin, même si vous n’avez pas configuré de sous-sujet. Ce tutoriel explique quelques bonnes pratiques pour l’utilisation d’extraits JavaScript externes avec Divi.

Un petit mot sur JavaScript et jQuery

JavaScript est la magie derrière la fonctionnalité dynamique que vous voyez sur un site Web. C’est un langage de codage côté client pour le Web qui peut accéder à tous vos fichiers de sujets et exécuter toutes sortes de fonctions via le navigateur, ce qui ne serait pas possible avec HTML ou CSS seul.

JQuery (l’un des plus populaires Bibliothèques JavaScript) a rendu très facile l’ajout d’extraits de code JavaScript à vos sites Web adaptés à différents types de navigateurs. Pour cette raison, jQuery est beaucoup utilisé sur les sites Web aujourd’hui. JQuery est également intégré à WordPress, donc tout code jQuery que vous ajoutez à Divi fonctionnera s’il est correctement formaté.

Mise en forme correcte des extraits JQuery dans Divi / WordPress

Utiliser la fonction d’attente de document

Pour la plupart, je suggérerais de l’utiliser $(document).ready() dans vos extraits jQuery. Tout JavaScript ajouté $(document).ready() s’assure que le document (ou DOM) est chargé et prêt avant l’exécution de JavaScript. Cela évite certaines situations dans lesquelles JavaScript peut s’exécuter lorsque la page n’est pas prête à être modifiée en toute sécurité.

Dans Divi, la fonction devrait ressembler à ceci …

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

Utilisation de « jQuery » au lieu de « $ » lors de l’utilisation de jQuery dans WordPress

Puisque WordPress a déjà une version de jQuery en mode de compatibilité, c’est la valeur par défaut $ pour jQuery ne fonctionne pas. C’est pour l’empêcher de le faire Conflits avec d’autres bibliothèques JavaScript Vous pouvez ou non utiliser dans WordPress. Au lieu de cela, vous devez utiliser jQuery à la place de $ Abréviation.

De sorte que …

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Devrait être transformé en ceci …

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

Cependant, si vous voulez garder le code moins gonflé, tenez-vous-en à ces $ Raccourcis que vous pouvez utiliser $ À la place de jQuery si vous ajoutez $ passé en argument à la fonction de préparation du document. De cette façon, vous pouvez conserver le $ dans l’extrait de code jQuery qui se trouve dans cette fonction.

Voici à quoi cela ressemblerait …

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

Ou tu peux le passer $ pour jQuery avec une fonction simple comme celle-ci avec la fonction de préparation du document …

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

Maintenant que nous comprenons quelques bonnes pratiques pour la mise en forme des extraits de code JavaScript, examinons comment les ajouter correctement à votre site Divi.

Ajout d’extraits de code JavaScript à une seule page à l’aide du moteur de code

Si vous souhaitez ajouter un extrait de code Javascript (ou JQuery) à une seule page dans Divi, vous pouvez utiliser le module de code. Cela garantit que le JS n’est pas inutilement chargé sur chaque page, ce qui entraîne une légère augmentation du temps de chargement des pages sur des pages qui n’en ont même pas besoin.

Découvrez comment le faire. Tout d’abord, activez le Divi Builder lors de l’édition de la page qui a besoin de l’extrait de code JS. Ajoutez ensuite un module de code à votre page.

Extraits de code JavaScript Divi

Le code fonctionne sur toute la page, c’est donc à vous de décider où vous voulez le mettre.

Après avoir ajouté le module de code, insérez l’extrait de code JavaScript. Assurez-vous d’inclure le code dans un <script> Balise pour que le code soit reconnu comme JavaScript.

Extraits de code JavaScript Divi

N’oubliez pas de vous assurer que votre extrait de code est correctement formaté en le plaçant avec le <script> Balise pour que le code soit reconnu comme JavaScript. Si vous utilisez jQuery, ajoutez la fonctionnalité Document prêt pour qu’elle se charge lorsque le document est prêt pour cela. En outre, vous devez utiliser jQuery dans votre extrait au lieu du raccourci $.

C’est ça! Votre extrait de code doit s’exécuter sur la page comme prévu.

Remarquerez que <script> La balise vous oblige généralement à spécifier le type de média du script comme ceci …

<script type="text/javascript">
</script>

Cependant, comme « Texte / Javascript » est le type par défaut, vous pouvez l’omettre si vous l’utilisez avec des extraits de code JavaScript.

Ajoutez des extraits de code JavaScript à toutes les pages / articles en utilisant les options de thème Divi (aucun thème enfant requis)

Des extraits de code JavaScript peuvent également être ajoutés à Divi à partir de l’onglet Intégration de code de Divi sous Options de conception. Cette méthode fonctionne bien pour les extraits JS que vous souhaitez charger sur toutes les pages / publications de votre site Web. C’est aussi une bonne option si vous n’avez pas de sous-thème ou si vous avez juste des extraits de JS qui doivent être ajoutés à votre site Divi et que vous ne voulez pas les inclure dans un fichier JS externe.

Pour trouver la section d’intégration de code, accédez à Divi> Options de conception et cliquez sur l’onglet Intégration.

Extraits de code JavaScript Divi

Découvrez où placer votre extrait de code JavaScript

Là, vous verrez quatre zones où vous pouvez ajouter du code personnalisé à votre site Divi. Dans la plupart des cas, il est préférable d’ajouter des extraits JS au corps. Cela placera en fait votre extrait au bas de votre page afin qu’il se charge après tout le reste, ce qui est bon pour la vitesse de chargement de la page. Dans certains cas, vous souhaiterez peut-être ajouter le code à l’en-tête afin que le code puisse se charger plus tôt (ou si votre document repose sur JavaScript pour s’exécuter plus tôt). Vous devez donc tester et choisir la meilleure option qui vous offre le meilleur équilibre entre performances, timing et fonctionnalité.

Par exemple, vous pouvez avoir un extrait de code jQuery pour ajouter du style à votre en-tête. Dans ce cas, vous ne voulez pas le charger dans le corps du texte (en bas de la page) car l’en-tête se chargera initialement sans ce style jusqu’à ce que l’extrait de code soit lu. Cela rendrait votre au-dessus du pli laid pour les visiteurs pendant un bref instant. Cependant, si vous le chargez dans votre tête, vous n’auriez pas ce retard dans le style.

Vous pouvez également ajouter l’extrait JS à la fin de vos articles si vous disposez d’un code qui ne s’applique qu’aux articles de blog. Cela empêche le code d’être inutilement chargé sur d’autres pages.

Extraits de code JavaScript Divi

Dans les zones d’intégration de code, le code est ajouté directement à votre page, vous devez donc ajouter le code à vos extraits de code <script> Étiqueter.

Extraits de code JavaScript Divi

Ajouter des extraits JS à Divi à partir d’un fichier JS séparé (à l’aide d’un sous-sujet)

Il est toujours recommandé d’avoir un sous-thème pour votre site Divi. Et dès que tu l’as Thème pour enfants correctement configuréVous pouvez également inclure un fichier JS dans lequel vos extraits de code JS personnalisés peuvent être enregistrés.
C’est certainement le moyen préféré de traiter Javascript sur les sites WordPress, et cela fonctionne également bien avec Divi.

Créez le fichier JS dans votre rubrique enfant

C’est toujours une bonne idée Configurer un thème pour enfants DiviCela est particulièrement vrai si vous souhaitez apporter des modifications aux fichiers de rubrique. Une fois que vous avez créé un sous-sujet Divi, il est facile de créer un fichier JavaScript qui vous permet de mettre tous vos extraits JS en un seul endroit.

Découvrez comment le faire.

Créez un fichier JavaScript et ajoutez-le à votre dossier enfant de rubrique

Utilisez un éditeur de code pour créer un nouveau fichier et l’enregistrer en tant que fichier JavaScript. Par exemple, si vous avez enregistré le fichier sous un type « js » nommé « scripts », le nom complet du fichier serait « scripts.js ». Ici, vous ajouteriez tous les extraits js que vous souhaitez ajouter à Divi. Vous n’êtes pas obligé d’envelopper les extraits dans un <script> Jour depuis que le fichier est enregistré en tant que fichier JS.

Extraits de code JavaScript Divi

Une fois le fichier créé, vous devez l’ajouter à votre dossier enfant de rubrique. Je souhaite créer un dossier js qui stockera mes fichiers js personnalisés pour une meilleure organisation. Pour ce faire, créez simplement un nouveau dossier nommé «js» à la racine de votre dossier enfant de rubrique et ajoutez le fichier «scripts.js» à ce dossier.

Extraits de code JavaScript Divi

Placez les scripts dans le fichier Functions.php de votre sujet enfant

Nous devons maintenant mettre le fichier js en file d’attente pour qu’il soit chargé dans Divi. Si vous avez déjà créé une rubrique enfant, vous devriez déjà avoir créé un fichier functions.php dans lequel vous avez déjà mis en file d’attente le fichier style.css pour la rubrique enfant, qui devrait ressembler à ceci.

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Vous devez maintenant faire de même pour votre nouveau fichier js. Pour ce faire, vous devez ajouter l’extrait de code suivant à la fonction.

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

Le code final requis pour mettre en file d’attente le fichier style.css et le fichier scripts.js est le suivant …

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Dernières pensées

Si vous êtes nouveau dans la conception de sites Web ou si vous débutez tout juste avec Divi, vous ne connaissez peut-être pas JavaScript ou ne savez pas comment l’ajouter à votre site Web. Espérons que cet article vous a aidé à vous orienter dans la bonne direction et à fournir des bonnes pratiques que même les développeurs Web chevronnés apprécieront.

J’ai hâte de vous entendre dans les commentaires.

De bas en haut!





Source link

Recent Posts