問題描述
假設我想將一些 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.MetaFrom 和 revisions.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.MetaFrom 和 revisions.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 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。
