Utilisation spécifique de custom fields

Création de pages statiques avec custom fields dynamiques

Le titre n’est pas clair, il n’est pas facile d’expliquer la chose autrement que par un exemple…

Je m’explique. Un client veut voir sur une page ‘commande’ s’afficher un formulaire ou devis, que le visiteur pourrait télécharger ensuite et remplir à la main..oui je sais c’est bizarre mais c’est comme ca : l’utilisateur remplirait des informations lui même à la main, comme la référence du produit choisi par exemple.

Le devis doit garder la même forme, mais certains champs comme l’intitulé des références, ou les prix peuvent varier avec le temps. Comment faire donc, pour que l’administrateur puisse éditer plusieurs pages commande, avec à chaque fois des références et prix différents, selon le type d’utilisateur qui visite la page?

Le formulaire sur la page coté front ressemble à ca :

De visu on comprend que l’utilisateur devra rentrer lui même à la main les cases « n°photo » et « quantité », une fois le doc imprimé,

Ce que l’utilisateur ne voit pas c’est que les informations du milieu, le type de photo, les prix, ainsi que la date limite après le « au plus tard le »..sont des éléments dynamiques que l’admin pourra modifier à la volée.

C’est pas si compliqué: on va coder une page en dur, en html css :

     <table>
            <th>Eleve : ..........</th>
            <th>Classe : ..........</th>
            <tr>
                
                 <td>N° Photo : .....</td>
                <td></td>
                <td></td>
                <td>Quantité : .....</td>
            </tr>
            <tr>
                 <td>N° Photo : .....</td>
                 <td></td>
                 <td></td>
                 <td>Quantité : .....</td>
            
            </tr>
            <tr>
                <td>N° Photo : .....</td>
                <td></td>
                <td></td>
                <td>Quantité : .....</td>
            </tr>
            <tr>
                <td>N° Photo : .....</td>
                <td></td>
                <td></td>
                <td>Quantité : .....</td>
            </tr>
           
        </table>
        <div class='modalites'>
            <p>Les CPE récupèrent ce coupon dans la classe, accompagné du réglement</p>
            <p>Chèque ou espèces(avec <span class='bold'>la somme exacte</span>)</p>
            <p><span class='upper'>Au plus tard le :</span></p>

        </div>

Comme on le voit, certains td sont tout simplement vides..

On va donc créer des métabox dans notre fichier functions.php . Ces métabox, qui apparaîtront dans le type de page ‘commande’ permettront au moment de l’édition de l’article de renseigner ces champs, donc de pouvoir les modifier avec le temps, modifier le type de photos et les prix correspondants.

Création des métabox :

add_action('add_meta_boxes', 'add_commande_boxes');
function add_commande_boxes()
{
    global $post;

    if(!empty($post))
    {
        $pageTemplate = get_post_meta($post->ID, '_wp_page_template', true);

        if($pageTemplate == 'commande.php' )
        {
            add_meta_box(
                'commande_boxes', // $id
                'Information de commande', // $title
                'display_commande_boxes', // $callback
                'page', // $page
                'normal', // $context
                'high'); // $priority
        }
    }
}
function display_commande_boxes($post) {
    ?>
    <table >
        <tr>
            <th align=left><h2><?php _e('Modele'); ?></h2></th>
        </tr>

        <tr>
            <td>
                <?php $format1 = get_post_meta($post->ID, 'format1',true); ?>
                <input type="text" name="format1" id="Format1" value="<?php echo $format1 ?>" class="requiredField" />
            </td>
            <td>
                <?php $tarif1 = get_post_meta($post->ID, 'tarif1',true); ?>
                <input type="text" name="tarif1" id="Tarif1" value="<?php echo $tarif1 ?>" class="requiredField" />€
            </td>
        </tr> 
        <tr>
            <td>
                <?php $format2 = get_post_meta($post->ID, 'format2',true); ?>
                <input type="text" name="format2" id="Format2" value="<?php echo $format2 ?>" class="requiredField" />
            </td>
            <td>
                <?php $tarif2 = get_post_meta($post->ID, 'tarif2',true); ?>
                <input type="text" name="tarif2" id="Tarif2" value="<?php echo $tarif2 ?>" class="requiredField" />€
            </td>
        </tr> 
        <tr>
            <td>
                <?php $format3 = get_post_meta($post->ID, 'format3',true); ?>
                <input type="text" name="format3" id="Format3" value="<?php echo $format3 ?>" class="requiredField" />
            </td>
            <td>
                <?php $tarif3 = get_post_meta($post->ID, 'tarif3',true); ?>
                <input type="text" name="tarif3" id="Tarif3" value="<?php echo $tarif3 ?>" class="requiredField" />€
            </td>
        </tr>  
        <tr>
            <td>
                <?php $format4 = get_post_meta($post->ID, 'format4',true); ?>
                <input type="text" name="format4" id="Format4" value="<?php echo $format4 ?>" class="requiredField" />
            </td>
            <td>
                <?php $tarif4 = get_post_meta($post->ID, 'tarif4',true); ?>
                <input type="text" name="tarif4" id="Tarif4" value="<?php echo $tarif4 ?>" class="requiredField" />€
            </td>
        </tr> 
        <tr>    
            <th  align=left> <h2><?php _e('Date limite de commande'); ?></h2></th>
        </tr>
        <tr>
            <td><?php $datecommande = get_post_meta($post->ID, 'datecommande',true); ?>

                <input type="text" name="datecommande" id="Date" value="<?php echo $datecommande ?>" class="requiredField" />
            </td>      
        </tr>
    </table>
    <?php
}

function save_commande_boxes($post_id) {
 $format1 =$_POST['format1'];
 update_post_meta($post_id,'format1',$format1);
 $format2 =$_POST['format2'];
 update_post_meta($post_id,'format2',$format2);
 $format3 =$_POST['format3'];
 update_post_meta($post_id,'format3',$format3);
 $format4 =$_POST['format4'];
 update_post_meta($post_id,'format4',$format4);
 $tarif1 =$_POST['tarif1'];
 update_post_meta($post_id,'tarif1',$tarif1);
 $tarif2 =$_POST['tarif2'];
 update_post_meta($post_id,'tarif2',$tarif2);
 $tarif3 =$_POST['tarif3'];
 update_post_meta($post_id,'tarif3',$tarif3);
 $tarif4 =$_POST['tarif4'];
 update_post_meta($post_id,'tarif4',$tarif4);
 $datecommande = $_POST['datecommande'];
 update_post_meta($post_id, 'datecommande', $datecommande);
    
}
add_action('save_post', 'save_commande_boxes');

Comme d’habitude, on crée les metabox, on les affiche, et on les enregistre..
Cela va donc afficher en back office toutes nos metabox, comme ceci :

Comme vous voyez ici, j’ai viré l’éditeur de texte, car sur cette page commande il n’ya pas de texte à rajouter, juste un modèle html css auquel il ne faut surtout pas toucher, au risque de voir la page complètement cassée.

On remplit les champs comme ci dessus, cela les enregistre bien..

On peut maintenant retourner à notre code html css, et cette fois dans les td vides, on va simplement rappeler les valeurs insérées dans nos metabox, pour qu’elle apparaissent en front:

<table>
            <th>Eleve : ..........</th>
            <th>Classe : ..........</th>
            <tr>
                
                 <td>N° Photo : .....</td>
                <td><?php echo get_post_meta($post->ID, 'format1', true); ?></td>
                <td><?php echo get_post_meta($post->ID, 'tarif1', true); ?>€ </td>
                <td>Quantité : .....</td>
            </tr>
            <tr>
                 <td>N° Photo : .....</td>
                 <td><?php echo get_post_meta($post->ID, 'format2', true); ?></td>
                 <td><?php echo get_post_meta($post->ID, 'tarif2', true); ?>€ </td>
                 <td>Quantité : .....</td>
            
            </tr>
            <tr>
                <td>N° Photo : .....</td>
                <td><?php echo get_post_meta($post->ID, 'format3', true); ?></td>
                <td><?php echo get_post_meta($post->ID, 'tarif3', true); ?>€ </td>
                <td>Quantité : .....</td>
            </tr>
            <tr>
                <td>N° Photo : .....</td>
                <td><?php echo get_post_meta($post->ID, 'format4', true); ?></td>
                <td><?php echo get_post_meta($post->ID, 'tarif4', true); ?>€ </td>
                <td>Quantité : .....</td>
            </tr>
           
        </table>
        <div class='modalites'>
            <p>Les CPE récupèrent ce coupon dans la classe, accompagné du réglement</p>
            <p>Chèque ou espèces(avec <span class='bold'>la somme exacte</span>)</p>
            <p><span class='upper'>Au plus tard le :</span> <?php echo get_post_meta($post->ID, 'datecommande', true); ?>  </p>

        </div>

L’admin pourra donc créer plusieurs pages appelées commande, mais avec à chaque fois, pour un utilisateur donné, afficher différentes données dans la page..

13/06/2014 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress