如何生成vc_shortcodes自定义css？视觉作曲家
如何生成vc_shortcodes自定义css？视觉作曲家
提问于 2018-02-19 10:19:37
我的一个客户希望在他的Wordpress网站上有一个“本月最佳项目”的功能。但是有一个档案页。
我的想法是创建一个定制的post类型，并称之为项目。在这里，客户端可以管理项目并创建新的项目。
使用这段代码，我可以从最新的项目帖子中获取内容，并将该内容放在主“每月项目”页面上，而所有过去的项目都在归档页面上。
$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(']]>', ']]>', $content);
echo $content;这很管用..。但不是真的。
项目页是使用visual composer生成的。其中一些元素有背景色或衬垫。Visual composer为这些元素提供了一些独特的类，如
.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没有为正在加载的post内容创建样式标记。
因此，许多小的造型细节都丢失了。
TL：博士视觉作曲家风格不生成post_content
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-02-21 19:50:55
您可以使用addShortcodesCustomCss函数的一部分Vc_base
$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>';
}用您的$my_postid替换$my_postid，如果需要，用$content .=替换echo
Stack Overflow用户
发布于 2021-09-16 23:56:40
下面是一个函数，它结合了我在各种堆栈溢出主题中看到的内容。
如果您使用WPBakery作为页面构建器，并且希望使用WP_JSON api向前端提供内容，比如角度或响应，那么您需要做一些事情。
- 告诉wordpress将WP烘焙速记渲染成实际的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;
}这基本上返回以下内容：
"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，例如，通过创建一个动态路由，将段塞作为参数提供给它，然后简单地将解析器服务连接到它，以命中该页面的api，如果找到该页面，则呈现该页，如果没有重定向到404。
然后，css可以通过附加到头部来添加到组件加载中。
嘿，你得到了WpBakery动力的角度。
对于SEO，你可以使用SSR和WP来控制和附加来自WP管理的元标签。
如有任何问题或改进建议，请告诉我。
Stack Overflow用户
发布于 2020-10-21 05:29:11
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');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48863928
复制相关文章
相似问题
腾讯云开发者
