web-dev-qa-db-fra.com

Utilisation de publications personnalisées avec des métaboxes et des listes déroulantes

Lors de l'utilisation de messages personnalisés et de l'ajout d'une Metabox, je me demandais comment ajouter un menu déroulant pour renseigner les données ajoutées par l'utilisateur.

Par exemple, je souhaite pouvoir sélectionner une "source" pour la publication à l'aide du menu déroulant, mais je souhaite également que l'utilisateur puisse ajouter des sources à ce même menu déroulant. J'ai essayé de le faire moi-même en utilisant des taxonomies pour les sources et en essayant de remplir le menu déroulant avec ces taxonomies, mais je me suis probablement trompé.

Une idée de comment je peux y arriver?

postscustomizationmetaboxtaxonomy
2
Mike

NOTE: Il est un peu tardif, le code n'est peut-être pas parfait, mais il devrait vous mettre sur la bonne voie.

Eh bien, vous pouvez théoriquement simplement configurer une taxonomie personnalisée, puis l'utilisateur peut simplement utiliser la zone de texte en bas, puis les cases à cocher de la zone de sélection de taxonomie.

Je supposerai que vous utilisez le type de message standard pour ces messages, mais vous pouvez l'ajuster dans l'appel à register_taxonomy.

Quelque chose comme:

register_taxonomy("post_source", array("post"), array("hierarchical" => true, "label" => "Sources", "singular_label" => "Source", "rewrite" => true));

Mais, si vous êtes sur le menu déroulant, vous devrez le configurer un peu différemment.

Le code ci-dessous utilisera Ajax pour envoyer la source nouvellement ajoutée à la base de données. Si cela réussit, ajoutez cette source à la liste déroulante et sélectionnez-la automatiquement.

Étape 1: Créez une table pour stocker des sources

Vous voudrez créer une table pour stocker ces données afin que vous puissiez y faire référence lorsque l'utilisateur tente d'ajouter une nouvelle source et assurez-vous qu'elle ne se trouve pas déjà dans la base de données.

Et vous aurez besoin de les stocker quelque part pour pouvoir les insérer dans la liste déroulante.

Étape 2: Créez la méta-boîte 

//run this function on admin_init
add_action('admin_init','add_post_source_box');
//add source selection box to post editor
function add_post_source_box() {
     add_meta_box("post_source_meta", "Post Source", "post_source", "post", "side", "high");
}

Étape 3: Remplissez la méta-boîte 

//populate the post_source box
function post_source() {
     global $post;
     $custom = get_post_custom($post->ID);
 $post_source = $custom['post_source'][0]; ?>

     <script type="text/javascript">
          jQuery(function() {
               jQuery("#post_source_add_button").click(function() {
                    var new_source = jQuery("$post_source_add").val();
                    var add_source = {"ajaxurl":"<?php echo get_bloginfo('wp_url'); ?>/wp-admin/admin-ajax.php"};
                    if(new_source.length) {
                         jQuery.post(
                              add_source.ajaxurl,
                              {
                                  action: 'add_source',
                                  source: new_source 
                              },
                              function(response,source_id) {
                                   if(response == 'success') {
                                        $("#post_source_dropdown").append('<option></option>').val(source_id).text(new_source);
                                        $("#post_source_dropdown").find('option').each(function() {
                                             if(jQuery(this).is('selected') {
                                                  jQuery(this).attr('selected','false');
                                             } else if(jQuery(this).attr('id') == source_id) {
                                                  jQuery(this).attr('selected','true');
                                             }
                                        });
                                   } else {
                                        alert('Error adding source.');
                                   }
                              }
                         );
                    }
               });
          });
     </script>

     <table cellpadding="0" cellspacing="5" border="0">
          <tr>
               <td><label for="post_source_dropdown">Post Source</label></td>
          </tr>
          <tr>
               <td>
                   <select name="post_source_dropdown" id="post_source_dropdown">
                        <option value="">Select a Source</option>

                        <?php //get the various sources already added
                        $global wpdb;
                        $sources = $wpdb->get_results("SELECT * FROM wp_post_sources ORDER BY source_name");
                        foreach($sources as $source) {
                             if($source->id == $post_source) {
                                  $selected = ' selected';
                             } else {
                                  $selected = '';
                             }
                             echo '<option value="' . $source->id . '"' . $selected . '>' . $source->source_name . '</option>';
                        } ?>
               </td>
          </tr>
          <tr>
               <td><label for="post_source_add">Add New Source</label></td>
          </tr>
          <tr>
               <td>
                    <input type="text" name="post_source_add" id="post_source_add" value="" />
                    <br />
                    <input type="button" id="post_source_add_button" name="post_source_add_button" value="Add Source" />
               </td>
          </tr>
     </table>

<?php }

Étape 4: enregistrez la méta personnalisée 

//run this function when saving posts
add_action('save_post','save_post_source');
//save the source when the user saves the post
function save_post_source() {
     $global post;

     update_post_meta($post->ID,'post_source',$_POST['post_source_dropdown']);
}

Je vous recommande de déplacer le code JavaScript dans un fichier JS distinct que vous incluez à l'aide de l'action admin_enque_scripts que je viens d'écrire directement dans cet exemple.

Ce message présente une excellente répartition de l'utilisation d'Ajax dans un plug-in, ce que je vous recommanderais honnêtement de transformer en cela au lieu de le laisser tomber dans les fonctions. php. De cette façon, si vous souhaitez échanger des thèmes, vous n'aurez plus à vous soucier de déplacer des éléments à partir du fichier functions.php de l'ancien thème.

Étape 5: Traitez la nouvelle source via Ajax

Je vais vous laisser celui-ci pour le moment, car il est tard et que tout cela a pris plus de temps que prévu. Assurez-vous simplement de renvoyer la réponse et l'ID de la source ajoutée à la base de données.

EDIT: J'ai oublié une partie très importante, elle est décrite dans l'article que j'ai lié, mais il convient de la rappeler car il s'agit vraiment de la goupille de lynch de toute la question de la soumission d'Ajax.

//run this function when admin-ajax receives the action 'add_source'
add_action('wp_ajax_add_source','add_source_to_db');
//add the new source to the db
function add_source_to_db() {
     //get the source from the $_POST array and then add it to the db
     //create the response object to send back to the JS function
}

Maintenant, il vous suffit de renseigner la fonction add_source_to_db et vous êtes prêt.

HINT: vous voudrez utiliser l'objet global $ wpdb pour insérer la nouvelle source, puis $ wpdb-> insert_id pour obtenir l'ID de la source qui vient d'être inséré.

J'espère que ce que j'ai fourni peut vous aider à démarrer.

Si vous avez besoin d'aide avec le fichier de traitement, faites-le moi savoir et j'essaierai de vous fournir du code. Cependant, le lien concernant les plug-ins Ajax devrait contenir tout ce dont vous avez besoin pour le faire fonctionner.

1
Eric Allen