在页脚中使用 Visual Composer 行

Question

我们有一个使用 Visual Composer 插件构建的 Wordpress 网站。

我们的客户喜欢其中一个小部件，并希望它出现在每个页面的页脚上，但由于我们也使用 Woocommerce，因此我们无法将它们作为经典的 VC Wordpress 页面进行编辑。

我们认为我们可以将相同的短代码添加到 footer.php，所以我复制了该小部件的 VC 短代码并将它们放在 php 行之间，然后将其粘贴到 footer.php：

<?php echo do_shortcode("<p>[vc_row rt_row_background_width="fullwidth" rt_row_content_width="default" rt_row_style="light-style" rt_row_height="" rt_column_gaps="" rt_row_shadows="" rt_row_borders="" rt_bg_effect="parallax" rt_bg_parallax_effect="4" rt_bg_image_repeat="repeat" rt_bg_size="cover" rt_bg_position="center center" rt_bg_layer="" rt_bg_video_format="self-hosted" rt_row_paddings="true" rt_padding_top="105" rt_padding_bottom="80" rt_bg_image="5130" rt_class="rt-6950250" rt_paddings="80,80,," rt_margins=",,," rt_content_margins=",,," rt_tablet_paddings=",,," rt_tablet_margins=",,," rt_tablet_content_margins=",,," rt_sp_paddings=",,," rt_sp_margins=",,," rt_sp_content_margins=",,,"][vc_column rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="auto auto" rt_bg_position="right top" rt_bg_attachment="scroll" rt_col_paddings="true" rt_wrp_col_paddings="false" rt_padding_left="15%" rt_padding_right="15%" rt_bg_color="" rt_bg_overlay_color="" rt_class="rt-1199465" rt_margins="," rt_paddings=",,15%,15%" rt_wrapper_paddings=",,," rt_tablet_margins="," rt_tablet_paddings=",,," rt_tablet_wrapper_paddings=",,," rt_sp_margins="," rt_sp_paddings=",,20,20" rt_sp_wrapper_paddings=",,,"][rt_heading style="style-4" size="h4" font_color_type="" font="" custom_font_size="" link="" link_open="_self" punchline="" rt_class="rt-8254094"]Markalarımız[/rt_heading][vc_column_text 0=""]</p>
<p style="text-align: center;">1972 yılında Küçükpazar'da temeli atılan ticarethanemiz, Tahtakale'den sonra İstoç 26.Ada no:31-33 Mahmutbey Bağcılar İSTANBUL adresinde EMRE GIDA PAZ. SAN.VE DIŞ TİC.LTD ŞTİ olarak; değerli müşterilerimize ANCHOR, MASK ve BUTTERFLY markalı ürünlerimizi tedarik edip en uygun fiyata sunmaya devam etmektedir.</p>
<p>[/vc_column_text][vc_empty_space height="30px"][rt_photo_gallery image_ids="5123,5127,5358" layout_style="grid" image_size="rtframework_retina" item_width="1/3" nogaps="true" links="false" captions="false"][/vc_column][/vc_row][vc_row rt_row_background_width="fullwidth" rt_row_content_width="default" rt_row_style="default-style" rt_row_height="" rt_column_gaps="" rt_row_shadows="" rt_row_borders="" rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="cover" rt_bg_position="right top" rt_bg_attachment="scroll" rt_bg_layer="" rt_bg_video_format="self-hosted"][vc_column rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="auto auto" rt_bg_position="right top" rt_bg_attachment="scroll"][vc_column_text]</p>
<p>' );?>[/vc_column_text][/vc_column][/vc_row]</p>"); ?>

但是，页脚没有加载。

原始小部件短代码：

<p>[vc_row rt_row_background_width="fullwidth" rt_row_content_width="default" rt_row_style="light-style" rt_row_height="" rt_column_gaps="" rt_row_shadows="" rt_row_borders="" rt_bg_effect="parallax" rt_bg_parallax_effect="4" rt_bg_image_repeat="repeat" rt_bg_size="cover" rt_bg_position="center center" rt_bg_layer="" rt_bg_video_format="self-hosted" rt_row_paddings="true" rt_padding_top="105" rt_padding_bottom="80" rt_bg_image="5130" rt_class="rt-6950250" rt_paddings="80,80,," rt_margins=",,," rt_content_margins=",,," rt_tablet_paddings=",,," rt_tablet_margins=",,," rt_tablet_content_margins=",,," rt_sp_paddings=",,," rt_sp_margins=",,," rt_sp_content_margins=",,,"][vc_column rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="auto auto" rt_bg_position="right top" rt_bg_attachment="scroll" rt_col_paddings="true" rt_wrp_col_paddings="false" rt_padding_left="15%" rt_padding_right="15%" rt_bg_color="" rt_bg_overlay_color="" rt_class="rt-1199465" rt_margins="," rt_paddings=",,15%,15%" rt_wrapper_paddings=",,," rt_tablet_margins="," rt_tablet_paddings=",,," rt_tablet_wrapper_paddings=",,," rt_sp_margins="," rt_sp_paddings=",,20,20" rt_sp_wrapper_paddings=",,,"][rt_heading style="style-4" size="h4" font_color_type="" font="" custom_font_size="" link="" link_open="_self" punchline="" rt_class="rt-8254094"]Markalarımız[/rt_heading][vc_column_text 0=""]</p>
<p style="text-align: center;">1972 yılında Küçükpazar'da temeli atılan ticarethanemiz, Tahtakale'den sonra İstoç 26.Ada no:31-33 Mahmutbey Bağcılar İSTANBUL adresinde EMRE GIDA PAZ. SAN.VE DIŞ TİC.LTD ŞTİ olarak; değerli müşterilerimize ANCHOR, MASK ve BUTTERFLY markalı ürünlerimizi tedarik edip en uygun fiyata sunmaya devam etmektedir.</p>
<p>[/vc_column_text][vc_empty_space height="30px"][rt_photo_gallery image_ids="5123,5127,5358" layout_style="grid" image_size="rtframework_retina" item_width="1/3" nogaps="true" links="false" captions="false"][/vc_column][/vc_row][vc_row rt_row_background_width="fullwidth" rt_row_content_width="default" rt_row_style="default-style" rt_row_height="" rt_column_gaps="" rt_row_shadows="" rt_row_borders="" rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="cover" rt_bg_position="right top" rt_bg_attachment="scroll" rt_bg_layer="" rt_bg_video_format="self-hosted"][vc_column rt_bg_effect="classic" rt_bg_image_repeat="repeat" rt_bg_size="auto auto" rt_bg_position="right top" rt_bg_attachment="scroll"][vc_column_text]</p>
<p>' );?>[/vc_column_text][/vc_column][/vc_row]</p>

有人可以帮我解决这个问题吗？

Answer 1

您是否遇到任何错误？

但至少最后一行是错误的。

<p>' );?>[/vc_column_text][/vc_column][/vc_row]</p>"); ?>

我认为您必须删除 '); ?> 在该行中，因为它无法运行 do_shortcode() 函数。像这样的：

<p>[/vc_column_text][/vc_column][/vc_row]</p>"); ?>

Answer 2

首先，一般镜头代码中不使用任何标签。 它们看起来像

 [contact-form-7 id="91" title="quote"]

仔细查看[文档][1]。 当您在 wordpress 系统的后端打开您的页面并以“经典模式”查看它时，您的简码就会显示出来。

对于您的问题this 可能会有所帮助。

但也许这对你来说更容易： 只需检查（右键单击 > 显示源代码）您已经使用页脚的页面。
然后将页脚的 html 复制到模板文件 (footer.php)。

查看 vc img 元素的 html 代码（您可以检查）作为示例：

<div  class="wpb_single_image wpb_content_element vc_align_left  vc_custom_1543314490168  hidden-element">
    <figure class="wpb_wrapper vc_figure">
        <div class="vc_single_image-wrapper   vc_box_border_grey">
            <img width="640" height="576" src="http://your-page.com/wp-content/uploads/x/y/z.png" class="vc_single_image-img attachment-full" alt="" srcset="http://your-page.com/wp-content/uploads/x/y/z.png 640w, http://your-page.com/wp-content/uploads/x/y/z.png 300w" sizes="100vw" />
        </div>
    </figure>
</div>

提到的另一个选项：只使用 vc 类。

Answer 3

Visual Composer 并未针对每个页面进行初始化，您可能需要从主题函数中调用资产：

add_action( 'wp_enqueue_scripts', 'add_wpbakery_assets' );

function add_wpbakery_assets() {
    wp_enqueue_script( 'wpb_composer_front_js' );
    wp_enqueue_style( 'js_composer_front' );
    wp_enqueue_style( 'js_composer_custom_css' );
}

按照@Stender 的建议进行操作并在 VC 页面中呈现代码可能更容易，然后只需将 HTML 复制到您的页脚即可。