The Power Users Guide to WordPress Navigation Menus The humble navigation menu. It’s an important part of your WordPress site that lets your visitors find their way around and helps to structure your content. Every theme will have a slot for it somewhere at the top of each page. But are navigation menus just for your site header? In this post, I’m going to show you some of the options you have at your disposal for using navigation menus in a more powerful way. I’ll also show you two ways to add those extra menus to your site’s front end – one using a widget and the other using code. So let’s start by creating some menus. Creating Multiple Navigation Menus My site has a main navigation menu which I’ve already created. For this menu I’ve checked the Primary Menu option which means my theme (Twenty Sixteen) will display the menu in the primary slot: But I’m not limited to this menu. This is where you add your new menu. Once your menu is ready with the pages you need, click Save Menu to save it. Adding Menus Using a Widget Save the stylesheet.
Charger proprement Javascript dans Wordpress | Thibaut Soufflet - webdesigner [Total : 10 Moyenne : 3/5] Cet article vous sera d’une grande aide pour comprendre comment WordPress interprète les scripts JavaScript et enfin les faire fonctionner correctement. Dans quel cas êtes vous ? Cas n°1 : Vous souhaitez ajouter des scripts JavaScript à votre site WordPress. Cas n°2 : Après intégration de votre site sous WordPress, JavaScript ne semble plus se charger. Vous avez créé votre site en HTML/CSS et vous avez lié tout les scripts JavaScript dans votre page et tout fonctionnait bien avant l’intégration dans WordpPess. WordPress intègre déjà une bibliothèque jQuery Sachez d’abord que WordPress intègre d’origine une version de jQuery. L’erreur à éviter : charger la librairie jQuery et les scripts JavaScript dans le template de page Exemple (à ne pas suivre) : ….le contenu de votre page…. Dans cet exemple on demande le chargement de la bibliothèque jQuery en ligne version 1.8.2, puis l’exécution de nos 2 scripts « bootstrap.js » et « jquery.mobile.customized.min.js ».
Ajouter un carrousel d'articles pour WordPress avec Twitter Bootstrap Oui je sais, les carrousels c’est le mal. Mais je sais aussi que vous savez ce que vous faites, et que si vous êtes arrivés ici, c’est que vous voulez en ajouter un sur votre site WordPress. Alors c’est parti. Le principe Le carrousel (aussi appelé slider) que je vous propose ici n’est pas un carrousel d’images, mais un carrousel d’articles, c’est-à-dire qu’il fait défiler les articles de votre site WordPress (ou les pages, ou tout autre type de post selon les paramètres fournis) en affichant leur image à la une. Comme d’habitude, vous n’aurez pas besoin d’extension supplémentaire. Préparatifs Les modifications peuvent être faites dans un thème enfant ou une extension. Nous utilisons la fonctionnalité carrousel de Twitter Bootstrap dont les fichiers CSS et JavaScript doivent être inclus, comme d’habitude maintenant. function enqueueStyles() {wp_enqueue_style("bootstrap", get_stylesheet_directory_uri() . La fonction pour ajouter un carrousel Elle peut être décomposée en deux parties. Le code
Thème enfant WordPress, le créer simplement ! Les thèmes WordPress sont par nature déjà “customisables”, leur installation simple, les possibilités offertes sont nombreuses mais il y a toujours de petites choses que nous voulons changer. Une couleur ici, une taille de police là-bas, peut-être utiliser un autre appel à l’action, bref nous voulons modifier le CSS de notre thème WordPress et bien plus encore… Le seul hic, c’est que la modification, même infime, d’un thème vous empêche de faire sa mise à jour vers une nouvelle version à l’avenir, parce que si vous mettez à jour, alors vous perdez toutes vos modifications :/ Un thème enfant pour quoi faire ? Les thèmes enfants résolvent ce problème en vous permettant d’utiliser toutes les fonctionnalités de votre thème tout en vous laissant mettre à jour ce dernier, sans peur de perdre vos modifications. Un thème enfant, c’est quoi ? Un thème enfant est un thème basé sur votre thème parent. Comment mettre en place un thème enfant ? un fichier functions.phpun fichier style.css <?
Trier ET filtrer par champs personnalisés - WPFR Bonjour, Ma configuration WP actuelle – Version de WordPress : 3.2.1 – Version de PHP/MySQL : 5 – Thème utilisé : TwentyTen – Extensions en place : Plein… – Nom de l’hebergeur : OVH – Adresse du site : Problème(s) rencontré(s) : Nous souhaitons sur une page déterminée afficher les articles ayant une valeur précise d’un champ personnalisé, et les trier en fonction d’un deuxième champ personnalisé. Nous avons trouvé comment faire les deux indépendamment l’un de l’autre, mais impossible de fusionner les deux solutions. Filtrer les articles par Custom Field (le custom field ‘Auteur’) query_posts(‘post_status=publish&meta_key=Auteur&orderby=meta_value&order=ASC’); -> OK ça marche Trier les articles par Custom Field (le custom field ‘Langue’) query_posts(‘post_status=publish&meta_key=Langue&meta_value=Breton’); -> OK ça marche Quelqu’un sait t’il comment remédier à ce problème sans coder ma propre fonction ? Merci d’avance, +
Créer un formulaire en front end avec ACF - Copier coller Advanced Custom Field est un plugin vraiment utile pour batir des sites complexes: on peut rajouter autant de nouveaux champs que souhaité dans un article, une page, un custom post type: dans la page d’édition d’un article ou d’une page, au traditionnel champs de texte qui represente “the_content()” dans le code, on peut rajouter d’autres champs texte, des uploader de média, qui se retrouveront dans le front end et donneront à vos pages un aperçu bien plus “professionnel”. Aujourd’hui on va se servir de ACF pour créer et afficher un formulaire de soumission d’article en front end.Un peu comme le fait l’excellent plugin User Submitted post. Pourquoi utiliser ACF? Prenons un exemple concret.Par exemple, On souhaite réaliser un site de recettes de cuisine.Dans la page d’édition d’un article on retrouve donc logiquement l’éditeur par défaut de wordpress, à l’intérieur duquel on va organiser notre texte de la manière suivante: “Ingrédients:….” “Préparation:….” “Temps de cuisson :…” etc etc.. <?
WP Query : créez des requêtes personnalisées dans vos thèmes WordPress - GeekPress WordPress vous permet de créer vos propres requêtes et de récupérer toutes les données que vous souhaitez. Découvrez comment modifier la requête principale ou comment créer une toute nouvelle requête de données J’aimerais pouvoir récupérer les données WordPress de mon choix, c’est possible ? Cet article est une mise à jour de mon article sur les boucles WP, avec les bonnes pratiques les plus récentes. Fonctionnement des boucles WordPress (The Loop) A chaque page que vous affichez, WordPress exécute automatiquement une requête en fonction de la page à afficher, conformément au schéma de hierarchie de template : template hierarchy WP. Par exemple, si vous cliquez sur une catégorie, WordPress sait qu’il doit : afficher la liste des articles de cette catégorie, dans l’ordre chronologique, au nombre de 10. chacun de ces éléments est un paramètre de la requête. Voici la hiérarchie de base. Les paramètres de WP Query WordPress sait donc quoi aller chercher en fonction de l’URL jointe. Compris ?
Ajouter des Fonctions à votre Child Theme WordPress Nous avons appris comment créer un thème enfant (ou child theme) WordPress afin de personnaliser notre thème WordPress parent et y apporter des modifications visuelles via le fichier style.css. Nous allons voir maintenant comment prendre plus de contrôle de ce qui est généralement accordé par le CSS, en créant un nouveau fichier functions.php dans notre child theme. Ce fichier, contrairement au fichier CSS, n’écrase pas celui du thème parent. Il est juste chargé en plus du fichier functions.php du thème parent, sachant que celui du thème enfant se charge avant. Pour illustrer cela, nous allons faire en sorte que notre barre du menu de navigation puisse se fixer en haut de la page lorsqu’on scrolle vers le bas. Créer un fichier Javascript pour fixer le menu de navigation en haut de la page Comme dans tout thème propre, créez un sous-dossier /js dans le répertoire du thème enfant. Le menu de navigation devient fixe lorsqu’on descend à 90px à partir du haut. C’est tout..
Comment modifier sa "font" ou police d'écriture dans WordPress La plupart des thèmes WordPress commercialisés sur le marché vous propose tout un tas d’options de personnalisations dont, la plupart du temps, le choix de la police d’écriture ou “font” en anglais… Cependant, ces thèmes vous permettront généralement de choisir votre police dans la bibliothèque Google Font. Mais qu’en est-il de votre propre police que vous avez acheté sur un site dédié ? Vous savez, LA font sur laquelle vous avez craqué et qui ne ressemble à aucune autre ? Nous allons voir ensemble comment modifier la police d’écriture de votre site WordPress selon plusieurs méthodes… Où trouver une police/font originale ? Il est vrai qu’avant de commencer à parler de la méthode pour ajouter une police, il serait bien de commencer par en trouver une… Si vous ne savez pas trop où chercher, je vous propose de fureter du côté des sites où les designers tiennent une boutique. Comment intégrer une police dans WordPress ? Option 1 : la méthode @font-face ÉTAPE 4 : appeler la police Notez : [!
How to use Fancybox in WordPress, more flexible than jQuery lightbox. How to use Fancybox in WordPress, a more flexible alternative to jQuery lightbox. Fancybox is a tool built on the jQuery library. Fancybox is a more flexible alternative to lightbox since it can show any content you want, for example Youtube and Vimeo videos, buttons, text, images, maps, HTML elements, SWF movies, Iframes, Ajax content and so on. The easiest way to enable Fancybox to your wordpress site is to use a plugin. Fancybox functionality demo: Fancybox for WordPress plugin is a good alternative, but we found some problems if you have custom jQuery in your theme. Exclude links from opening with FancyBox Just add the class=”nofancybox” to the element and Fancybox will not be used. Open external page in an Iframe using fancybox<a class="fancybox-iframe" href=" link opens an external page in an Iframe</a> Open a pdf using fancybox<a class="fancybox-pdf" href="your.pdf">This link opens a pdf in the fancybox</a> Fancybox functionality demo: <? get_header(); ?
Comment utiliser et customiser la page de connexion WordPress ? La page de connexion WordPress est une page par laquelle il vous est possible de vous connecter au back-office de votre site web, c’est à dire à la partie administration. Une fois connecté, vous pouvez accéder votre tableau de bord, créer de nouveaux articles, de nouvelles pages, mettre à jour vos thèmes, ajouter de nouveaux plugins et bien plus encore ! Dans cet article, nous allons voir en détail ce qu’il est possible de faire… Au programme de ce tuto : 1/ Comment trouver votre URL de connexion WordPress Si vous êtes nouveau sur WordPress et que vous ne savez pas du tout comment accéder à la partie administrateur de votre site ou si vos clients oublient toujours leur URL de connexion, voici une petite explication… Cas n°1 => connexion à un site WordPress classique : Sur un site WordPress typique, tout ce que vous avez à faire est d’ajouter /login/ ou /admin/ à la fin de l’URL de votre site dans la barre de recherche de votre navigateur préféré. 2/ Page de connexion WordPress & Sécurité
10 petites astuces pour améliorer votre admin WordPress Un lot de quelques astuces pour nettoyer et parfaire votre interface d’admin WordPress avant de la livrer à un client, afin qu’elle corresponde entièrement à son besoin, sans éléments superflus. Voici quelques bouts de code que j’ai utilisés récemment dans mes projets. J’en ajouterais d’autres au fur et à mesure. Tous ces codes sont à mettre dans functions.php, ou pour les fans de bonnes pratiques, dans un plugin personnalisé. (Benjamin Denis a donné une conférence à WP Tech Nantes à ce sujet, promis je n’ai pas copié, l’article était en préparation avant) 1. Il peut être utile de simplifier le menu WordPress pour vos clients et n’afficher que ceux nécessaires. function remove_menu_pages() { remove_menu_page('tools.php'); remove_menu_page('edit-comments.php'); remove_menu_page('edit.php? Pour supprimer un élément de l’admin bar (la barre qui squatte en haut !) 2. Si vous ajoutez Yoast, votre table des articles peut devenir vite chargée. Ajoutez ce code à functions.php 3. 4. 6. 7. 9. 10.
Code Examples Display a field Retrieving a field as a variable Using conditional statements get_field returns false if (value == “” || value == null || value == false) <? Working with Array values checkbox, select, relationship, repeater <? Working with Images – URL <img src="<? Working with Images – ID By using the ID, you can retrieve any crop size of the image and even get the name of the file! <? Working with the Repeater Field repeater can be accessed by get_field or the_repeater_field / the_sub_field <? Randomly select a repeater field row Getting values from another page <? Query posts with ACF values Example of finding Events (post type) where location (custom field – select) equals Melbourne (value). <?