Rechercher

Ajouter les couleurs dans gutenberg

Placeholder image
// Editor color palette.
add_theme_support(
	'editor-color-palette',
	array(
		array(
			'name'  => 'Beige',
			'slug'  => 'mahii-beige',
			'color' => '#eee0d0',
		),
		array(
			'name'  => 'Orange',
			'slug'  => 'mahii-orange',
			'color' => '#f37646',
		),
		array(
			'name'  => 'Blanc',
			'slug'  => 'mahii-blanc',
			'color' => '#fff',
		),
		array(
			'name'  => 'Noir',
			'slug'  => 'mahii-noir',
			'color' => '#141819',
		),
	)
);

Utiliser un champs ACF répéteur dans un widget Unlimited Elements

Placeholder image

Créer un nouveau Widget dans Unlimited Elements. Voici la configuration à appliquer :

Onglet « Général »

Onglet « Attribute »

Choisir le type : « Dynamic Grouped Settings »

Donner un titre, un nom et dans le cadre gris, choisir « Use For: Items »

Dans « Included Attributes: » ajouter l’identifiant des attributs ACF de votre champs répéteur.

Exemple :

Si un de vos champs est une image, vous devez ajouter un attribut avec le titre : Image size, le name image_size. Son « type »Attribute Type » est « Special Attribute » et son « Spécial Attribute Type » est Items Image Size.

Exemple :

Dans onglet « Items attributes »

Activez les items et pour chaque sous-champs ACF du répéteur, créer un item attribute correspondant (un texte pour du texte, une image pour une image…)

Exemple :

Onglet HTML :

Utilisez la fonction put_items() et utilisez vos items attribute comme d’habitude.

Dans Elementor :

Ajouter votre nouveau widget. Il va falloir le configurer pour qu’il utilise les bonnes sources de donées.

  • Dans item source, choisir ACF Custom FIeld
  • Dans ACF field name, mettez l’identifiant de votre champs répéteur
  • Dans ACF field location, choisissez le localistation de votre champs (en général Current Post)
  • Vous devez ensuite associer chacun de vos « Item attribute » avec le bon sous-champs :
    • Choisissez Item Field name
    • Insérer l’identifiant du sous-champs dans « Item Field Name »

Exemple :

Ajouter des colonnes dans les listes de posts de l’admin de WordPress

Placeholder image
/* =============================================
===============. ADMIN COLUMN .=================
============================================= */
// Ajouter les colonnes "Statut" et "Slug" dans le tableau des articles
function ajouter_custom_colonnes_posts($columns) {
	$new_columns = array(
        'thumbnail'   => __('Miniature'),
    );
	$new_after_columns = array(
        'post_status' => __('Statut'),
        'post_slug'   => __('Slug'),
    );
    
    // Insérer les nouvelles colonnes au début du tableau
    return array_merge($new_columns, $columns, $new_after_columns);
}
add_filter('manage_posts_columns', 'ajouter_custom_colonnes_posts');
add_filter('manage_pages_columns', 'ajouter_custom_colonnes_posts');

// Afficher le contenu des colonnes "Statut" et "Slug"
function afficher_contenu_custom_colonnes($column, $post_id) {
    switch ($column) {
        case 'post_status':
			$color = "#000";
			if(get_post_status($post_id) == "publish") {
				$color = "green";
			}
			if(get_post_status($post_id) == "draft") {
				$color = "grey";
			}
            echo '<b style="color: '.$color.'">' . get_post_status($post_id) . '</b>';
            break;
        case 'post_slug':
            $post = get_post($post_id);
            echo $post->post_name;
            break;
        case 'thumbnail':
            $thumbnail = get_the_post_thumbnail($post_id, array(50, 50));
        	echo $thumbnail;
            break;
    }
}
add_action('manage_posts_custom_column', 'afficher_contenu_custom_colonnes', 10, 2);
add_action('manage_pages_custom_column', 'afficher_contenu_custom_colonnes', 10, 2);

Ajouter une classe ACF au body dans WordPress

Placeholder image
/* =============================================
=================. BODY CLASS .==================
============================================= */
add_filter('body_class', 'ajouter_classe_acf_selecteur_body');
function ajouter_classe_acf_selecteur_body($classes) {
    if (function_exists('get_field') && get_field('classe')) {
        $valeur_champ_acf = get_field('logo_mode');
        if (!empty($valeur_champ_acf)) {
            $classes[] = sanitize_html_class($valeur_champ_acf);
        }
    }
    return $classes;
}

Synchroniser deux champs ACF relationship

Placeholder image

Dans un projet WordPress, nous avions besoin d’utiliser deux types de contenu personnalisé (CPT) qui doivent être liés entre eux. L’objectif est d’établir une relation bidirectionnelle entre ces deux CPT. Cela signifie que lorsqu’un utilisateur associe un élément du premier CPT à un autre élément dans le second CPT via un champ de relation, cette association doit être répercutée dans l’autre sens.

Exemple :

  • Si tu as deux CPT : « Professeurs » et « Cours ».
  • Si tu associes un professeur à un cours, il faut que le cours soit aussi automatiquement lié au professeur.

Explication des parties importantes du code :

  1. Détection de l’enregistrement automatique : La première condition empêche l’exécution de la fonction lors d’une sauvegarde automatique pour éviter les mises à jour inutiles ou non souhaitées.
  2. Récupération du type de post : get_post_type($post_id) et get_the_terms($post_id, 'format') sont utilisés pour identifier le type de post et le format associé (si applicable).
  3. Premier bloc de synchronisation :
    • Si le post appartient au type custom_post_type_1 (nom générique), il récupère les relations stockées dans related_field_1 (premier champ relationnel).
    • Pour chaque relation, il vérifie si le post lié a bien l’ID du post actuel dans son propre champ relationnel (related_field_2).
    • Si ce n’est pas le cas, il ajoute cette relation et met à jour le champ avec update_field().
  4. Deuxième bloc de synchronisation :
    • Ce bloc fait exactement la même chose, mais dans l’autre sens : s’il s’agit d’un post de type custom_post_type_2, il synchronise les relations du champ related_field_2 avec related_field_1 dans le post lié.
  5. Attachement au hook acf/save_post : La fonction est exécutée à chaque fois qu’un post est sauvegardé via ACF, en utilisant le hook avec une priorité de 20 pour s’assurer que cela se passe après les autres opérations.

Noms génériques :

  • custom_post_type_1 et custom_post_type_2 représentent les deux types de contenu personnalisé (CPT).
  • related_field_1 et related_field_2 représentent les champs de relation entre ces deux types de CPT.
function sync_acf_relationship_fields($post_id) {
  // Empêcher l'exécution du code pendant une sauvegarde automatique
  if (is_admin() && defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return;
  }

  // Récupérer le type de contenu personnalisé (CPT) du post actuel
  $post_type = get_post_type($post_id);

  // Récupérer les termes associés à la taxonomie 'format' du post actuel
  $post_format = get_the_terms($post_id, 'format');

  // Vérifier si le post appartient au premier type de CPT ('cpt_slug')
  // et que le format correspond (si applicable)
  if ($post_type == 'custom_post_type_1' && $post_format[0]->slug == 'format_slug') {
    // Récupérer les relations à synchroniser pour le premier champ personnalisé
    $related_posts_1 = get_field('related_field_1', $post_id);
    
    if ($related_posts_1) {
      // Parcourir chaque relation pour les synchroniser dans l'autre sens
      foreach ($related_posts_1 as $related_post_id) {
        // Récupérer les relations existantes dans le second champ du post lié
        $existing_related_posts = get_field('related_field_2', $related_post_id);
        if (!$existing_related_posts) {
          $existing_related_posts = array(); // Initialiser si vide
        }

        // Si le post actuel n'est pas déjà dans les relations, l'ajouter
        if (!in_array($post_id, $existing_related_posts)) {
          $existing_related_posts[] = $post_id;
          // Mettre à jour le champ relationnel dans le post lié
          update_field('related_field_2', $existing_related_posts, $related_post_id);
        }
      }
    }
  }

  // Vérifier si le post appartient au second type de CPT ('cpt_slug_2')
  if ($post_type == 'custom_post_type_2') {
    // Récupérer les relations à synchroniser pour le second champ personnalisé
    $related_posts_2 = get_field('related_field_2', $post_id);

    if ($related_posts_2) {
      // Parcourir chaque relation pour les synchroniser dans l'autre sens
      foreach ($related_posts_2 as $related_post_id) {
        // Récupérer les relations existantes dans le premier champ du post lié
        $existing_related_posts = get_field('related_field_1', $related_post_id);
        if (!$existing_related_posts) {
          $existing_related_posts = array(); // Initialiser si vide
        }

        // Si le post actuel n'est pas déjà dans les relations, l'ajouter
        if (!in_array($post_id, $existing_related_posts)) {
          $existing_related_posts[] = $post_id;
          // Mettre à jour le champ relationnel dans le post lié
          update_field('related_field_1', $existing_related_posts, $related_post_id);
        }
      }
    }
  }
}

// Attacher la fonction à l'action 'acf/save_post' pour synchroniser après la sauvegarde d'un post
add_action('acf/save_post', 'sync_acf_relationship_fields', 20);

Authoriser les SVG dans les champs ACF

Placeholder image
/**
 * ACF SVG filter to allow raw SVG code.
 * 
 * https://www.advancedcustomfields.com/resources/html-escaping/
 * 
 */
add_filter( 'wp_kses_allowed_html', 'acf_add_allowed_svg_tag', 10, 2 );

function acf_add_allowed_svg_tag( $tags, $context ) {
    if ( $context === 'acf' ) {
      $tags['svg']  = array(
          'xmlns'				=> true,
          'width'				=> true,
          'height'				=> true,
          'preserveAspectRatio'	=> true,
          'fill'					=> true,
          'viewbox'			=> true,
          'role'				=> true,
          'aria-hidden'			=> true,
          'focusable'			=> true,
      );
      $tags['path'] = array(
          'd'    => true,
          'fill' => true,
      );
    }
    return $tags;
}

Ajouter un style pour l’editeur interne Gutenberg

Placeholder image

Pour designer les blocks dans l’admin aussi !

function mytheme_enqueue_block_editor_assets() {
    // Charger le fichier CSS personnalisé dans l'éditeur Gutenberg
    wp_enqueue_style(
        'mytheme-editor-styles', // Nom du handle
        get_theme_file_uri('/editor-style.css'), // Chemin vers le fichier CSS
        false, // Pas de dépendances
        '1.0', // Version du fichier
        'all' // Media
    );
}
add_action('enqueue_block_editor_assets', 'mytheme_enqueue_block_editor_assets');
// Custom style Editor only
function custom_gutenberg_editor_style() {
    echo '<style>
        .interface-complementary-area__fill,
        .interface-complementary-area__fill > div {
            width: 480px !important;
            min-width: 480px;
        }
    </style>';
}
add_action('admin_head', 'custom_gutenberg_editor_style');

Ajouter un style par défault à un bloc Gutenberg existant

Placeholder image
function mytheme_register_block_styles() {
    // Ajouter un style personnalisé "not" au bloc Groupe
    register_block_style(
        'core/group',
        array(
            'name'  => 'note',
            'label' => __('Note Style', 'mytheme'),
            'isDefault' => false, // Optionnel : false pour ne pas le définir comme style par défaut
        )
    );
}
add_action('init', 'mytheme_register_block_styles');
.wp-block-group.is-style-note {
    background-color: #f0f0f0;
    border: 2px dashed #ff0000;
    padding: 20px;
    color: #333;
}