wordpress - 如何使用自定义帖子作为元素扩展视觉 Composer

标签 wordpress custom-post-type visual-composer

我在我的 wordpress 网站上安装了 visual composer。我需要在 visual composer 中添加自定义帖子类型作为元素，并且需要将模板文件映射到 visual composer 中创建的自定义帖子类型元素。

<?php
add_action( 'vc_before_init', 'vc_extend_func' );
function vc_extend_func() {
   vc_map( array(
      "name" => __( "Testing", "my-text-domain" ),
      "base" => "test",
      "class" => "",
      "category" => __( "Content", "my-text-domain"),
   ) );
}
?>

这段代码在 visual composer 中创建了元素。我的问题是如何将模板映射到该元素。

<?php
$dir = get_stylesheet_directory() . '/vc_templates';
vc_set_shortcodes_templates_dir( $dir );
?>

我还覆盖了默认的简码模板路径。但是我没有得到想要的结果。请提供将创建的模板映射到帖子类型的解决方案。 提前致谢。

最佳答案

我已经为我的主题做了这个。我创建了一个“投资组合”自定义帖子，然后将其作为元素添加到 Visual Composer 中。它也有一些选项，它可以根据“类别”显示帖子。以下是完整的工作代码。

第 1 步 - 创建一个 php 文件并粘贴此代码:

add_action( 'vc_before_init', 'agr_portfolio_integrateWithVC' );
function agr_portfolio_integrateWithVC() {
$taxonomy = 'portfolio_categories';
$categories_array = array();
$categories = get_terms( array(
    'taxonomy' => $taxonomy,
    'hide_empty' => false,
) );
$categories_array[] = 'All';
foreach( $categories as $category ){
    $categories_array[] = $category->name;
}

vc_map(array(
    "name" => __("Portfolio", THEME_TEXT_DOMAIN) ,
    "base" => "agr_portfolio",
    "category" => __( "Adina Addons", THEME_TEXT_DOMAIN),
    'icon' => get_template_directory_uri().'/visual_composer/agr-portfolio/agr-portfolio.png',
    'description' => __('Displays Portfolio items with many styles & options.', THEME_TEXT_DOMAIN) ,
    "params" => array(
        array(
            "type" => "dropdown",
            "heading" => __("Style", THEME_TEXT_DOMAIN) ,
            "param_name" => "agr_portfolio_style",
            "value" => array(
                "Modern" => "modern",
                "Classic" => "classic",
                "Newspaper" => "newspaper",
                "Masonry" => "masonry"
            ) ,
            "description" => __("Select Portfolio loop style to use.", THEME_TEXT_DOMAIN)
        ) ,
        array(
            "type" => "dropdown",
            "heading" => __("Category", THEME_TEXT_DOMAIN) ,
            "param_name" => "agr_portfolio_category",
            "value" => $categories_array ,
            "description" => __("Select Portfolio category to display.", THEME_TEXT_DOMAIN)
        ) ,
        array(
            "type" => "dropdown",
            "heading" => __("Image Size", THEME_TEXT_DOMAIN) ,
            "param_name" => "agr_portfolio_image_size",
            "value" => array(
                "Cover" => "cover",
                "Contain" => "contain"
            ) ,
            "description" => __("Select Portfolio image style.", THEME_TEXT_DOMAIN)
        ) ,
        array(
            "type" => "dropdown",
            "heading" => __("How many columns", THEME_TEXT_DOMAIN) ,
            "param_name" => "agr_portfolio_nr_columns",
            "value" => array(
                "Default" => "col-md-6 col-xs-12",
                "1 column" => "col-md-12 col-xs-12",
                "2 columns" => "col-md-6 col-xs-12",
                "3 columns" => "col-md-4 col-xs-12",
                "4 columns " => "col-md-3 col-xs-12",
                "6 columns " => "col-md-2 col-xs-12"
            ) ,
            "description" => __("Select Portfolio image style.", THEME_TEXT_DOMAIN)
        ) ,
        array(
            'type' => 'textfield',
            'heading' => __( 'How many posts', THEME_TEXT_DOMAIN ),
            'param_name' => 'agr_portfolio_nr_posts',
            'value' => '10',
            'admin_label' => true,
            'description' => __( 'Enter the number of posts to be displayed.', THEME_TEXT_DOMAIN ),
        ),
        array(
            "type" => "dropdown",
            "heading" => __("Order", THEME_TEXT_DOMAIN) ,
            "param_name" => "agr_portfolio_order",
            "value" => array(
                "DESC (descending order)" => "DESC",
                "ASC (ascending order)" => "ASC"
            ) ,
            "description" => __("Portfolio items will be displayed in DESC or ASC order", THEME_TEXT_DOMAIN)
        ) ,
        array(
            "type" => "dropdown",
            "heading" => __("Order By", THEME_TEXT_DOMAIN) ,
            "param_name" => "agr_portfolio_order_by",
            "value" => array(
                "Date" => "date",
                "Title name" => "title"
            ) ,
            "description" => __("Sort Portfolio items by selected parameter.", THEME_TEXT_DOMAIN)
        ) ,
        array(
            "type" => "textfield",
            "heading" => __("Extra class name", THEME_TEXT_DOMAIN) ,
            "param_name" => "agr_portfolio_class",
            "value" => "",
            "description" => __("If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your Custom CSS.", THEME_TEXT_DOMAIN)
        )
    )
));

//这是一个自定义分页功能。将其放在同一个文件中。

function agr_portfolio_pagination($pages = '', $range = 2) {

$showitems = ($range * 2)+1;
$paginationData = '';

global $paged;
if(empty($paged)) $paged = 1;

if($pages == '') {
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages) {
        $pages = 1;
    }
}

if(1 != $pages) {
    $paginationData = '<div class="pagination">';
    if($paged > 2 && $paged > $range+1 && $showitems < $pages) {
        $paginationData .= '<a href="' .get_pagenum_link(1). '">&laquo;</a>';
    }
    if($paged > 1 && $showitems < $pages) {
        $paginationData .= '<a href="' .get_pagenum_link($paged - 1). '">&laquo;</a>';
    }

    for ($i=1; $i <= $pages; $i++) {
        if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
            if($paged == $i){
                $paginationData .= "<span class='current'>".$i."</span>";
            } else {
                $paginationData .= "<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
            }
        }
    }

    if ($paged < $pages && $showitems < $pages) {
        $paginationData .= "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
    }
    if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) {
        $paginationData .= "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
    }
    $paginationData .= '</div>';
}

return $paginationData;

//下一个函数会将投资组合元素显示到页面中。再次将其粘贴到同一个文件中。

function agr_portfolio_func( $atts) {
extract(shortcode_atts(array(
    'agr_portfolio_style' => 'modern',
    'agr_portfolio_category' => '',
    'agr_portfolio_image_size' => 'cover',
    'agr_portfolio_nr_columns' => 'col-md-6 col-xs-12',
    'agr_portfolio_nr_posts' => '12',
    'agr_portfolio_order' => 'DESC',
    'agr_portfolio_order_by' => 'date',
    'agr_portfolio_class' => '',
), $atts));


if (get_query_var('paged')) {
    $paged = get_query_var('paged');
} elseif (get_query_var('page')) {
    $paged = get_query_var('page');
} else {
    $paged = 1;
}
$type = 'portfolio-posts';
$post_per_page = $agr_portfolio_nr_posts;


if ($agr_portfolio_category == '') {
    $args = array(
        'post_type' => $type,
        'post_status' => 'publish',
        'posts_per_page' => $post_per_page,
        'order' => $agr_portfolio_order,
        'orderby' => $agr_portfolio_order_by,
        'paged' => $paged
    );
} else {
    $args = array(
        'tax_query' => array(
            array(
                'taxonomy' => 'portfolio_categories',
                'field' => 'slug',
                'terms' => $agr_portfolio_category
            )
        ),
        'post_type' => $type,
        'post_status' => 'publish',
        'posts_per_page' => $post_per_page,
        'order' => $agr_portfolio_order,
        'orderby' => $agr_portfolio_order_by,
        'paged' => $paged
    );
}

$wp_query = null;
$wp_query = new WP_Query($args);

$dataToReturn = '<div class="portoflio-list ' . $agr_portfolio_class . '">';
if ($wp_query->have_posts()) {
    $totalPages = $wp_query->max_num_pages;
    while ($wp_query->have_posts()) {

        $wp_query->the_post();
        $title = get_post(get_post_thumbnail_id())->post_title; //The Title
        $caption = get_post(get_post_thumbnail_id())->post_excerpt; //The Caption
        $description = get_post(get_post_thumbnail_id())->post_content; // The Description


        switch ($agr_portfolio_style) {
            case "modern":
                if (has_post_thumbnail()) {
                    $dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
                    $dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
                    $dataToReturn .= '</a>';
                    $dataToReturn .= '<div class="content-container">';
                    $dataToReturn .= '<h4 class="portfolio-title">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
                    $dataToReturn .= '</h4>';
                    $dataToReturn .= '</div>';
                    $dataToReturn .= '</div>';
                } else {
                    $dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
                    $dataToReturn .= '<div class="image-container border-img"><h5 class="no-image-available text-center">No Img Available</h5></div>';
                    $dataToReturn .= '</a>';
                    $dataToReturn .= '<div class="content-container">';
                    $dataToReturn .= '<h4 class="portfolio-title">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" class="text-center">' . get_the_title() . '</a>';
                    $dataToReturn .= '</h4>';
                    $dataToReturn .= '</div>';
                    $dataToReturn .= '</div>';
                }
                break;
            case "classic":
                $content = get_the_content();
                $trimmed_content = wp_trim_words($content, 60, ' ...');
                $vcElementsToRemove = array(
                    '[vc_row]',
                    '[/vc_row]',
                    '[vc_column]',
                    '[/vc_column]',
                    '[vc_column_text]',
                    '[/vc_column_text]',
                    '[vc_row_inner]',
                    '[/vc_row_inner]',
                    '[vc_column_inner width="1/2"]',
                    '[vc_column_inner width="1/3"]',
                    '[vc_column_inner width="1/4"]',
                    '[vc_column_inner width="1/6"]'
                );
                $trimmed_content = str_replace($vcElementsToRemove, "", $trimmed_content);

                if (has_post_thumbnail()) {
                    $dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
                    $dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
                    $dataToReturn .= '</a>';
                    $dataToReturn .= '<div class="content-container">';
                    $dataToReturn .= '<h4 class="portfolio-title">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
                    $dataToReturn .= '</h4>';
                    $dataToReturn .= '<p class="mt20">' . $trimmed_content . '</p>';
                    $dataToReturn .= '</div>';
                    $dataToReturn .= '</div>';
                } else {
                    $dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
                    $dataToReturn .= '<div class="image-container border-img"><h5 class="no-image-available text-center">No Img Available</h5></div>';
                    $dataToReturn .= '</a>';
                    $dataToReturn .= '<div class="content-container">';
                    $dataToReturn .= '<h4 class="portfolio-title">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
                    $dataToReturn .= '</h4>';
                    $dataToReturn .= '<p class="mt20">' . $trimmed_content . '</p>';
                    $dataToReturn .= '</div>';
                    $dataToReturn .= '</div>';
                }
                break;
            case "newspaper":
                if (has_post_thumbnail()) {
                    $dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
                    $dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
                    $dataToReturn .= '</a>';
                    $dataToReturn .= '<div class="content-container">';
                    $dataToReturn .= '<h4 class="portfolio-title">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
                    $dataToReturn .= '</h4>';
                    $dataToReturn .= '</div>';
                    $dataToReturn .= '</div>';
                }
                break;
            case "masonry":
                if (has_post_thumbnail()) {
                    $dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
                    $dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
                    $dataToReturn .= '</a>';
                    $dataToReturn .= '<div class="content-container">';
                    $dataToReturn .= '<h4 class="portfolio-title">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
                    $dataToReturn .= '</h4>';
                    $dataToReturn .= '</div>';
                    $dataToReturn .= '</div>';
                }
                break;
            default:
                if (has_post_thumbnail()) {
                    $dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
                    $dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
                    $dataToReturn .= '</a>';
                    $dataToReturn .= '<div class="content-container">';
                    $dataToReturn .= '<h4 class="portfolio-title">';
                    $dataToReturn .= '<a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a>';
                    $dataToReturn .= '</h4>';
                    $dataToReturn .= '</div>';
                    $dataToReturn .= '</div>';
                }
        }
    }
    $dataToReturn .= '<div class="col-md-12 col-xs-12 navigation text-center">';
    $dataToReturn .= agr_portfolio_pagination($totalPages);
    $dataToReturn .= '</div>';
} else {
    $dataToReturn .= '<div id="post-404" class="noposts text-center">';
    $dataToReturn .= '<p>' . _e('No Portfolio Item found.', THEME_TEXT_DOMAIN) . '</p>';
    $dataToReturn .= '</div>';
}

wp_reset_postdata();

$dataToReturn .= '</div>';
return $dataToReturn;

第 2 步 - 将 Php 文件加载到 functions.php

include_once 'custom-portfolio.php';

//同样在 functions.php 中，我创建了一个将加载多个可视化组件元素的函数。

function register_vc_shortcodes(){
        add_shortcode( 'custom_portfolio', 'agr_portfolio_func' );
        add_shortcode( 'other_element', 'other_element_func' );
        add_shortcode( 'other_element2', 'other_element_func2' );
    }
    add_action( 'init', 'register_vc_shortcodes');

重要信息: 1.为了使此代码起作用，您的自定义帖子“register_post_type”应该是“portfolio-posts” 2.类别名称“register_taxonomy”应该是“portfolio_categories” 3. 你可以用你自己的分类来改变这个。

关于wordpress - 如何使用自定义帖子作为元素扩展视觉 Composer ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44420314/

上一篇：asp.net - 学习什么-Ruby on Rails或ASP .NET MVC…鉴于熟悉ASP .NET

下一篇：scripting - 如何使用 AppleScript 关闭 Safari 中的所有或部分选项卡？

相关文章：

php - 在 woocommerce 中显示产品变化 添加到购物车消息

php - 如何使用带有 JSON 字符串的 WordPress update_post_meta？

javascript - Wordpress Visual Composer Strech 行和方向 RTL

javascript - Jquery 在 html 元素中插入类

css - 固定 Visual Composer 行位置

php - 如何替换mysql数据库中的批量href链接

php - 更改 wordpress wp-admin 登录标题

wordpress - WordPress 中的全局分类法

php - 查询特定自定义帖子类型时出现问题

php - WordPress 自定义帖子类型未显示在搜索结果中

©2024 IT工具网  联系我们