Advanced Custom Fields – types de champs WordPress personnalisés

Grâce à nos propres types de champs, nous pouvons ajouter des propriétés, des images et tout autre contenu à notre propre type de message qui déterminerait une fonctionnalité supplémentaire de notre entrée. Dans ce tutoriel, vous apprendrez comment ajouter de tels champs à un type de message donné.

Comment ajouter des types de champs personnalisés pour un type d’article personnalisé en utilisant les Advanced Custom Fields dans WordPress ?

De quoi avons-nous besoin ?

Advanced Custom Fields Plugin – un plugin qui vous permet d’ajouter vos propres types de champs,
Connaissances du tutoriel précédent- Créer un modèle de courrier personnalisé – si vous ne savez pas comment créer un type de courrier personnalisé en utilisant l’interface utilisateur de CPT UI ,je vous renvoie à ce tutoriel,
Connaissances linguistiques de base PHP – aucune fonction compliquée ne sera utilisée ici, mais vous devrez vous familiariser avec la syntaxe linguistique de base pour être en mesure de comprendre le code qui figurera dans ce guide.

Allons-y ! Créez vos propres types de champs via le plugin Advanced Custom Fields de WordPress

Après avoir installé le plugin ACF (Advanced Custom Fields), nous passons à la création d’un nouveau type de message – Project. Nous voulons créer une liste de projets sous la forme d’un portefeuille, qui contiendra plusieurs champs de base :

Titre,
Brève description du projet,
Description du projet,
L’année du projet,
Ce que nous avons fait dans le projet,
L’image distinctive,
Les images du projet

Allez dans CPT UI et ajoutez un nouveau type de message (si vous ne savez pas comment faire, je me réfère au précédent tutoriaux) :

Slug -> project,
Plural -> Projects,
Singular -> Project

Utilisons l’option intégrée CPT UI pour créer quelques champs de base pour notre message personnalisé.

Après avoir créé Custom Post Type -&gt ; Projekt et ajouté les champs de base, nous procédons à l’ajout des champs restants en utilisant Custom Fields. Allez à l’onglet dans le panneau WordPress : Champs personnalisés -&gt ; Ajouter nouveau. Veuillez donner un titre à un groupe de champs. Ici, je suggère que le nommage ne soit pas mélangé dans la partie suivante de la création du projet pour nommer à partir du numéro unique de notre poste personnalisé auquel nous voulons ajouter les données du champ et ajouter un nom Entrées pour que vous sachiez qu’il s’agit de vos propres types de champs. Dans notre cas, ce sera le cas : Entrées du projet.

Cliquez sur le bouton « Ajouter un champ », sélectionnez le type de champ souhaité et donnez-lui un nom.

Texte du champ -&gt ; le nom affichant le champ, il peut y avoir des caractères polonais et des espaces – ne sera visible que dans le panneau WordPress. Donnez cette étiquette pour savoir de quoi le champ est responsable, par exemple »Ce que nous avons fait dans le projet ».

Nom du champ -&gt ; Comme le service de publication, il ne peut pas contenir de caractères polonais et sera utilisé dans le code PHP. Donnez un nom de champ facile, par exemple « wykonanie »..

Field type -&gt ; les types de champs sont différents, ils sont décrits dans plugin documentation. Dans notre cas, ce sera par exemple Text.

Le reste des champs -&gt ; ils sont facultatifs et nous pouvons les utiliser pour personnaliser la saisie des champs pour notre projet, mais dans notre cas, cela ne sera pas nécessaire. Pour plus d’informations, voir documentation.

N’oubliez pas d’ajouter Condition pour un groupe donné de champs après avoir créé tous les types de champs :

Le type d’entrée -&gt ; il est égal à -&gt ; Projekt (Custom Post Type, avec nous type : Projekt).

Prête ! Nous avons ajouté nos propres types de champs pour notre propre type de poste. Nous pouvons maintenant passer à l’ajout de quelques exemples de projets.

Nous avons ajouté quelques exemples de projets en avant-première. Allez maintenant à la page d’arrière-plan et essayez de créer une vue pour un seul projet, en affichant tous les champs.

Nous travaillons sur un thème wp_tutorial vide, créé pour le tutoriel. Si vous ne savez pas comment créer votre propre thème, je vous renvoie à tutoriel. Copiez le fichier single.php et ajoutez-y le nom de notre slug personnalisé de type post, créant ainsi un fichier single-projekt.php.

Nous commençons à modifier notre code :

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package wp_tutorial
 */
get_header();
?>
  <div id="primary" class="content-area">
    <main id="main" class="site-main">
    <?php
    while ( have_posts() ) : the_post();
    ?>
      <h2 class="tytul-projektu"><?php the_title();?></h2>
      <h5 class="krotki-opis-projektu"><?php the_excerpt();?></h5>
      <span class="wykonanie"><?php the_field('wykonanie') ?></span>
      <span class="rok"><?php the_field('rok') ?></span>
      <div class="obraz-glowny"><?php the_post_thumbnail( 'full' ); ?></div>
      <div class="opis-projektu"><?php the_content(); ?></div>
      <div class="obrazy">
      <?php 
      $image1 = get_field('obraz_1');
      $image2 = get_field('obraz_2');
        if( $image1 ): ?>
        <?php
        
          $title = $image1['title'];
          $alt = $image1['alt'];
          $size = 'large';
          $thumb = $image1['sizes'][ $size ];
        ?>
          <a title="<?php echo esc_attr($title); ?>">
            <img  src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
          </a>
        <?php endif;
        if( $image2 ): ?>
        <?php
          $title = $image2['title'];
          $alt = $image2['alt'];
          $size = 'large';
          $thumb = $image2['sizes'][ $size ];
        ?>
          <a title="<?php echo esc_attr($title); ?>">
            <img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
          </a>
        <?php endif; ?>
      </div>
    <?php
    // End of the loop.
    endwhile;
    ?>
    </main><!-- #main -->
  </div><!-- #primary -->
<?php
get_footer();

<?php

/**

* The template for displaying all single posts

* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post

* @package wp_tutorial

get_header();

<?php

while ( have_posts() ) : the_post();

<?php

$image1 = get_field('obraz_1');

$image2 = get_field('obraz_2');

if( $image1 ): ?>

<?php

$title = $image1['title'];

$alt = $image1['alt'];

$size = 'large';

$thumb = $image1['sizes'][ $size ];

</a>

<?php endif;

if( $image2 ): ?>

<?php

$title = $image2['title'];

$alt = $image2['alt'];

$size = 'large';

$thumb = $image2['sizes'][ $size ];

</a>

<?php endif; ?>

</div>

<?php

// End of the loop.

endwhile;

</main>

</div>

<?php

get_footer();

De cette façon, nous avons affiché tous les champs personnalisés du type « projekt ». La principale méthode d’affichage des valeurs des champs est the_field(‘name_field’). Nous l’avons utilisé pour afficher les champs : wykonanie, rok.

<span class="wykonanie"><?php the_field('wykonanie') ?></span>
<span class="rok"><?php the_field('rok') ?></span>

1 2	<span class="wykonanie"><?php the_field('wykonanie') ?></span> <span class="rok"><?php the_field('rok') ?></span>

We also used get_field(‘name_field’) to download images. Images downloaded using custom field’s can be downloaded using an array or url. By default, an array is returned, on which we later operate to retrieve the title of the image and alternative text, and set the appropriate size of the image.

$image1 = get_field('obraz_1');
$image2 = get_field('obraz_2');

1 2	$image1 = get_field('obraz_1'); $image2 = get_field('obraz_2');

dans la valeur de $title nous gardons le titre du tableau,
$alt conserve le texte alternatif,
$size détermine la taille de l’image,
$thumb est responsable du téléchargement de l’adresse de l’image dans la taille appropriée.

$title = $image1['title'];
$alt = $image1['alt'];
$size = 'large';
$thumb = $image1['sizes'][ $size ];

$title = $image1['title'];

$alt = $image1['alt'];

$size = 'large';

$thumb = $image1['sizes'][ $size ];

Méthodes esc_attr() et esc_url() permettent un affichage correct des attributs et de l’url.

<a title="<?php echo esc_attr($title); ?>">
<img  src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</a>

</a>

Nous avons reçu une vue avec tous les champs ajoutés. De cette façon, nous pouvons afficher tout contenu ajouté en utilisant CPT UI et ACF.

Résumé

L’ajout d’un type de message personnalisé avec ses propres types de champs est une application avancée de WordPress, grâce à laquelle nous pouvons ajouter de nombreux modules, vues et fonctionnalités qui ne sont pas présents dans la version de base de WordPress. L’utilisation de notre exemple est une solution assez simple, mais vous devez connaître les bases PHP et HTML syntaxe. De plus, il existe des fonctions intégrées WordPress et ACF . La plus grande difficulté dans cet exemple est le téléchargement des images et leur affichage. Lorsque vous apprenez la fonction de l’exemple ci-dessus, vous pouvez facilement afficher vos propres types de champs dans les vues.