在页脚中使用Visual Composer行



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

我们的客户喜欢其中一个小部件,并希望它出现在每个页面的页脚上,但由于我们也使用Wooccommerce,我们无法将其编辑为经典的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>

有人能帮我吗?

您有任何错误吗?

但最后一行至少错了。

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

我认为你必须删除'(;?>行中,因为它无法运行do_shortcode((函数。类似这样的东西:

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

首先,通常shotcode中不使用任何标记。它们看起来像

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

仔细查看[文档][1]。当你在wordpress系统的后端打开页面时,就会显示你的快捷代码,并以"经典模式"查看它。

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

但也许这对你来说更容易:只需检查(右键单击>显示源代码(您已经在使用页脚的页面
然后将页脚的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类即可。

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复制到页脚,这可能更容易。

最新更新