Publié le 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');

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' );
Publié le 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");
    
});
Publié le 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 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.

 

Publié le 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 Filtrewp_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;
}
Publié le Laisser un commentaire

Woocommerce: Changer le texte du bouton ‘Ajouter au panier’ des produits apparentés.

Dans cet article nous allons voir comment changer le texte du bouton « ajouter au panier » des produits apparentés.

Pour commencer, il faut créer une fonction qui utilisera un hook, ce qui permettra d’injecter votre texte à la place de celui mis en place par Woocommerce.

Dans votre fichier functions.php, créez votre fonction puis grâce aux hooks, ajoutez la via la fonction add_filter.

Ce changement se fera sur tout les produits apparentés. Il suffira de remplacer ‘Votre nouveau texte’ pour faire la modification sur ce  bouton.

add_filter( 'woocommerce_product_add_to_cart_text', 'eloou_cart_button_text' );

function eloou_cart_button_text() {
    return 'Votre nouveau texte';
}

Changer le texte pour un produit spécifique

Il est aussi possible de changer le texte selon le produit, si l’utilisateur est en ligne ou si l’utilisateur a un certain rôle.

Tout est possible.

Je vais vous donner un exemple pour afficher un texte différent si mon produit, qui a pour id ‘2494’, est affiché dans les produits apparentés.

Ligne 5 et 6

Je vais chercher l’ID du produit

Ligne 7

Puis je déclare l’ID du produit qui m’intéresse.

Ligne 9

Je retourne le nouveau texte à condition que l’ID de mon produit soit égal à celui du produit qu’on observe, sinon il retournera un texte par défaut.

    add_filter( 'woocommerce_product_add_to_cart_text', 'eloou_cart_button_text' );
    
    function eloou_cart_button_text() {

        global $product;
        $product_id = $product->id;
        $productId = 2494;

        return ($product_id == $productId ? 'Votre nouveau texte' : 'Un texte par défaut.');
        
    }

Pour allez plus loin

Vous vous demandez peu être s’il est possible d’ajouter une interface dans l’admin pour modifier votre texte sans devoir s’aventurer dans le code?

Et bien oui!
Mais nous verrons ça dans un prochain article.

Maintenant c’est à vous de jouer!

Publié le Laisser un commentaire

Woocommerce: Changer le prix d’un produit en fonction d’un client

woocommerce-user-meta-date-price-change
woocommerce-user-meta-date-price-change

Dans cet article nous allons voir comment changer le prix d’un produit en fonction d’un champs personnalisé, aussi appelés user meta data.

Pour commencer, il faut créer une fonction impactant le prix de l’article

Dans votre fichier functions.php, créez votre fonction puis grâce aux hooks, ajoutez la via la fonction add_filter.

    // Un changement de prix gobal
    function eloou_price( $price, $product ) {
     return $price;
    }
    
    add_filter( 'woocommerce_product_get_price', 'eloou_price', 10, 2 );
    add_filter( 'woocommerce_product_get_regular_price', 'eloou_price', 10, 2 );
    add_filter( 'woocommerce_product_get_sale_price', 'eloou_price', 10, 2 );

Il faut d’abord vérifier que l’utilisateur soit connecté, puis récupérer le champs personnalisé à cibler

if ( is_user_logged_in() ) {
    $user = wp_get_current_user(); 
    $meta = get_the_author_meta( 'votre_custom_meta', $user->ID );
}

Changer le prix de tous les produits

On peut maintenant changer le prix grâce à une formule mathématique, en créant une nouvelle variable $newPrice.

Ligne 7
Le prix changera uniquement si le meta de l’utilisateur existent.

function eloou_price( $price, $product ) {
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        $meta = get_the_author_meta( 'votre_custom_meta', $user->ID );
        $newPrice = 0.50;
        // on vérifie que le meta existe
        if ( $meta ) {
            $price = $price * $newPrice;
        }
    }
    return $price;
}

Changer le prix d'un seul produit

Pour viser un produit en particulier, il n’ y a rien de plus simple!

Chaque produit possède un ID. qui se trouve dans l’url du produit de votre administration :
/wp-admin/post.php?post=2494&action=edit&classic-editor

Pour mon exemple, je choisis le produit ayant l’id = 2494.

Ligne 7
Je vais chercher l’ID du produit en me servant d’une fonction Woocommerce.
Ligne 6
Puis je déclare l’ID du produit qui m’intéresse.
Ligne 9

Je rajoute à ma condition: Si le méta existe, et si c’est le produit avec l’ID 2494, alors  on change le prix.

function eloou_price( $price, $product ) {
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        $meta = get_the_author_meta( 'votre_custom_meta', $user->ID ); 
        $newPrice = 0.50; // votre réduction
        $product_id = 2494; // l'ID de votre produit
        $productId = $product->get_id();

        if ( $meta && $product_id == $productId ) {
            $price = $price * $newPrice;
        }
    }
    return $price;
}

Pour allez plus loin

Vous vous demandez peu être s’il est possible d’ajouter une interface dans l’admin pour modifier les produits,  les calculs et peut être même les métas datas ? 
Et bien oui!
Mais nous verrons ça dans un prochain article.

Maintenant c’est à vous de jouer!