Ändern Sie das Erscheinungsbild des Shortcode-Textes im Editor

Ist es möglich, das Erscheinungsbild von Shortcodes im Editor zu ändern oder sie auf irgendeine Weise besser von umgebendem Text zu unterscheiden?

Zum Beispiel, wenn der Inhalt eines Beitrags so ist ...

Referenzseite über Lorem Ipsum mit Informationen zu seinen Ursprüngen sowie einem zufälligen Lipsumgenerator. Referenzseite über Lorem Ipsum mit Informationen zu seinen Ursprüngen sowie einem zufälligen Lipsumgenerator. [Shortcode] asfdasfd [/ shortcode] Referenzseite über Lorem Ipsum, Informationen zu seinen Ursprüngen sowie einen zufälligen Lipsum-Generator. Referenzseite über Lorem Ipsum, Informationen zu seinen Ursprüngen sowie einen zufälligen Lipsum-Generator. Referenzseite über Lorem Ipsum, Informationen zu seinen Ursprüngen, sowie einen zufälligen Lipsum-Generator.

... es wäre schön, wenn der Shortcode fett wäre, damit er leicht so zu sehen ist:

Sie können WordPress und dem visuellen Editor von TinyMCE ein benutzerdefiniertes Plugin hinzufügen. Die folgende Quelle ist ein Beispiel, das einfach funktioniert und vor und nach dem Shortcode eine Zeichenfolge hinzufügt.

Verwendung

Der Shortcode wird über Regex gefunden, relevant, wenn Sie ihn für verschiedene Shortcodes und verschiedene Markierungen benötigen. Das Skript fügt dem Shortcode benutzerdefinierten Inhalt hinzu, hier <b>FB-TESTvor und nach dem schließenden Tag und dem Inhalt. Sie können auch Markup- und CSS-Klassen verwenden, um eine Sichtbarkeit zu erstellen. Wichtig ist, dass Sie diesen Inhalt beim Speichern von Posts entfernen, die im Skript am ausgelöst wurden PostProcess. Führen Sie hier das Skript aus und entfernen Sie den benutzerdefinierten Inhalt über die Funktion restoreShortcodes.

Derzeit ist dies jedoch einfach und möglicherweise nicht für jede Anforderung gültig. Vielleicht sollten Sie den Shortcode auf init speichern und mit dieser gespeicherten Variablen wiederherstellen.

Bildschirmfoto

Sehen Sie sich den Screenshot als Beispiel an, um das Ergebnis zu verstehen.

Quelle

Die Quelle benötigt diese Verzeichnisstruktur, um sie zu verwenden:

-- shortcode-replace
 |--php file
 |--assets
   |-- js
     |-- js file

Zunächst eine kleine PHP-Datei, die die Quelle als Plugin in der WP-Umgebung enthält. Belassen Sie es im Hauptverzeichnis des Plugins shortcode-replace.

<?php # -*- coding: utf-8 -*-

/**
 * Plugin Name:     Shortcode Replace
 * Plugin URI:      
 * Description:     
 * Version:         0.0.1
 * Text Domain:     
 * Domain Path:     /languages
 * License:         MIT
 * License URI:
 */

namespace FbShortcodeReplace;

if ( ! function_exists( 'add_action' ) ) {
    exit();
}

if ( ! is_admin() ) {
    return;
}

add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\initialize' );
function initialize( $page ) {

    if ( 'post.php' === $page ) {
        add_filter( 'mce_external_plugins', __NAMESPACE__ . '\add_tinymce_plugin' );
    }
}

function add_tinymce_plugin( $plugins ) {

    if ( ! is_array( $plugins ) ) {
        $plugins = array();
    }

    $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '.dev' : '';
    $url     = plugins_url( '/assets/js/fb_shortcode_replace.js', __FILE__ );

    $plugins = array_merge( $plugins, array( 'fb_shortcode_replace' => $url ) );
    return $plugins;
}

Diese PHP-Datei lädt ein Javascript als Plugin in den visuellen Editor. Das Plugin wird nur auf Administrationsseiten geladen, nur auf Seiten mit Zeichenfolge post.php- siehe if ( 'post.php' === $page ) {.

Die folgende Quelle ist die Javascript-Datei mit dem Namen fb_shortcode_replace.js. Belassen Sie es im Verzeichnis assets/js/, im Plugin-Verzeichnis dieses Plugins.

tinymce.PluginManager.add( 'fb_shortcode_replace', function( editor ) {

    var shortcode = /\[.+\]/g;
    var additional_before = '<b>FB-TEST';
    var additional_after = 'FB-TEST</b>';

    function ifShortcode( content ) {

        return content.search( /\[.+\]/ ) !== -1;
    }

    function replaceShortcodes( content ) {

        return content.replace( shortcode, function( match ) {
            return html( match );
        } );
    }

    function restoreShortcodes( content ) {

        content = content.replace( additional_before, '' );
        content = content.replace( additional_after, '' );
        return content;
    }

    function html( data ) {

        console.log( data );
        return additional_before + data + additional_after;
    }

    editor.on( 'BeforeSetContent', function( event ) {

        // No shortcodes in content, return.
        if ( ! ifShortcode( event.content ) ) {
            return;
        }

        event.content = replaceShortcodes( event.content );
    } );

    editor.on( 'PostProcess', function( event ) {

        if ( event.get ) {
            event.content = restoreShortcodes( event.content );
        }
    } );
} );

Hilfreich

• Die Kommentare zu Ihren Fragen.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Zusätzlicher Hinweis

Das Plugin Raph konvertiert Shortcodes in HTML, um sie anzuzeigen und das Ergebnis zu vereinfachen. Vielleicht ist es auch in diesem Zusammenhang hilfreich.