如何生成vc_shortcodes-custom-css？视觉作曲家

Question

我的一个客户想要在他的 Wordpress 站点上添加一个 "project of the month" 功能。但是有一个存档页面。

我的想法是创建一个自定义 post 类型并将其称为项目。客户可以在这里管理项目和创建新项目。

通过这段代码，我可以从最新的项目 post 中获取内容，并将该内容放在主 "project of the month" 页面上，而所有过去的项目都在存档页面上。

$latest_cpt = get_posts("post_type=projects&numberposts=1");
$my_postid = $latest_cpt[0]->ID; //This is page id or post id
$content_post = get_post($my_postid);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]&gt;', $content);
echo $content;

这行得通……但不是真的。

项目页面是使用可视化作曲家构建的。并且一些元素具有背景颜色或填充。视觉作曲家赋予这些元素独特的类就像

.vc_custom_1516702624245

并在页面加载时添加自定义样式标签。像这样

<style type="text/css" data-type="vc_shortcodes-custom-css">
    .vc_custom_1516711125312 {
        padding-top: 75px !important;
        padding-bottom: 75px !important;
        background-color: #f3f5f6 !important;
    }

    .vc_custom_1516702624245 {
        background-color: #f3f5f6 !important;
    }

    .vc_custom_1516711013808 {
        margin-top: -106px !important;
    }

    .vc_custom_1516702490896 {
        padding-left: 50px !important;
    }

    .vc_custom_1516703325534 {
        margin-top: -15px !important;
    }

    .vc_custom_1516702744160 {
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .vc_custom_1516702987431 {
        padding-right: 65px !important;
    }

    .vc_custom_1516709810401 {
        border-radius: 3px !important;
    }
</style>

我的方法的问题是 visual composer 不会为正在加载的 post 内容创建 style 标签。

因此丢失了很多次要的样式细节。

Image: Page content on archive page (how it should look)

Image: Page content on "project of the month" page

TL:DR 视觉作曲家样式未生成 post_content

Answer 1

您可以使用Vc_base的部分addShortcodesCustomCss功能：

$shortcodes_custom_css = get_post_meta( $id, '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
    $shortcodes_custom_css = strip_tags( $shortcodes_custom_css );
    echo '<style type="text/css" data-type="vc_shortcodes-custom-css">';
    echo $shortcodes_custom_css;
    echo '</style>';
}

将 $id 替换为您的 $my_postid，如果需要，将 echo 替换为 $content .=

Answer 2

function usp_modify_post_type($post_type) { 
  return 'post,footer,header,page,product,'; // Edit post type as needed
}

add_filter('usp_post_type', 'usp_modify_post_type');

Answer 3

这是一个函数，结合了我在各种堆栈溢出主题中看到的内容。

如果您将 WPBakery 用于页面构建器并希望使用 WP_JSON api 将您的内容提供给 Angular 或 React 等前端，您需要执行一些东西。

告诉 wordpress 将 WP Bakery 短代码呈现为实际 HTML
告诉 wordpress 在 API 响应中包含动态生成的 css 类。

为此，我只是做了以下操作：

add_action( 'rest_api_init', function ()
{
    register_rest_field(
        'page',
        'content',
        array(
            'get_callback'    => 'compasshb_do_shortcodes',
            'update_callback' => null,
            'schema'          => null,
        )
    );
});

function compasshb_do_shortcodes( $object, $field_name, $request )
{
    WPBMap::addAllMappedShortcodes(); // This does all the work

global $post;
$post = get_post ($object['id']);
$output['rendered'] = apply_filters( 'the_content', $post->post_content );

$output['css'] = '';

$shortcodes_custom_css = get_post_meta( $object['id'], '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
    $shortcodes_custom_css = strip_tags( $shortcodes_custom_css );
    $output['css'] .= $shortcodes_custom_css;
}


return $output;
}

这基本上是returns以下内容：

  "content": {
        "rendered": "<div class=\"row\"><div class=\"col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>\n\n\t\t</div>\n\t</div>\n</div></div></div></div><div class=\"row\"><div class=\"col-sm-6\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>\n\n\t\t</div>\n\t</div>\n</div></div></div><div class=\"col-sm-6\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>\n\n\t\t</div>\n\t</div>\n</div></div></div></div><div class=\"row\"><div class=\"col-sm-4\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>\n\n\t\t</div>\n\t</div>\n</div></div></div><div class=\"col-sm-4 vc_col-has-fill\"><div class=\"vc_column-inner vc_custom_1631795792357\"><div class=\"wpb_wrapper\"><h2 style=\"text-align: left;font-family:Abril Fatface;font-weight:400;font-style:normal\" class=\"vc_custom_heading\" >This is custom heading element</h2>\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>\n\n\t\t</div>\n\t</div>\n</div></div></div><div class=\"col-sm-4\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"></div></div></div></div><div class=\"row\"><div class=\"col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div style='color:#FF0000;' data-foo='something'></div></div></div></div></div>\n",
        "css": ".vc_custom_1631795792357{background-color: #afafaf !important;}"
    },

然后您可以在您的前端使用 html 例如使用 angular 通过创建一个将 slug 作为参数提供的动态路由，然后只需将解析器服务连接到它以命中该页面的 api，如果找到，则呈现该页面，如果没有重定向到 404。

然后可以通过附加到头部来在组件加载中添加 css。

嘿嘿，你得到了 WpBakery 的支持 Angular。

同样对于 SEO，您可以使用 SSR 和 WP Yoast 从 WP Admin 控制和附加元标签。

有任何问题或改进建议请告诉我。

如何生成vc_shortcodes-custom-css？视觉作曲家

how to generate vc_shortcodes-custom-css? Visual Composer

php

wordpress

visual-composer