Ce tutoriel est consacré à la création de champs personnalisés pour WordPress avec le plugin Meta Box. En plus des champs par défaut Titre et Contenu rédactionnel de WordPress, Nous allons créer des champs de divers types (texte, date, boutons radio, cases à cocher, liste déroulante, image...) en mode code dans le fichier functions.php du thème actif. Puis dans le template voulu, nous allons afficher les données enregistrées dans les champs personnalisés.
Au programme de ce tuto WordPress - Meta Box
Dans le premier chapitre, après la présentation de ce tuto, nous allons installer le plugin Meta Box, ainsi que sa démonstration.
Dans le deuxième chapitre, nous commencerons par enregistrer Meta Box dans le thème actif. Puis nous allons créer la première metabox, avec un champ personnalisé de type texte. Nous étudierons ensuite le paramétrage de la metabox et les attributs communs aux champs personnalisés.
Le troisième chapitre est consacré aux champs de type texte : champ simple, dupliqué, multiligne, avec une barre d'outils de mise en forme... et le champ particulier clé-valeur pour toutes données libres.
Pour le quatrième chapitre, nous allons étudier les champs de sélection et de choix. Nous allons ajouter des champs de type : boutons radio, cases à cocher, listes déroulantes simple et avancée.
Dans le cinquième chapitre, nous étudierons les champs personnalisés HTML5 qui permettent une validation automatique : champs numérique, mail et adresse web.
Puis, dans les deux chapitres suivants nous aborderons les champs liés au temps : date et heure et des champs divers : sélection d'un utilisateur, d'une couleur, réglette et curseur pour choisir une valeur numérique et nous verrons comment mettre en relation des articles.
Dans le dernier chapitre, nous étudierons les champs personnalisés liés aux médias : insertion d'images, de fichiers à télécharger, insertion d'une vidéo partagée et d'une Google Map.
Au terme de cette formation, vous serez à même de créer vos champs personnalisés et à les afficher dans les bons templates. Vous pourrez ainsi proposer à vos clients des contenus qui soient personnalisés à leurs besoins. La version utilisée de WordPress pour ce tuto est la 4.4.2 et celle de Meta Box est la 4.8.2.
Table des matières de cette formation WordPress (durée : 1h50m)
-
Chapitre 1 : Présentation et installation
- Présentation gratuit 00:06:00
- Installer le plugin Meta Box gratuit 00:01:29
- Installer la démonstration 00:02:48
-
Chapitre 2 : Enregistrer et paramétrer Meta Box
- Enregistrer Meta Box et créer la première metabox 00:04:17
- Créer un simple champ de texte 00:01:59
- Les attributs facultatifs before, after, desc, std et size 00:02:06
- L’attribut facultatif clone gratuit 00:01:51
- Ajouter une en-tête de présentation et une ligne de séparation 00:02:29
- L’attribut supplémentaire required 00:02:20
- L’attribut supplémentaire disabled 00:00:53
- L’attribut supplémentaire readonly 00:00:37
- Les attributs supplémentaires minlength et maxlenght 00:01:35
-
Chapitre 3 : Les champs de type texte
- Le champ de texte simple 00:03:10
- L’affichage conditionnel 00:02:25
- Le champ de texte dupliqué 00:02:00
- Le champ de texte multilignes 00:02:11
- Le champ de texte avec mise en forme 00:02:29
- Le champ de texte avec autocomplétion 00:02:40
- La liste de champs de texte 00:02:15
- Le champ pour un mot de passe 00:01:15
- Le champ clé-valeur 00:02:53
-
Chapitre 4 : Les champs de type sélection et choix
- Créer une nouvelle metabox 00:02:05
- Les boutons radio gratuit 00:02:19
- Les boutons radio avec des images 00:02:11
- La case à cocher unique 00:02:08
- Les cases à cocher 00:01:42
- La liste déroulante simple 00:02:03
- La liste déroulante simple à sélection multiple 00:01:41
- La liste déroulante avancée 00:01:38
-
Chapitre 5 : Les champs HTML5
- Créer une nouvelle metabox 00:01:16
- Le champ numérique HTML5 00:02:29
- Le champ eMail HTML5 gratuit 00:01:28
- Le champ adresse web HTML5 00:01:54
-
Chapitre 6 : Les champs liés au temps
- Le champ de sélection de date 00:02:53
- Le champ de sélection d’heure 00:02:00
- Le champ de sélection de date et d’heure 00:01:42
-
Chapitre 7 : Des champs divers
- Sélectionner un utilisateur 00:02:25
- Sélectionner une couleur 00:01:43
- Une réglette et un curseur 00:01:54
- Sélectionner un article 00:02:41
-
Chapitre 8 : Les champs multimédia
- Créer une nouvelle metabox 00:01:15
- Insérer des images avec l’interface classique 00:04:21
- Gérer la taille des images pour l’affichage 00:03:04
- Insérer des images avec l’interface standard de WordPress 00:02:15
- Insérer des images avec l’interface plupload 00:01:52
- Télécharger des fichiers avec l’interface classique 00:03:14
- Télécharger des fichiers avec l’interface standard de WordPress 00:02:10
- Insérer une vidéo partagée 00:01:53
- Insérer une Google Map 00:02:15
- Fichiers sourcestélécharger
- Certificat
Formateur : Christophe Aubry
-
Avec quelle version de logiciel ce tuto est-il compatible ?WordPress 4
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
