云計(jì)算服務(wù)
服務(wù)器租用
DDOS 防護(hù)
虛擬主機(jī)
域名服務(wù)
基礎(chǔ)設(shè)施
關(guān)于我們
如何將WordPress后臺(tái)文章設(shè)置選項(xiàng)移動(dòng)到編輯器右側(cè)？
實(shí)現(xiàn)原理分析
WordPress文章編輯界面默認(rèn)采用兩欄布局，通過(guò)修改元框(meta box)注冊(cè)參數(shù)或CSS布局調(diào)整，可將發(fā)布設(shè)置、分類(lèi)目錄、標(biāo)簽管理等模塊從底部移至右側(cè)邊欄區(qū)域。
代碼實(shí)現(xiàn)方案
方法一：通過(guò)functions.php調(diào)整
function move_post_settings_to_sidebar() {
remove_meta_box('submitdiv', 'post', 'side');
add_meta_box('submitdiv', '發(fā)布設(shè)置', 'post_submit_meta_box', 'post', 'side', 'high');
remove_meta_box('categorydiv', 'post', 'normal');
add_meta_box('categorydiv', '分類(lèi)目錄', 'post_categories_meta_box', 'post', 'side', 'core');
}
add_action('add_meta_boxes', 'move_post_settings_to_sidebar');方法二：CSS布局優(yōu)化
#post-body-content {
width: 70%;
float: left;
}
#side-sortables {
width: 28%;
float: right;
margin-right: 0;
}插件替代方案
- Meta Box Relocator：支持可視化拖拽調(diào)整元框位置
- Adminimize：通過(guò)權(quán)限控制界面元素布局
- Custom Post Type UI：針對(duì)自定義文章類(lèi)型設(shè)置布局
注意事項(xiàng)
- 修改前建議創(chuàng)建子主題或使用代碼片段插件
- 不同主題可能存在布局差異需測(cè)試適配
- Gutenberg編輯器需使用區(qū)塊編輯器擴(kuò)展插件
- 移動(dòng)后注意移動(dòng)端顯示適配
.png)
.png)
