web-dev-qa-db-ja.com

管理ページにjQuery関数を追加する

私はadminで投稿/ページ編集者に文書準備ができたjQueryを少し追加する必要があります。エディタページにテキストボックスを追加し、そのテキストをテンプレートファイルに挿入することを処理する古いプラグインをハッキングしていますが、テキスト入力はhtmlのみです。このドキュメントレディ関数はテキストボックスにmceEditorのクラスを追加します。この関数は手動でadmin-header.phpにインクルードしたときに機能しますが、もちろんできません。

ライブラリではないので、エンキューする必要はないと思います。それとも私？また、該当する場合、それを追加するさまざまな方法の長所/短所は何ですか？

それでは、どのようにこれをフックするか、または他の方法でadminの投稿/ページエディタにロードするのですか？テーマのfunctions.phpではなく、プラグインファイルに入れる必要があります。

<script type="text/javascript">

jQuery(document).ready( function () { 
    jQuery("#dt-additional-info").addClass("mceEditor"); 
    if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
        jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
        tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
    }
});

</script>
plugin-developmentwp-adminjquery
3
markratledge

1つだけエンキューを行い、それを使用して実行する傾向があります。

つまり、追加のファイル（JSファイル）を管理しなければならないということですが、コードを書くときは、通常、ファイルを使って何らかの形の編成を作成することをお勧めします。 。 javascript/jqueryを1つのフォルダに入れ、cssを別のフォルダに入れ、PHPとHTMLをメインのプラグインPHPファイルに入れます。

したがって、私の提案は、jQueryをjsファイルに移動してから、jQueryを依存関係としてエンキュー設定を実行することですが、1回限りの呼び出しで登録する必要はありません。

フックに関してはかなりいくつかの選択肢がありますが、私は個人的には行きたいと思います。

function yournamespace_enqueue_scripts( $hook ) {

    if( !in_array( $hook, array( 'post.php', 'post-new.php' ) ) )
        return;

    wp_enqueue_script( 
        'your_script_handle',                         // Handle
        plugins_url( '/yourfilename.js', __FILE__ ),  // Path to file
        array( 'jquery' )                             // Dependancies
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

エンキューを実行するのに必要なページをin_array()呼び出しで調整するだけです。

5
Mark Duncan

少し前に、私はこのようなものが必要でした、これは私が使ったものです：

function admin_js() { ?>
    <script type="text/javascript">

        jQuery(document).ready( function () { 
           jQuery("#dt-additional-info").addClass("mceEditor"); 
           if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
               jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
               tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
        });

    </script>
<?php }
add_action('admin_head', 'admin_js');

当時、私はそれをadmin_headアクションにフックしました、今や私は たくさんのアクションがあることを知っています おそらくこの場合、admin_print_scriptsアクションにそれをフックするほうが良いでしょう：

add_action('admin_print_scripts', 'admin_js');

注： これはページにスクリプトを表示します。外部ファイルに保存する場合は、キューに入れる必要があります。

function admin_js() {
    wp_register_script('admin_js', plugins_url( .'/yourplugin/admin-js.js' . ),  array('jquery'));
    wp_enqueue_script('admin_js');
}
add_action('admin_enqueue_scripts', 'admin_js');

そしてあなたのadmin-js.jsファイルでは、javascript：

    jQuery(document).ready( function () { 
       jQuery("#dt-additional-info").addClass("mceEditor"); 
       if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
           jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
           tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
    });

私はオプションページでこの両方の方法を使っていて、どちらも問題なく動作します。

5
Mario