web-dev-qa-db-fra.com

Shortcode pour le contenu de publication CPT dans une page

J'utilise le thème Wiz avec un plugin que je code. Le thème Wiz est fourni avec Visual Composer et des options de thème pour les pages (en-tête, barre latérale, pied de page, etc.). Cependant, ces options ne sont disponibles que pour les pages, pas pour les publications. Mon client doit créer des publications, pas des pages, car il utilise un type de publication personnalisé que j'ai codé dans le plug-in. J'ai ensuite créé une publication avec Visual Composer, que mon client peut cloner et modifier dans une nouvelle publication, ainsi qu'un shortcode [dw_evento] censé insérer le contenu d'une publication dans une page. Le code PHP du shortcode est:

public static function dw_evento()
{
  global $wp_filter, $merged_filters, $wp_current_filter;
  global $post;

  $post_id = $_GET['post_id'];
  if (is_array($atts))
    extract($atts, EXTR_OVERWRITE);
  if (empty($post_id))
    return;
  $save_wp_filter = $wp_filter;
  $save_merged_filters = $merged_filters;
  $save_wp_current_filter = $wp_current_filter;
  $post = get_post($post_id);
  setup_postdata($post);
  $content = $post->post_content;
  $content = apply_filters('the_content', $content);        
  //$content = do_shortcode($content);
  $content = str_replace(']]>', ']]>', $content);

  $wp_filter = $save_wp_filter;
  $merged_filters = $save_merged_filters;
  $wp_current_filter = $save_wp_current_filter;
  return $content;
}

Ensuite, j'ai créé une page contenant uniquement ce shortcode afin de pouvoir définir les options de thème (en-tête, barre latérale, pied de page) pour cette page. Enfin, mon plugin affiche l’archive de publication et relie chaque élément de la liste à la page contenant uniquement le shortcode, en passant le post_id dans $ _GET.

Le problème est que le contenu de la publication ne s'affiche pas de la même manière lorsque vous la parcourez directement avec son lien permanent, et lorsque vous parcourez la page correspondante avec mon shortcode.

Laissez seul ce qui se trouve autour du contenu, car cela dépend des options manquantes pour les publications, vous pouvez voir ici la différence de contenu entre publication et page:

Voici le message parcouru par son lien permanent: http://www.miglioredirazzareport.eu/evento_type/internazionale-di-bari-2/enter image description here

Et voici le même message rendu dans la page avec le shortcode [dw_evento]: http://www.miglioredirazzareport.eu/evento/?post_id=3753page

Comme vous pouvez le constater, le rendu de la page est différent, notamment les lignes horizontales. Ce fragment du code HTML généré est identique dans les deux documents, par exemple. pour le trophée c'est:

<div class="uvc-heading-spacer line_with_icon" style="topheight:32px;">
  <div class="ult-just-icon-wrapper ">
    <div class="align-icon" style="text-align:center;">
      <div class="aio-icon circle "  style="color:#f67207;font-size:32px;display:inline-block;">
        <i class="Defaults-trophy"></i>
      </div>
    </div>
  </div>
</div>

Cependant, les règles CSS appliquées diffèrent un peu. En regardant quelles règles CSS sont appliquées dans la page (Inspect dans Chrome), je vois un ":: après" dans l'article qui manque dans la page:

<div class="uvc-heading-spacer line_with_icon" style="topheight:32px;">
  <div class="ult-just-icon-wrapper ">
    <div class="align-icon" style="text-align:center;">
      <div class="aio-icon circle "  style="color:#f67207;font-size:32px;display:inline-block;">
        <i class="Defaults-trophy"></i>
      </div>
    </div>
  </div>
  ::after
</div>

et que ":: after" applique les classes CSS pertinentes et fait apparaître les lignes horizontales:

#ultimate-heading-447156b22ea4f2bf9 .uvc-heading-spacer.line_with_icon:before, #ultimate-heading-447156b22ea4f2bf9 .uvc-heading-spacer.line_with_icon:after {
    width: 182px;
    border-style: solid;
    border-color: #ccc;
    border-bottom-width: 1px;
}

Maintenant, le problème provient d'un fichier CSS qui n'est pas inclus lorsque Wordpress génère la page. Vous pouvez voir dans la source du document que la section de la page relie tous les fichiers CSS sauf un, à savoir celui-ci:

<link rel='stylesheet' id='ultimate-style-min-css'  href='http://www.miglioredirazzareport.eu/wp-content/plugins/Ultimate_VC_Addons/assets/min-css/ultimate.min.css?ver=3.13.7' type='text/css' media='all' />

qui est exactement le fichier CSS qui contient la classe "uvc-heading-spacer.line_with_icon: after" indiquée ci-dessus.

Maintenant, je suis sûr de pouvoir ajouter ce fichier moi-même en accrochant l'action "wp-head", mais cela rendrait mon plugin artificiellement dépendant du plugin Ultimate VC Addons, qui n'a rien à voir avec le mien. .

Pourquoi WordPress n'inclut-il pas cette feuille de style dans ma page?

1
Lucio Crusca

J'ai trouvé un terme qui "résout" le problème, mais je ne l'accepterai pas comme une réponse tant que je ne suis pas sûr que ce soit la seule solution (ce qui, je suppose, ne l'est pas).

Je peux dire que WP n'inclut pas le CSS ultime VC Addons (UVCA) car ma page ne contient pas de shortcode UVCA, ou du moins le contenu de la page initiale ne 't. Les codes courts dans WP ne sont pas récursifs. Si un shortcode génère une sortie contenant d'autres shortcodes, il est de la responsabilité du programmeur de gérer ces shortcodes. J'appelle en fait

$content = apply_filters('the_content', $content); 

mais cela ne suffit pas pour inclure le CSS requis, car l'action wp-head a déjà été exécutée à ce moment-là. Je suppose que dans l'action wp-head, que ce soit dans le code WP ou dans le code UVCA, il doit y avoir un extrait tel que:

foreach ($registered_shortcodes as $shortcode)
  if (strpos($page_content, $shortcode) !== FALSE)
    output_link_tags(get_dependencies($shortcode));

(attention, c'est presque du pseudo-code et les identifiants sont constitués). Donc, forcer un shortcode UVCA à être présent dans le contenu de la page dès le début, fait que WP (ou UVCA) inclue le CSS requis sans que mon code dépende du plugin UVCA.

J'ai "résolu" ceci en éditant ma page avec mon shortcode [dw_elenco] et en ajoutant ceci:

<div style="display: none;">[ultimate_heading main_heading="x"][/ultimate_heading]</div>

Cela ne peut pas être la meilleure solution autour et cela reflète certainement un bug. Le bogue peut être dans mon code (probable), dans le code UVCA (également probable) ou dans le code WP (improbable). De plus la solution n'est pas générique. Si, un jour, mon client ajoute un autre plug-in avec d'autres codes courts nécessitant un code CSS personnalisé, cette solution ne fonctionnera pas.

Cependant, c'est la meilleure solution que j'ai trouvée jusqu'à présent.

EDIT: Je peux maintenant accepter ma réponse car, bien que n'étant pas la seule solution, il n'y a pas de solution propre à ce problème. Plus de détails dans mon autre question plus générale ici .

0
Lucio Crusca