HTML Code in WordPress umwandeln?

Gelöst doku85
(@doku85)

vor 1 Monat, 3 Wochen
Hallo Zusammen

Ich versuche in Plugin zu programmieren, welches ein RSS Feed ausliest und dieser auf der WordPress-Seite anzeigt. Per Shortcode wird das ganze eingefügt. Funktioniert alles wunderbar, nur das Problem ist, dass ich HTML-Code angezeigt bekomme. Wie kann ich das Parsen lassen? Das Plugin ist in PHP Geschrieben, es geht um folgende ausgabe:
```
    // Ausgabe der Nachrichten mit optimierter HTML-Formatierung
    $output .= '<div style="border: 1px solid #ccc; padding: 15px; margin-bottom: 15px;">';
    $output .= '<p><strong>Datum: </strong>' . htmlspecialchars($date) . '</p>';
    $output .= '<h3 style="margin-top: 0; color: #0056b3;">' . htmlspecialchars($translated_title) . '</h3>';
    $output .= '<p style="margin: 10px 0;">' . nl2br(htmlspecialchars($translated_description)) . '</p>';
    $output .= '</div>';
}

$output .= '</div>';
```
Auf der Webseite steht dann:

Tampa Convention Center Prepares Ahead of Hurricane Milton

<span class=“field field–name-title field–type-string field–label-hidden“>Tampa Convention Center Prepares Ahead of Hurricane Milton</span>
<span class=“field field–name-uid field–type-entity-reference field–label-hidden“><span>Kirstin A. </span></span>
<span class=“field field–name-created field–type-created field–label-hidden“><time datetime=“2024-10-08T11:27:26-04:00″ title=“Tuesday, October 8, 2024 – 11:27 am“ class=“datetime“>Tue, 10/08/2024 – 11:27 am</time>
</span>

<div><div class=“juicebox-parent“>

<div id=“node–157476–field-news-slideshow–rss“ class=“juicebox-container“>
<noscript>
<!– Image gallery content for non-javascript devices –>
<p class=“jb-image“>
<img src=“https://www.tampa.gov/sites/default/files/styles/large_image/public/2024-10/img_0715.jpg?itok=CIFV41So“ alt title=“Tampa Convention Center team places sandbags“ class=“img-fluid“>
<br>

Wie bringe ich es nun dazu, dass es korrekt angezeigt wird? Also so wie der HTML-Code aktuell als Text auf der Seite angezeigt wird, wäre es als reine HTMl-Datei ja korrekt.. Aber wie mache ich es, dass die Formatierung auch WordPress-Konform ist? Habe schon gesucht auf Google uvm aber wurde nicht fündig.

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)

Moderator Bego Mario Garde
(@pixolin)

vor 1 Monat, 3 Wochen
Wir kennen nicht den Code, mit dem du das programmiert hast.

Gibt es ein GitHub-Repository oder kannst du den Code auf Pastebin teilen?

Um das ein wenig nachzuvollziehen, habe ich rasch selber einen Shortcode angelegt:
```
add_shortcode( 'meinhtml', 'mein_shortcode_html' );
function mein_shortcode_html() {
	$html = '<h1>Willkommen bei <a href="de.wordpress.org">Word<span style="color:red;">Press</span></a>';
	return $html;
}
```
Veerwende ich nun in einer Seite einen Block „Shortcode“ und trage dort [meinhtml] ein …

… wird das im Frontend auch richtig gerendert:

Oft wird HTML zur Absicherung in Character Entities umgewandelt. Da wird aus <h1> zum Beispiel <h1>, was dann zwar in der Webseite als <h1> angezeigt, aber nicht gerendert wird (weil es eine Aneinanderreihung von Zeichen ist, aber kein HTML). Das kann man gut nachvollziehen, wenn du dir den Quellcode der Webseite (die wir auch nicht kennen) ansiehst. Vielleicht liegt es daran?

Ohne einen Blick auf den Code kann ich nur spekulieren.
cyrfer
(@cyrfer)

vor 1 Monat, 3 Wochen

Du benutzt htmlspecialchars() – siehe PHP-Doku.
Das wandelt Sonderzeichen so um, dass sie 1:1 angezeigt werden. Also werden Sonderzeichen inkl. der spitzen Klammern < .. > und Anführungszeichen nicht mehr als HTML-Tags interpretiert, sondern als HTML-Entitäten ausgegeben.

hupe13
(@hupe13)

vor 1 Monat, 3 Wochen

Das „Escapen“ von Ausgaben bei Plugins ist nicht trivial, siehe https://developer.wordpress.org/apis/security/escaping/. Ich würde das mit wp_kses_post parsen.

cyrfer
(@cyrfer)

vor 1 Monat, 3 Wochen

Wenn Du gar keine HTML-Tag der RSS-Quelle übernehmen willst, kannst du sie mit strip_tags( ... ) entfernen (Doku). Das entfernt allerdings auch Bilder (weil <img>-Tags), wobei die Einbindung externer Bilder ohne DSGVO-Einwilligung sowieso keine gute Idee ist.
Aus Sicherheitsgründen kann es nicht schaden, evtl. sogar htmlspecialchars(strip_tags( ... )) zu verwenden, siehe Anmerkungen/Warnungen in der Doku zu strip_tags().

Oder falls Du den Block-Editor verwendest, benutze zum Anzeigen von RSS-Feeds einfach den entsprechenden RSS-Block (siehe Doku). Falls dir die Standard-Caching-Dauer dieses Blocks von 12 Stunden zu lang ist, kannst du sie mit dem Hook wp_feed_cache_transient_lifetime (Doku) konfigurieren, z.B. auf 30 Minuten mit
add_filter( 'wp_feed_cache_transient_lifetime', function(){ return 60*30; });

Moderator Bego Mario Garde
(@pixolin)

vor 1 Monat, 3 Wochen

Hm, interessante Antworten. Ich habe aber nicht den Eindruck, dass @doku85 die Ausgabe escapen oder gar auf HTML-Tags verzichten möchte. Nur werden nach seiner Beschreibung die abgerufenen Feeds nicht gerendert, sondern als Character Entities wieder gegeben. Die Frage ist dann doch nicht, wie er die Ausgabe von Character Entities erreicht oder HTML-Tags rausnimmt, sondern wie eben die Feeds als formatierter Text gerendert werden?

Mein Hinweis „Oft wird HTML zur Absicherung in Character Entities umgewandelt.“ war als Erklärungsansatz gedacht, warum es nicht so läuft, wie @doku85 es gerne hätte.
Thread-Starter doku85
(@doku85)

vor 1 Monat, 3 Wochen
wp_kses_post kannte ich bisher noch gar nicht. Ich muss nur noch kurz schauen wo ich das am besten implementiere. Ich habe jetzt das htmlspecialchars entfernt und nun passt es soweit. Das mit wp_kses schau ich mir genauer an.

Danke für den Ansatz. 🙂
- Diese Antwort wurde geändert vor 1 Monat, 3 Wochen von doku85.
hupe13
(@hupe13)

vor 1 Monat, 3 Wochen
```
echo wp_kses_post ( $output );
```
Da schicke ich immer meine Doku für meine Shortcodes durch. Das stellt sicher, dass nur HTML verwendet wird, welches auch in den Seiten / Beiträgen gestattet ist, alles andere wird so umgeschrieben, dass es (einfach gesagt) nichts Schlimmes anstellen kann. Und das Pluginteam ist da (zu Recht) sehr pingelig.