英文:

I want to render the same div on the admin panel and frontend using shortcode in wordpress

问题 {#heading}

我正在在我的WordPress网站上显示Vue构建的JS和CSS。我已经在插件目录中创建了一个新插件，并在管理面板中创建了一个新菜单，它能正常工作并显示Vue应用程序的构建内容。

我有一个短代码函数 my_admin_page_callback()，我希望在我的网站前端的任何地方显示相同的内容。这是我在一个名为 main.php 的单个文件中的全部代码。

<?php
/*
Plugin Name: My Admin Plugin
Description: This plugin adds an admin dashboard view.
Version: 1.0
Author: Your Name
*/
function my_admin_menu_page() {
add_menu_page(
'My Admin Page',  // 页面标题
'My Admin Plugin', // 菜单标题
'manage_options',  // 需要访问的权限
'my-admin-page',   // 菜单别名
'my_admin_page_callback', // 回调函数以渲染内容
'dashicons-admin-plugins', // 图标URL或dashicon类
20 // 菜单位置
);
}
add_action('admin_menu', 'my_admin_menu_page');
function my_admin_page_callback() {
?>
<h1>My Admin Page</h1>
<div id="app">
</div>
<?php
}
function my_shortcode_function() {
ob_start();
var_dump('Shortcode executed'); // 调试输出
?>
<div id="app">
<!-- 您可以在此处添加特定于短代码的内容 -->
</div>
<?php
return ob_get_clean();
}
add_shortcode('vue_shortcode', 'my_shortcode_function');
function enqueue_vue_script() {
wp_enqueue_script('app-script', plugins_url('/testproject/dist/assets/index-d7bd537c.js', __FILE__), array(), null, true);
wp_enqueue_style('app-style', plugins_url('/testproject/dist/assets/index-fc5f319f.css', __FILE__));

}
add_action('admin_enqueue_scripts', 'enqueue_vue_script');

英文:

I am displaying vue build JS and CSS on my wordpress website. I have made a new plugin in the plugins directory and have made a new menu in the admin panel which works fine and displays the build content of the vue app.

I have a shortcode function my_admin_page_callback() in which I want to display the same content on the frontend of my website anywhere I want. This is my entire code in a single main.php file.

<?php
/*
Plugin Name: My Admin Plugin
Description: This plugin adds an admin dashboard view.
Version: 1.0
Author: Your Name
*/
function my_admin_menu_page() {
add_menu_page(
'My Admin Page',  // Page title
'My Admin Plugin', // Menu title
'manage_options',  // Capability required to access
'my-admin-page',   // Menu slug
'my_admin_page_callback', // Callback function to render content
'dashicons-admin-plugins', // Icon URL or dashicon class
20 // Menu position
);
}
add_action('admin_menu', 'my_admin_menu_page');
function my_admin_page_callback() {
?>
<h1>My Admin Page</h1>
<div id="app">
</div>
<?php
}
function my_shortcode_function() {
ob_start();
var_dump('Shortcode executed'); // Debug output
?>
<div id="app">
<!-- You can add content specific to the shortcode here -->
</div>
<?php
return ob_get_clean();
}
add_shortcode('vue_shortcode', 'my_shortcode_function');
function enqueue_vue_script() {
wp_enqueue_script('app-script', plugins_url('/testproject/dist/assets/index-d7bd537c.js', __FILE__), array(), null, true);
wp_enqueue_style('app-style', plugins_url('/testproject/dist/assets/index-fc5f319f.css', __FILE__));

}
add_action('admin_enqueue_scripts', 'enqueue_vue_script');

答案1 {#1}

得分: 1

你应该为前端添加add_action('wp_enqueue_scripts', 'enqueue_vue_script');挂钩。

function enqueue_vue_script() {
    wp_enqueue_script('app-script', plugins_url('/testproject/dist/assets/index-d7bd537c.js', __FILE__), array(), null, true);
    wp_enqueue_style('app-style', plugins_url('/testproject/dist/assets/index-fc5f319f.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'enqueue_vue_script');
add_action('wp_enqueue_scripts', 'enqueue_vue_script');

英文:

You should add add_action('wp_enqueue_scripts', 'enqueue_vue_script'); hook for frontend.

<?php
/*
Plugin Name: My Admin Plugin
Description: This plugin adds an admin dashboard view.
Version: 1.0
Author: Your Name
*/
function my_admin_menu_page() {
add_menu_page(
'My Admin Page',  // Page title
'My Admin Plugin', // Menu title
'manage_options',  // Capability required to access
'my-admin-page',   // Menu slug
'my_admin_page_callback', // Callback function to render content
'dashicons-admin-plugins', // Icon URL or dashicon class
20 // Menu position
);
}
add_action('admin_menu', 'my_admin_menu_page');
function my_admin_page_callback() {
?>
<h1>My Admin Page</h1>
<div id="app">
</div>
<?php
}
function my_shortcode_function() {
ob_start();
var_dump('Shortcode executed'); // Debug output
?>
<div id="app">
<!-- You can add content specific to the shortcode here -->
</div>
<?php
return ob_get_clean();
}
add_shortcode('vue_shortcode', 'my_shortcode_function');
function enqueue_vue_script() {
wp_enqueue_script('app-script', plugins_url('/testproject/dist/assets/index-d7bd537c.js', __FILE__), array(), null, true);
wp_enqueue_style('app-style', plugins_url('/testproject/dist/assets/index-fc5f319f.css', __FILE__));

} add_action('admin_enqueue_scripts', 'enqueue_vue_script'); add_action('wp_enqueue_scripts', 'enqueue_vue_script');