Comment concevoir un site web WordPress avec l’ACF et le module ACF Extended (Prositeweb)

Extended ACF de Prositeweb Site web WordPress

Dans cet article, nous allons voir comment créer un site web WordPress avec l’ACF et le module ACF Extended.

Vous vous êtes certainement déjà demandé comment concevoir un site web? Dans cet article, nous regardons toutes les étapes nécessaires à la conception d’un site internet. Nous allons supposer que vous avez quelques notions en informatique et ne savez pas comment procéder pour avoir votre site web en ligne. Pour mieux nous focaliser sur l’essentiel, nous allons définir quelques critères sans entrer dans trop de détails sur les choix. Il est important de rappeler que le choix d’un outil ou l’autre peut purement être lié à notre expérience. Ceci, vous pouvez à l’aide de vos recherches opter pour des solutions qui sont favorables à votre budget ou affinité.

De quoi avons-nous besoin pour concevoir un site web

Pour concevoir un site web, hors mis toute l’enquête documentaire ou les analyses que nous recommandons généralement, vous aurez besoin :

  1. D’un nom de domaine
  2. Un espace pour stocker vos données
  3. Une technologie de conception web (Ou d’un langage de programmation)
  4. Un design pour votre site web
  5. Des fonctionnalités que vous souhaiterez ajouter
  6. Le contenu pour votre site web
  7. Les photos et vidéos

1 – Nom de domaine

Un nom de domaine, c’est un nom en caractère alphabétique( généralement facile à retenir) qui caractérise votre activité. Vous choisissez habituellement un nom de domaine en fonction de ce que vous proposez comme concept. En plus, avant de faire un choix, il est important de vous poser la question concernant la compétition.

Pour choisir un nom de domaine, voici quelques recommandations:

  • Choisissez un nom facile à retenir. Lorsque vous donnez votre nom de domaine, les personnes doivent être en mesure de la retrouver sans trop de problèmes.
  • Regarder ce que les compétiteurs ont comme nom de domaine. En plus, vous devez avoir en tête le message que vous souhaitez véhiculer.
  • Pensez à Choisir Domaine de premier niveau (TLD) qui se réfère à votre industrie

Où rechercher un nom de domaine?

Il existe des milliers de fournisseurs de nom de domaine à travers le monde. Chaque fournisseur à ses avantages et inconvénients. Nous n’allons cependant pas entrer dans la comparaison. Ci-dessous quelques fournisseurs très populaire au Canada.

Vous pouvez lire notre article qui explique comment mieux choisir un nom de domaine et un hébergeur web.

2 – Espace pour stocker vos données

Afin de stocker vos données, vous requérez à un emplacement physique ou virtuel . Les fournisseurs de nom de domaine proposé également l’hébergement des sites web (Dans la majeure partie de temps). Vous pouvez donc pour vous faciliter la tâche opter pour une telle option. Si néanmoins, vous préférez avoir un fournisseur de nom de domaine différent de celui qui fournie l’hébergement web, vous devez établir la connexion entre le nom de domaine et le serveur. Nous allons brièvement vous expliquer comment y arriver.

Avant de choisir un hébergeur pour votre site internet, ayez en tête les fonctionnalités des applications que vous souhaitez utiliser. Un serveur pour un site web sous HTML pourrait ne pas avoir les mêmes caractéristiques qu’un site web avec Magento ou WordPress. Vous pouvez demander des conseils avant de prendre une décision définitive.

Pour rechercher un hébergeur web, les exemples ci-dessus peuvent vous aider. Vous pouvez pareillement faire une recherche sur Google afin de mieux comparer.

Comment connecter un nom de domaine avec un serveur web ?

Pour connecter votre nom de domaine avec votre hébergeur web, vous devez utiliser ce que l’on appelle couramment les DNS (Domain Name Server). Ce sont les paramètres du nom de domaine qui permettent de décider vers où, pointez votre site web.  Vous pouvez l’utiliser pour ajouter l’adresse IP de votre serveur web, ajouter les paramètre des courriels ou même pour renforcer la sécurité.

3 – Une technologie de conception web (Ou d’un langage de programmation)

Il existe plusieurs outils de conception de site web, nous avons brièvement décrit quelques outils qui peuvent vous aider via ce lien.

Dans cet article, nous parlons de la conception de site web avec WordPress et l’ACF.

Qu’est-ce que l’ACF (Advanced Custom Field) ?

C’est une extension WordPress qui permet de concevoir les blocs afin d’aisément concevoir un site web ou une boutique en ligne. L’ACF est disponible en Deux versions, la version gratuite que vous trouverez via l’onglet extension de la banque des extensions. Il y a également une version payante. Vous pouvez faire l’achat de la version payante sur le site web officiel de l’ACF.  Bien évidemment, la version gratuite a moins de fonctionnalités que la version payante. Nous n’allons pas nous attarder sur les différences entre les deux versions. Vous pouvez cependant lire le site web de l’ACF pour comprendre comment les deux versions diffère.

Combinez avec notre outil de conception web (ACF Extended)

Le Module Extended ACF de Prositeweb est une extension WordPress utilise l’ACF pour aider les développeurs à créer des thèmes sur mesure. Pendant les cinq derniers mois, nous avons expérimenté et testé diverses approches d’utiliser l’ACF (Advanced Custom Field) pour concevoir un site web ou une boutique en ligne. C’est un plaisir de vous présenter quelques résultats de nos expériences. L’équipe de Prositeweb à développer une extension pour soutenir le processus de développement personnalisé. En effet, l’extension ACF donne la possibilité de concevoir facilement un thème WordPress. Toutefois, vous devez avoir des compétences en programmation PHP.  Nous avons, à travers notre projet, souhaitez simplifier le processus pour permettre aux développeurs junior de simplement utiliser l’ACF. Dans cet article, nous allons brièvement parler de l’extension Advanced Custom Field. Ensuite, nous vous expliquerons comment cela fonctionne. Pour finir, nous allons vous présenter les fonctionnalités supplémentaires que vous obtiendrez avec notre module. Si vous désirez avoir une copie du module, vous pouvez nous contacter via ce lien.

Comment fonctionne l’ACF?

L’idée générale derrière l’ACF est de créer les champs personnalisés pour les pages d’un site web. En effet, par défaut WordPress offre un formulaire que vous pouvez utiliser pour écrire votre contenu. Ce qui n’est pas toujours facile à utiliser si vous souhaitez personnaliser ou rendre dynamique votre site web. Avec l’ACF, vous pouvez, par exemple, créer des champs pour rendre proactif les sections de votre site web. Ou ajouter un onglet témoignage sur votre site web. Vous pouvez également créer des options pour des blocs et les utiliser à partir de l’éditeur moderne de WordPress.

Quelques fonctionnalités de l’ACF Pro

L’équipe de Prositeweb a grandement exploré l’ACF Pro pour la conception des thèmes sur mesure.  Ci-dessous quelques fonctionnalités de l’ACF Pro.

  • Créez facilement les fonctionnalités qui se répètent. Grâce à la version PRO, vous pouvez aisément créer les éléments qui se répètent. Cela peut particulièrement être utile si vous voulez ajouter les témoignages ou les carrousels sur votre site web.
  • Concevez aisément les blocs. Le nouvel éditeur de contenu de WordPress (Gutenberg) requiert de vastes connaissances en JavaScript pour être en mesure de créer les blocs. Grâce à l’ACF Pro et un peu de connaissance en PHP, vous pouvez créer vos blocs très aisément.
  • Créez amplement les options pour vos thèmes ou extensions. Si vous développez les thèmes ou les extensions, vous devez convenir avec moi que cela demande beaucoup d’efforts pour créer les options pour vos pages. Grâce à l’ACF, vous pouvez le faire avec quelques lignes de codes.

Vous trouvez la liste des fonctionnalités sur ce site web.

Ce que nous apportons de plus pour rendre facile le processus de développement.

Notre module permet entre autres de simplifier les étapes de conception d’un site web avec l’ACF. En effet, pour configurer et faire un thème avec l’ACF, vous devez faire une configuration première, créer les blocs ou les parties de votre site web. Ensuite, transmettre les variables dans les parties que vous souhaitez rendre dynamique. Toutes ces étapes semblent complexes si vous manquez de compétence en développement PHP. Dans notre module, nous avons fait toutes les configurations dont vous aurez besoin pour utiliser l’ACF. À savoir:

  • Créer les fonctions importantes à la configuration initiales
  • Rendre facile le processus de conception des blocs
  • Permettre aux développeurs de créer les pages sans avoir à se soucier de la complexité de PHP.

Après plusieurs essais et validation, convertir un thème HTML en thème WordPress devient un jeu d’enfant.

Comment Notre module Extended ACF de Prositeweb fonctionne?

Le mode de fonctionnement de l’extension «Extended ACF de Prositeweb» est très simple. Après téléchargement et installation, vous aurez accès à un onglet de configuration. Via cet onglet, vous allez être en mesure d’entrer le nom du dossier où vous souhaitez mettre vos blocs. Le dossier devrait se trouver dans le dossier de votre thème actif. Vous aurez également accès à des onglets pour voir les blocs PHP que vous créez pour ensuite assigner vos variables.

Avec notre module. créer un thème WordPress se réduit à tout simplement sectionner son design et l’ajouter dans un dossier de bloc. L’extension se chargera de localiser les blocs et ajouter les variables nécessaires. Vous pouvez par la suite rendre dynamique le design en modifiant dans l’éditeur de WordPress.

Quelques étapes pratiques.

ACF (Advanced Custom Fields) est une extension WordPress qui aide de nombreux développeurs de WordPress / sites Web à créer des sites Web personnalisés.

Le plugin est facile à comprendre pour les développeurs ayant des connaissances de base en PHP.

Cependant, Toute chose extraordinaire peut aussi avoir certains inconvénients. Avec ACF, c’est le temps que les développeurs passent à affecter manuellement les variables ACF dans les champs personnalisés qui fonctionnent.

Ce problème a donc été résolu par une version étendue d’ACF créée par Prositeweb Inc.

Dans cette version d’ACF, les développeurs doivent affecter des variables dans le code et le reste se fait automatiquement.

Voici un guide complet sur la façon d’utiliser ce fantastique plugin qui permet de gagner du temps : –

Configuration du plugin étendu ACF.

Une fois le plugin installé, nous devons créer un dossier dans lequel il récupérera tous les blocs.

(par exemple, « template-block » est le dossier créé pour stocker tous les blocs) à partir du nom du dossier.

Ensuite, spécifiez le dossier sous l’onglet Prositeweb étendu d’ACF que vous pouvez trouver sous l’onglet « Apparence » (voir l’image ci-dessous).

nom du dossier acf extended pro

Ensuite, que le dossier est spécifié, un autre dossier nommé ‘part’ doit être créé où les blocs contenant le code HTML doivent être placés.

Alors pourquoi avons-nous besoin de deux dossiers pour que le plugin fonctionne ? Cela sera expliqué à l’étape suivante.

Dossier de configuration du plugin ACF

Une fois les dossiers créés, le dossier ‘part’ doit contenir les blocs avec le code HTML codé en dur.

Exemple – ‘index_hero_1.php’ est le nom du bloc présent dans le dossier part ; ajoutez ces lignes de code –

<?php
$blockid = $args['blockid'];
?>

La variable $blockid récupérera tout le code ACF personnalisé du plugin, qui pourra être utilisé ultérieurement. (expliqué dans les étapes suivantes).

Le fichier PHP du même nom doit être créé dans le dossier ‘template-block’.

Dans ce fichier, vous devez ajouter ces lignes de code en haut du fichier –

<?php
$filename = basename(__FILE__, ".php");
prosite_display_block($filename);
?>

Maintenant, le code ci-dessus recherchera le fichier du même nom dans le dossier ‘part’.

La variable $filename stockera le nom du fichier, et le bloc prosite_display_block appellera toutes les variables spécifiées sur le fichier.

Même si aucune variable n’est ajoutée dans le fichier de code HTML, vous constaterez que le bloc apparaît sur le tableau de bord de WordPress sous l’onglet Bloc Prositeweb.

Bloc ACF

Si toutes les étapes ci-dessus sont suivies correctement, vous devriez voir le bloc comme dans l’image ci-dessus.

Ajout et affectation de variables ACF

À présent que les blocs sont créés et visibles sur le tableau de bord de WordPress, il est temps d’attribuer des variables.

Les fichiers de bloc PHP dans le dossier « part » sont l’endroit où tout le codage doit être effectué.

Après des années de développement de sites Web et l’expérience acquise par les développeurs de Prositeweb Inc. Nous avons construit ce plugin pour qu’il soit aussi efficace que possible en ajoutant des champs préconstruits aux variables ACF qui sont utilisées de manière répétée.

Variables ACF

Toutes les variables essentielles sont présentées pour que les développeurs puissent immédiatement les utiliser.

Les cases à cocher vides peuvent être utilisées pour attribuer les variables au bloc, mais la beauté de ce plugin est qu’elles sont attribuées automatiquement lorsque le développeur les donne dans les fichiers PHP.

Les valeurs clés de ces variables se trouvent sous l’onglet Bloc Prositeweb.

Si vous devez ajouter de nouvelles variables, vous pouvez le faire grâce à le bouton « Ajouter une nouvelle variable », comme le montre l’image ci-dessous.

Ajout de nouvelles variables ACF

L’option « Ajouter une nouvelle variable » vous fournira les champs pour avoir une valeur de clé personnalisée à la variable créée, la clé du champ est attribuée automatiquement.

Tous les types de champ sont disponibles sous l’option de sélection nommée type de champ, et maintenant la variable peut être ajoutée en cliquant sur le bouton Ajouter une valeur, puis elle apparaîtra sous les variables disponibles à affecter aux blocs.

Dans l’étape suivante, vous apprendrez à utiliser le plugin.

Comment utiliser le plugin ACF Extended ?

Présentement que vous connaissez l’emplacement et les clés des variables, les étapes suivantes fournissent des instructions pour appeler la variable dans le fichier PHP.

Pour appeler les valeurs, la variable $blockid présente en haut du code HTML.

Elle doit être utilisée en l’appelant sous le nom de classe ‘psw_values’ entre parenthèses (‘nom de la variable’, $blockid) ; exemple –

<?php
$variable_name = psw_values(‘title’,$blockid);
echo $variable_name;
// or
echo psw_values(‘title’,$blockid);?>

Le code ci-dessus affichera tous les textes ajoutés dans le champ « title » du bloc lorsqu’il sera utilisé sur une page WordPress.

Ce code est utilisé pour stocker des valeurs dans une variable ou simplement les appeler telles quelles, mais lors de l’utilisation d’un champ répétiteur, d’une galerie ou de photos.

Les développeurs de Prositeweb Inc. ont simplifié le processus générique pour vous.

Champs de répétiteurs –

Le fonctionnement des champs répétiteurs est presque identique à celui présenté sur le site Web du tutoriel ACF, qui utilise une boucle pour appeler toutes les valeurs du champ répétiteur.

Mais, au lieu d’appeler ‘get_sub_field(‘values’);’, on peut y accéder grâce à l’exemple de code ci-dessous.

<?php $repeater = psw_values(‘repeater’,$blockid);
if($repeater):
foreach($repeater as $row){
echo $row[‘value’];
}
endif;
?>

Le code ci-dessus récupère le champ répétiteur sous forme de tableau et affiche les valeurs des clés.

Pour les valeurs de répétitions imbriquées, le même concept doit être utilisé.

Champ de la galerie –

Le champ galerie fonctionne bientôt de la même manière que le champ répétiteur, il récupère un tableau.

La clé [0] affichera la source URL, et la clé [1] affichera la largeur ; la clé [2] affichera la hauteur. (Voir le code ci-dessous)

<?php $gallery = psw_values(‘gallery’);
if($gallery):?>
<div class="row">
<?php foreach($gallery as $row):?>
<div class="col-md-4">
<img src="<?php echo $row[0];?>" width="<?php echo $row[1];?>" height="<?php echo $row[2];?>" alt="">
</div>
<?php endforeach;?>
</div>
<?php endif;
?>

Champ de photos –

Le champ photo est utilisé par l’URL « wp_get_attachment_image_src(‘value’, ‘size’) ; ».

Ce champ est déjà ajouté dans le plugin pour éviter aux développeurs d’avoir à l’appeler plusieurs fois.

Le champ « photo » peut être utilisé comme indiqué ci-dessous.

<?php $photos = psw_values(‘photo’,$blockid);?>
<img src="<?php echo $photos[0];?>" alt="">

La même logique s’applique au champ de la galerie : la clé [0] indiquera la source de l’URL, la clé [1] indiquera la largeur, la clé [2] indiquera la hauteur.

Accéder aux champs clés de l’éditeur de page –

Maintenant que vous comprenez l’utilisation des variables, le plugin fera des merveilles.

Une fois que les variables ACF nécessaires ont été assignées, le bloc appelé dans l’éditeur de page doit d’abord être sauvegardé, puis la page doit être rechargée.

Lorsque la page est rechargée, toutes les variables attribuées doivent automatiquement apparaître sous l’éditeur de bloc.

Dans l’exemple ci-dessous, toutes les variables affectées peuvent être modifiées sous l’éditeur de bloc.

Bloc WordPRess

Une fois la page mise à jour, toutes les valeurs saisies devraient apparaître sur la page.

Sortie du bloc WordPress

Si tout est suivi correctement, le plugin devrait parfaitement fonctionner, et les valeurs saisies devraient s’afficher sur la page, comme présenté sur l’image ci-dessus.

Maintenant que toutes les étapes de l’utilisation du plugin sont claires,

cela devrait vous faire gagner un temps fou pour attribuer les champs personnalisés en faisant des allers-retours répétés entre le tableau de bord et l’éditeur de bloc pour voir les variables définies.

Grâce à ce plugin, tous les tracas liés à la création d’un site Web dans les délais impartis semblent être un jeu d’enfant.

Téléchargez donc ce plugin aujourd’hui et facilitez le processus de développement de site Web sur WordPress, grâce au plugin ACF.

laissez un commentaire



Merci

Merci d'avoir contacté Prositeweb,
retourner à l'accueil

N'hésitez pas à nous contacter à tout moment pour toute demande concernant nos services. Contactez-nous

Merci