Vous avez un restaurant et vous rêvez d’un site Internet à l’image de votre établissement, mais vous ne savez pas par où commencer ? Ne vous inquiétez pas, je suis là pour vous guider dans ce joyeux périple qu’est la création de votre menu de restaurant avec WordPress et ACF (Advanced Custom Fields).
Sommaire
Pourquoi WordPress et ACF ?
Avant de plonger tête baissée dans le grand bain du web, il est bon de savoir pourquoi WordPress et ACF sont vos alliés dans cette aventure culinaire. Certes, il existe de nombreuses plateformes pour créer un site, mais WordPress reste le roi incontesté de la jungle du web. Pourquoi ? Parce qu’il est facile à utiliser, extrêmement personnalisable et surtout, il offre une panoplie de plugins pour répondre à tous vos besoins.
Et là, entre en scène ACF. En effet, ce plugin magique vous permet de créer des champs personnalisés pour votre site WordPress. Vous pouvez ainsi façonner votre site comme un maître sushi sculpte son poisson. Imaginez, vous avez un champ pour le nom du plat, un autre pour la description, un pour le prix, et ainsi de suite. Bref, ACF vous donne le pouvoir de créer le site dont vous rêvez, sans avoir besoin de toucher à une seule ligne de code (ou presque).
Étape 1 : Installation de WordPress et ACF
Avant de plonger dans la marmite, il vous faut les bons outils. Alors, rendez-vous sur votre hébergeur préféré (personnellement, je suis fan de Hostinger, mais chacun ses goûts) et installez WordPress. C’est simple comme bonjour, surtout si vous avez suivi mes conseils sur l’article Hostinger en 2024 : tout ce que vous devez savoir.
Une fois WordPress en place, il est temps d’ajouter ACF à votre arsenal. Rendez-vous dans l’onglet « Extensions », cliquez sur « Ajouter », recherchez « Advanced Custom Fields » et installez-le. Facile, non ?
Étape 2 : Création du type de publication
Maintenant que WordPress et ACF sont en place, passons aux choses sérieuses : la création de votre menu. Enfin, presque. Avant de pouvoir afficher vos plats sur votre site, vous devez définir les champs personnalisés qui les composeront. Commençons par le commencement, c’est-à-dire les entrées.
Rendez-vous dans ACF (vous trouverez une nouvelle section dans votre tableau de bord) et cliquez dans l’onglet « Type de publication ». Vous pouvez par exemple le nommer « La carte ». Voici en image la configuration de base à avoir :
Puis sur les paramètres avancés, voici la configuration à avoir :
Onglet Général
Prend en charge : cocher « Titre » uniquement et décochez le reste.
Onglet Url
Réécriture du permalien : Aucun permalien (empêcher la réécriture d’URL)
Archive : Désactiver
Publiquement interrogeable : Désactiver
Onglet Rest API : Désactiver « Afficher dans l’API Rest »
Ensuite, vous pouvez sauvegarder les modifications et passer à la suite.
Étape 3 : Création des champs personnalisés
Maintenant, nous allons créer les groupes de champs. Pour avoir une belle carte de restaurant nous allons créer un groupe de champs appelé « Plats ». Celui-ci va contenir 2 champs :
- Description du plat
Type de champ : Editeur WYSIWYG - Prix du plat
Type de champ : Nombre
Ensuite plus bas, sur « Règles de localisation », Afficher ce groupe de champs si Type de publication est égal à La carte.
Et voilà ! Les paramètres de bases sont faits. Vous devez avoir un nouveau menu dans votre interface d’administration nommé « La carte ». Vous pouvez vous rendre dessus et sous catégories, vous pouvez ajouter les catégories de la carte. Par exemple, Entrées, Plats principal, desserts, etc.
À ce stade, vous pouvez laisser libre cours à votre imagination gastronomique et créer l’intégralité de votre menu.
Voici à quoi devrait ressembler votre carte après l’intégration de vos différents plats :
Étape 4 : Intégration dans votre thème WordPress
Maintenant que vos champs sont prêts et que vous avez ajouté le contenu de votre carte, il est temps de les intégrer à votre thème WordPress. Certes, cela peut sembler un peu technique, mais ne paniquez pas, je suis là pour vous guider.
Pour afficher votre menu sur votre site, vous allez devoir éditer vos fichiers de thème. Alors, rendez-vous dans votre éditeur de thème et ouvrez le fichier où vous souhaitez afficher votre menu (généralement single.php ou archive.php).
À l’endroit où vous voulez afficher votre menu, insérez le code suivant :
<?php
// Récupérer toutes les catégories
$categories = get_categories();
// Parcourir chaque catégorie
foreach ($categories as $category) :
// Requête pour récupérer les plats de la catégorie actuelle
$carte = new WP_Query(array(
'post_type' => 'la-carte',
'posts_per_page' => -1, // Afficher tous les plats
'category_name' => $category->slug // Utiliser le slug de la catégorie actuelle
));
if ($carte->have_posts()) :
?>
<div class="col-12 col-md-6">
<h3><?= $category->name; ?></h3>
<?php
while ($carte->have_posts()) : $carte->the_post();
?>
<div class="menu-itm">
<div class="menu-itm-title">
<h4><?= get_the_title(); ?></h4>
<div class="price"><?= number_format(esc_html(get_field('prix_du_plat')), 2, '.', ''); ?></div>
</div>
<div class="menu-itm-c">
<p><?= get_field('description_du_plat'); ?></p>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
<?php
endforeach;
?>
Voilà, votre menu est prêt à être dégusté !
Si vous le souhaitez vous pouvez voir le menu en action ici.
Conclusion
Créer un menu de restaurant avec WordPress et ACF, c’est comme composer une symphonie culinaire : cela demande de la créativité, un soupçon de technique, et surtout, beaucoup de passion. Alors, n’hésitez pas à vous lancer dans cette aventure numérique, votre site sera à la hauteur de vos talents de chef !
Si vous souhaitez approfondir vos connaissances sur WordPress, je vous recommande vivement de consulter l’article Les 5 plugins indispensables pour votre site WordPress. En effet, ces plugins vous permettront d’ajouter des fonctionnalités supplémentaires à votre site, pour le rendre encore plus appétissant aux yeux de vos clients.
N’oubliez pas que la clé d’un bon site, c’est de le maintenir à jour et de l’optimiser régulièrement. Ainsi, je vous conseille également de jeter un œil à l’article Comment avoir un site WordPress optimisé PageSpeed, pour que votre site soit aussi rapide que le service dans votre restaurant.
Sur ce, je vous laisse savourer cette nouvelle compétence acquise. N’hésitez pas à me contacter si vous avez des questions ou si vous souhaitez partager vos créations culinaires numériques. Je suis là pour ça !
