REDO JSComposer Additional – plugin dodający widget do WPBakery

W tym artykule stworzymy nowy widget do stworzonego wcześniej pluginu, o którym dowiesz się z poprzedniego artykułu: Własna wtyczka dodająca widget do pluginu WPBakery

Załóżmy, że chcielibyśmy określić widok, który będzie wyświetlał w określony sposób, w dowolnym miejscu na stronie dla konkretnego typu posta i z wybranymi polami. Dodatkowo całość ma być kompatybilna z pluginem WPBakery Page Puilder. Do tego celu użyjemy stworzonego we wcześniejszym wpisie pluginu REDO JSComposer Additional.

Jak stworzyć plugin dodający widget do WPBakery, który wyświetla wybrane Custom Post’y ?

Zabierajmy się do działania.

Wchodzimy do folderu z naszym pluginem – redo-jscomposer-additional – następnie wchodzimy w folder – widgets – i tworzymy nowy plik .php, który nazwiemy custom-post-widget.php.

Teraz podobnie jak w poprzednim poście tworzymy podstawowy szkielet naszego widget’u. Do tego celu wykorzystamy wcześniej stworzony widget projekty i skopiujemy co nam potrzebne.

Zostawiamy ścieżkę zabezpieczającą dostęp do plików ABSPATH, zmieniamy nazwę klasy dziedziczącej na WPBakeryShortCode_customPostWidget. Należy zostawić tablicę $args oraz zapytanie WP_Query oraz funkcję vc_map(). Wszystko należy poprawnie skonfigurować.

Poniżej znajduje się pusty szkielet naszego widget’u skonfigurowany pod napisanie naszego nowego dodatku do pluginu.

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}
class WPBakeryShortCode_customPostWidget extends WPBakeryShortCode
{

    protected function content()
    {

            $args = array(
                'post_type' => '',
                'posts_per_page' => -1,
                'orderby' => 'date'
            );

            $typ_posta = new WP_Query($args);

            ob_start(); ?>

                <!-- HTML DESIGN HERE -->
                
                    <?php while ($typ_posta->have_posts()) :  $typ_posta->the_post(); ?>
                    <!-- Wyświetlanie pól posta tutaj -->
                    <?php endwhile; ?>
            </div>
                <!-- HTML END DESIGN HERE -->
            <?php
            return ob_get_clean();
    }
}


    vc_map( array(
        "name" 			=> __( 'Custom Post Widget', 'custom_post_widget' ),
        "base" 			=> "custom_post_widget",
        "category" 		=> __('REDO JSComposer Additional'),
        "description" 	=> __('Display view for Custom Post Type'),
        "icon" => plugin_dir_url( __FILE__ ).'../images/eye-icon.png'
    ) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_customPostWidget extends WPBakeryShortCode

{

protected function content()

{

$args = array(

'post_type' => '',

'posts_per_page' => -1,

'orderby' => 'date'

);

$typ_posta = new WP_Query($args);

ob_start(); ?>

<?php while ($typ_posta->have_posts()) : $typ_posta->the_post(); ?>

<?php endwhile; ?>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Custom Post Widget', 'custom_post_widget' ),

"base" => "custom_post_widget",

"category" => __('REDO JSComposer Additional'),

"description" => __('Display view for Custom Post Type'),

"icon" => plugin_dir_url( __FILE__ ).'../images/eye-icon.png'

) );

Teraz możemy przystąpić do edycji widget’u, aby pobrał odpowiednie wartości i wyświetlił je w formie odpowiedniego widoku.

Zacznijmy od przygotowania naszego widgetu do pobrania listy custom post’ów oraz pól, które chcielibyśmy wyświetlić. Skorzystamy z wbudowanej opcji WPBakery, pozwalającej na pobranie listy post’ów z pluginu CPT UI. Listę przekażemy do zmiennej $customPostList.

$customPostList = get_option( 'cptui_post_types' );

1	$customPostList = get_option( 'cptui_post_types' );

Chcielibyśmy sprawdzić co znajduje się w naszej zmiennej, aby móc poprawnie przefiltrować dane i przekazać do naszej funkcji vc_map. Potrzebna nam do tego funkcja, która pozwala na debugowanie zmiennej. Funkcję stworzymy w pliku main.php, więc musimy się cofnąć do folderu głównego naszego pluginu i przejść do edycji pliku.

Tworzymy funkcję debug(), nadajemy jej parametry public static aby można było się do niej odwołać w pliku customPostRedo.php. Do funkcji przekazywać będziemy zmienną $var– zawierającą naszą zmienną do „sprawdzenia” oraz zmienną $die – odpowiadającą za działanie funkcji, będziemy przekazywać w niej wartość true albo false w zależności czy chcemy aby debug działał.

Aby poprawnie wyświetlało wartości zmiennej musimy użyć tagu html – ’<pre></pre>’ oraz funkcji print_r, która wypisze wartość debugowanej zmiennej.

Jeśli parametr $die będzie miał wartość false, używamy funkcji die(), która uśmierci funkcję debug().

public static function debug($var, $die = false) {
            echo "<pre>";
            print_r($var);
            echo "</pre>";
            if ($die) die();
}

public static function debug($var, $die = false) {

echo "<pre>";

print_r($var);

echo "</pre>";

if ($die) die();

}

Już wiemy jak sprawdzić co znajduje się w naszej zmiennej, zastosujmy na niej naszą funkcję.

Otrzymaliśmy tablicę, zawierającą listę custom post’ów, których używamy na naszym WordPressie oraz ich wartości ustawione w pluginie CPT UI. W naszym przypadku chcielibyśmy wydobyć następujące pola:

nazwa typu posta – znajduje się ona zarówno jako nazwa tablicy [’partnerzy’] oraz jako wartość pola [name],
pola, których używa nasz post – podstawowe pola, takie jak tytuł posta, opis itp, które znajdują się pod wartością pola [supports],
custom fields – pola własne, które chcielibyśmy wyświetlić w widoku – niestety nie znajdują się w tablicy, którą otrzymaliśmy.

Po odpowiedniej pracy na tablicy otrzymanej za pomocą get_option(’cptui_post_types’) jesteśmy w stanie wykonać dwie pierwsze kropki z powyższej listy. Aby wydobyć custom-fields, musimy stworzyć odpowiednią funkcję w pliku main.php. Przejdźmy do jego edycji.

Tworzymy funkcję prepareCustomFields(), nadajemy status public static, abyśmy mieli dostęp w innych plikach. Pierwszym krokiem w funkcji jest pobranie grup naszych pól, które posiadamy w pluginie Custom Fields. Posłuży nam do tego wbudowana funkcja: acf_get_raw_field_groups(). Wywołujemy ją do zmiennej $groups. Pobraną listę grup musimy odpowiednio posortować i przekazać do tablicy wyściowej, którą zwrócimy do pliku customPostRedo.php, nazwiemy ją $fields.

public static function prepareCustomFields()
    {
        $groups = acf_get_raw_field_groups();
        $fields = array();
        return $fields;
 }

public static function prepareCustomFields()

{

$groups = acf_get_raw_field_groups();

$fields = array();

return $fields;

}

Stwórzmy funkcję, która odpowiednio przypisze nam nazwy pola do tablicy $fields. Funkcję nazwiemy parseCustomFields(), która będzie pobierać wartości:

$fieldList– lista pól custom fields, którą pobierzemy za pomocą wbudowanej funkcji: acf_get_fields(), dla danej grupy pól,
$fields– tablica wyjściowa naszej funkcji,
$group– ID grupy pól.

W pętli foreach()odpowiednio przypisujemy pola custom fields do naszej tablicy.

private static function parseCustomFields($fieldList, &$fields, $group){
        foreach($fieldList as $field){
            $fields[$group]["fields"][$field["name"]]["value"] = $field["name"];
        }
}

private static function parseCustomFields($fieldList, &$fields, $group){

foreach($fieldList as $field){

$fields[$group]["fields"][$field["name"]]["value"] = $field["name"];

}

Teraz za pomocą naszej funkcji przypisujemy do tablicy custom fields. Za pomocą pętli foreach()przypisujemy dla każdej z grup odpowiednie pola. Ustawiamy tytuł grupy przechowywany w wartości $group[„title”] oraz pobieramy listę pól za pomocą acf_get_fields(). Następnie wywolujemy naszą funkcję parseCustomFields() w której przekazujemy odpowiednio parametry. Zwracamy za pomocą return naszą tablicę z custom fields.

public static function prepareCustomFields() {
        $groups = acf_get_raw_field_groups();
        $fields = array();
        foreach($groups as $group){
            $fields[$group["ID"]]["title"] = $group["title"];
            $field_list = acf_get_fields($group["ID"]);
            self::parseCustomFields($field_list, $fields, $group["ID"]);
        }
        return $fields;
}

public static function prepareCustomFields() {

$groups = acf_get_raw_field_groups();

$fields = array();

foreach($groups as $group){

$fields[$group["ID"]]["title"] = $group["title"];

$field_list = acf_get_fields($group["ID"]);

self::parseCustomFields($field_list, $fields, $group["ID"]);

}

return $fields;

}

Wracamy do pliku customPostRedo.php i przystępujemy do odpowiedniej modyfikacji danych przed przesłaniem ich do vc_map. Posiadamy już naszą listę custom postów z polami podstawowymi, która znajduje się w zmiennej $customPostList. Stwórzmy dwie nowe tablice, które odpowiednio przechowają typ custom post’a oraz parametry (pola custom post’a):

$_custom_posts – tablica przechowująca podstawowe pola posta oraz jego typ i nazwę,
$_custom_posts_params– tablica przechowująca nazwy typów postów,

Sprawdzamy czy nasza lista $customPostList zawiera jakieś custom post’y. Następnie dla każdego post’a przypisujemy odpowiednio wartości do naszych tablic $_custom_posts oraz $_custom_posts_params.

if($customPostList){
    foreach($customPostList as $postList){
        $_custom_posts_params[$postList["label"]] = $postList["name"];
        $_custom_posts[$postList["name"]]["type"] = $postList["name"];
        $_custom_posts[$postList["name"]]["label"] = $postList["label"];
        $supportsArray = array_flip($postList["supports"]);
        foreach($supportsArray as $key => $value){
            $supportsArray[$key] = $key;
        }
        $_custom_posts[$postList["name"]]["supports"] = $supportsArray;      
    }
}

if($customPostList){

foreach($customPostList as $postList){

$_custom_posts_params[$postList["label"]] = $postList["name"];

$_custom_posts[$postList["name"]]["type"] = $postList["name"];

$_custom_posts[$postList["name"]]["label"] = $postList["label"];

$supportsArray = array_flip($postList["supports"]);

foreach($supportsArray as $key => $value){

$supportsArray[$key] = $key;

}

$_custom_posts[$postList["name"]]["supports"] = $supportsArray;

}

$_custom_posts_params[$postList[„label”]] = $postList[„name”] – tutaj przypisujemy nazwę typu posta, np projekty, do tablicy $_custom_posts,
$_custom_posts[$postList[„name”]][„type”] = $postList[„name”] – tutaj przekazujemy typ do tablicy z polami posta nazwę typu posta,
$_custom_posts[$postList[„name”]][„label”] = $postList[„label”] – label typu posta,
$supportsArray– tutaj odwracamy wartości tablicy $postList[„supports”], aby nazwa pola była nazwą klucza, następnie za pomocą pętli foreach() przekazujemy wartość klucza do wartości, żeby później łatwiej wydobywać nazwę pola,
$_custom_posts[$postList[„name”]][„supports”] = $supportsArray– przekazujemy tablicę $supportsArray.

Kolejnym krokiem będzie przygotowanie listy custom fields dla odpowiednich typów wpisów.

Pobieramy listę postów za pomocą utworzonej wcześniej w pliku main.php funkcji prepareCustomFields(), którą dziedziczymy z naszej klasy VC_REDO za pomocą operatora dziedziczenia ’ :: ’.

$fields = VC_REDO::prepareCustomFields();

1	$fields = VC_REDO::prepareCustomFields();

Tworzymy pustą tablicę do, której przekażemy odpowiednio nazwy pól własnych. Sprawdzamy czy zmienna $fields nie jest pusta, następnie za pomocą foreach(). Każde pole w tablicy $fields odpowiednio przypisujemy do naszej tablicy $customFieldsList.

$customFieldsList = array();
if($fields){
    foreach($fields as $field){
        $customFieldsList[$field["title"]]["customFields"] = $field["fields"];
    }
}

$customFieldsList = array();

if($fields){

foreach($fields as $field){

$customFieldsList[$field["title"]]["customFields"] = $field["fields"];

}

Przechodzimy do stworzenia tablicy, którą przekażemy do vc_map. Tablica będzie zawierać wcześniej utworzone tablice, które zostaną w odpowiedni sposób przekazane według parametrów vc_map (pełną dokumentacją znajdziesz w dokumentacji: https://kb.wpbakery.com/docs/inner-api/vc_map/ ).

Tworzymy tablicę, którą przekażemy później jako parametr w vc_map i nazwiemy ją $paramsArray[]. Przekazujemy do niej pierwszą tablicę z nazwami własnych typów postów – $_custom_posts_params w parametrze value. Nazwę pola, za pomocą, którego później będziemy wydobywać wybrany typ posta nazwiemy redo_post, którą przekazujemy w parametrze param_name.

$paramsArray[] =  array(
    "type" => "checkbox",
    "heading" => __("Choose your Post Type"),
    "param_name" => "redo_post",
    "value" => $_custom_posts_params,
    "description" => __("Choose Post Type which you want to display"),
);

$paramsArray[] = array(

"type" => "checkbox",

"heading" => __("Choose your Post Type"),

"param_name" => "redo_post",

"value" => $_custom_posts_params,

"description" => __("Choose Post Type which you want to display"),

);

Teraz chcielibyśmy dodać do naszego pluginu możliwość wybierania pól do wyświetlenia. Zrobimy to przekazując odpowiednio wcześniej stworzone tablice do tablicy $paramsArray[], za pomocą pętli foreach(). Dla każdego klucza $key z tablicy $_custom_postsprzypisujemy wartość $cp.

Pierwszym krokiem w pętli będzie stworzenie tablicy, wykluczającej pole custom-fields z tablicy z podstawowymi polami (custom-fields będą przekazane w oddzielnej tablicy), nazwiemy ją $custom_params. Za pomocą funkcji unset() usuwamy pole custom-fields z listy. Następnie za pomocą value przekazujemy tablicę $custom_params, a w param_name nadajemy nazwę od nazwy typu posta $key i dodajemy przyrostek _post_support.

foreach($_custom_posts as $key => $cp){
    $custom_params = $cp["supports"];
    unset($custom_params["custom-fields"]);
    $paramsArray[] = array(
        "type" => "checkbox",
        "heading" => __("Chose additional fields for " . $cp["label"]),
        "param_name" => $key. "_post_support",
        "value" => $custom_params,
        "description" => __("Check fields that you need"),
);}

foreach($_custom_posts as $key => $cp){

$custom_params = $cp["supports"];

unset($custom_params["custom-fields"]);

$paramsArray[] = array(

"type" => "checkbox",

"heading" => __("Chose additional fields for " . $cp["label"]),

"param_name" => $key. "_post_support",

"value" => $custom_params,

"description" => __("Check fields that you need"),

);}

Teraz przechodzimy do dodania custom fields do naszego widgetu. Działamy nadal w tej samej pętli foreach(). Sprawdzamy czy istnieje pole custom-fields w danym typie posta za pomocą sprawdzenia wartości $cp[„supports”][„custom-fields”]. Jeśli dana wartość istnieje tworzymy kolejną pętle foreach() do, której przekazujemy $customFieldList, gdzie klucz przekazujemy jako zmienną $fka wartość jako zmienną $fv. W pętli tworzymy tablicę $customList przechowującą listę pól własnych, które pobieramy z $fv[„customFields”]. Następnie przypisujemy wartości kluczy do wartości w naszej liście $customList za pomocą pętli foreach(). Ostateczną formę tablicy $customList przesyłamy do tablicy $paramsArray[] analogicznie jak tablicę $custom_params.

Na dole cały kod tworzący tablicę $paramsArray[].

$paramsArray[] =  array(
    "type" => "checkbox",
    "heading" => __("Choose your Post Type"),
    "param_name" => "redo_post",
    "value" => $_custom_posts_params,
    "description" => __("Choose Post Type which you want to display"),
);


foreach($_custom_posts as $key => $cp){
    $custom_params = $cp["supports"];
    unset($custom_params["custom-fields"]);
    $paramsArray[] = array(
        "type" => "checkbox",
        "heading" => __("Chose additional fields for " . $cp["label"]),
        "param_name" => $key. "_post_support",
        "value" => $custom_params,
        "description" => __("Check fields that you need"),
    );
     
    if($cp["supports"]["custom-fields"]){
    foreach($customFieldsList as $fk => $fv){
        $customList = $fv["customFields"];
        VC_REDO::debug($customList, true);
        foreach($customList as $ck => $cv) {
            $customList[$ck] = $ck;
        }
        $paramsArray[] = array(
            "type" => "checkbox",
            "heading" => __("Chose custom fields for " . $cp["label"]),
            "param_name" => $key. "_field_support",
            "value" => $customList,
            "description" => __("Check custom fields that you need"),
            );
        }   
    }    
}

$paramsArray[] = array(

"type" => "checkbox",

"heading" => __("Choose your Post Type"),

"param_name" => "redo_post",

"value" => $_custom_posts_params,

"description" => __("Choose Post Type which you want to display"),

);

foreach($_custom_posts as $key => $cp){

$custom_params = $cp["supports"];

unset($custom_params["custom-fields"]);

$paramsArray[] = array(

"type" => "checkbox",

"heading" => __("Chose additional fields for " . $cp["label"]),

"param_name" => $key. "_post_support",

"value" => $custom_params,

"description" => __("Check fields that you need"),

);

if($cp["supports"]["custom-fields"]){

foreach($customFieldsList as $fk => $fv){

$customList = $fv["customFields"];

VC_REDO::debug($customList, true);

foreach($customList as $ck => $cv) {

$customList[$ck] = $ck;

}

$paramsArray[] = array(

"type" => "checkbox",

"heading" => __("Chose custom fields for " . $cp["label"]),

"param_name" => $key. "_field_support",

"value" => $customList,

"description" => __("Check custom fields that you need"),

);

}

Przekazujemy tablicę $paramsArray do vc_map oraz standardowo nazywamy nasz widget. Jeśli nie wiesz na czym to polega odsyłam do poprzedniego poradnika.

vc_map( array(
        "name" 			=> __( 'Custom Post Widget', 'customPostRedo' ),
        "base" 			=> "customPostRedo",
        "category" 		=> __('REDO JSComposer Additional'),
        "description" 	=> __('Display view for Custom Post Type'),
        "icon" => plugin_dir_url( __FILE__ ).'../images/eye-icon.png',
        'params' =>
            $paramsArray
        ,
) );

vc_map( array(

"name" => __( 'Custom Post Widget', 'customPostRedo' ),

"base" => "customPostRedo",

"category" => __('REDO JSComposer Additional'),

"description" => __('Display view for Custom Post Type'),

"icon" => plugin_dir_url( __FILE__ ).'../images/eye-icon.png',

'params' =>

$paramsArray

) );

Nasz widget już pobiera listę własnych typów postów, oraz ich pól, a także pól własnych z pluginu Custom Fields. Możemy teraz wybrać jakie typy postów chcemy wyświetlić i jakie pola.

Udało nam się stworzyć widget, natomiast nie obsłużyliśmy jeszcze wyświetlenia wybranych parametrów. Przechodzimy do edycji widoku wyświetlanego przez nasz widget.

Najpierw za pomocą funkcji extract() pobieramy atrybuty przekazane do naszego widgetu w WPBakery. Wszystkie wartości będą znajdować się w tablicy $atts.

extract(shortcode_atts(array(
            '' => '',
        ), $atts));

extract(shortcode_atts(array(

'' => '',

), $atts));

Typy postów, które zostały wybrane w widget’cie znajdują się pod kluczem $atts[’redo_post’]. Wcześniej nazwaliśmy nazwę parametru dla tablicy $_custom_post_params – redo_post, dlatego wartości znajdują się pod takim kluczem.

Teraz przechodzimy do podzielenia typów postów za pomocą funkcji explode(), która pozwala na dzielenie łancucha string po wybranej wartości. Nasz plugin przekazuje wartości w formie łańcucha string, w którym wartości oddzielone są kolejno przecinkami. Nasze typy postów przekazujemy do zmiennej $postTypes.

$postTypes = explode(",",$atts['redo_post']);

1	$postTypes = explode(",",$atts['redo_post']);

Następnie należy sprawdzić czy nasza tablica $postTypesnie jest pusta. Jeśli nie jest przechodzimy do stworzenia widoku dla każdego typu posta znajdującego się w tablicy. Robimy to za pomocą pętli foreach(). Pojedynczy post będzie znajdował się pod zmienną $postType.

Dla pojedynczego posta tworzymy div o nazwie post-type-container, zawierający nazwę typu posta w klasie (za pomocą CSS, możemy następnie odpowiednio modyfikować widok oddzielnie dla każdego typu posta). Wyświetlimy napis h2 informujący o typie posta.

 <?php if(!empty($postTypes)) : ?>
                <?php foreach($postTypes as $postType) : ?>
                    <div class="post-type-container <?php echo $postType ?>">
                    <h2><?php echo $postType ?></h2>
</div>
<?php endforeach; ?>
?php endif; ?>

<?php if(!empty($postTypes)) : ?>

<?php foreach($postTypes as $postType) : ?>

</div>

<?php endforeach; ?>

?php endif; ?>

Wewtnąrz pętli foreach() pobieramy listę postów dla danego typu posta (zmienna $postType) i przekazujemy ją do tablicy $postList.

$postList = get_posts(array(
                        'post_type' => $postType,
                        'posts_per_page' => -1
                    ));

$postList = get_posts(array(

'post_type' => $postType,

'posts_per_page' => -1

));

Następnie odpowiednio porządkujemy otrzymane z tablicy $atts wartości i przypisujemy do odpowiednich zmiennych. Tablica $postFields– będzie zawierała pola domyślne posta, jeśli zostały wybrane, natomiast $customFields będzie zawierała pola własne. Wykonujemy operacje wydobywania wartości z tablicy $atts analogicznie jak w przypadku $postTypes.

$postFields = explode(",",$atts[$postType.'_post_support']);
$customFields = explode(",",$atts[$postType.'_field_support']); ?>

1 2	$postFields = explode(",",$atts[$postType.'_post_support']); $customFields = explode(",",$atts[$postType.'_field_support']); ?>

Teraz sprawdzamy czy posty znajdują się w tablicy $postList. Jeśli tablica nie jest pusta dla każdego pojedynczego posta definiujemy w pętli foreach() zmienną $myPost przechowującą wpis.

Dla każdego posta tworzymy div z klasą post-container i nazwą typu posta.

<?php if(!empty($postList)) : ?>
                        <?php foreach($postList as $myPost): ?>
                            <div class="post-container <?php echo $postType ?>">
</div>
<?php endforeach; ?>
<?php endif; ?>

<?php if(!empty($postList)) : ?>

<?php foreach($postList as $myPost): ?>

</div>

<?php endforeach; ?>

<?php endif; ?>

Następnie w pętli dla pojedynczego posta, sprawdzamy czy zmienna $postFields nie jest pusta i następnie wyświetlamy dla każdego pola div z klasą post-field-container i nazwą pola. Sprawdzamy, czy w $postFields znajduje się wartość thumbnail, która przechowuje obraz. Jeśli tak – używamy funkcji get_the_post_thumbnail(), jeśli nie – get_post_field(). Za pomocą tych funkcji możemy wyświetlić wybrane pola w widoku.

<?php if(!empty($postFields)) : ?>
                            <?php foreach($postFields as $key => $value) : ?>
                                <div class="post-field-container <?php echo $value ?>">
                                    
                                    <?php if($value=="thumbnail") {
                                        echo get_the_post_thumbnail($myPost->ID, 'medium');
                                    }
                                    else { ?>
                                        <?php echo get_post_field("post_".$value, $myPost->ID); ?>
                                    <?php } ?>
                                </div>
                            <?php endforeach; ?>
                            <?php endif; ?>

<?php if(!empty($postFields)) : ?>

<?php foreach($postFields as $key => $value) : ?>

<?php if($value=="thumbnail") {

echo get_the_post_thumbnail($myPost->ID, 'medium');

}

else { ?>

<?php echo get_post_field("post_".$value, $myPost->ID); ?>

<?php } ?>

</div>

<?php endforeach; ?>

<?php endif; ?>

Przechodzimy do wyświetlenia Custom Fields. Sprawdzamy czy nasza tablica $customFields nie jest pusta. Jeśli w tablicy znajdują się w wartości – wyświetlamy div o klasie custom-field-container i nazwa pola. Następnie pobieramy pole własne za pomocą funkcji get_field(). Następnie sprawdzamy czy nasze pobrane pole jest tablicą za pomocą funkcji is_array(). Jeśli jest tablicą wyświetlamy je jako obraz. Nie zawsze ta reguła będzie działać – w zależności jakich pól własnych używamy. W naszym przypadku ta reguła zadziała bo jedyna tablica jakiej używamy w polach własnych to obrazy. Jeśli nie jest to tablica – wyświetlamy pole domyślnie.

 <?php if(!empty($customFields)) : ?>
                            <?php foreach($customFields as $key => $value) : ?>
                                <div class="custom-field-container <?php echo $value ?>">
                                    <?php $customField = get_field($value,$myPost->ID);
                                        if(is_array($customField)) {
                                            $size = 'thumbnail';
                                            echo '<img src="' . esc_url( $customField['sizes'][$size] ) . '"/>';
                                        }
                                        else {
                                            echo $customField;
                                        }
                                    ?>
                                </div>
                            <?php endforeach; ?>
                            <?php endif; ?>

<?php if(!empty($customFields)) : ?>

<?php foreach($customFields as $key => $value) : ?>

<?php $customField = get_field($value,$myPost->ID);

if(is_array($customField)) {

$size = 'thumbnail';

echo '<img src="' . esc_url( $customField['sizes'][$size] ) . '"/>';

}

else {

echo $customField;

}

</div>

<?php endforeach; ?>

<?php endif; ?>

Wyświetlanie wybranych typów postów i pól jest gotowe. Otrzymaliśmy widok, który wyświetla pola zaznaczone w widget’cie.

Podsumowanie

Plugin REDO JSComposer Additional umożliwia tworzenie widoków dla własnych typów postów i pól, które wybieramy z poziomu pluginu WPBakery. Widok, który otrzymaliśmy możemy łatwo przystosować za pomocą CSS, ponieważ klasy różnią się w zależności od typu posta i nazwy pola.

Trudności w tworzeniu pluginu jest wiele. Przede wszystkim trzeba zapoznać się z tablicami asocjacyjnymi, żeby można było bez problemu operować na zbiorach danych zawartych w tym pluginie. Zapoznać się trzeba także z debugowaniem zmiennych. Niejednokrotnie trzeba sprawdzić co znajduje się w danej tablicy, aby móc zrozumieć kod zawarty powyżej.

Plugin, który został przedstawiony w tym poradniku, bardzo przyspiesza pracę z WPBakery i pluginami CPT UI oraz Custom Fields.