英文:
I want to render the same div on the admin panel and frontend using shortcode in wordpress
问题
我正在在我的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
你应该为前端添加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');
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论