WordPress前臺調(diào)用編輯器的實現(xiàn)方法

來自：素雅營銷研究院

方知筆記

2025年06月25日 04:00

WordPress作為全球最流行的內(nèi)容管理系統(tǒng)，其強大的后臺編輯器功能廣受用戶喜愛。但有時我們需要在前臺頁面直接調(diào)用這個編輯器，讓用戶無需進入后臺就能發(fā)表或編輯內(nèi)容。本文將詳細(xì)介紹幾種在WordPress前臺調(diào)用編輯器的方法。

方法一：使用wp_editor()函數(shù)

WordPress提供了一個內(nèi)置函數(shù)wp_editor()，可以輕松在前臺調(diào)用可視化編輯器：

<?php
// 在前臺模板文件中調(diào)用
$content = ''; // 初始內(nèi)容
$editor_id = 'my_custom_editor'; // 編輯器ID
$settings = array(
'textarea_name' => 'my_custom_content',
'media_buttons' => true, // 是否顯示媒體按鈕
'teeny' => false // 是否使用精簡版編輯器
);
wp_editor($content, $editor_id, $settings);
?>

方法二：通過短代碼實現(xiàn)

如果你希望在任何頁面或文章中都插入編輯器，可以創(chuàng)建一個短代碼：

// 在functions.php中添加
function frontend_editor_shortcode() {
ob_start();
$content = '';
$editor_id = 'shortcode_editor';
wp_editor($content, $editor_id);
return ob_get_clean();
}
add_shortcode('frontend_editor', 'frontend_editor_shortcode');

然后在任何文章或頁面中使用[frontend_editor]即可顯示編輯器。

方法三：結(jié)合表單提交處理

通常前臺編輯器需要配合表單提交功能：

// 顯示編輯器表單
function display_frontend_editor_form() {
if(isset($_POST['submit_custom_form'])) {
// 處理表單提交
$content = wp_kses_post($_POST['my_custom_content']);
// 保存或處理內(nèi)容...
}

echo '<form method="post">';
wp_editor('', 'my_custom_content', array(
'textarea_rows' => 10,
'media_buttons' => true
));
echo '<input type="submit" name="submit_custom_form" value="提交">';
echo '</form>';
}