web-dev-qa-db-ja.com

エディタ内のショートコードテキストの外観を変更する

エディタでショートコードの外観を変更することは可能ですか、それとも周囲のテキストと区別しやすくするためのものですか。

たとえば、投稿の内容がこのようなものであれば...

その起源に関する情報を提供するLorem Ipsumに関する参照サイト、およびランダムLipsumジェネレータ。その起源に関する情報を提供するLorem Ipsumに関する参照サイト、およびランダムLipsumジェネレータ。[shortcode] asfdasfd [/ shortcode]参照サイトLorem Ipsumについて、その起源についての情報を与え、またランダムLipsumジェネレータ。その起源についての情報を与えて、Lorem Ipsumについての参照サイト。そのLorem Ipsumについての参照サイトは、その起源についての情報を与え、ランダムなLipsumジェネレータと同様に。

...内部のショートコードが太字であればいいでしょう。そのため、次のように簡単に確認できます。

enter image description here 

shortcodethe-content
11
Ivan Topić

カスタムプラグインをWordPressとTinyMCEビジュアルエディタに追加することができます。フォローソースは単純に動作し、すべてのショートコードの前後に文字列を追加する例です。

使用法

ショートコードは正規表現によって検索されます。これは、さまざまなショートコードやさまざまなマークに必要な場合に関連します。スクリプトはショートコードにカスタムコンテンツを追加します。ここでは終了タグとコンテンツの前後に<b>FB-TESTを付けます。マークアップ、CSSクラスを使用して可視性を作成することもできます。重要なことは、PostProcessのスクリプトで起動されたこの投稿の保存時にコンテンツを削除することです。ここでスクリプトを実行し、関数restoreShortcodesを介してカスタムコンテンツを削除します。

しかし、現時点ではこれは単純なことであり、各要件に対して有効ではない可能性があります。たぶんあなたはinitにショートコードを保存し、この保存された変数で復元するべきです。

スクリーンショット

結果を理解するために例としてスクリーンショットを見てください。

enter image description here 

ソース

ソースはそれを使用するためにこのディレクトリ構造が必要です。

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

最初は小さなphpファイルで、これはwp環境でプラグインとしてソースを含みます。プラグイン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;
}

このphpファイルは、ビジュアルエディタのプラグインとしてJavaScriptをロードします。プラグインは管理ページにのみロードされ、文字列がpost.phpのページにのみロードされます - if ( 'post.php' === $page ) {を参照してください。

フォローソースはfb_shortcode_replace.jsという名前のjavascriptファイルです。このプラグインのプラグインディレクトリ内のディレクトリassets/js/に残してください。

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

役に立った

追加のヒント

プラグイン Raph それを表示して結果を理解するのを簡単にするためにHTMLのショートコードを変換する。たぶんそれはこの文脈でも役に立ちます。

12
bueltge