web-dev-qa-db-ja.com

選択更新を使用せずにワードプレスに編集ショートカットアイコンを追加する方法

テーマを開発していますが、選択的に更新しなくてもビジュアル編集のショートカットを追加できるのではと思いますか。

$wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';

$wp_customize->selective_refresh->add_partial( 'blogname', array(
    'selector' => '.site-title a',
    'render_callback' => 'twentyfifteen_customize_partial_blogname',
) );

好きですか

$wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';

$wp_customize->add_partial( 'blogname', array(
    'selector' => '.site-title a',
    'render_callback' => 'twentyfifteen_customize_partial_blogname',
) );

実際にはうまく機能して望みの結果が得られます。しかし私は私のフレームワークとしてKirkiを使っていますが、それができない理由がいくつかあります。私はpostMessageで私自身のjavascript関数を使いたいのですが、デフォルトのセレクティブリフレッシュを使いたくはありません。ここでセレクタータグを実装することはできません。

これが私のコードです：

Kirki::add_field( 'theme_config', array(
    'type'     => 'text',
    'settings' => 'about_us_video_setting',
    'label'    => __( 'Video Link', 'rst' ),
    'section'  => 'about_us_section',
    'default'  => esc_attr__( 'youtube.com', 'rst' ),
    'transport' => 'postMessage',
    'partial_refresh' => array( 
    'about_us_video_setting' => array( 
        'selector' => '#youtube-video', 
        'render_callback' => 'show_video', 
    ) ),
    'active_callback'    => array(
        array(
            'setting'  => 'is_front_page',
            'operator' => '==',
            'value'    => true,
        ),
    ),

) );

欲しいのは

Kirki::add_field( 'theme_config', array(
    'type'     => 'text',
    'settings' => 'about_us_video_setting',
    'label'    => __( 'Video Link', 'rst' ),
    'section'  => 'about_us_section',
    'default'  => esc_attr__( 'youtube.com', 'rst' ),
    'transport' => 'postMessage',
     'selector' => '#youtube-video',        
    'active_callback'    => array(
        array(
            'setting'  => 'is_front_page',
            'operator' => '==',
            'value'    => true,
        ),
    ),

) );

これは..私がpostMessageとしてtransportを与えたとしても、それがしている私自身のjavascriptを使うのではなく、ただ単にデフォルトの更新であるのです。

( function( $ ) {
// Change the previewed URL to the selected page when changing the page_for_posts.
wp.customize( 'about_us_video_setting', function( setting ) {
    setting.bind( function( url ) {
        $('.embed-responsive-item').attr('src',url);
    });
});

} )( jQuery );

私はドキュメンテーションを見つけられなかったのでちょうど明確にしたいと思う。編集ショートカットを表示するために選択的リフレッシュを使用するのは基準ですか？

編集のショートカットから私はこの鉛筆のアイコンを意味する enter image description here 編集する場所に移動します。

theme-customizericon
1
Taj Khan

__return_false を使用してこれを行う簡単な方法があります。欠点は、パーシャルをチェックしてから "false"を返すため、フルリフレッシュが実行されるため、ダブルリフレッシュが発生することです。 「リアルタイム」プレビューを表示するためだけにJavaScriptを使用している場合、これは問題となります。その場合は、Weston Ruterのソリューションを使用する必要があります。

実際にpostMessageプレビューを使用しておらず、ショートカットを表示するだけの場合は、とにかくフルリフレッシュが必要なので大したことはありません。

Javascriptだけを使っている人のために、これらの部分編集ショートカットが組み込まれていないのは、私にはわかりません。

キルキでは：

'transport' => 'postMessage',    
'partial_refresh' => array(
            'about_us_video_setting' => array(
                'selector' => '#youtube-video',
                'render_callback' => '__return_false'
            )
        )

標準：

$wp_customize->get_setting( 'about_us_video_setting' )->transport   = 'postMessage';

$wp_customize->selective_refresh->add_partial( 'about_us_video_setting', array(
            'selector' => '#youtube-video',
            'render_callback' => '__return_false',
        ) );
1
Alison

できることは、JavaScriptでwp.customize.selectiveRefresh.Partialを拡張して、部分更新要求を行うためのAjax呼び出しを行う代わりに、JSベースのライブプレビューを適用するrefresh動作をオーバーライドするカスタム部分型を作成することです。

ウィジェットサイドバーのメタデータのカスタマイズ plugin、特に sidebar_meta_background_color 部分タイプの例を参照できます。

そのため、このsidebar_meta_background_color型でパーシャルを登録すると、オーバーライドされたrefreshメソッドでこのJSサブクラスを使用します。

0
Weston Ruter