web-dev-qa-db-ja.com

すべての選択に対してadminバックエンドのselect2を置き換える

私はもともとこの質問をjavascriptの質問としてここに投稿しましたが、多分それがここで尋ねられるほうがよいと思います。私はすべてのwordpressの管理画面にselect2を追加してみました。しかし、多くの選択は動的に作成されるので、動的選択を認識する方法を見つける必要がありました。私はそれを動かしました、しかし動的な選択は正しい幅と位置でロードしません。たとえば、 http://example.com/wp-admin/edit.php のページに進んでください。クイック編集をクリックすると、select2は新しい選択の正しい幅と位置を見つけられません。ソースを見ると、次のスタイル属性を持つドロップダウンがあります。

style="width:0; top:0; left:0;

このため、クリックしても表示されません。ただし、新しい選択をクリックしてそのすぐ下をもう一度クリックすると、スタイルは更新されますが、select2オーバーレイは選択のすぐ右側に移動します。

誰かがそれをテストしたい場合のプラグインの例を次に示します。

<?php

/**
 * Plugin Name: Admin Select2 Not Working Everywhere
 * Plugin URI: 
 * Description: Adds select2 to all admin screens
 * Version: 1.0
 * Author: Bryan Willis
 * Author URI: 
 * License: GPL2
 */

function enqueue_select2_jquery() {
    wp_register_style( 'select2css', 'http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css', false, '1.0', 'all' );
    wp_register_script( 'select2', 'http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
    }
add_action( 'admin_enqueue_scripts', 'enqueue_select2_jquery' );

function select2jquery_inline() {
    ?>
<style type="text/css">
.select2-container {margin: 0 2px 0 2px;}
.tablenav.top #doaction, #doaction2, #post-query-submit {margin: 0px 4px 0 4px;}
</style>        
<script type='text/javascript'>
jQuery(document).ready(function ($) {
   $("select").select2(); 
   $( document.body ).on( "click", function() {
        $("select").select2(); 
     });
});
</script>   
    <?php
 }
add_action( 'admin_head', 'select2jquery_inline' );

enter image description here

enter image description here

enter image description here

enter image description here

functionsjqueryadminwp-adminselect
3
Bryan Willis

問題は、迅速な編集のしくみです - WordPressは、隠された<div />を使用してフォームを生成します。フォームにはすでにselect2が適用されています（したがって、位置もすでに計算されています）。

クイックエディットのコアイベントハンドラはclickを返し、イベントの伝播を停止するので、本体のfalseイベントリスナは必要なときに起動しません。代わりに、タイトル入力のfocusイベントをこっそり聴くことができます。これはクイック編集フォームがレンダリングされた後に発生します。

jQuery( document ).ready(
    function( $ ) {
        $( "select:visible" ).select2(); // Only fire on visible inputs to begin with.
        $( document.body ).on( "focus", ".ptitle,select",
            function ( ev ) {
                if ( ev.target.nodeName === "SELECT" ) {
                    // Fire for this element only
                    $( this ).select2({ width: "element" });
                } else {
                    // Fire again, but only for selects that haven't yet been select2'd
                    $( "select:visible" ).not( ".select2-offscreen" ).select2({
                        width: "element"
                    });
                }
            }
        );
    }
);

width: "element"引数も追加しました。これはselect2がオプションの長さに基づいて適切な幅を計算することを意味します。それがなければ、select2はいくつかのオプション、特に長いページタイトルを持つ "Page Parent"には狭すぎます。

この解決法は特にあなたの問題を素早い編集で解決するでしょうが、特にAdvanced Custom FieldsのようなプラグインでNiceをプレイしたい場合はおそらく他の動的状況に対して追加の "fix"を実装する必要があるでしょう。

1
TheDeadMedic