web-dev-qa-db-ja.com

管理投稿リストページにフック

それで私は投稿とページリストのためのカスタム管理インターフェースを作成したいです。左側に投稿のリストと一部のデータ、右側に投稿の完全に編集可能なプレビューが表示されるように分割ビューにしたいです。これを実現するために適切な場所を見つけるのに苦労しています。これらのページにはどのようなフックがありますか？

enter image description here

私は本質的にそれらの出力を編集するためにこれらのスクリーンにフックしたいです。私が探しているのは、このページのすべての情報を渡し、自分のHTMLとCSSを出力できるようにするためのフックです。私はこのリストを画面の50％にすることを計画しています、そしてあなたがアイテムの1つをクリックするとき、それは投稿内容をプルダウンしてそれをスクリーンの右側のプレビューウィンドウに表示するのにajaxを使います。 Macのメールアプリだと思う。探しているのは正しいフックだけです。私はそれを過ぎてしまったと思います。

filtershooksactions
3
Thought Space Designs

あなたのスクリーンショットと説明から、私はあなたが何を達成しようとしているのか理解していると思います。

概念

重要なのは、問題はもっとa X-Y Problem ということです。私がお勧めするのは、アイデアを変更し、デフォルトで利用可能なものを最大限に活用することです。クイック編集ボックス。

クイック編集

クイック編集を拡張するためのデフォルトのフックはquick_edit_custom_boxです。 $colNameと$postTypeの2つの引数があります。クイック編集ボックスを拡張するためにそれを使用してください。 AJAX saveアクションに必要なJavascriptを含む例 その答えにある 、または この答え および Frankによるその答え 。

ジャバスクリプト

グローバルなinlineEditPost JavaScriptオブジェクトはあなたが必要とするすべてのアクションを保持します。利用可能な機能のリストを見るためにポスト管理者リスト画面のあなたのコンソールのちょうどconsole.log( inlineEditPost );：

  • edit: function (id) {
  • getId: function (o) {
  • init: function (){
  • revert: function (){
  • save: function (id) {
  • setBulk: function (){
  • toggle: function (el){
  • type: "post"
  • what: "#post-"

保存中

保存アクションはedit_postフックの間に起こります。そこでは設定する$_POST['is_quickedit']をチェックするべきです。それ以降は、すべてのデータフィールドの保存を処理できます。

クイック編集を新しい場所に移動する

上記すべての主な目的は、新しいUIを構築することです。それが終わったら、テーブルの幅を50％（class="wp-list-table"）に制限し、変更したクイック編集ボックスを画面の他の50％に挿入することをお勧めします。

EditコアのjQuery関数を拡張する方が実際には簡単であることがわかりました。

( function( $ ) {
    "use strict";


    var id = '',
        rowData = '',
        $wpInlineEditPost = inlineEditPost.edit;

    inlineEditPost.customFunction= function( id ) {
        var $this = this;

        // Working with promises to bubble event later than core.
        $.when( inlineEditPost ).then( function() {
                setTimeout( function() {
                    $( '#edit-' + id ).insertAfter( $( '.wp-list-table' );
                }, 0 );
            } );
    }

    inlineEditPost.edit = function( id ) {
        var $this = this;

        // Run WP core first. Do not unbind from core.
        $wpInlineEditPost.apply( $this, arguments );

        // Run our custom function
        $this.customFunction( id );
    };
} )( jQuery || {} );

あなたが最後の部分を管理したならば、あなたが私の答えを編集して、私が現時点でテストシステムを得なかったので、欠けている部分を入れる（箱を動かす）ならいいでしょう。

5
kaiser