Как создать vc_shortcodes-custom-css? Visual Composer
Мой клиент хочет, чтобы на его Wordpress-сайте была функция "Проект месяца". Но со страницей архива.
Моя идея состояла в том, чтобы создать собственный тип поста и назвать его проектами. Здесь клиент может управлять проектами и создавать новые.
С помощью этого фрагмента кода я могу взять содержимое из последней публикации проекта и поместить его на главную страницу "Проект месяца", в то время как все предыдущие проекты находятся на странице архива.
$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 предоставляет этим элементам уникальные классы, такие как
.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 не создает тег стиля для загружаемого содержимого публикации.
Таким образом, поэтому много мелких деталей стиля потеряны.
Изображение: содержимое страницы на странице архива (как оно должно выглядеть)
Изображение: содержание страницы на странице "Проект месяца"
TL: стиль визуального композитора DR не генерирует post_content
3 ответа
Вы можете использовать часть 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>';
}
замена $id с твоим $my_postid и, если необходимо, echo с $content .=
Вот функция, объединяющая то, что я видел в различных темах о переполнении стека.
Если вы используете WPBakery для компоновщика страниц и хотите использовать WP_JSON api для передачи вашего контента во внешний интерфейс, такой как Angular или React, вам необходимо сделать несколько вещей.
- Скажите wordpress преобразовать шорткоды WP Bakery в настоящий HTML
- Скажите wordpress, чтобы он включил динамически сгенерированные классы css в ответ API.
Для этого я просто сделал следующее:
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 в своем интерфейсе, например, используя angular, создав динамический маршрут, который передает слаг в качестве параметра, а затем просто подключите к нему службу преобразователя, чтобы попасть в api для этой страницы, если он найден, отобразите страницу , если не перенаправить на 404.
Затем CSS можно добавить при загрузке компонента, добавив его в заголовок.
И привет, вы получаете Angular на базе WpBakery.
Также для SEO вы можете использовать SSR и WP Yoast для управления и добавления метатегов из WP Admin.
Если возникнут какие-либо вопросы или предложения по улучшению, дайте мне знать.
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');