mma*_*uez 6 javascript php wordpress vue.js
我正在使用 Vue.js 开发 WP 主题，所有数据都是通过 REST API 获取的。到目前为止，在显示数据方面一切正常。
我正在尝试实现一个联系表单插件（联系表单 7 - 但对建议持开放态度）。这个插件通过向 PHP 添加一个短代码来工作，但由于我没有使用 PHP，而是在客户端呈现所有前端——我对如何实现这两者之间的集成感到困惑。
想法 （我最初的方法......）
1.隐藏
我可以在我的 index.php 文件中包含短代码，隐藏它的可见性，并在用户进入联系页面后通过 javascript 与它交互。我对这种方式不是很确定，因为表单确实不需要在输入时加载，只需在联系页面上加载。
2. 客户端 -> 服务器
在前端构建一个表单，收集用户数据并将其发送到服务器端的一个函数（functions.php）。然后服务器使用这些数据来执行所需的提交。这是否有意义/甚至可能吗？
所以...
我只是在寻找一些方向。我很习惯分别使用 Wordpress 和 Vue，但在这种情况下，当涉及客户端和服务器端之间的交互时，我仍然有疑问。
任何可以帮助我前进的建议？我更喜欢使用 Contact Form 7 Plugin，因为我的许多网站都使用它，但我也对其他解决方案持开放态度，最好在 Wordpress 内管理，而不是第三方服务。任何意见或建议表示赞赏！
谢谢！
这可能是一种解决方案，但可能不是最优雅的。
作为参考，loadPageInformation是我用来调用 REST API 的方法，然后，响应存储在pageInfo中，如下所示：
loadPageInformation: function(slug) {
this.pageInfo = null;
// retrieving page data using the page slug.
axios.get(this.appData.rest_url + '/wp/v2/pages?slug=' + slug)
.then( response => { this.pageInfo = response.data[0]; } )
.catch( error => { console.log( error ); } );
},
在您的模板文件中：
<template>
<div class="v-page" v-if="this.$root.pageInfo != null">
<b-row class="">
<b-col cols="12">
<h1>{{ this.$root.pageInfo.title.rendered }}</h1>
<div class="contact-form"></div>
</b-col>
</b-row>
<!-- footer. -->
<footer-component></footer-component>
</div>
</template>
<script>
export default {
created: function() {
this.$root.loadPageInformation(this.$route.params.pageSlug);
},
updated: function() {
$( ".cform7 .wpcf7" ).appendTo( ".contact-form" );
}
}
</script>
您可以注意到更新方法下的 jQuery 行，该行基本上将从 PHP 中剪切表单并将其粘贴到模板文件中。该行是建议的解决方案。该表单将在 PHP 中使用do_shortcode调用：
<div class="cform7 d-none">
<?php echo do_shortcode('[contact-form-7 id="104" title="Contact form"]'); ?>
</div>
编辑：不同的解决方案
我测试了之前的解决方案并发现了一些问题。所以这里有一个新方法。
简短回答：创建一个新的自定义帖子类型来打印短代码，然后将生成的 URL加载到 Vue 组件中。
很长的答案：
供参考：从functions.php加载Vue生成的JS和CSS文件应该是正确的过程。它将在接下来的步骤中有用。
所以我创建了一个名为短代码的自定义帖子类型，如下所示：
function custom_shortcodes_post() {
$labels = array(
'name' => __( 'Shortcodes' ),
'singular_name' => __( 'Shortcode' ),
'add_new' => __( 'Add new shortcode' ),
'add_new_item' => __( 'Add new shortcode' ),
'edit_item' => __( 'Edit shortcode' ),
'new_item' => __( 'New shortcode' ),
'all_items' => __( 'All shortcodes' ),
'view_item' => __( 'See shortcode' ),
'search_items' => __( 'Search shortcodes' ),
'not_found' => __( 'No shortcodes found' ),
'not_found_in_trash' => __( 'No shortcodes in trash' ),
'parent_item_colon' => '',
'menu_name' => 'Shortcodes'
);
$args = array(
'labels' => $labels,
'description' => 'Save shortcodes with specific data',
'public' => true,
'show_in_rest' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'shortcodes' ),
'capability_type' => 'post',
'has_archive' => false,
'hierarchical' => false,
'menu_position' => 6,
'supports' => array( 'title', 'editor' )
);
register_post_type( 'shortcodes', $args );
}
add_action( 'init', 'custom_shortcodes_post' );
然后我创建了一个新的短代码帖子，并在内容中编写了联系表格 7 给我的短代码。我还创建了single-shortcodes.php，如下所示：
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
</head>
<body style="background:none">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
<?php wp_footer(); ?>
</body>
</html>
最后，模板文件保持不变，但 JS 内容不同：
<template>
<div class="v-page" v-if="this.$root.pageInfo != null">
<b-row class="">
<b-col cols="12">
<h1>{{ this.$root.pageInfo.title.rendered }}</h1>
<div class="contact-form"></div>
</b-col>
</b-row>
<!-- footer. -->
<footer-component></footer-component>
</div>
</template>
<script>
export default {
created: function() {
this.$root.loadPageInformation(this.$route.params.pageSlug);
},
updated: function() {
if (this.$route.params.pageSlug == 'contact') {
$( '.contact-form' ).load( '/shortcodes/contact-form/' );
}
}
}
</script>
之后，控制台中应该会出现错误，因为single-shortcodes.php正在从 Vue 加载 JS 和 CSS 文件，所以在functions.php中我做了一些修复：
if ( !is_singular( 'shortcodes' ) ) {
// here I load the JS and CSS files from Vue.
}
我注册 CSS 和 JS 文件的整段代码如下所示：
function rci_theme_enqueue() {
if ( !is_singular( 'shortcodes' ) ) {
// enqueue main style.
wp_enqueue_style(
'app',
get_template_directory_uri() . '/spa/dist/css/app.css'
);
// register the script.
wp_register_script(
'vue_app',
get_template_directory_uri() . '/spa/dist/app.js',
array(),
'1.0.0',
true
);
// localize the script with new data.
global $post;
$app_data = array(
'rest_url' => untrailingslashit( esc_url_raw( rest_url() ) ),
'theme_url' => get_template_directory_uri(),
'app_path' => $post->post_name, // page where the custom page template is loaded.
);
wp_localize_script( 'vue_app', 'app_data', $app_data );
// enqueued script with localized data.
wp_enqueue_script( 'vue_app' );
}
}
add_action( 'wp_enqueue_scripts', 'rci_theme_enqueue' );
再说一次：对我来说，这听起来不像是一个优雅的解决方案，但不幸的是，当将 Vue 与 WordPress 混合时，你将失去一些 WordPress 核心功能。
希望它对某人有帮助。
| 归档时间： |
|
| 查看次数： |
1999 次 |
| 最近记录： |