Ubah tampilan teks kode pendek di dalam editor

Apakah mungkin untuk mengubah tampilan kode pendek di editor atau dengan cara apa pun membuatnya lebih dapat dibedakan dari teks di sekitarnya?

Misalnya jika konten posting seperti ini ...

Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak. Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak. [Shortcode] asfdasfd [/ shortcode] Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak. Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak. Situs referensi tentang Lorem Ipsum, memberikan informasi tentang asal-usulnya, serta generator Lipsum acak.

... alangkah baiknya jika shortcode di dalamnya tebal sehingga dapat dengan mudah dilihat seperti ini:

Anda dapat menambahkan plugin khusus, ke WordPress dan juga editor visual TinyMCE. Sumber follow adalah contoh yang berfungsi sederhana dan menambahkan string sebelum dan sesudah semua kode pendek.

Pemakaian

Kode pendek akan ditemukan melalui regex, relevan jika Anda memerlukannya untuk berbagai kode pendek dan tanda berbeda untuk ini. Script menambahkan konten khusus ke kode pendek, di sini <b>FB-TESTsebelum dan sesudah tag penutup dan konten. Anda juga dapat menggunakan markup, kelas css untuk membuat visibilitas. Yang penting adalah bahwa Anda menghapus konten ini pada save post, diaktifkan pada script on PostProcess. Di sini jalankan skrip dan hapus konten khusus melalui fungsi restoreShortcodes.

Tapi, saat ini sederhana, mungkin tidak berlaku untuk setiap persyaratan. Mungkin Anda harus menyimpan kode pendek di init dan mengembalikan dengan variabel yang disimpan ini.

Tangkapan layar

Lihat tangkapan layar sebagai contoh untuk memahami hasilnya.

Sumber

Sumber membutuhkan struktur direktori ini untuk menggunakannya:

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

Pada awalnya file php kecil, yang menyertakan sumber sebagai plugin di lingkungan wp. Biarkan di direktori utama plugin 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;
}

File php ini memuat javascript sebagai plugin di editor visual. Plugin akan memuat hanya pada halaman admin, hanya halaman dengan string post.php- lihat if ( 'post.php' === $page ) {.

Sumber tindak adalah file javascript, bernama fb_shortcode_replace.js. Biarkan di direktori assets/js/, di dalam direktori plugin dari plugin ini.

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 );
        }
    } );
} );

Bermanfaat

• Komentar atas pertanyaan Anda.
• https://core.trac.wordpress.org/browser/tags/4.4.2/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

Petunjuk tambahan

Plugin Raph mengonversi shortcode dalam html untuk melihatnya dan menyederhanakan untuk memahami hasilnya. Mungkin ini juga membantu dalam konteks ini.