Wie Visual Composer mit benutzerdefinierten Beitrag als Element zu erweitern

Question

Ich installierte Visual Composer in meiner Wordpress-Website. Ich muss einen benutzerdefinierten Post-Typ als ein Element in Visual Composer hinzufügen und muss die Vorlagendatei dem erstellten benutzerdefinierten Post-Typ-Element in Visual Composer zuordnen.

<?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"), 
    )); 
} 
?> 

Dieses Codeelement hat das Element im visuellen Composer erstellt. Meine Frage ist, wie man eine Vorlage diesem Element zuordnen kann.

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

Ich überschreibe auch den Standard-Shortcode-Vorlagenpfad. Aber ich habe das gewünschte Ergebnis nicht bekommen. Stellen Sie bitte eine Lösung bereit, um die Vorlage für den erstellten Post-Typ abzubilden. Vielen Dank im Voraus.

Answer 1

Ich habe genau das für mein Thema getan. Ich habe einen benutzerdefinierten "Portfolio" -Beitrag erstellt und ihn dann als Element in Visual Composer eingefügt. Es hat auch einige Optionen und es kann die Beiträge basierend auf "Kategorie" anzeigen. Unten ist der vollständige Arbeitscode.

Schritt 1 - eine PHP-Datei erstellen und diesen Code einfügen:

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

}

// dies ist eine Funktion benutzerdefinierte Paginierung. Legen Sie es in die gleiche Datei.

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; 

}

// Die nächste Funktion wird das Portfolio-Element in die Seite angezeigt werden soll. Fügen Sie es erneut in dieselbe Datei ein.

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; 

}

Schritt 2 - die Datei in Php Laden functions.php

include_once 'custom-portfolio.php'; 

// Auch in functions.php ich eine Funktion erstellt haben, die mehrere Visual Components Elemente geladen werden kann .

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

Wichtige Informationen: 1. Damit dieser Code zu arbeiten, Ihre benutzerdefinierten Post "register_post_type" sollte "Portfolio-Beiträge" sein 2. Der Name der Kategorie "register_taxonomy" sollte "portfolio_categories" sein 3 Sie können dies mit Ihrer eigenen Taxonomie ändern.