Navigation WordPress avec menu déroulant

Si vous redimensionnez ce site en dessous de 1020px, vous verrez que la sidebar se retrouve en haut, tel une bannière. Pour avoir une navigation adaptative, je ne pouvais garder la sidebar à gauche, alors j’ai choisi de mettre un menu déroulant à la place d’une liste.

Peut-être l’avez-vous déjà remarqué, mais j’ai fait ce site pour qu’il soit utilisable sans avoir besoin de JavaScript. Sauf qu’au niveau codage, c’est beaucoup plus courant d’utiliser le JavaScript. Pas besoin d’input ou de form pour que ça marche. Ici, je vais vous montrer comment j’ai fait pour que la navigation marche seulement grâce à PHP dans WordPress.

Voici le code pour faire apparaître le menu déroulant.

PHP

<form id="nav-select">
    <label for="liens">Aller à :</label>
    <select name="liens" id="liens">
        <option value="accueil">Accueil / Blog</option>
        <option value="twitter"></option>
        <option value="github">Github</option>
        <option value="forrst">Forrst</option>
        <option value="cv">CV</option>
        <option value="contact">Contact</option>
        <option value="archives">Archives</option>
    </select>
    <input type="submit" value="Go !"/>
</form>

Si on clique sur Go !, cela va passer à l’URL actuelle un paramètre http://jeandaviddaviet.fr/?liens=''(liens est défini par l’attribut name='liens').

Sauf que cela n’effectue rien. Il va falloir intercepter les valeurs passées dans l’URL et rediriger en fonction de celles-ci. Dans functions.php, j’ai écrit ce code :

PHP

if(isset($_GET['liens'])){
    if($_GET['liens'] == 'cv' || $_GET['liens'] == 'contact' || $_GET['liens'] == 'archives'){
        wp_redirect(site_url().'/'.$_GET['liens']);exit;
    }
    elseif( $_GET['liens'] == 'twitter' || $_GET['liens'] == 'github' || $_GET['liens'] == 'forrst'){
        switch($_GET['liens']){
            case 'twitter':
                wp_redirect('http://twitter.com/JeanDavidDaviet');exit;
                break;
            case 'github':
                wp_redirect('http://github.com/jeandaviddaviet');exit;
                break;
            case 'forrst':
                wp_redirect('http://forrst.com/people/jeandaviddaviet');exit;
                break;
        }
    }
    else{
        wp_redirect(site_url());exit;
    }
}

Comme on peut le voir ici, je récupère la valeur du menu déroulant et en fonction de ce que je veux, je redirige. Si je reçois en $_GET la valeur 'twitter', ou 'github', ou 'forrst', je redirige vers les sites respectifs, pareil pour les pages cv, contact et archives, sinon si la valeur ne correspond à rien de spécifique, je redirige tout vers la page d’accueil.

Ne pas oublier de bien écrire exit() après wp_redirect(), sinon, la redirection ne marche pas.

Vous aussi testez la navigation en redimensionnant le navigateur et n’hésitez pas à commenter !