web-dev-qa-db-fra.com

Comment afficher les images en vedette pour toutes les publications avec certaines étiquettes de taxonomie?

J'ai créé une taxonomie de posts dans functions.php appelée 'leadership', puis étiquetée des posts avec trois libellés différents. J'ai une page d'équipe sur laquelle je veux placer trois liens (chaque slugged à une étiquette dans la taxonomie).

  • D'entreprise
  • Ventes
  • Soutien

Ainsi, lorsque l'utilisateur clique sur le mot ci-dessus, l'image sélectionnée pour chaque publication portant cette étiquette devient visible sur la page.

Donc, il y a trois éléments de base (je pense):

  1. Appel de toutes les données de poste pour l'étiquette taxonomique spécifiée
  2. Générer un lien qui appelle les images présentées pour ces publications
  3. Faire apparaître/disparaître le contenu en fonction du lien sur lequel vous avez cliqué

Alors que j'avais déjà fait les n ° 2 et 3 individuellement, ma tête nage pour essayer de comprendre comment fusionner tous les éléments.

Est-ce que quelqu'un peut me donner des indications, au-delà du codex que j'ai déjà lu? Et peut-être même un exemple de code - en particulier pour les n ° 1 et n ° 2?

Et le rêve ... J'adorerais le mettre en oeuvre sous forme de deux codes abrégés - un pour le lien et un pour l'affichage - afin que je puisse le réutiliser dans d'autres zones du site Web.

custom-taxonomypost-thumbnails
1
bulldog

Quelque chose d'assez grossier qui a besoin d'amélioration mais peut vous donner un point de départ, si j'ai bien compris vos besoins: utilisez [dr] comme marqueur de shortcode où vous le souhaitez

function my_dream_shortcode($atts, $content = null) {
  ob_start(); ?>
  <ul>
    <li class="button" onClick="get_data('corporate')">Corporate</li>
    <li class="button" onClick="get_data('sales')">Sales</li>
    <li class="button" onClick="get_data('support')">Support</li>
  </ul>
<div class="my_plugin_result"></div>
<style>
  li.button{
   list-style:none;
   padding:4px 10px; 
   background-color:cadetblue;
   margin:10px;
   float:left;
   min-width: 160px;
   text-align: center;
   cursor:pointer;
  }
  .my_plugin_result figure{
   float:left;
   padding:4px;
   background:#ccc;
}
</style>
<script>
  var myPluginAjaxUrl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
  function get_data(term) {
    jQuery.ajax({
      url: myPluginAjaxUrl,
      data: {
        action: 'get_data_for_my_shortcode',
        term: term
      }
    }).done(function (response) {
      console.log(response)
      jQuery(".my_plugin_result").html(response);
    });
  }
</script>

<?php
 return ob_get_clean();
}
add_shortcode("dr", "my_dream_shortcode");

add_action('wp_ajax_get_data_for_my_shortcode', 'get_data_for_my_shortcode');
function get_data_for_my_shortcode(){
  global $wpdb;
  $args = array(
   'post_type' => 'post',
   'tax_query' => array(
      array(
        'taxonomy' => 'leadership',
        'field' => 'slug',
        'terms' => $_REQUEST['term']
      )
    )
 );
  $response="";
  $query = new WP_Query( $args );

  while($query->have_posts() ):
    if($query->have_posts() ):
      $query->the_post();
      $response.='<figure><img src="'.get_the_post_thumbnail_url(get_the_ID(),'medium').'"/></figure>';
    endif;
  endwhile;
  echo $response;
  die();
}
3
Andrea Somovigo

Pour les futurs lecteurs, le code ci-dessus s'affichera une fois connecté , mais pas pour les utilisateurs déconnectés.

Si vous voulez que les visiteurs du site voient la sortie , vous devez ajouter:

add_action('wp_ajax_nopriv_get_data_for_my_shortcode', 'get_data_for_my_shortcode');

Il m'a fallu un certain temps pour résoudre ce problème. Merci WP Codex.

0
bulldog