web-dev-qa-db-ja.com

アドミンエディタでショートコードをレンダリングするためのソリューション

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

私はアドミンエディタ内でショートコードを利用することがよくありますが、これをクライアントに引き渡すとき、彼らは彼らがどのように動作するのか理解していないことがよくあります。

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

視覚的には、 "more"行が表示されたときやエディタ内に画像が表示されたときと同じように表示します。これにより、ユーザーには出力が表示されますが、削除することしかできず、レンダリングされたショートコードの内容を編集することはできないということを意味します。

functionseditorshortcode
19
NetConstructor.com

あなたが求めていることをすることは実際にはそれほど悪くない。これはあなたの最初のものをするのに約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のコンテンツとリンクを更新

19
Matthew Boynes

これは完全な答えではなく、単なる設計上の指示です。私は最善のアプローチはこのようなものだと思います：

管理編集投稿

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

tinyMCE JavaScript APIの場合

ユーザーがショートコードをクリックすると、jQuery関数が作成され、HTMLがメタボックスからエディターに入れ替わります。およびその逆。順序自体は関連としては問題ないはずですが、Imはショートコードを囲むことについては保証しません。しかし、Nice ID接続を設計する方法はたくさんあります。ショートコードの更新はajaxを使ってその場で行うことができます。

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

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

これは可能ですが、tinyMCE APIに慣れて、いつどこでエディタのコンテンツにアクセスするかを理解し、 'save'などの前にJavaScriptアクションにフックする必要があります。

同じ編集投稿ページに複数のtinyMCEエディタが存在する可能性があります。

restore部分 は、[gallery] shortcode beaviourを見ることで調べることができます。しかし[MY_SHORTCODE]のクリックはいくつかのjQueryトリックによって行われなければなりません。

admin_footerスクリプトで、カーソルがアクティブな場所の内容にアクセスします。

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

始める方法のヒントです。

0
Jonas Lundman

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

Screenshot 

検索エンジンがそれを拾うように説明を追加します。

ショートコードを使用して簡単なプラグインを作成します。次に、ショートコード属性のユーザー入力をすべて収集するポップアップを通じて、そのショートコードを挿入するためのTinyMCEエディタボタンを追加します。それから、TinyMCEエディタのショートコードを、WordPressのネイティブギャラリーのようなプレースホルダの画像（実際にはショートコードです）に置き換え、最後に編集を許可します。プレースホルダ画像をダブルクリックして、ショートコードとその属性を確認します。

0
Marc Chéhab