web-dev-qa-db-fra.com

Comment ajouter du code HTML à la sortie the_excerpt () & the_content ()?

Je construis un thème pour lequel je dois ajouter un lettrine à la première lettre. Ceci serait fait en entourant le caractère en question avec <span class="dropcap> et </span>. Le travail réel de création du dropcap se fera avec Dropcap.js d'Adobe.

Je voudrais faire ceci pour la sortie de the_excerpt() à coup sûr. De plus, j'aimerais également ajouter cette balise span au premier caractère de chaque élément de paragraphe frère d'un élément H3 (h3 + p).

Ma préférence est de le faire avec PHP plutôt que d'écrire un script JavaScript ou jQuery pour analyser le document et l'insérer.

Jusqu'ici, j'ai seulement testé ceci avec the_excerpt() et c'était un échec total, aboutissant à une erreur Fatal concernant l'épuisement de la mémoire allouée. Mais voici le code:

if ( ! function_exists( 'test_excerpt_dropcap' ) ) :
function test_excerpt_dropcap() {
    global $post;
    $the_excerpt = get_the_excerpt();
    if ( is_singular() && has_excerpt() ) {
        $the_excerpt = 
        preg_replace('/^(.)/', '<span class="dropcap">\1</span>', $the_excerpt);
    }
    return $the_excerpt;
}
add_filter( 'get_the_excerpt', 'test_excerpt_dropcap' );
endif;
phpthe-contentexcerpt
1
Cedon

get_the_excerpt() renvoie l'extrait, mais seulement après l'application des filtres get_the_excerpt . Cela provoque une récursion infinie, car votre gestionnaire de filtres sera appelé à une profondeur infinie.

Bien sûr, la meilleure solution est la solution css (voir la réponse de @ spacegrrl), mais si vous avez des raisons de conserver ce <span>, veuillez noter que l'extrait peut être transmis en tant que paramètre à votre gestionnaire. Ajoutez simplement un paramètre $the_excerpt et utilisez-le au lieu d'appeler get_the_excerpt().

1
geomagas

Vous pourrez peut-être faire cela avec CSS uniquement.

À condition qu'une classe vous permette de sélectionner l'extrait, vous pouvez utiliser d'autres pseudo-classes CSS pour sélectionner la première lettre du premier paragraphe.

.excerpt p:first-of-type::first-letter {
   /* dropcap styling */
}

premier-de-type , première lettre

L'utilisation d'un sélecteur de frères et sœurs peut vous donner la première balise p après chaque h3, pour la deuxième tâche:

.content h3 + p::first-letter {
   /* dropcap styling */
}

sélecteur frère/soeur adjacent

0
spacegrrl