Ich arbeite an einem WP-Thema mit Vue.js, alle Daten werden über die REST-API abgerufen. Bisher funktioniert alles perfekt in Bezug auf die Anzeige der Daten.
Ich versuche, ein Kontaktformular-Plugin zu implementieren (Contact Form 7 – aber offen für Vorschläge). Dieses Plugin funktioniert, indem es PHP einen Shortcode hinzufügt, aber da ich kein PHP verwende, sondern das gesamte Frontend auf der Client-Seite rendere, bin ich verwirrt darüber, wie eine Integration zwischen diesen beiden erreicht werden kann.
Ideen (Meine ersten Ansätze…)
1. Verstecken
Ich könnte den Shortcode in meine index.php-Datei einfügen, wobei seine Sichtbarkeit ausgeblendet ist, und mit ihm über Javascript interagieren, sobald der Benutzer auf die Kontaktseite gelangt. Ich bin mir bei dieser Methode nicht ganz sicher, da das Formular bei der Eingabe wirklich nicht geladen werden muss, sondern nur auf der Kontaktseite.
2. Client -> Server
Erstellen Sie ein Formular im Frontend, sammeln Sie die Benutzerdaten und senden Sie sie an eine Funktion auf der Serverseite (functions.php). Diese Daten werden dann vom Server verwendet, um die gewünschte Übermittlung durchzuführen. Ist das sinnvoll / ist das überhaupt möglich?
So…
Ich suche nur nach einer Richtung. Ich arbeite ziemlich gut mit WordPress und Vue getrennt, aber ich habe in diesem Zusammenhang immer noch meine Frage, wenn es um die Interaktion zwischen Client- und Serverseite geht.
Irgendwelche Vorschläge, die mir helfen können, voranzukommen? Ich ziehe es vor, das Contact Form 7 Plugin zu verwenden, da viele meiner Websites das verwenden, aber ich bin auch offen für andere Lösungen, die idealerweise in WordPress und nicht in einem Drittanbieterdienst verwaltet werden. Alle Kommentare oder Vorschläge sind willkommen!
Vielen Dank!
Dies könnte eine Lösung sein, wahrscheinlich nicht die eleganteste.
Als Referenz, Seiteninformationen laden ist die Methode, mit der ich die REST-API aufgerufen habe, dann wird die Antwort darin gespeichert Seiteninfoso was:
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 ); } );
},
In Ihrer Vorlagendatei:
<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>
Sie können eine jQuery-Zeile unter der erkennen Aktualisiert Methode, die das Formular im Grunde aus PHP ausschneidet und in die Vorlagendatei einfügt. Diese Linie ist die vorgeschlagene Lösung. Das Formular wird mit aufgerufen do_shortcode bei PHP:
<div class="cform7 d-none">
<?php echo do_shortcode('[contact-form-7 id="104" title="Contact form"]'); ?>
</div>
EDIT: Eine andere Lösung
Ich habe die vorherige Lösung getestet und einige Probleme festgestellt. Hier also ein neuer Ansatz.
Kurze Antwort: Erstellen Sie dann einen neuen benutzerdefinierten Beitragstyp, um die Shortcodes zu drucken Belastung die generierte URL in die Vue-Komponente.
Sehr lange Antwort:
Als Referenz: Laden der von Vue generierten JS- und CSS-Dateien aus Funktionen.php sollte der richtige Prozess sein. Es wird in den nächsten Schritten nützlich sein.
Also habe ich einen benutzerdefinierten Beitragstyp namens Shortcodes erstellt, etwa so:
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' );
Dann habe ich eine neue erstellt Kurzwahl Post, und im Inhalt habe ich den Shortcode geschrieben, den Contact Form 7 mir gibt. habe ich auch erstellt single-shortcodes.phpso was:
<!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>
Schließlich bleibt die Vorlagendatei gleich, aber mit einem anderen JS-Inhalt:
<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>
Danach sollte ein Fehler in der Konsole erscheinen, weil single-shortcodes.php lädt die JS- und CSS-Dateien von Vue, also in Funktionen.php Ich habe eine kleine Korrektur vorgenommen:
if ( !is_singular( 'shortcodes' ) ) {
// here I load the JS and CSS files from Vue.
}
Mein gesamter Code zum Registrieren von CSS- und JS-Dateien sieht folgendermaßen aus:
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' );
Nochmals: Für mich klingt es nicht nach einer eleganten Lösung, aber leider gehen beim Mischen von Vue mit WordPress einige der WordPress-Kernfunktionen verloren.
Hoffe es hilft jemandem.
Hast du das gelöst? Bei mir funktioniert CF7 bis auf das mitgelieferte JS, zB sendet es das Formular ohne Ajax, aber an die
/page/{id}Pfad, also habe ich nach der Übermittlung eine Umleitung zur richtigen Route hinzugefügt. Es ist also ein Hack, aber funktioniert. Problem ist, dass ich keine Erfolgsmeldungen bekomme und reCaptcha auch nicht funktioniert, weil es von CF7 asynchron geladen wird.– Jorgeuos
22. September 2018 um 22:04 Uhr