Comment gérer le contenu d’un thème créer avec Les blocs WordPress ou l’ACF Pro?

Si vous n’êtes pas très familier avec l’éditeur moderne de WordPress, vous allez certainement vous demander Comment gérer le contenu avec les blocs WordPress ou avec l’ACF Pro. Dans cet article, nous allons vous expliquer comment le nouvel formulaire de WordPress fonctionnent. Nous allons ensuite voir comment on gère facilement son contenu si le site web utilise l’ACF Pro. Il est possible d’avoir des approches différentes en fonction des thèmes. Cependant, nous allons vous donner les informations générales. Et, nous irons en profondeur sur les thèmes WordPress que nous développons.

Les blocs WordPress et généralité

Depuis la version 5.0 de WordPress, vous n’avez plus besoin de l’éditeur classique pour gérer votre site web. En effet, l’éditeur de contenu précédent était un formulaire qui n’était pas assez formaté pour les sites web moderne. Par conséquent, plusieurs propriétaires de site devaient utiliser les outils tels que WP Backery, Elementor ou tout autre outil de formatage. Avec la possibilité de gérer le contenu avec les blocs WordPress, vous n’avez techniquement pas besoin d’autres extensions pour naturellement faire un site web. WordPress vous propose déjà par défaut près de 90 blocs réutilisable. Ci-dessous une nette différence entre l’éditeur des blocs WordPress et l’ancienne version (bloc classique).

L’éditeur classique est une simple formulaire où vous pouvez rédiger du texte par très formaté. Vous pouvez utiliser les codes courts ou les syntaxes HTML; cependant, ce n’est pas très commode si vous ne disposez pas de compétences en informatique.

L’éditeur de blocs à beaucoup plus d’options (inclus l’éditeur classique). En effet, en cliquant sur l’icône plus en haut (gauche) du formulaire, vous allez accès à plus de 90 blocs que vous pouvez utiliser pour vos pages. Ces elements peuvent inclure les blocs créer par des développeurs. À titre d’exemple, Pour être en mesure de convertir un design HTML en thème WordPress, nous utilisons généralement l’ACF Pro pour créer des blocs réutilisables. Ensuite, nous pouvons les accéder à partir de l’éditeur de blocs WordPress.

Quelques avantages du nouvel éditeur de WordPress

Contrairement à l’éditeur classique qui était soit limité à du texte et des syntaxes HTML; ou alternativement l’utilisation des extensions, le nouvel éditeur à plusieurs bénéfices.

• Pas besoin de surcharger son site web avec des extensions supplémentaires. Pour palier les limitations de l’éditeur classique, il fallait habituellement installer deux ou trois extensions. En effet, les extensions telles qu’Elementor, WP Backery ou plusieurs autres résultent partiellement du problème avec l’éditeur classique. Souvent, les développeurs devaient ajouter à cela deux, trois ou même quatre autres extensions pour avoir un thème fonctionnel.
• Des paiements récurrents parfois très élevé. Pour continuer à maintenir votre site web dépendant de plusieurs extensions, vous devez continuellement payer pour la licence.
• Les failles de sécurité. Concernant particulièrement WordPress, le plus grand taux de failles de sécurité est le résultat de l’installation de plusieurs extensions qui ne sont pas toujours mises à jour.

Comment mieux tirer profit de l’éditeur de blocs de WordPress?

Lorsque vous créez un site web avec WordPress, vous avez généralement trois options quand vient le moment d’utiliser l’éditeur de blocs de WordPress.

• Utiliser les blocs par défaut pour reconstituer les pages de votre site web.
• Créer des blocs réutilisables à partir de zéro
• Utiliser des extensions pour générer des blocs réutilisables.

Par défaut, WordPress vous proposent plusieurs blocs et des motifs que vous pouvez appeler lorsque vous créer les pages. Il suffit traditionnellement de les rechercher dans la banque de l’éditeur et cliquer pour l’inclure dans vos pages. Vous pouvez ensuite modifier le texte et les photos.

Utiliser les blocs par défaut pour reconstituer les pages de votre site web.

Afin de mieux utiliser les blocs par défaut, nous vous recommanderons vous familiariser avec sa documentation sur WordPress. le site web wordpress.org vous donnera certainement de plus amples informations sur les différents blocs et leur usage.

Créer des blocs réutilisables à partir de zéro

Pour créer des blocs WordPress depuis zéro, vous avez besoin des compétences en JavaScript, React, et API Rest.

Sites web sur mesure (WordPress) — Comment nous avons combiné l’ACF Pro à une extension pour réduire le temps de développement web.

Créer les sites web sur mesure demande un investissement en temps assez considérable. En effet, dans le cas de site web personnalisé, il faut pratiquement tout faire de zéro. Ce qui peut affecter de façon considérable le temps de développement. Cette approche de développement est préférée de certaines compagnies qui ont un cahier de charge qui sort de l’ordinaire. La question du temps de développement a été un enjeu majeure pendant prêt de deux ans aux seins de Prositeweb. Malgré les efforts, cela semblait quasiment impossible de montrer à un client que son projet peut prendre plus de temps que ceux d’autres compagnies. C’est la raison pour laquelle nous nous sommes lancés dans une réflexion et des essais qui nous ont permis de réduire de manière considérablement le temps de développement de nos projets web. Nous vous expliquons comment.

Quelques avantages du développement de sites web sur mesure

Vous allez certainement vous poser la question à savoir pourquoi créer un site web sur mesure si l’on peut facilement trouver les outils ou fonctionnalités. Bien que collecter les outils préexistants puisse aider à être rapide, les solutions sur mesure peuvent avoir leurs bénéfices. Nous vous énumérons ci-dessous quelques avantages.

La sécurité de votre solution web

Un thème que vous trouverez sur le marché peut avoir des fonctionnalités qui utilisent les ressources externes. Et, indirectement, ces ressources peuvent constituer des failles de sécurité. À titre d’exemple, plusieurs failles de sécurité reporté sur le site web WordPress ont pour origine des extensions.

Créer une solution personnalisée peut consister à créer des modules qui cadrent avec votre besoin. Bien que cette approche n’exclue pas les failles, vous aurez en interne plus de contrôle sur la gestion de vos ressources web.

La gestion de la performance

La performance de votre site web est un aspect très important pour mieux se positionner. Lorsque vous avez des solutions génériques, elles viennent également avec des fonctionnalités que sont moins utiles pour votre organisation. Plusieurs compagnies option pour le développement sur mesure pour mieux gérer leur ressource et par conséquent l’ergonomie.

Vous ne trouvez pas la solution adapté à votre besoin

Pour plusieurs organisations, les solutions sur le marché ne cadrent pas toujours avec leur besoin. En effet, vous pouvez avoir une solution innovantes qui ne se situent pas dans la banque des extensions. Ainsi, créer une solution personnalisée peut vous permettre de concrétiser votre projet.

C’est très coûteux durablement d’opter pour une solution avec adhésion.

Plusieurs applications que vous trouverez sur le net sont sous forme d’abonnement. Cela semble moins coûteux immédiatement; mais assez demandant à moyen ou longs termes. Ce sont les cas des options de livraison ou de commande à distance qui apparemment revendiquaient prêt de 30 % de bénéfices au restaurant durant la pandémie de la COVID-19.

En fin de compte, investir dans une solution personnalisée dépends de la vision de chaque entreprise. Nous pouvons vous aider à évaluer votre projet afin de vous donner toutes les options.

Comment nous avons combiné l’ACF Pro à une extension pour réduire le temps de développement web?

Réduire le temps de développement a été très capital pour continuer d’offrir à nos clients un service de qualité tout en leur permettant de réduire le coût de leur service. Pour ce fait, nous avons entre autres opter pour :

• Le développement des modules semblables à presque tous les projets web
• La création d’une extension ACF Pro
• Un apprentissage en profondeur de l’outil de conception web

La création d’une boîte à outils pour nos projets web

Un site web est un assemblage des petites fonctionnalités qui se ressemble généralement (du point de vue backend). En effet, pour envoyer un message, par exemple, le processus est presque similaire dans tous les sites web. Nous avons donc exploité cette opportunité pour créer des petits modules que l’on recombine lors du développement des projets. Cela nous permet d’éviter de refaire la programmation des mêmes codes sur différent projet.

Ce qui change dans ce cas lors du développement d’un site est le visuel développé selon le besoin du client.

Si vous travaillez avec nous dans la conception de votre site web sur mesure, vous ne risquez pas de payer pour le même montant que l’on chargeait à nos débuts. Bien au contraire, votre projet, aura toutes les composantes d’anciens clients incluent les nouvelles solutions innovants.

La création d’extension sur mesure (Prolongement de l’ACF Pro) pour le développement de sites web sur mesure

En développement web ou application, une extension est une application qui est parfois indépendant de votre thème. Cette application permet d’effectuer différentes tâches. À titre d’exemple, vous pouvez utiliser une extension pour ajouter un formulaire de contact sur votre site web. Ou, pour facilement mettre le code de Google Analytics ou Google Ads dans l’entête de votre site.

Dans le cas de la conception de sites web sur WordPress, nous avons investi beaucoup de temps à développer une extension qui utilise les fonctionnalités de l’ACF pour aisément créer un thème WordPress. Notre extension permet d’automatiser une bonne partie du processus. À titre d’exemple, après installation de l’extension et première configuration, l’extension va se charger de récupérer les blocs d’un emplacement de votre thème. Si vous souhaitez en savoir plus concernant l’extension, vous pouvez cliquer sur ce lien pour nous contacter.

C’est quoi l’ACF?

L’ACF Pro (Advanced Custom Field) est une extension très populaire sur WordPress. En effet, cet outil est particulièrement connu pour faciliter la création des champs personnalisés. Car, cela offre des options que les développeurs peuvent exploiter pour facilement ajouter des champs dynamiques sur un site web. À titre d’exemple, si vous avez un site web dans l’événementiel, vous souhaitez créer un groupe de champ pour ajouter une gallérie de photos, c’est facile avec l’ACF. Il suffira dans ce cas

• d’aller dans l’option de création des groupes,
• ajouter un champ gallérie
• l’associer au formulaire de création des pages ou des catégories
• l’utiliser pour ajouter les photos directement lors de la création ou modification des pages.

Ensuite, avec une petite modification de votre code, vous allez pouvoir faire apparaitre les photos que vous aurez sélectionné sur votre site web.

l’ACF vous propose plusieurs fonctionnalités que vous pouvez exploiter dans votre projet web. Avec un peu de curiosité et de parcours dans la documentation, vous pourrez vous démarquer dans votre processus de développement web. Pour un développeur WordPress expérimenté, l’ACF pourrait largement être suffisant pour développement plusieurs composantes pour un site web.

Si vous souhaitez utiliser l’Advanced Custom Field dans vos projets, vous pouvez aller sur le site web wordpress.org afin de faire le téléchargement.

Ci-dessous un exemple de code pour l’affichage d’une gallérie de photo

<?php 
$images = get_field('gallery');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $images ): ?>
    <ul>
        <?php foreach( $images as $image_id ): ?>
            <li>
                <?php echo wp_get_attachment_image( $image_id, $size ); ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Qu’est-ce que l’ACF PRO apporte de plus dans la création de sites web sur mesure ?

Si vous visitez le site web officiel de l’ACF, vous verrez quelques différences majeurs entre la version gratuite et la version PRO. À titre d’exemples:

• Vous pouvez créer les champs qui se répètent. Si, par exemple, vous souhaitez créer un tableau des prix, cela peut être intéressant de programmer une option permettant de facilement ajouter une liste qui se répète. Dans ce cas, cette option est très utile.
• La création des blocs. Pour faciliter la création de sites web sur mesure, vous pouvez créer des blocs que les utilisateurs, appelleront dans l’éditeur Gutenberg. Cette option est vraiment rendue facile avec l’ACF Pro.
• Le contenu flexible. L’option du contenu flexible vous permet de simplement gérer l’interface de la création de vos données.
• La création de la page d’option. Lorsque vous créez un thème WordPress ou une extension, vous pouvez avoir besoin de la page d’option pour faciliter la configuration de votre fonctionnalité.

Nous pouvons remarquer que grâce à cette extension, vous avez plusieurs outils pour aisément créer votre site web.

Ce que notre extension (ACF Prolongé de Prositeweb) apporte de plus?

Nous avons particulièrement exploité la fonctionnalité de création des blocs pour faciliter le développement des thèmes WordPress pour les sites web sur mesure. En effet, en combinant l’ACF Pro à notre extension WordPress, nous n’avons généralement pas besoin d’autres extensions pour la création de sites web.

L’ACF Prolongé de Prositeweb c’est quoi concrètement?

Notre module permet entre autres de simplifier les étapes de conception d’un site web avec l’ACF. Effectivement, pour configurer et faire un thème avec l’ACF, vous devez faire une configuration, créer les blocs ou les parties de votre site web. Ensuite, ajouter 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. Même si vous êtes expérimenté, ces étapes sont répétitives dans tous les projets web. 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 est devenu un jeu d’enfant.

Comment utiliser L’ACF Prolongé de Prositeweb pour créer de sites web sur mesure?

Utiliser l’ACF prolongé de Prositeweb consistera :

• D’abord, à Découper son design HTML en parties ou blocs de code PHP.
• Ensuite, mettre ces blocs dans un dossier de votre thème courant.
• Par la suite, importer le fichier JSON des variables du groupe de champ. (À fournir avec l’extension)
• Pour finir, Spécifiez le nom du dossier de vos blocs dans la configuration de l’extension.

L’extension se chargera de localiser l’emplacement de vos blocs et créer des données (dans la base de données) que vous pouvez utiliser dans votre éditeur Gutenberg. Il est important de noter quand, dans un premier temps, les auront des données statiques (Le texte dans le code). Il faudra ensuite utiliser la syntaxe de l’ACF avec ces fonctionnalités pour rendre les textes dynamiques.

Configuration et étapes

Une fois que vous aurez installé l’extension, vous devez suivre les étapes suivantes:

• Allez dans l’onglet Apparence ⇒ Extend ACF Prositeweb
• Ensuite, entrez le nom du dossier de vos blocs PHP
• Vous pouvez également saisir quelques informations de base telles que le numéro de téléphone, adresse, liens (Uniquement si vous avez l’intention de les utiliser dans votre projet).

Si vous avez sectionné et ajouté vos blocs dans votre dossier du thème courant, l’extension se chargera de créer les elements pour vos pages. Vous verrez ces éléments via l’onglet Prositeweb Block.

Comment rendre dynamique vos blocs php?

Pour rendre dynamique vos blocs PHP, il suffira d’importer le fichier JSON que vous obtiendrez avec l’extension. Ce fichier comporte la configuration des groupes de champ qui seront automatiquement assignés aux blocs que vous avez créé plus haut.

Pour faire l’import,

• Allez dans ACF
• Ensuite, Outils
• Sélectionné le fichier JSON à votre droite et importé

Pour la suite, vous utiliserez la syntaxe de l’ACF et PHP pour ajouter les données.

ci-dessous un exemple de ce à quoi un fichier de bloc pourrait ressembler avec les variables ACF et PHP :

<!-- =========== Start of Hero ============ -->
        <section class="hero hero--v6 hero--full section--darkblue bg-gradient--darkblue--1 d-flex align-items-center hidden">
                
            <!-- end of overlay bg -->
           
            <!-- end of svg shape -->
            <div class="container">
                <div class="row position-relative reveal">
                    <div class="col-12 col-md-10 col-lg-7 col-xl-7 mx-auto mx-lg-0 mb-3 mt-8 mt-lg-0 text-center text-lg-left z-index2">
                        <div class="hero-content">
                            <h1 class="hero__title font-w--600 mb-2 mb-lg-3"><?php echo get_field("title"); ?> </h1>
                            <p class="hero__description text-color--200 font-size--20 opacity--80 mb-3 mb-lg-5 mb-md-6"><?php echo strip_tags(get_field("description")); ?> </p>
                            
                            <div class="button-group d-flex flex-column flex-sm-row align-items-center d-sm-inline-block">
                                <?php 
                                if(!empty(get_field('call_to_action_link'))) {
                                ?>
                                <a href="<?php echo get_field('call_to_action_link');  ?>" class="btn btn-bg--primary rounded--full btn-hover--3d btn-hover--splash"  title="<?php echo get_field('call_to_action_text');  ?>">
                                    <span class="btn__text"><?php echo get_field('call_to_action_text');  ?></span>
                                </a>
                               <?php 
                                }
                                if(!empty(get_field('call_to_action_link_2'))) {
                               ?>
                                <a href="<?php echo get_field('call_to_action_link_2'); ?>" class="btn btn-bg--darkblue rounded--full btn-hover--3d btn-hover--splash" title="<?php echo get_field('call_to_action_text_2'); ?>">
                                    <span class="btn__text"><?php echo get_field('call_to_action_text_2'); ?></span>
                                </a>
                                <?php 
                                }
                                ?>
                            </div>
                        </div>
                        <!-- end of content -->
                    </div>
                    <!-- end of col -->
                      <div class="col-12 col-lg-5 col-xl-5 about-video-media">
                        <picture>
                            <?php
                            if ( $image_attributes ) : ?>
    <img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" title="<?php echo get_field("title"); ?>" alt="<?php echo get_field("title"); ?>" class="img-fluid box-shadow--2"/>
<?php endif; ?>
 </picture>
               
                    </div>
                
                </div>
                <!-- end of row -->
            </div>

        </section>
        <!-- =========== End of Hero ============ -->
                                  <?php if( have_rows('promotions', 'option') ): ?>
                                  
                                  
                                    <!-- =========== Start of Testimonial ============ -->
        <section class="pt-2 pt-lg-2 testimonials testimonials--v2 la_promotion">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-10 mx-auto reveal">
                      
                         <?php while( have_rows('promotions' , 'option') ): the_row(); 
    $url = get_sub_field("btn_url");
        ?>

     <div class="promoHeader text-center">
                                                    <!-- NAME OF THE SALE -->
  <h2> <?php the_sub_field('title'); ?> <?php the_sub_field('sub_title'); ?>  &nbsp; &nbsp;</h2>
  <div class="details">
       <!-- CALL TO ACTION-->
        <a href="<?php echo get_permalink($url); ?>" class="btn btn-bg--darkblue" title="<?php the_sub_field('btn_text'); ?>">
                                    <span class="btn__text"><?php the_sub_field('btn_text'); ?></span></a>
  </div>
</div>

                    

    <?php endwhile; ?>
                    </div>
                </div>
            </div>
        </section>
        <!-- =========== End of Testimonial ============ -->

<?php endif; ?>    

Comment notre approche a contribué à réduire le temps de développement de sites web sur mesure ?

Depuis le début, nous avons parlé de la réduction du temps de développement web. Effectivement, en créant une extension que nous avons combiné à l’ACF, nous avons limité le développement de sites web à la création des blocs et l’ajout des variables. Cette approche est très bénéfique et permet de facilement déléguer les premières parties du projet. Il est évidemment vrai que plusieurs autres aspects sont utiles dans le processus. cependant, les inclure devient relativement facile.

Quelques sites web que développé avec notre extension

Nous avons présentement plus de 10 sites web et applications qui utilisent l’ACF prolongé de Prositeweb. Et, nous l’utilisons également pour amplement améliorer les sites web de nos clients. Ci-dessous quelques exemples.

Garage Auto

Garage Auto est un site web multi utilisateurs que nous avons développé avec WordPress. Ce site web utilise l’ACF Pro et notre extension pour pratiquement toutes les fonctionnalités. En effet, pour réaliser ce projet, nous avons utilisé un design HTML que nous avons par la suite converti en thème WordPress.

Enoweek

Enoweek est l’annuaire des entreprises canadiennes. C’est aussi un site que nous avons développé avec l’ACF PRO et notre extension.

Autres projets web

Nous avons également créé les sites web tels que:

• CamerounBiz
• Innovation dans l’évènementiel
• White Definition

Vous trouverez la liste dans notre page des réalisations.

Conclusion sur la création de sites web sur mesure

Avec l’approche que nous avons adapté et que nous utilisons depuis quelques mois. Il n’y a plus une grande différence entre créer un site web sur mesure et choisir un thème sur le marché. En plus, votre site web aura vraiment peu d’extensions. Si vous souhaitez en savoir plus sur Prositeweb ou créer un site web personnalisé pour votre entreprise, contactez-nous.