Catégorie : Conception WEB

Publié le par

Intégration HTML/CSS

L’intégration HTML/CSS est le processus de création d’un site Web en combinant du code HTML et CSS pour concevoir et styliser les éléments visuels d’une page Web. HTML est le langage de balisage utilisé pour créer la structure et le contenu de la page, tandis que CSS est utilisé pour la présentation et la mise en page des éléments visuels de la page.

HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer des pages Web. Les balises HTML permettent de structurer le contenu d’une page, en identifiant les titres, les paragraphes, les images, les liens et autres éléments. Les balises HTML sont également utilisées pour créer des formulaires, des tableaux et des listes, ainsi que pour ajouter des éléments multimédias tels que des vidéos et des audio.

CSS (Cascading Style Sheets) est un langage utilisé pour décrire la présentation visuelle d’un document HTML. CSS permet de définir la taille, la couleur, la police, l’alignement et la mise en page de chaque élément de la page. Il permet également de définir des styles pour les différents types d’éléments HTML, tels que les titres, les paragraphes, les liens et les images.

En résumé, l’intégration HTML/CSS est le processus de création d’une page Web en combinant des éléments HTML et CSS pour créer la structure et l’apparence visuelle de la page.

Si vous recherchez une expertise en matière d’intégration HTML/CSS, nous sommes là pour vous aider. Notre équipe compétente maîtrise les dernières normes et techniques en matière de développement web. Que vous ayez besoin de créer une structure solide et esthétique pour votre site web ou d’ajouter des fonctionnalités interactives, nous saurons répondre à vos attentes.

Si vous préférez travailler avec WordPress ou tout autre CMS (Système de Gestion de Contenu), nous sommes également à votre service. Nos intégrateurs ont une grande expérience sur ces plateformes. Ils peuvent personnaliser et optimiser votre site en fonction de vos besoins spécifiques, en veillant à ce qu’il soit convivial, sécurisé et facile à mettre à jour.

Nous contacter pour en savoir plus
Publié le par

CPM et CPC ?

CPM et CPC sont deux des termes les plus couramment utilisés dans le domaine du marketing en ligne. Bien qu’ils soient tous deux des méthodes de tarification de la publicité numérique, ils diffèrent dans la manière dont ils facturent les annonceurs pour leurs campagnes publicitaires. Voici une explication détaillée de ces deux termes :

CPM (Coût Pour Mille)

CPM est une méthode de tarification de la publicité numérique qui se base sur le nombre d’impressions publicitaires. Lorsque vous utilisez CPM, vous payez pour chaque millier de fois que votre publicité est affichée. Le terme « mille » se réfère à mille impressions publicitaires. Ainsi, si le coût CPM est de 2 euros, vous paierez 2 euros pour chaque mille impressions de votre publicité. Cela signifie que si votre publicité est affichée 10 000 fois, vous paierez 20 euros.

Le CPM est souvent utilisé pour des campagnes de sensibilisation ou de notoriété de marque, car il permet de toucher un grand nombre de personnes. Cette méthode est particulièrement efficace pour les publicités graphiques, car elles sont souvent plus visuelles et plus susceptibles d’attirer l’attention des utilisateurs.

CPC (Coût Par Clic)

CPC est une méthode de tarification de la publicité numérique qui se base sur le nombre de clics sur une publicité. Lorsque vous utilisez le CPC, vous payez pour chaque fois qu’un utilisateur clique sur votre publicité. Ainsi, si le coût par clic est de 1 euro et que votre publicité est cliquée 100 fois, vous paierez 100 euros.

Le CPC est souvent utilisé pour les campagnes d’acquisition de clients, car il permet de générer du trafic sur un site Web ou une page de destination. Cette méthode est particulièrement efficace pour les publicités textuelles, car elles permettent d’attirer l’attention des utilisateurs en leur fournissant un message concis et clair.

En général, le choix entre le CPM et le CPC dépendra de l’objectif de votre campagne publicitaire. Si votre objectif est d’augmenter la notoriété de votre marque et d’atteindre un grand nombre de personnes, le CPM est le choix le plus approprié. Si votre objectif est de générer du trafic vers votre site Web ou une page de destination, le CPC est la meilleure option. Il est important de noter que le coût CPM et le coût par clic peuvent varier en fonction de divers facteurs, notamment la concurrence, l’enchère et la qualité de votre publicité.

Nous contacter pour en savoir plus
Publié le par — Laisser un commentaire

3 façons de rajouter des scripts sur WordPress

header script e-loou
header script e-loou

Il y a plusieurs façon de faire apparaître votre script sur WordPress, et nous allons en voir 3.

  • Un script dans le Header via le fichier header.php
  • Un script dans le Header via le functions.php
  • Un script destiné à être placé dans le header de la page /wp-login de votre site WordPress.

Voici le script que nous voulons rajouter à notre site.

<script>

    window.onload = function (e) {
        console.log( 'Coucou !' );
    }

</script>

Dans le Header  via le fichier header.php dans la base de votre thème :

Ajouter votre script entre les balises <head> </head>, et voilà! 

Vous avez la possibilité de confirmer cela en vérifiant votre header avec l’inspecteur.

<head>
  <meta charset="toto" >
  <meta name="viewport" >
  <link rel="tata" href="toto" />

  <script>
    window.onload = function (e) {
        console.log( 'Coucou !' );
    }
  </script>
  
  
  <?php wp_head(); ?>
</head>

Dans le Header via le fichier functions.php :

Ajouter ce snippet en dessous, et remplacer le script par le votre.

function header_code() { 
?> 

    <script>
    
        window.onload = function (e) {
            console.log( 'Coucou !' );
        }
    
    </script>
    
<? php }

add_action('wp_head', 'header_code');

Source: wp_head | Hook | WordPress Developer Resources

Dans le Header d’une page ADMIN  via le fichier functions.php :

Nous allons pousser un peu plus loin et cibler la page /wp-login

C’est un processus un peu plus compliqué.

Nous allons créer un fichier Javascript et prévenir WordPress qu’il existe et qu’il doit le rajouter au cycle de chargement de WordPress.

Pour commencer, nous allons créer un fichier Javascript et je vais l’appeler  « mon-fichier-javascript.js »

Ajouter votre code sans les balises <script></script>, sauvegarder , puis placer le à la base de votre thème ( au même niveau de votre functions.php ). 

Pour finir,  ajouter ce snippet de code dans votre fichier « functions.php ». 

Ligne 4 : Je me sers d’une variable globale pour vérifier qu’on est bien sur la bonne page ( c.a.d wp-login.php ).

Ligne 8 : Ensuite, je préviens WordPress qu’il y aurait un fichier Javascript à ajouter au cycle de chargement.

Si WordPress ne trouve pas votre fichier, modifiez « get_stylesheet_directory_uri(). ‘/mon-fichier-javascript.js' » avec son emplacement.

function my_login_stylesheet() {

// Nous allons cibler la page /wp-login
if ( $GLOBALS['pagenow'] === 'wp-login.php' ) {

// Nous allong maintenant dire a WordPress de trouver et d'ajouter
// le fichier dans la liste d'attente avec les autres fichiers WordPress.
    wp_enqueue_script( 'mon-fichier-javascript',
    get_stylesheet_directory_uri() 
    .'/mon-fichier-javascript.js' );
}
    
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
Nous contacter pour en savoir plus
Publié le par — Laisser un commentaire

Modifier l’attribut « autocomplete » sur un input avec Javascript.

javascript attribut eloou
javascript attribut eloou

Parfois, il est impossible de modifier l’attribut d’un input car celui ci est généré par un plugin ou un script.

Il faudra donc passer par du Javascript.

Avec quelques lignes de code, on peut facilement ajouter, retirer ou modifier un attribut, mais pour cela, il faut déjà récupérer l’input désiré.

Pour les exemples ci-dessous, nous allons modifier l’attribut « autocomplete » et changer sa valeur à « off ». 

<input id="Id_de_l_input" type="text" autocomplete="on"/>

Avec Javascript:

window.onload = function (e) {

    // Nous allons chercher l'input en nous servant de l'ID.
    var element = document.getElementById("Id_de_l_input");
    
    // Nous allons ensuite modifier ou ajouter l'attribut avec fonction
    // .setAttribute( "KEY" ,"VALEUR");
    element.setAttribute("autocomplete","off");
    
    //Pour retirer un attribut
    element.removeAttribute("autocomplete");
    
}

Avec Jquery:

$(document).ready(function(){

    // Nous allons chercher l'input en nous servant de l'ID,
    // pour ensuite changer l'attribut.
    
    //Pour Ajouter/modifier un attribut
    $("#Id_de_l_input").attr("autocomplete","off");
    
    //Pour retirer un attribut
    $("#Id_de_l_input").removeAttr("autocomplete");
    
});

Sources:

Remove attribute: Element.removeAttribute() – Web APIs | MDN (mozilla.org)

Add Attribute: Element.setAttribute() – Web APIs | MDN (mozilla.org)

Nous contacter pour en savoir plus
Publié le par — Laisser un commentaire

Landing page

Une landing page, également appelée page d’atterrissage, est une page web sur laquelle les visiteurs arrivent après avoir cliqué sur un lien, une publicité ou un autre type de call-to-action (CTA) présent sur un autre site web. L’objectif principal d’une landing page est de convaincre le visiteur de réaliser une action spécifique, telle que remplir un formulaire, acheter un produit, s’inscrire à un service ou télécharger un contenu.

Contrairement aux autres pages d’un site web, qui ont souvent plusieurs objectifs et qui sont généralement plus générales, les landing pages sont conçues pour être plus spécifiques et orientées vers un seul objectif. Cela permet de maximiser les chances que le visiteur réalise l’action souhaitée, en minimisant les distractions et en fournissant une expérience utilisateur cohérente.

Pour réussir une landing page, il est important de prendre en compte certains éléments clés :

Titre accrocheur :

Un titre clair et accrocheur qui attire l’attention des visiteurs et les incite à lire la suite.Sous-titre : Un sous-titre qui décrit brièvement ce que la page a à offrir et comment cela peut bénéficier aux visiteurs.

Image ou vidéo :

Une image ou une vidéo pertinente pour le produit, service ou l’offre de la landing page pour illustrer son utilisation et son fonctionnement.

Texte descriptif :

Une description plus détaillée de l’offre ou du produit, expliquant les avantages et les caractéristiques uniques.

Appel à l’action (CTA) :

Un bouton d’appel à l’action visible et incitatif, qui dirige les visiteurs vers la prochaine étape de la conversion (par exemple, « Achetez maintenant », « Inscrivez-vous », « Téléchargez »).

Références sociales ou témoignages :

Des références positives d’autres clients ou utilisateurs du produit ou service pour renforcer la crédibilité.

Formulaire de capture de leads :

Un formulaire simple pour capturer les informations de contact des visiteurs intéressés.

Le but d’une landing page est de convaincre les visiteurs d’effectuer une action spécifique, telle que l’achat d’un produit ou la soumission d’un formulaire de contact, en fournissant des informations pertinentes et convaincantes de manière concise et claire.

Nous contacter pour en savoir plus
Publié le par — Laisser un commentaire

Qu’est que du lorem ipsum

Le Lorem Ipsum est un texte fictif utilisé par les professionnels du design graphique, les développeurs de sites web et les éditeurs pour remplir temporairement les zones de texte d’un design ou d’une maquette. Ce texte est utilisé pour simuler le contenu d’un texte réel lors de la création d’un design ou d’une mise en page.

Le Lorem Ipsum a été créé à l’origine en latin au XVIe siècle par un imprimeur pour remplir des espaces vides dans des maquettes de livres. Il est composé de mots latins aléatoires et a été popularisé dans les années 1960 grâce à son utilisation dans l’industrie de l’impression et de la publication.

Le Lorem Ipsum est également utilisé dans les logiciels de mise en page, pour simuler le contenu d’un texte réel lors de la création de maquettes de pages. Les designers utilisent le Lorem Ipsum pour évaluer la façon dont le texte s’intégrera dans un design et pour déterminer la taille et la forme de la zone de texte.

Aujourd’hui, il existe de nombreuses variantes du Lorem Ipsum disponibles en ligne, ainsi que des générateurs de Lorem Ipsum qui permettent de générer des textes aléatoires de différentes longueurs et formats pour remplir des maquettes ou des designs.

Publié le par — Laisser un commentaire

Auditer un site internet

L’audit d’un site internet consiste à examiner le site et à évaluer son contenu, sa conception, ses performances, sa sécurité et sa convivialité. Cela peut aider les propriétaires de sites internet à identifier les problèmes et les opportunités d’amélioration pour rendre leur site plus efficace et plus attractif pour les utilisateurs. Voici les étapes clés pour auditer un site internet :

Analyse des objectifs : Comprendre les objectifs du site web et le public cible visé par le site web est crucial pour l’audit. Cela aide à déterminer si le site web est bien adapté aux attentes de l’utilisateur.

Vérification de la conception : Examiner la conception du site web et évaluer sa qualité visuelle, son accessibilité, sa convivialité et la cohérence de la conception à travers les différentes pages du site.

Évaluation du contenu : Examiner le contenu du site web et évaluer sa qualité, son adéquation aux objectifs du site web, sa pertinence pour le public cible et sa structure logique.

Analyse de la performance : Vérifier les performances du site web en termes de temps de chargement des pages, d’optimisation pour les appareils mobiles, de compatibilité avec différents navigateurs et systèmes d’exploitation.

Test de la sécurité : Évaluer la sécurité du site web en testant les vulnérabilités, en vérifiant les certificats SSL et en s’assurant que le site web est conforme aux normes de sécurité et de confidentialité.

Évaluation du référencement naturel (SEO) : Vérifier si le site web est bien optimisé pour les moteurs de recherche en analysant les mots clés, les balises de titre, les descriptions, les URL, les liens internes et externes.

Analyse des statistiques : Évaluer les performances du site web en utilisant des outils d’analyse web pour suivre le trafic, le comportement des utilisateurs et les conversions.

Une fois l’audit terminé, il est important de fournir des recommandations pour améliorer le site web en fonction des résultats de l’audit. Les recommandations peuvent inclure des modifications du contenu, des améliorations de la conception, des ajustements de la structure du site web, des optimisations de la vitesse et de la sécurité et des stratégies de référencement naturel pour améliorer la visibilité du site web dans les résultats des moteurs de recherche. 

Nous contacter pour en savoir plus
Publié le par — Laisser un commentaire

WordPress: ACF – Créer une page de configurations générale en version gratuite.

Nous n’avons pas toujours besoin de la version Premium d’un plugin. 

Je vais vous montrer comment créer une page,  qui vous servira pour configurer certains contenu du site sans devoir passer par le plugin ACF en Premium.

Les étapes sont assez simple, il faut:

 

Créez une page WordPress en notant l’ID de la page et mettez la en mode « Privé ». Nous allons utiliser cette ID pour accéder aux champs ACF de cette page.

Vous trouverez l’ID dans l’URL de la page.

 

Ensuite il faut créer les champs ACF via le menu ACF dans l’admin.

Créez votre groupe de champs. Dans la zone « Emplacement »  la condition « Page »  « est égale à »   et choisissez la page que vous avez créée précédemment.

 

Maintenant il vous suffit de remplir les champs qui apparaîtront dans l’admin de votre page.

Pour ajoutez le contenu d’un champs sur une template WordPress.  Il faut tout simplement aller chercher le champs ACF en utilisant le nom du champs et spécifier l’ID du poste de la page que vous avez créée à la première étape.

$fieldheader = get_field('header', 196);
					
echo '<p>'.$fieldheader.'</p>';
Publié le par — Laisser un commentaire

Créer du contenu Sticky

Parfois il est nécessaire de faire défiler du contenu au scroll de l’utilisateur.

Je vais vous montrer comment le faire sans qu’il déborde de son container.

Comment créer du contenu Sticky ?

Nous allons utiliser Bootstrap pour créer deux colonnes  à l’intérieur d’une div.

<div>
    <div class="col-lg-3 col-sm-12">
        <div>
            Contenu Sticky
        </div>
    </div>
    <div class="col-lg-9 col-sm-12">
         Contenu de l'article
    </div>
</div>

 

Nous allons ajouter des classes.

La class .div-wrapper ajoute un « display:flex« , ce qui met toutes les colonnes à la même hauteur ( Pratique pour du contenu dynamique comme des articles ).

La class .sticky ajoute une « position:sticky » et un « top: 30px;« 

En utilisant la position:sticky, il est possible de contrôler la position verticale et horizontale du contenu en utilisant « top », « bottom », « left » et « right ».

<div class="div-wrapper">
    <div class="col-lg-3 col-sm-12">
        <div class="sticky">
            Contenu Sticky
        </div>
    </div>
    <div class="col-lg-9 col-sm-12">
        Contenu de l'article
    </div>
</div>

 

Un peu de CSS

.div-wrapper {
    display:flex;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 30px;
}

 

Si vous n’avez pas de contenu dans la colonne de droite, n’hésitez pas à rajouter une hauteur minimum afin de tester votre contenu sticky.

<div class="div-wrapper">
    <div class="col-lg-3 col-sm-12">
        <div class="sticky">
            Contenu Sticky
        </div>
    </div>
    <div class="col-lg-9 col-sm-12" style="min-height:500px;">
        Contenu de l'article
    </div>
</div>

 

L’exemple en  codepen.

 

Un exemple sur Poujoulat.fr
Publié le par — Laisser un commentaire

Refonte site web, quand et pourquoi ?

Tout d’abord, qu’est-ce qu’une refonte ?

Cela permet de le moderniser graphiquement, de mettre votre site internet au goût du jour, mais pas seulement. La refonte d’un site web se fait de fond en comble, du code jusqu’au design, cela permet d’améliorer l’ergonomie, d’ajouter de nouvelles fonctionnalités pour une visite plus agréable ce qui donnera avec le temps de meilleurs résultats commerciaux en travaillant sur l’amélioration des performances SEO.

On peut faire la refonte de son site soi-même, mais il est important de noter que la moindre erreur pourrait avoir un impact sur la performance du site et avec le temps, sur les résultats commerciaux. La meilleure des solutions est de confier le projet à une agence qui aura les compétences et les connaissances pour assurer l’efficacité de ce changement.

Afin d’éviter la fuite des visiteurs, soit par un site trop lent, ou trop vieillot, il ne faut pas hésiter à investir dans un design des plus moderne, si le client se sent bien et que la circulation est fluide, il aura plus de chance à passer à l’acte d’achat ou au contact selon votre activité.

Pourquoi faire une refonte de son site internet ?

Le design est obsolète

Que vous l’ayez fait vous-même avec les moyens du bord ou confié à une agence il y a des années, il est grand temps de le moderniser avec un nouveau design et de nouvelles fonctionnalités qui donnera un plus et vous démarquera de vos concurrents. Une grande majorité des visiteurs de site internet avouent porter un jugement sur la crédibilité d’une entreprise en se basant sur la conception de leur site web.

La rapidité et le responsive

Un site internet doit être lisible sur tous les appareils, aussi bien sur un écran d’ordinateur que sur tablette et mobile, c’est ça le responsive. Les internautes étant de plus en plus sur leur smartphone, il est indispensable de faire adapter son site internet sur mobile et de penser à la vitesse de chargement des pages.

Le référencement

Votre site est tout beau tout neuf, mais une étape reste importante et c’est le SEO, c’est-à-dire le référencement sur les moteurs de recherche, ce qui permettra aux utilisateurs de vous trouver facilement sur Internet. Le SEA (achat de mots-clés) est possible, mais le référencement naturel est efficace sur du long terme et ne nécessite pas d’achat. Il se travaille dès le code jusqu’au contenu de votre site : les url uniques, la hiérarchisation, le maillage interne et les balises du code sont importants, le contenu également être optimisé pour le référencement, utiliser les bons termes aux bons endroits et ne pas abuser des mots-clés un peu partout en croisant les doigts et en risquant de répéter les mêmes mots dans une même page.

POUR RÉSUMER

La refonte d’un site est la meilleure occasion d’optimiser au maximum votre site web, de plus, si vous n’avez pas encore migré vers le HTTPS, la refonte de votre site est le moment d’en profiter pour le faire, cela augmentera votre crédibilité et la confiance des utilisateurs, mais aussi le référencement de votre site.

Publié le par — Laisser un commentaire

Outil dégradé de forme – Illustrator

L’outil dégradé de forme permet de transformer un objet en un autre en créant des étapes automatiques entre les deux formes. Il peut aussi être utilisé pour faire une ombre portée dégradée ou une lumière afin d’accentuer une forme. cette technique permet beaucoup de choses selon votre imagination !

Quelques exemples :

Pour l'exemple du texte "SHADOW"

Étape 1

Écrire un mot avec l’outil Texte en cliquant sur le raccourci T ou sur le bouton

Étape 2

Dupliquer le texte soit de façon libre avec copier-coller et le placer où vous voulez, soit en sélectionnant le texte tout en appuyant sur Alt et glisser le texte puis relâcher, cliquer sur Shift en même temps pour le diriger selon la grille.

Étape 3

Maintenant que vous avez placé votre texte, prenez l’outil « dégradé de forme ». Il suffit de cliquer sur le raccourci W ou sur le bouton , sinon dans le menu Objet > dégradé de formes > Créer (pour cette dernière, il faut que les formes soient sélectionnées avant, sinon le menu Créer sera grisé).

Étape 4

Une fois l’outil sélectionné, il faut cliquer sur chacune des formes pour déclencher le dégradé de forme. Par défaut, celui-ci sera sur « Étapes »

Étape 5

Modifier les paramètres :

Pour accéder aux paramètres, vous pouvez soit double-cliquer sur l’icône de l’outil , soit vous rendre dans le menu Objet > Dégradé de formes > Options de dégradé.

• Dans le petit menu déroulant « Pas », vous avez 3 choix :

« Couleur lissée » : dans le cas où nous aurions 2 couleurs différentes sur nos deux formes, cela permettra de faire une transition simple et lissée.

 « Étapes » : c’est le nombre d’étapes que l’on souhaite mettre entre nos deux formes.

« Distance » : c’est le nombre de pixels entre chaque copie des formes.

• Pour l’orientation, soit les formes sont alignées sur la page et donc resteront dans le sens où vous les avez créées, soit elles peuvent suivre la courbure du tracé.

N’oubliez pas de cocher « Aperçu » pour voir la modification en direct.

Pour l’exemple SHADOW, j’ai choisi « distance » à 0,1px car, dans ce type de forme, c’est-à-dire du texte non vectorisé à plusieurs lettres, le Pas « couleur lissée » ne fonctionnera pas.

Voilà donc le texte avec son dégradé créé, pour changer la couleur des textes, sélectionnez l’outil sélection directe en cliquant sur le raccourci A ou le bouton de la flèche blanche , vous pourrez ainsi sélectionner individuellement chaque texte pour en modifier la couleur.
Vous pouvez aussi changer le texte par la suite, le dégradé de forme ne bloque pas la modification.

ASTUCE BONUS

Pour pouvoir sélectionner les étapes intermédiaires créées, il faut décomposer la forme : donc aller dans objet > dégradé de formes > décomposer, elles seront donc chacune une forme indépendante.
Pensez à créer une copie de votre forme car cette action est irréversible.

Publié le par — Laisser un commentaire

WordPress: Modifier un menu dynamiquement

Dans cet article nous allons voir comment modifier un menu dynamiquement dans WordPress. 

Dans cet exemple, nous allons remplacer une partie du menu en nous servant du ‘filtre’ WordPress suivant:  ‘wp_nav_menu_items’.

 Il nous permettra d’injecter notre élément à la suite des autres éléments déjà configurés dans l’admin de WordPress.

Dans notre menu de navigation, nous allons afficher certains éléments suivant si l’utilisateur est connecté, ou pas.

Si l’utilisateur est connecté:

Il y aura son nom, un lien pour se déconnecter et un lien pour voir les détails de son compte.

Si l’utilisateur est déconnecté:

Il y aura un lien pour se connecté.

'wp_nav_menu_items' , Comment ça marche ?

Le Filtre ‘wp_nav_menu_items‘, prend deux arguments, $items et $args.

$items contient le menu chargé par WordPress ( Donc il pourrait contenir le menu du Footer, la barre de navigation etc… ). 

$args contient tout les paramètres du menu. Voici la liste de toutes les infos que vous pourriez en retirer.

‘menu’
‘menu_class’
‘menu_id’
‘container’
‘container_class’
‘container_id’
‘container_aria_label’
‘fallback_cb’
‘before’
‘after’
‘link_before’
‘link_after’
‘echo’
‘depth’
‘walker’
‘theme_location’
‘items_wrap’
‘item_spacing’
 
 
Copier coller ce snippet dans votre fichier functions.php.
Cette fonction retourne tout simplement le menu qui vient d’être chargé ‘Ligne 5: return $items‘ .
add_filter( 'wp_nav_menu_items', 'ajouter_au_menu_nav_eloou', 10, 2 );

function ajouter_au_menu_nav_eloou( $items, $args ) {

    return $items;
    
}

Les conditions, pourquoi et comment ?

Comme vu précédemment, nous avons besoin de différentes conditions pour être sûr qu’on modifie le bon menu, au bon moment. 

Nous allons nous servir de cette fonction WordPress, ‘ is_user_logged_in() ‘ , afin de regarder si l’utilisateur est connecté sur son compte en nous retournant un ‘ true ‘ ou ‘ false ‘.

Nous allons aussi nous servir de la variable ‘ $args ‘, dans la section précédente. Elle nous permet de vérifié que c’est le bon menu en regardant le ‘ theme_location ‘.

Le ‘theme_location’ sera le nom que vous avez déclaré lorsque vous avez initialisé le menu dans le fichier functions.php

Exemple:

register_nav_menu(‘ main-navigation ‘,__( ‘ Menu principal ‘ ));

 

Ci-dessous ma condition:

Ligne 1

Si l’utilisateur est connecté ET le menu qui est chargé par WordPress s’appel ‘ main-navigation ‘.

Ligne 4

Si l’utilisateur n’est pas connecté ET le menu qui est chargé par WordPress s’appel ‘ main-navigation ‘.

    if (is_user_logged_in() && $args->theme_location == 'main-navigation') {

    }
    elseif (!is_user_logged_in() && $args->theme_location == 'main-navigation') {
    }

Changer le menu si l'utilisateur est connecté

Pour faire cela, nous allons prendre la variable qui tiens le contenu du menu et ajouter nos éléments.

Ligne 3 et 4

Nous sommes dans la condition « Si l’utilisateur est connecté », donc nous pouvons prendre quelques informations sur cette personne en utilisant la fonction WordPress: wp_get_current_user();

Ensuite nous allons chercher le nom de cette personne en fouillant la variable $user.

Ligne 6

Maintenant à nous d’ajouter le nouveau contenu au menu existant.

J’ai rajouté:

  • Un ‘ dropdown ‘ avec le nom de l’utilisateur et une icône : ligne 8,9,10. 
  • Un élément avec une url vers les détails de son compte : ligne 14.
  • Un élément avec une possibilité de se déconnecter : ligne 19.
if (is_user_logged_in() && $args->theme_location == 'main-navigation') {

    $user = wp_get_current_user();
    $word = $user->data->display_name;
    
    $items .= '
        <li>
            <a href="">'.'
                <i class="fas fa-user"></i>'
                . $word .'
            </a>
            <ul>
                <li>
                    <a href="https://www.neuro-ophtalmologie-club.org/mon-compte/" >
                        Mon compte
                    </a>
                </li>
                <li>
                    <a href="'. wp_logout_url('/Votre-redirection-d-url'). '" >
                        Déconnexion
                    </a>
                </li>

            </ul>
        </li>
    ';
    
}

Changer le menu si l'utilisateur est déconnecté

Pour faire cela, nous allons prendre la variable qui tiens le contenu du menu et ajouter nos éléments. dans la condition si l’utilisateur n’est pas connecté.

Ligne 3 

Ajoutons le nouveau contenu au menu existant.

J’ai rajouté:

  • Un ‘ dropdown’ ‘ Se connecter ‘ : ligne 5. 

  • Un élément avec une url vers une formulaire de connexion : ligne 8.

elseif (!is_user_logged_in() && $args->theme_location == 'main-navigation') {
    
    $items .= '
            <li>
                <a href="">Se connecter</a>
                <ul>
                    <li>
                        <a href="https://www.neuro-ophtalmologie-club.org/connexion/">
                            Connexion
                        </a>
                    </li>
                </ul>
            </li>
        ';
        
}

Et maintenant on assemble tout

add_filter( 'wp_nav_menu_items', 'ajouter_au_menu_nav_eloou', 10, 2 );
function ajouter_au_menu_nav_eloou( $items, $args ) {
    $user = wp_get_current_user();
    $word = $user->data->display_name;
    if (is_user_logged_in() && $args->theme_location == 'main-navigation') {

        $items .= '
                    <li>
                        <a href="/Url-de-votre-page-details-de-compte">'.'
                            <i class="fas fa-user"></i>'
                            . $word .'
                        </a>
                        <ul>
                            <li><a href="'. wp_logout_url('/Votre-redirection-d-url'). '" >Déconnexion</a></li>
                            <li><a href="https://www.neuro-ophtalmologie-club.org/mon-compte/" >Mon compte</a></li>
                        </ul>
                    </li>
                ';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'main-navigation') {
        $items .= '
                    <li>
                        <a href="">Se connecter</a>
                        <ul>
                        <li><a href="https://www.neuro-ophtalmologie-club.org/connexion/">Connexion</a></li>
                        </ul>
                    </li>
                ';
    }
    return $items;
}