• Gelöst Anonymous User 20597857

    (@anonymized-20597857)


    Zugegeben, ich habe mit API’s allgemein wenig Erfahrung.

    In WP habe ich das überhaupt noch nie gemacht, doch nun wollte ich das hinbekommen.
    Da gibt es eh 999 Plugins für, das geht sicher einfacher als es zu Fuß mit JS abzugreifen, Ausgaben zu steuern.
    Ne, ich fand 1 Plugin namens „JSON Content Importer„.

    Auch Google Suche usw. bringt 99,9% Ergebnisse bez. „WP REST API“. Aber ich sollte ja externe Daten ins WP holen und nicht umgekehrt.

    Mit dem „JSON Content Importer“ habe ich es dann aber geschafft, diese API Daten abzuholen und perfekt darzustellen. Die ist auch deutsch dokumentiert usw.

    Aber:
    WP verhunzt den Code, sobald man auf die visuelle Ansicht (Classic Editor!) umstellt – wie kann man das verhindern?

    So wird aus:

    <ul>
    {subloop-array:ergebnisse:-1}
    <li>{INHALT:html} <a href="{WEBLINK}" target="_blank" rel="noopener">{TITEL}</a></li>
    {/subloop-array:ergebnisse}
    </ul>
    [/jsoncontentimporter]

    nach dem umschalten, speichern

    <ul>
     	<li style="list-style-type: none;">
    <ul>{subloop-array:ergebnisse:-1}
     	<li>{INHALT:html} <a href="{WEBLINK}" target="_blank" rel="noopener">{TITEL}</a></li>
    </ul>
    </li>
    </ul>
    {/subloop-array:ergebnisse}
    
    [/jsoncontentimporter]

    Das wäre mal das erste Problem.
    Anm.: Ich habe alle Rechte auf der Site, also auch „Ungefiltertes HTML“.

    Es gäbe noch ein weiteres im Zusammenhang mit dem Handling solcher API’s: Wie man es dem normalen Autor ermöglicht, diese Codes selbst ohne „Programmierung“ einzugeben. Doch das frage ich besser extra?

Ansicht von 8 Antworten – 1 bis 8 (von insgesamt 8)
  • Naja, {subloop-array:ergebnisse:-1} ist kein HTML, kein CSS und ganz bestimmt kein JavaScript. Da die Zeile in einer Liste mit <ul>-Tag steht, wird das dann vermutlich als verhunztes Listenelement interpretiert. Hast du das mit den Entwickler-Tools geprüft oder dir den Quellcode angesehen?
    In meiner Testumgebung konnte ich den Code als „Custom HTML“ (deutsch: „Individuelles HTML“) einfügen und dabei wird nichts im Quellcode geändert.

    Mit API hat das alles erst einmal herzlich wenig zu tun.

    Wenn du JavaScript einbinden möchtest, kannst du dazu ein kleines Plugin schreiben. Hört sich dramatisch an, ist aber mit wenigen Zeilen Code erledigt:

    1. Du erstellst auf deinem Computer ein Verzeichnis mit dem Namen des Plugins (hier nenne ich es mein-plugin).
    2. in dem Verzeichnis erstellst du eine Datei mein-plugin.php (gerne wieder mit einem sinnvollerem Namen).
    3. In mein-plugin.php fügst du einen Plugin-Header ein. Mit dem erkennt WordPress die Datei als Plugin und liest den Namen des Plugins, den Autor und die Beschreibung ein:
    <?php
    /**
     * Plugin Name: Mein Plugin // ändern :P
     * Author:      kurapika
     * Description: Macht tolle Sachen // auch ändern :D
     */
    defined( ABSPATH ) || exit;
    1. Du komprimierst das Verzeichnis mein-plugin als mein-plugin.zip und installierst es auf der Website. (eigentlich sollte es hier mit 4. weitergehen, aber die Foren-Software erlaubt das nicht …)
    2. Nun kannst du das Plugin per Plugins > Plugin-Editor beliebig bearbeiten.
      (Solltest du ein block-basiertes Theme verwenden, wird der Editor nicht mehr angezeigt. Um doch an den Plugin-Editor zu kommen, habe ich ein kleines Plugin erstellt, dass du hier herunterladen kannst: https://github.com/pixolin/menu-theme-plugin-editor/archive/refs/heads/main.zip)
      Alternativ kannst du natürlich auch das Plugin zuerst fertigstellen, bevor du das Verzeichnis komprimierst und das Plugin dann hochlädst.
    3. Möchtest du eine JavaScript-Datei einbinden, kopierst du sie in ein Unterverzeichnis des Plugins, z.B. mein-plugin/js und verwendest in mein-plugin.php folgende Zeile:
    function mein_javascript() {
      wp_enqueue_script( 'mein_js', plugins_url( 'js/meine-javascript-datei.js', __FILE__ ) );
    }
    add_action('wp_enqueue_scripts', 'mein_javascript');

    Hier wird eine Datei meine-javascript-datei.js eingebunden, in die du erst einmal nur die Zeile console.log('Datei wird richtig eingebunden'); einfügst.

    1. Hast du das Plugin installiert und aktiviert, prüfts du über die Entwickler-Tools deines Browsers, ob die Meldung „Datei wird richtig eingebunden“ in der Konsole erscheint. Falls nicht, stimmt mit deinem Code etwas nicht – vor allem Verzeichnisname und Dateiname auf Tippfehler prüfen.
    2. Als letzten Schritt kannst du dann einen JavaScript-Code, den du im Web gefunden hast, statt der Zeile console.log(…); einfügen. Prüfe dann in den Entwickler-Tools, ob die JavaScript-Funktion richtig eingebunden wird.

    Programmierfehler sind nahezu unvermeidlich. Du solltest bei sowas zumindest FTP-Zugang haben (oder in einer lokalen WordPress-Installation z.B. mit Local-WP arbeiten), um bei fatalen Programm-Fehlern das Plugin durch Umbenennen des Plugin-Verzeichnisses abwürgen zu können.

    Ist das ein Shortcode-Block mit [jsoncontentimporter]....[/jsoncontentimporter]? Damit mir der (Standard)Editor nicht dazwischen funkt, habe ich diesen Code im Plugin:

    add_filter('render_block', function ($blockContent, $block) {
        if ($block['blockName'] === 'core/shortcode') {
          $shortcodes = array('shortcode1','shortcode2','shortcode3');
          $match = (str_replace($shortcodes, '', $block['innerHTML']) != $block['innerHTML']);
          if ($match) {
            return htmlspecialchars_decode($block['innerHTML']);
          }
        }
        return $blockContent;
    }, 10, 2);
    Thread-Starter Anonymous User 20597857

    (@anonymized-20597857)

    @pixolin
    Das muss ich noch dran feilen, um dieses Listenchaos wegzukriegen. Auch ohne das „-“ werden eine Menge Listen ineinander verschachtelt.
    Ja, auch in den Tools schauts grausig aus.
    Wahrscheinlich mache ich irgendwas falsch und WP meint es korrigieren zu müssen.

    In meiner Testumgebung konnte ich den Code als „Custom HTML“ (deutsch: „Individuelles HTML“) einfügen und dabei wird nichts im Quellcode geändert.

    Hm. „Individuelles HTML“ habe ich nur in den Widgets, aber im Classic Editor nicht. Und da funkt es, weil das nichts verändert.

    Wenn du JavaScript einbinden möchtest, kannst du dazu ein kleines Plugin schreiben.

    Daran dachte ich auch schon und ja, es ist einfacher als man glaubt. Und danke für die Anleitung dazu. Da ich das nur selten versuche, hätte ich sicher wieder hier gesucht – wie war das noch mal mit den Eigenbau Plugins … Danke.
    Anm.: Description: Macht tolle Sachen: stimmt eh!
    Und ja, das passiert alles auf Staging bzw. am XAMPP.

    Nur habe ich eine andere, einfachere Lösung gefunden:

    Habe ja nebenbei damit experimentiert, den Code mittels des Plugins „Post Snippets“ einzufügen. Hat geklappt.
    (Das hat noch den großen Vorteil, dass ich jedem Autor Variablen geben kann, die der einfach ausfüllt und die dann etwa die ID des gewünschten, abzugreifenden Inhalts einbaut.)

    Theoretisch könnte man mit „Post Snippets“ auch störrischen Listen-Code umgehen, würde ich den Code als Shortcode einfügen lassen. Doch damit gehen dann diese Variablen nicht.

    So, werde dann weiter versuchen, einen Listen Code zu machen, den WP auch mag.

    Thread-Starter Anonymous User 20597857

    (@anonymized-20597857)

    @hupe13

    Ja, wie gesagt, „JSON Content Importer„ ist das einzige Plugin, dass ich zum Thema fand

    Damit mir der (Standard)Editor nicht dazwischen funkt, habe ich diesen Code im Plugin:

    Danke, das teste ich heute noch durch!

    Aber wo tu ich den Code hin? In die functions.php?

    Aber wo tu ich den Code hin? In die functions.php?

    Ja. Oder du hast ein Plugin, wo du das konfigurieren kannst, z.B. WPCode. Und array('shortcode1','shortcode2','shortcode3') anpassen.

    Thread-Starter Anonymous User 20597857

    (@anonymized-20597857)

    Also, @hupe13, ich habs mit deinem Code nicht hinbekommen, es bleibt alles beim alten.
    Kann aber auch so allein nicht funken, denn es ist ja nicht nur Shortcode, sondern mit HTML (und {apicodes} )vermischt.

    Und das Problem beginnt ja schon früher:
    „Post Snippets“ macht nach dem einfügen des Snippets auch pro Zeilenumbruch im Snippetcode ein <br> in den Beitrag/Seite.
    Daher? passiert folgendes im Ausgabe-Quelltext:
    Unter jedem Listenpunkt fügt sich eine Absatz ein!
    Schreibt man das Snippet in einer Wurst, ist das <br> (im Code) weg.
    Hilft aber nichts: Die Absätze im Ausgabe-Quelltext bleiben!

    Das alles ist auch so, wenn man nicht auf Visuell switcht.

    Doch sobald die WP HTML „Korrektur“ zuschlägt, also nach dem Switch auf den Tab Visuell ist das Chaos perfekt.

    All das passiert aber nur bei Listen oder sonstigem, was man oberhalb und unterhalb der {apicodes} geteilt notieren muss, weil es die API so braucht.
    Ohne die API Sachen passt alles, egal in welcher Ansicht.

    Scheinbar wird die WP Korrektur im Classic Editor wirklich nur durch die {apicodes} so irritiert, dass alles kaputt ist.
    Ergo sollte man eine Möglichkeit finden, diese Korrektur generell abzuschalten.

    Ein jeder echter Shortcode, egal wie viele Verschachtelungen und API Sachen drin sind, wird ja ohnehin sauber ausgegeben.
    Nur verliere ich dann den Komfort der Variablen-Eingabe für die Autoren …

    Thread-Starter Anonymous User 20597857

    (@anonymized-20597857)

    Fazit nach vielen Stunden, Codes, Plugins: Die WP Code Autoformatierung ist einfach nicht auszutricksen …
    Schade, damit fällt die ansonsten perfekte API Anbindung weg …

    Gute Nacht!

    Thread-Starter Anonymous User 20597857

    (@anonymized-20597857)

    Moin!
    WP’s Classic Editor, also der TinyMCE lässt sich von irgendwelchen WP internen Formatierungsregel beeinflussen. Dies wirkt sich vor allem bei den Listen aus.

    Bei Listen habe ich allgemein, (also ohne irgendwelche exotischen {Anweisungen} oder ohne etwas zwischen <ul> und <li> zu platzieren) einige echt seltsame Verhaltensweisen bemerkt.
    Habe das dokumentiert, will aber keinen langweilen.
    Nur eine Anekdote: Es kommt sogar darauf an, was man innerhalb von <li>notiert</li>. Bestimmte Zeichen zerlegen alles nach dem Switch von Text zu Visuell …

    Lösung: Somit musste ich statt der Listen eben Divs nehmen, geht auch. Der Div Suppe ist es wurst, was man alles reinschmeißt, es läuft perfekt!

Ansicht von 8 Antworten – 1 bis 8 (von insgesamt 8)
  • Das Thema „Editor Problem bei API Code“ ist für neue Antworten geschlossen.