問題描述

假設我想將一些 post_meta 添加到”new” 修訂版 UI 中。我只在修改版本上保存一些元數據,並希望在此屏幕上顯示。

通常我會打開 wp-admin/revisions.php 尋找一些鈎子和代碼。但是修訂頁面都是用 Backbone 完成的。我不知道骨幹 (完全願意學習) 。但是,我無法找到有關如何在 WordPress 中修改現有管理員骨幹視圖的任何內容。

有沒有人成功修改了這個界面,可以提供一個如何做到的例子?

最佳解決方案

不幸的是,WordPress 並沒有建立標準化的最佳實踐來吸引骨幹模板。已經有 plans suggested 將熟悉的過濾器和操作 API 引入到 WordPress 中的 Javascript 中,但這種運動缺乏牽引力。 Carl Danley created a library which does just that,如果您正在嘗試以最細微的方式構建/jerry-rig 代碼,所有這些都可以幫助您完成所有嘗試。

基本上,您正在嘗試覆蓋 revisions.view.Meta 的微型模板中發生的情況。

沒有一種簡單的方法來覆蓋微模板標記本身。我建議覆蓋從 revisions.view.Meta 擴展到 revisions.view.MetaFromrevisions.view.MetaTo 的任何構造函數的.template()方法。為了做到這一點,這裏有一些樣板:

add_action( 'admin_footer-revision.php', function() {
    $post = get_post();
    ?>
    <script id="tmpl-revisions-meta-override" type="text/html">
        <# if ( ! _.isUndefined( data.attributes ) ) { #>
            <div class="diff-title">
                <# if ( 'from' === data.type ) { #>
                    <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong>
                <# } else if ( 'to' === data.type ) { #>
                    <strong><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong>
                <# } #>
                <div class="author-card<# if ( data.attributes.autosave ) { #> autosave<# } #>">
                    {{{ data.attributes.author.avatar }}}
                    <div class="author-info">
                    <# if ( data.attributes.autosave ) { #>
                        <span class="byline"><?php printf( __( 'Autosave by %s' ),
                            '<span class="author-name">{{ data.attributes.author.name }}</span>' ); ?></span>
                    <# } else if ( data.attributes.current ) { #>
                        <span class="byline"><?php printf( __( 'Current Revision by %s' ),
                            '<span class="author-name">{{ data.attributes.author.name }}</span>' ); ?></span>
                    <# } else { #>
                        <span class="byline"><?php printf( __( 'Revision by %s' ),
                            '<span class="author-name">{{ data.attributes.author.name }}</span>' ); ?></span>
                    <# } #>
                        <span class="time-ago">{{ data.attributes.timeAgo }}</span>
                        <span class="date">({{ data.attributes.dateShort }})</span>
                    </div>
                    Your custom text here
                <# if ( 'to' === data.type && data.attributes.restoreUrl ) { #>
                    <input  <?php if ( wp_check_post_lock( $post->ID ) ) { ?>
                        disabled="disabled"
                    <?php } else { ?>
                        <# if ( data.attributes.current ) { #>
                            disabled="disabled"
                        <# } #>
                    <?php } ?>
                    <# if ( data.attributes.autosave ) { #>
                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Autosave' ); ?>" />
                    <# } else { #>
                        type="button" class="restore-revision button button-primary" value="<?php esc_attr_e( 'Restore This Revision' ); ?>" />
                    <# } #>
                <# } #>
            </div>
        <# if ( 'tooltip' === data.type ) { #>
            <div class="revisions-tooltip-arrow"><span></span></div>
        <# } #>
    <# } #>
    </script>
    <script>
    (function($) {
        wp.revisions.view.MetaFrom.prototype.template = wp.template('revisions-meta-override');
        wp.revisions.view.MetaTo.prototype.template = wp.template('revisions-meta-override');
    })(jQuery);
    </script>
    <?php
} );

並解釋一下。我們正在修改管理頁面的頁腳,所以我們保證構造函數 revisions.view.MetaFromrevisions.view.MetaTo have been defined,但在修訂模塊引導程序 has been triggered 之前。這很重要,因為我們要在構造函數使用之前修改它們。我將 revisions.view.Meta 的微型模板的內容逐字複製到模板 #tmpl-revisions-meta-override 的覆蓋版本中,但注意我已經在模板中添加了 Your custom text here,其中您希望使用自定義文本。然後,我使用修改的微型模板的 ID 作為參考,覆蓋構造函數的 template()方法。

瞧。現在,這取決於你對自定義文本的處理方式。如果你想在那裏放一些文字,去吧。如果要輸出特定於該修訂版本的文本,您將需要查看 Carl Danley 上述的庫,並觸發通過 data 的過濾器鈎子,以便您可以輸出特定於當前數據的特定內容。

我知道,這是瘋狂的。但是這是我們在 WordPress 骨幹模板中覆蓋 Javascript 的地方。我們應該討論如何烘焙可定製性,就像你要求的核心一樣,但我們並不是因為缺乏興趣/動力。隨時在我們的 weekly WordPress core developer chats 上引發談話。我會在那裏。

參考文獻

注:本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。