Admin Editorでショートコードをレンダリングするソリューション

私は約1年前にこの質問をしましたが、私の目的を達成できるような簡単な解決策があることを願っています。だからここに行く：

私はしばしば管理エディター内でショートコードを利用しますが、これをクライアントに引き継ぐと、彼らはしばしばそれらがどのように機能するかを理解しません。

私が探しているのは、管理WYSIWYGエディター内でショートコードの関連付けられた出力を単純に自動的にレンダリングするソリューションです。

視覚的な観点から、「もっと」行が表示されるとき、またはエディター内に画像が表示されるときと同じように表示したいと思います。これにより、ユーザーには出力が表示されますが、出力のみを削除でき、レンダリングされたショートコードのコンテンツは編集できません。

実際、あなたが求めていることをするのは悪くない。これには、最初のタスクを実行するのに約1時間かかり、後続のタスクを実行するのに10分かかります。

最終的には、TinyMCEプラグインを作成します。開始するためにあなた自身で武装するべきであるものはここにあります：

1. tinymceプラグイン作成の一般的なガイド
2. WordPress Coreのコード例
3. WordPressにTinyMCEプラグインを追加するための一般的なガイド。私はこれを見つけましたが、これは十分なようです。

これで、すべてのツールが完了しました！これらのうち、最も関心のあるコードは、WPサンプルコードのこのブロックです。

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

ここでは、ギャラリーのショートコードがimgタグに置き換えられます。imgタグは、クラスがあるwp-galleryことでスタイルを取得します、ここで見つけるCSSを。

編集2016-04-06： TinyMCE 4およびWordPress 4.4のコンテンツとリンクを更新しました

これは完全な答えではなく、単なるデザインの方向性です。最善のアプローチは次のようなものだと思います。

管理者の編集投稿

保存された投稿からすべてのショートコードをリッピングし、エディターとは別にメタボックス内にレンダリングします。小さなエディターでショートコードが発生するのと同じ順序で表示されることを確認してください。

tinyMCE javascript APIで

jQuery関数を作成します。ユーザーがショートコードをクリックすると、HTMLがメタボックスからエディターにスワップされます。およびその逆。順序自体は関連付けとしては問題ありませんが、ショートコードの囲い込みについてはわかりません。しかし、素敵なID接続を設計する方法はたくさんあります。ショートコードの更新は、ajaxを使用してオンザフライで実行できます。

レンダリングされたショートコード状態を保存しない

エディタを切り替える前に、下書き、自動ドラフト、公開を保存し、API呼び出しを行って復元をトリガーします。そのため、レンダリングされたショートコード状態は保存されません。

これは実行できますが、エディターのコンテンツにアクセスする場所とタイミングを理解し、「保存」などの前にjavascriptアクションにフックするには、tinyMCE APIに精通する必要があります。

同じ編集後のページロードに複数のtinyMCEエディターが存在する場合があります。

ショートコードの動作を調べることで、復元部分を調査できます[gallery]。しかし、クリック[MY_SHORTCODE]はいくつかのjQueryトリックによって行われる必要があります。

admin_footerスクリプトで、カーソルがアクティブな場所のコンテンツにアクセスするには：

var $editor_content = $(tinymce.activeEditor.getBody());

開始方法のヒントです。

ショートコードもグラフィカルに表示して微調整する方法を探していました。そして今、ついに、まさにそれを行うチュートリアルを見つけました：https : //generatewp.com/take-shortcodes-ultimate-level/

説明を追加して、検索エンジンがそれを選択できるようにします。

ショートコード付きのシンプルなプラグインを作成し、TinyMCEエディターボタンを追加して、ショートコード属性のすべてのユーザー入力を収集するポップアップにそのショートコードを挿入します。次に、TinyMCEエディターのショートコードをプレースホルダーイメージに置き換えます。これは、WordPressのネイティブギャラリーに似ています（実際にはショートコードです）。最後に-編集を許可します。プレースホルダー画像をダブルクリックして、ショートコードとその属性の