如何使用自定义帖子作为元素扩展可视化作曲家

时间：2017-06-07 18:33:36

标签： wordpress custom-post-type visual-composer

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

<?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 );
?>

我还会覆盖默认的短代码模板路径。但我没有得到理想的结果。请提供解决方案，以便将创建的模板映射到帖子类型。 在此先感谢。

1 个答案:

答案 0 :(得分：1)

我已经为我的主题完成了这个。我创造了一个＆＃34;投资组合＆＃34;自定义帖子，然后将其作为元素添加到Visual Composer中。它还有一些选项，它可以显示基于＆＃34;类别＆＃34;的帖子。以下是完整的工作代码。

步骤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中我创建了一个可以加载多个Visual Components元素的函数。

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.为了使此代码有效，您的自定义帖子＆＃34; register_post_type＆＃34;应该是＆＃34; portfolio-posts＆＃34; 2.类别名称＆＃34; register_taxonomy＆＃34;应该是＆＃34; portfolio_categories＆＃34; 3.您可以使用自己的分类法进行更改。

相关问题
最新问题