Wordpress + Vue.js : 연락처 양식
저는 Vue.js를 사용하여 WP 테마를 작업하고 있으며, REST API를 통해 모든 데이터를 가져올 수 있습니다. 지금까지 데이터를 표시하는 면에서 모든 것이 완벽하게 작동합니다.
연락처 양식 플러그인(연락처 양식 7 -- 그러나 제안에 열려 있음)을 구현하려고 합니다.이 플러그인은 PHP에 숏코드를 추가하여 작동하지만, PHP를 사용하는 것이 아니라 클라이언트 측의 모든 프론트엔드를 렌더링하기 때문에 이 둘 사이의 통합을 달성하는 방법에 대해 혼란스럽습니다.
아이디어들 (나의 초기 접근방식은...)
1. 숨김
제 index.php 파일에 shortcode를 포함할 수 있는데 가시성을 숨기고 사용자가 연락처 페이지에 도달하면 javascript를 통해 상호 작용할 수 있습니다.양식을 입력할 필요가 없고 연락처 페이지에서만 로드할 수 있기 때문에 이 방법에 대해 잘 모르겠습니다.
2. 클라이언트 -> 서버
프론트엔드에서 양식을 작성하고 사용자 데이터를 수집하여 서버측 기능(functions.php)으로 전송합니다.그러면 이 데이터는 서버가 원하는 제출을 수행하는 데 사용됩니다.이게 말이 됩니까? / 그게 가능하긴 합니까?
그래서...
저는 그냥 방향을 찾고 있을 뿐입니다.Wordpress와 Vue를 따로따로 작업하는 것은 꽤 편하지만, 이런 맥락에서 클라이언트 측과 서버 측의 상호 작용에 관해서는 여전히 의문점이 있습니다.
앞으로 나아가는 데 도움이 될 만한 제안이 있습니까?많은 사이트에서 연락처 양식 7 플러그인을 사용하고 있기 때문에 저는 연락처 양식 7 플러그인을 사용하는 것을 선호합니다. 하지만 저는 또한 타사 서비스가 아닌 워드프레스 내에서 이상적으로 관리되는 다른 솔루션에도 열려 있습니다.어떤 의견이나 제안이든 감사히 받겠습니다!
감사합니다!
이것이 해결책이 될 수도 있겠지만, 아마도 가장 우아하지는 않을 것입니다.
참고로 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>
기본적으로 PHP에서 폼을 잘라 템플릿 파일에 붙여넣는 업데이트된 메서드 아래에서 jQuery 라인을 확인할 수 있습니다.그 선이 바로 제안된 해결책입니다.양식은 PHP에서 do_shortcode와 함께 호출됩니다.
<div class="cform7 d-none">
<?php echo do_shortcode('[contact-form-7 id="104" title="Contact form"]'); ?>
</div>
EDIT: 다른 솔루션
이전 솔루션을 테스트해 본 결과 몇 가지 문제점이 발견되었습니다.여기 새로운 접근법이 있습니다.
단답: 새 Custom Post Type을 만들어 쇼트코드를 인쇄한 다음 생성된 URL을 Vue 구성 요소에 로드합니다.
매우 긴 답변:
참고: Vue에서 생성된 JS 및 CSS 파일을 함수에서 로드합니다.php가 올바른 프로세스여야 합니다.그것은 다음 단계에서 유용할 것입니다.
그래서 쇼트코드라는 사용자 지정 게시물 유형을 만들었습니다.
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이 주는 숏코드를 적었습니다.저는 싱글 쇼트 코드도 만들었습니다.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>
그 후 콘솔에 오류가 나타납니다. 싱글 쇼트 코드가 발생하기 때문입니다.php는 Vue에서 JS와 CSS 파일을 로드하고 있어 기능상으로도 그렇습니다.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의 핵심 기능을 잃게 될 것입니다.
누군가에게 도움이 되길 바랍니다.
언급URL : https://stackoverflow.com/questions/44954565/wordpress-vue-js-contact-forms
'code' 카테고리의 다른 글
| PL/SQL 개발자:여러 진술? (0) | 2023.10.05 |
|---|---|
| $_SERVER['REMOTE_ADDR'] 변수를 가장하는 방법은? (0) | 2023.10.05 |
| Wordpress post__not_in() 기능이 위젯 배열의 현재 게시물을 제외하지 않습니다. (0) | 2023.10.05 |
| C의 이 이상한 함수 정의 구문은 무엇입니까? (0) | 2023.10.05 |
| MAMP에 mysqldump 추가(MacOS X의 MySQL /w Apache PHP) (0) | 2023.10.05 |