bannière de la page Créer une page d’option ACF pour son thème

Créer une page d’option ACF pour son thème

Créer une page d’option pour son site wordpress peut etre très interessant selon vos besoins. Chez A&F Développement, nous avons pour habitude d’utiliser les page d’option ACF pour tout ce qui va etre utilisé partout sur le site et à besoin d’etre administrable. Par exemple, nous plaçons le logo dans la page d’option. Ainsi, l’administrateur pourra changer son logo facilement. Vous pouvez aussi mettre en place un colorpicker afin de définir les couleurs principal de votre site et utiliser les variables en CSS pour pouvoir administrer les couleurs de votre site. Ou encore gérer le contenu d’un shortcode. Dans cet article nous allons voir comment administrer le logo de son site.

Créer une page d’option sur ACF

Pour créer une page d’option sur ACF, il vous suffit d’aller dans votre fichier functions.php à la racine de votre thème et d’ajouter ce code :

if( function_exists('acf_add_options_page') ) {	
	$parent = acf_add_options_page(array(
		'page_title' 	=> 'Options du site',
		'menu_title'	=> 'Option du site',
		'menu_slug' 	=> 'option-du-site',
		'capability'	=> 'edit_posts',
		'redirect'		=> false
	));
}

Après avoir ajouté ce code, vous devriez avoir un nouvel élément sur votre administrateur comme cela :

Nouvel onglet page d'option

Nouvel onglet page d’option

En cliquant dessus, vous remarquez que cette page est entièrement vide. Nous allons maintenant voir comment créer des champs ACF sur cette page.

 

Créer des champs pour sa page d’option ACF

Pour créer nos premiers champs, il faut se rendre sur les paramètres d’ACF et de créer un nouveau groupe de champ et d’y ajouter un champ image que l’on appellera « Logo ». Voici donc les paramètres à appliquer :

Page d'option ACF

Page d’option ACF

Pour assigner ce groupe de champs à votre page d’option, il faut Renseigner « Page d’options est égal à Option du site » dans le cadre « Assigner ce groupe de champs ».

Maintenant, que vous avez vos nouveaux champs dans votre page d’option, vous pouvez y ajouter votre logo. Je vous recommande d’ajouter un texte alternatif à votre image pour le SEO de votre site.

Récupérer le logo sur votre site

Pour récupère votre logo, il faut ajouter ce code dans votre fichier header.php pour qu’il soit sur tous les header de votre site :

<?php $logo = get_field("logo", "option"); ?>
<img src="<?= $logo["url"]; ?>" alt="<?= $logo["alt"]; ?>">

Explications :

  •  La fonction get_field permet de récupérer la valeur du champ logo. (Contrairement à la fonction the_field qui, elle, va afficher la valeur. Mais comme on retourn un array, on ne peut pas afficher la valeur)
  • Le second paramètre « option » permet de dire qu’on va chercher la valeur dans la page d’option. Sans ce paramètre, il ira chercher le champs dans les options de la page courante.
  • On ajoute l’url de l’image grâce à $logo[« url »] et le texte alternatif grave à la variable : $logo[« alt »].

Félicitation, nous avons vu comment administrer le logo de notre site grâce à la page d’option ACF. Vous savez maintenant comment ajouter et récuperer des champs et l’afficher où vous le souhaitez sur votre site.