Personnalisation d'images individuelles sur des publications

Question

J'essaie donc de personnaliser la sortie d'une seule image dans mes publications, en ajoutant des divs et des classes personnalisées. J'ai trouvé un bon tutoriel en ligne ici - https://wordpress.stackexchange.com/questions/21474/how-to-wrap-every-image-in-a-post-with-a-div

La fonction fonctionne en cela quand j'ajoute une image elle a mis son dans a. Ensuite, il va directement à l'affichage du $ html img et n'affiche pas un lien contenant le $ url comme le href. Ce n'est pas un gros problème, je peux toujours travailler avec le contenu $ html retourné.

Le problème principal que j'ai est lorsque j'ajoute un paragraphe sous une image insérée dans Wordpress, le texte de paragraphe est également enveloppé dans un.

est ici la fonction:

add_filter('image_send_to_editor', 'wp_image_wrap_init', 10, 8);  
function wp_image_wrap_init($html, $id, $caption, $title, $align, $url, $size, $alt) { 
    return ' 

    <div id="js-simple-lightbox Testing" class="cbp"> 
     <div class="cbp-item"> 
      <a href="'. $url . '" data-title="Workout Buddy<br>by Tiberiu Neamu"> 
       <div class="cbp-caption-defaultWrap">'. $html .'</div> 
       </a> 
      </div><!-- end cbp-item --> 
     </div> 
    </div>'; 


} 

est ici la sortie dans l'éditeur Wordpress WYSIWYG sur le texte:

<div id="js-simple-lightbox Testing" class="cbp"> 
<div class="cbp-item"> 
<div class="cbp-caption-defaultWrap"><a href="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.05-AM1.png"><img class="alignnone size-full wp-image-243 img-responsive" src="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.05-AM1.png" alt="Screen Shot 2015-10-28 at 1.46.05 AM" width="290" height="381" /></a></div> 
</div> 
</div> 
<div class="cbp-caption-defaultWrap"></div> 
<div class="cbp-caption-defaultWrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula magna tristique, porta diam ornare, lacinia arcu. Sed ac augue mi. In purus turpis, imperdiet eget dui id, convallis sodales velit. Etiam ante lorem, aliquam vitae neque quis, pretium bibendum nisl. Nullam pellentesque leo dui, et lobortis est ornare non. Morbi suscipit orci a tellus vehicula vehicula a a justo. Suspendisse aliquet mattis nunc,</div> 
<div class="cbp-caption-defaultWrap"></div> 
<div class="cbp-caption-defaultWrap"> 
<div id="js-simple-lightbox Testing" class="cbp"> 
<div class="cbp-item"> 
<div class="cbp-caption-defaultWrap"><a href="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.10-AM1.png"><img class="alignnone size-full wp-image-241 img-responsive" src="http://mountfairfarm-wp/wp-content/uploads/2015/10/Screen-Shot-2015-10-28-at-1.46.10-AM1.png" alt="Screen Shot 2015-10-28 at 1.46.10 AM" width="268" height="440" /></a></div> 
</div> 
<!-- end cbp-item --> 

</div> 
</div> 

Voici ce que je mets dans l'éditeur Wordpress WYSIWYG sur Visual:

S'il vous plaît laissez-moi savoir si vous avez des suggestions sur comment faire fonctionner correctement. Si vous connaissez une autre solution pour éditer des images insérées individuellement sur les messages que j'aimerais entendre. J'essaie de ne pas effectuer d'autres médias insérés tels que des galeries, donc tout ce qui filtre juste les balises img dans les messages ne sera pas utile.

MISE À JOUR

J'ai eu un div supplémentaire dans la fonction de rappel sur la fonction, mais quand je l'ai changé qu'il avait toujours la même question. Voir les images ci-dessous.

Answer 1

votre fonction a trop de divs. Utilisez ceci:

add_filter('image_send_to_editor', 'wp_image_wrap_init', 10, 8);  
function wp_image_wrap_init($html, $id, $caption, $title, $align, $url, $size, $alt) { 
    return ' 

    <div id="js-simple-lightbox Testing" class="cbp"> 
     <div class="cbp-item"> 
      <a href="'. $url . '" data-title="Workout Buddy<br>by Tiberiu Neamu"> 
       <div class="cbp-caption-defaultWrap">'. $html .'</div> 
       </a> 
      </div><!-- end cbp-item --> 
     </div>'; 


} 

Answer 2

La meilleure réponse que j'avais été d'ajouter un & nbsp dans la fonction de rappel fonction html à la fin de la balise de section. Cela a forcé le curseur hors de l'encapsuleur de section dans le WYSIWIG de Wordpress. Ce n'est pas la solution parfaite, mais cela a fonctionné.

function html5_insert_image($html, $id, $caption, $title, $alt, $align, $url) { 
$url = wp_get_attachment_url($id); 
$html5 = "<section class='js-simple-lightbox'>"; 
$html5 .= "<figure class='cbp-item'>"; 
$html5 .= "<a class='cbp-lightbox' data-title='$title' href='$url'>"; 
$html5 .= "<img class='img-responsive' src='$url' alt='$alt' width='100%' />"; 
$html5 .="</a>"; 
$html5 .= "</figure>"; 
$html5 .= "</section>&nbsp;"; 
return $html5; 
} 
add_filter('image_send_to_editor', 'html5_insert_image', 10, 9);