Meta Field Block

Description

L’extension permet d’afficher un champ méta sous forme de bloc sur l’interface publique et prend en charge les champs ACF. Il peut être imbriqué dans un bloc parent qui a un contexte « postId », « postType » tel que le bloc « Boucle de requête » ou utilisé de manière autonome.

Quel code HTML est généré pour les champs ACF ?

1. Tous les types de champs basiques qui renvoient des chaînes ou qui peuvent être convertis en chaînes sont pris en charge – La fonction get_field est utilisée pour générer le code HTML.

2. Type Lien – Le code HTML généré est :

   <a href={url} target={target} rel="noreferrer noopener">{title}</a>
   

   Aucun attribut rel n’est ajouté si l’attribut target n’est pas égal à _blank

3. Type Image – Le code HTML généré provient de la fonction wp_get_attachment_image. La taille de l’image est définie par le réglage « Taille de l’aperçu ».

4. Type Vrai/Faux – Le code HTML généré est Oui si la valeur est true, et Non si la valeur est false. Voir l’extrait de code ci-dessous pour modifier ces textes :

   add_filter( 'meta_field_block_acf_field_true_false_on_text', function ( $on_text = 'Yes', $field, $post_id, $value ) {
     return 'Yep';
   }, 10, 4 );
   
   add_filter( 'meta_field_block_acf_field_true_false_off_text', function ( $off_text = 'No', $field, $post_id, $value ) {
     return 'Noop';
   }, 10, 4 );
   

5. Type Case à cocher/Liste déroulante – Le code HTML généré est :

   <span class="value-item">{item_value}</span>, <span class="value-item">{item_value}</span>
   

   The item_value can be value or label dependent on the return format of the field. Multiple selected values are separated by ,. Below is the code snippet to change the separator:

   add_filter( 'meta_field_block_acf_field_choice_item_separator', function ( $separator = ', ', $value, $field, $post_id ) {
     return ' | ';
   }, 10, 4 );
   

6. Radio button / Button group type – The HTML output is value or label dependent on the return format of the field.

7. Type Lien vers la page, type Objet de la publication – Le code HTML généré pour un champ à valeur unique est :

   <a class="post-link" href={url} rel="bookmark">{title}</a>
   

   Pour un champ à valeur multiple :

   <ul>
     <li><a class="post-link" href={url} rel="bookmark">{title}</a></li>
     <li><a class="post-link" href={url} rel="bookmark">{title}</a></li>
   </ul>
   

8. Type Relation – Le code HTML généré est :

   <ul>
     <li><a class="post-link" href={url} rel="bookmark">{title}</a></li>
     <li><a class="post-link" href={url} rel="bookmark">{title}</a></li>
   </ul>
   

9. Type Taxonomie – Le code HTML généré est :

   <ul>
     <li><a class="term-link" href={term_url}>{term_name}</a></li>
     <li><a class="term-link" href={term_url}>{term_name}</a></li>
   </ul>
   

10. Type Compte – Le code HTML généré pour un champ à valeur unique est :

    <a class="user-link" href={author_url}>{display_name}</a>
    

    Pour un champ à valeur multiple :

    <ul>
      <li><a class="user-link" href={author_url}>{display_name}</a></li>
      <li><a class="user-link" href={author_url}>{display_name}</a></li>
    </ul>
    

11. Pour d’autres types de champ plus complexes, vous pouvez générer un code HTML personnalisé en utilisant le crochet :

    apply_filters( 'meta_field_block_get_acf_field', $field_value, $post_id, $field, $raw_value )
    

    Ou en utilisant le crochet général :

    apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $post_id )
    

    Pour plus d’informations sur ces crochets, voir la section « Copier & coller » ci-dessous.

Extraits à copier & coller

La plupart des extraits utilisant le crochet meta_field_block_get_block_content n’affectent que la valeur sur l’interface publique, pas dans l’éditeur.

1. Comment modifier le code HTML généré par le bloc ?

   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     // Replace `your_field_name` with your unique name.
     if ( 'your_field_name' === $field_name ) {
       $block_content = 'new content';
     }
   
     return $block_content;
   }, 10, 4);
   

   Cet extrait basique est très puissant. Vous pouvez l’utiliser pour afficher n’importe quel champ provenant de publications, de termes, de comptes ou de réglages. Voir en détail les cas particuliers ci-dessous.

2. Comment encadrer le bloc avec un lien vers la publication dans la boucle de requête ?

   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     if ( 'your_field_name' === $field_name && $block_content !== '' ) {
       $block_content = sprintf('<a href="%1$s">%2$s</a>', get_permalink($post_id), $block_content);
     }
   
     return $block_content;
   }, 10, 4);
   

   Cet extrait fonctionne uniquement avec un bloc ayant des balises HTML « inline » ou une image.

3. Comment afficher plusieurs champs méta dans un même bloc ?
   Par exemple, si nous avons besoin d’afficher le nom d’un utilisateur ou d’une utilisatrice à partir de deux champs méta prénom et nom.

   // Create a function to build the full name from two meta fields.
   function yourprefix_get_full_name( $post_id ) {
     $first_name = get_post_meta( $post_id, 'first_name', true );
     $last_name  = get_post_meta( $post_id, 'last_name', true );
   
     // If the meta fields are ACF Fields. The code will be:
     // $first_name = get_field( 'first_name', $post_id );
     // $last_name  = get_field( 'last_name', $post_id );
   
     return trim("$first_name $last_name");
   }
   
   // Register a custom rest field for the full name.
   add_action(
     'rest_api_init',
     function () {
         register_rest_field(
           'post', // Can be an array of post types or a singular value like 'post', 'page', 'product' etc.
           'full_name',
           array(
             'get_callback' => function ( $post_array ) {
               return yourprefix_get_full_name( $post_array['id'] );
             },
             'schema'       => array(
               'type' => 'string',
             ),
           )
         );
     }
   );
   
   // Render the block on the front end.
   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     if ( 'full_name' === $field_name ) {
       $block_content = yourprefix_get_full_name( $post_id );
     }
   
     return $block_content;
   }, 10, 4);
   

   Mettez l’extrait ci-dessus dans votre thème ou extension, puis choisissez le type de champ champ personnalisé REST et remplacez full_name par le nom du champ. Veuillez vous assurer que le nom du champ REST est unique.

4. How to display a term meta field?
   For example, we need to display the value of a custom field named cat_attr for the product_cat taxonomy.

   // Create a function to build the value for the field.
   function yourprefix_get_attr_value( $term_id ) {
     $cat_attr_value = get_term_meta( $term_id, 'cat_attr', true );
   
     // If the meta field is an ACF Field. The code will be:
     // $cat_attr_value = get_field( 'cat_attr', 'term_' . $term_id );
   
     return $cat_attr_value;
   }
   
   // Render the block on the front end.
   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     // Replace `unique_name_for_cat_attr` with your unique name.
     if ( 'unique_name_for_cat_attr' === $field_name && is_tax( 'product_cat' ) ) {
       $term_id = get_queried_object_id();
       $block_content = yourprefix_get_attr_value( $term_id );
     }
   
     return $block_content;
   }, 10, 4);
   

   Put the above snippet in your theme or plugin, drag the block into the product_cat taxonomy template, then choose the field type as custom rest field or meta and input the field name as unique_name_for_cat_attr. You can customize this snippet to display custom fields for a specific term on any page, or template.

5. How to display a setting field?
   For example, we need to display a setting field named footer_credit on the footer template part of the site.

   // Create a function to build the value for the field.
   function yourprefix_get_footer_credit_text() {
     $footer_credit_text = get_option( 'footer_credit', '' );
   
     // If the field is an ACF Field. The code will be:
     // $footer_credit_text = get_field( 'footer_credit', 'option' );
   
     return $footer_credit_text;
   }
   
   // Render the block on the front end.
   add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
     $field_name = $attributes['fieldName'] ?? '';
   
     // Replace `unique_name_for_footer_credit` with your unique name.
     if ( 'unique_name_for_footer_credit' === $field_name ) {
       $block_content = yourprefix_get_footer_credit_text();
     }
   
     return $block_content;
   }, 10, 4);
   

   Put the above snippet in your theme or plugin, drag the block into the template, then choose the field type as custom rest field or meta and input the field name as unique_name_for_footer_credit.

6. How to display custom fields for users on the author template or display custom fields for the logged-in user or any users?
   Similar to displaying custom fields for terms.

Si cette extension vous est utile, veuillez s’il vous plait laisser un avis et une note sur WordPress.org pour la faire connaître au plus grand nombre. Ce serait très apprécié.

Vous pouvez consulter mes autres extensions si cela vous intéresse :

• Content Blocks Builder – Un outil pour créer facilement des blocs, des compositions ou des variations pour votre site directement sur l’éditeur de blocs.
• Block Enhancements – Une extension pour ajouter aux blocs des fonctionnalités pratiques telles que : icône, ombre portée, transformation…
• Icon separator – Un tout petit bloc comme le bloc « Séparateur » mais avec la possibilité d’y ajouter une icône.
• SVG Block – Un bloc pour insérer des images SVG en ligne facilement et en toute sécurité. Il contient également plus de 3000 icônes et certains séparateurs non rectangulaires courants.
• Counting Number Block – Un bloc pour afficher un compteur animé.
• Breadcrumb Block – Un simple bloc Fil d’Ariane qui prend en charge les données structurées JSON-LD.
• Better Youtube Embed Block – Intégrez des vidéos Youtube sans ralentir votre site.

Cette extension est développée en utilisant @wordpress/create-block.