私はこのテーマを正確に実行しました。私は "ポートフォリオ"のカスタム投稿を作成し、それを要素として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). '">«</a>';
}
if($paged > 1 && $showitems < $pages) {
$paginationData .= '<a href="' .get_pagenum_link($paged - 1). '">«</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)."'>›</a>";
}
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) {
$paginationData .= "<a href='".get_pagenum_link($pages)."'>»</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 - のfunctions.phpに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」は「ポートフォリオ・ポスト」でなければなりません 2.カテゴリ名「register_taxonomy」「portfolio_categories」 3でなければなりません自分の分類法でこれを変更することができます。