wake-up-neo.net

Wie füge ich HTML zur Ausgabe von the_excerpt () & the_content () hinzu?

Ich erstelle ein Thema, in dem ich dem ersten Buchstaben eine Initiale hinzufügen muss. Dies würde durch Umgeben des betreffenden Zeichens mit <span class="dropcap> und </span> geschehen. Die eigentliche Arbeit zur Erstellung des Dropcaps wird mit Adobes Dropcap.js erledigt.

Ich möchte dies auf jeden Fall für die Ausgabe von the_excerpt() tun. Darüber hinaus möchte ich dieses span-Tag auch dem ersten Zeichen jedes Paragraph-Elements hinzufügen, das ein gleichrangiges Element eines H3-Elements ist (h3 + p).

Ich bevorzuge es, dies mit PHP zu tun, anstatt ein JavaScript- oder jQuery-Skript zu schreiben, um das Dokument zu analysieren und einzufügen.

Bisher habe ich dies nur mit the_excerpt() getestet und es war ein völliger Fehler, der dazu führte, dass ein schwerwiegender Fehler über den zugewiesenen Speicher erschöpft war. Aber hier ist der 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;
1
Cedon

get_the_excerpt() gibt den Auszug zurück, aber nur nach dem Anwenden von get_the_excerpt-Filtern . Dies führt zu einer unendlichen Rekursion, da Ihr Filter-Handler bis zu einer unendlichen Tiefe aufgerufen wird.

Die beste Lösung ist natürlich die CSS-Lösung (siehe Antwort von @ spacegrrl), aber wenn Sie Gründe haben, diesen <span> zu behalten, beachten Sie, dass der Auszug als Parameter an Ihren Handler übergeben werden kann. Fügen Sie einfach einen $the_excerpt -Parameter hinzu und verwenden Sie diesen, anstatt get_the_excerpt() aufzurufen.

1
geomagas

Möglicherweise können Sie dies nur mit CSS tun.

Vorausgesetzt, es gibt eine Klasse, mit der Sie den Auszug auswählen können, können Sie dann weitere CSS-Pseudoklassen verwenden, um den ersten Buchstaben des ersten Absatzes auszuwählen.

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

first-of-type , Anfangsbuchstabe

Wenn Sie einen Geschwister-Selektor verwenden, erhalten Sie nach jedem h3 das erste p-Tag für die zweite Aufgabe:

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

benachbarte Geschwister Selector

0
spacegrrl