Wordpress Vue Js Shortcodes

时间:2019-12-10 作者:Pedro Ferreira

目前,我正在与Vue一起开发wordpress网站。js和wordpress REST API,找不到使用wordpress ShortCodeEx的解决方案:Contact Form 7

我一直在尝试这个例子,但它似乎对我不起作用Vue.js + AJAX Shortcode

有没有人有过类似的问题?

编辑:

For Example

In regular wordpress

我可以用这种方式使用联系人表单插件

 <section class="container section__form display--grid">
    <div class="form__content display--flex width--full justify--center">
        <?php echo do_shortcode( \'[contact-form-7 id="75" title="Formulário de contacto 1"]\' ); ?>
    </div>
</section>
由于vue位于客户端,并且没有直接连接到wordpress,因此我无法使用这种方式

我想这可能是我可以像vue组件一样使用短代码,或者在vue组件中使用php的一种方式。

1 个回复
最合适的回答,由SO网友:Pedro Ferreira 整理而成

过了一会儿,我明白了:

functions.php 我添加了一行:

 wp_localize_script(\'vue_wordpress.js\',\'sharedData\',array(
    \'contactForm\' => do_shortcode(\'[contact-form-7 id="5" title="Formulário de contacto 1"]\')
  )
对于我已经存在的功能:

 function vue_wordpress_scripts()
{
    // Styles
    wp_enqueue_style( \'style.css\', get_template_directory_uri() . \'/style.css\' );
    // wp_enqueue_style(\'vue_wordpress.css\', get_template_directory_uri() . \'/dist/vue-wordpress.css\');
    // wp_enqueue_style(\'global\',get_template_directory() . \'/styles/menu.css\' ); //copiar este código para adicionar mais styles.  
    // Scripts
    // Enable For Production - Disable for Development
    // wp_enqueue_script(\'vue_wordpress.js\', get_template_directory_uri() . \'/dist/vue-wordpress.js\', array(), null, true);
    // Enable For Development - Remove for Production
     wp_enqueue_script( \'vue_wordpress.js\', \'http://localhost:8080/vue-wordpress.js\', array(), false, true );

}

我调用了组件中的短代码。这个错误是我的。

相关推荐

Wp_LOCALIZE_SCRIPT和SHORTCODE中的calid不同

因此,我正在制作一个短代码,并尝试集成vue+wp\\u查询,当我在同一页上使用具有不同属性的多个短代码时,很难使其正常工作。我正在使用插件“简单即时搜索”的代码作为基础,并且仍在学习。我想我可以对div id和wp\\u localize\\u脚本使用uniqid(),然后在脚本文件中使用它。然而,div中生成的id与js中生成的id不同-vfm_gallery.block_id.<?php if (!class_exists(\'myclass\')){ cla