web-dev-qa-db-ja.com

クリック可能なプレースホルダ画像をWordpressエディタで作成できます(アップローダを起動する必要があります)。

実際のビジュアルエディタ領域内にユーザーがプレースホルダ画像をクリックしてアップロードダイアログを表示させたいプロジェクトに取り組んでいます。

ユーザーが自分のマウスで選択してメディア追加のアップロードをクリックする必要があるボックスを追加する独自のボタンを人々が作成するのを見ました。私にとっては、それは悪いユーザーエクスペリエンスのせいであるように思えます。したがって、私は誰かがこれを行うプラグインを見たことがあるかどうかを調べています。

http://s-plugins.wordpress.org/visual-editor-custom-buttons/assets/screenshot-4.png?rev=641514

実際に「ここに画像を挿入」をクリックしてアップロードダイアログを表示させることができるというイメージング。

3
INT

tinyMCEが更新されてAPIが変更されるため、WordPressの更新後、そのような回答はおそらく機能しなくなったり使用できなくなったりします。 - @TomJNowell

私はTomに同意しますが、それでも一般的な概念と動かない部分を説明する一般的な答えがあります。

デフォルトのコンテンツを設定するためのPHPプラグイン

まず、デフォルトのコンテンツがいくつかあります。そのためのフィルタがあります。

<?php
/* Plugin Name: (#83397) Default TinyMCE Content */

add_filter( 'default_content', 'wpse83397_add_editor_default_content' );
public function wpse83397_add_editor_default_content( $content )
{
    if ( "your_post_type" !== get_current_screen()->post_type )
        return $content;

    return sprintf(
        '<img src="%s" title="Placeholder" />', 
        plugin_dir_path( __FILE__ ).'placeholder.png'
    );
}

TinyMCE JSイベント

それからあなたは単にイベントリスナを追加する必要があります。公式文書の例。

tinymce.activeEditor.on( 'GetContent', function( e ) {
    console.log( e.content );
} );

グローバルWordPressのwpname__オブジェクト

最後に、メディアオープンダイアログアクションをコンテンツ自体に添付するだけです。 wpname__オブジェクトがあり、これはWordPressコアjsのもののほとんどを保持しています。コンソールにwpname__と入力するだけで、DOMの準備が整った後、グローバルにアクセスできるようになります。

  • バックボーン:Objectname__
  • アップローダ:function ( options )
  • ajax:Objectname__
  • 自動保存:Objectname__
  • ハートビート:Heartbeatname__
  • html:Objectname__
  • メディア:function ( attributes )
  • ショートコード:function ( options )
  • テンプレート:functionname__

ご覧のとおり、medianame__とBackbonename__もあります。 wp.media.をあなたの(例えば)Chrome devツールコンソールに押すだけで、利用可能なものを知らせるオートコンプリート機能が見えるでしょう。それに加えて、メディアライブラリの作者であるDominik Schillingは、GitHub上のWPメディアライブラリのための 素晴らしいデモのセットを持っています

2
kaiser