web-dev-qa-db-ja.com

新しいTheme Customizer APIで、前面から管理パネルに値を送信する方法

私は新しいTheme Customizer API、特にJavaScriptのAPIを少し掘り下げています。私は私自身のカスタムパラメータを追加することに成功しました、そして私はプレビューにライブでそれらのパラメータを更新するためのjavascript部分も持っています。

ただし、もう少し詳しく説明します。背景画像上の絶対位置にポイントを配置し、その位置をデータベースに記録する必要があります。これがスクリーンショットです。 enter image description here 私はjQueryのドラッグ可能なプラグインのおかげでポイントを動かすことができますが、私は得られたポジションをカスタマイザに送り返す方法がわかりません。

これが私のコードです。

functions.php：

add_action( 'customize_register', 'minisites_customize_register' );
function minisites_customize_register($wp_customize){
    // gestion du placement des points
    class Minisites_Customize_Page_Control extends WP_Customize_Control {

        public function render_content() {
            ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                Points position
                <input <?php $this->link(); ?> value="<?php echo $this->value()?>">
            </label>
            <?php
        }
    }
    $wp_customize->add_setting( 'points', array(
        'transport' => 'postMessage'
    ) );
    $wp_customize->add_control( new Minisites_Customize_Page_Control( $wp_customize, 'points', array(
        'label'      => __( 'Lier les pages', 'minisites' ),
        'section'    => 'background_image',
        'settings'   => 'points',
    ) ) );

}

customize-theme.js：

jQuery( function( $ ) {

    var points;
    wp.customize( 'points', function( value ) {
        points = value;
        value.bind( function( newval ) {
            // this code is called when the value change
            console.log('position change', newval);
        });
    } );

    $('.point').draggable({ 
        drag: function(event, ui){
            // update the position value
            point.set(ui.position);
        }
    });

});

Javascriptのpoints.set()呼び出しは位置の値を更新します（私はコンソールで正しい情報を得ます）が、できませんテーマカスタマイザ自体にあるinput要素を更新します。

api.Valueのwp-includes/js/customize-base.jsクラス（witchは私のpoints変数のクラスです）を見ました。必要なことは、対応するapi.Elementのインスタンスを取得し、そのupdateメソッドを呼び出すことです。しかし、私はこれをどこで手に入れることができるのかわからない。

customizationapitheme-customizer
3
Fabien Quatravaux

私はようやく自分の問題を解決することができましたが、最も洗練された方法ではありませんでした：投票。私はまだもっとエレガントな解決策に興味があるでしょう！

私が持っている主な問題は、ポイントの移動がサイトプレビューを含むiframeで行われるのに対し、テーマカスタマイザフォームの入力はメインドキュメントにあることです。だから私はiframeからメインドキュメントに変数を渡す方法が必要です。

Iframeの内側：

// update point global var
$('.point').draggable({ 
    drag: function(event, ui){
        // update the position value
        var ref = 'id'+$(this).attr('data-id');
        points[ref].top = ui.position.top;
        points[ref].left = ui.position.left;   
    }
});

テーマカスタマイザ内で：

setInterval(function(){
    if(frames.length) {
        var from = $('#customize-points').val();
        var to = JSON.stringify(frames[0].points);

        // use theme customizer API in order to enable the save button
        if(from != to) $('#customize-points').val(to).change();
    }
}, 500);

背景画像に対するポイントの位置を計算するシステムも追加しましたが、それはここでの主題ではありません。

テーマのカスタマイザがプレビューのiframeをターゲットとしたイベントを生成してテーマの作成者がプレビューをライブ更新できるようにすることはわかっていますが、それ以外の方法はできません。

あなたがここでオンラインで結果を見ることができます：あなたがバックエンドにアクセスすることができなくても、 focus.tv5monde.com 。

2
Fabien Quatravaux