WPBakery - Eigen Elementen Maken

WPBakery Elementen Maken

WPBakery (voorheen Visual Composer) heeft standaard al erg veel elementen in zich. Thema-ontwikkelaars die WPBakery in het thema meeleveren voegen vaak nog een aantal zelf-ontwikkelde elementen toe.

Wisselen we van thema, en dan met name naar een thema van een andere ontwikkelaar; zijn de thema-afhankelijke elementen niet meer beschikbaar.

In de praktijk komt het vaak voor dat we bepaalde elementen ook op andere websites willen gebruiken of bij thema-wisseling een bepaald element willen behouden. In dit eerste artikel zullen we behandelen hoe we een eigen WPB-element kunnen maken en toevoegen.

Service Blok

Als voorbeeld-element gaan we een “Service Blok” maken, waarin de aangeboden diensten kunnen gaan plaatsen; zoals bij deze Trimsalon:

WPBakery Service Blokken

Voorbeeld: Service Blokken

Hier hebben we 3 blokken, waarin we in ieder blok een korte beschrijving geven van de geboden diensten, met een afbeelding, stukje tekst, een link-knop en een label (rechts boven in het blok).

Basis Code(s) Aanmaken

Er zijn, als zo vaak, vele wegen die naar Rome leiden. Zo ook met het maken van een eigen element voor WPBakery. Wij hebben gekozen voor de manier om er gelijk een eigen plugin van te maken, zodat we die dan eenvoudig kunnen kopiëren of installeren op meerdere websites en gelijktijdig ook eenvoudig kunnen activeren of deactiveren bij aanpassingen.

De eerste stap (en deze behoeft later bij het maken van meerdere elementen, niet herhaald te worden) is het aanmaken van een map in de map “/wp-content/plugins/”. We gebruiken hiervoor FileZilla:

WordPress Plugin Mam maken

Plugin Map Aanmaken

Wij noemen die map “qwain-wpb-addons”. Die map mag iedere willekeurige naam krijgen. Het is wel aan te raden deze zonder spaties te benoemen en in kleine letters.

In die map plaatsen we dan een tweetal php-bestanden. De eerste krijgt dezelfde naam als de map en heet dan “qwain-wpb-addons.php”. Het tweede bestandje krijgt de benaming “qwain-service-block.php”. Dit gedeelte is ongeveer hetzelfde als bij het maken van een eigen plugin (zie artikel: WordPress Code Snippet Plugin Maken).

Het eerste bestandje is het hoofdbestand van de plugin en de tweede het bestand met de blok-specifieke codes.

Plugin Bestand Inhoud

Het plugin bestand met de naam “qwain-wpb-addons.php” krijgt de volgende code:

<?php

/*
Plugin Name: QWAIN WPBakery Elementen
Description: Extra Elementen voor WPBakery / Visual Composer
Author: QWAIN
Version: 1.0.0
Author URI: https://qwain.nl/
*/

// Voor VC Init

add_action( 'vc_before_init', 'vc_before_init_actions' );

function vc_before_init_actions() {

// Element Bekend Maken

include( plugin_dir_path( __FILE__ ) . 'qwain-service-block.php');

}

// Extra StyleSheet Bekend Maken

function qwain_load_scripts() {
    wp_enqueue_style( 'qwain-wpb-addons-stylesheet',  plugin_dir_url( __FILE__ ) . 'assets/css/qwain-wpb-addons.css' );
}
add_action( 'wp_enqueue_scripts', 'qwain_load_scripts' );

Via de regels 13 t/m 19 maken we het extra element bekend aan WPBakery. Op regel 19 hebben we het bestand van het service-blok aangegeven. Willen we nu meerdere elementen toevoegen dan kan dat door achter regel 19 eenzelfde regel op te nemen met het volgende element.

Dit bestand slaan we op in de plugin-map die we hiervoor hebben aangemaakt (in ons geval, de map: “wp-content/plugins/qwain-wpb-addons/”.

De eerste regels (4 t/m 8) maken de plugin bekend aan WordPress. Die regels kun je naar eigen wens aanpassen.

Nu dienen we het service-blok php-bestand aan te maken.

Service Blok PHP-Bestand

De volgende code plaatsen we nu in het bestand “qwain-service-blok.php”:

<?php

/*
Element Description: QWAIN Service Blok
*/

// Element Class
class vcInfoBox extends WPBakeryShortCode {

    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_qwain_service_box_mapping' ) );
        add_shortcode( 'vc_qwain_service_box', array( $this, 'vc_qwain_service_box_html' ) );
    }

    // Element Mapping
    public function vc_qwain_service_box_mapping() {

        // Stop all if VC is not enabled
        if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }

        // Map the block with vc_map()
        vc_map(
            array(
                'name' => __('Service Blok', 'text-domain'),
                'base' => 'vc_qwain_service_box',
                'class' => '',
                'category' => __('QWAIN Elementen', 'text-domain'),
                'icon' => plugin_dir_path( __FILE__ ) . 'assets/images/qw-service-block.png',
                'description' => __( 'Voeg een service blok toe', 'text-domain' ),
                'params' => array(
                    array(
                        'type' => 'attach_image',
                        'heading' => __( 'Afbeelding', 'text-domain' ),
                        'param_name' => 'qwain_sb_img',
                        'description' => __( 'Voeg een afbeelding bij de service toe', 'text-domain' ),
                        'group' => 'Service Blok',
                    ),

                    array(
                        'type' => 'textfield',
                        'heading' => __( 'Service Titel', 'text-domain' ),
                        'param_name' => 'qwain_sb_title',
                        'value' => __( '', 'text-domain' ),
                        'description' => __( 'Geef de titel van de service op', 'text-domain' ),                        
                        'group' => 'Service Blok',
                    ),

                    array(
                        'type' => 'textarea_html',
                        'heading' => __( 'Service Omschrijving', 'text-domain' ),
                        'param_name' => 'content',
                        'value' => __( '', 'text-domain' ),
                        'description' => __( 'Geef een korte omschrijving op van de service', 'text-domain' ),
                        'group' => 'Service Blok',
                    ),

                ),
            )
        );

    }

    // Element HTML
    public function vc_qwain_service_box_html( $atts, $content ) {

        // Params extraction
        extract(
            shortcode_atts(
                array(
                    'qwain_sb_img' => 'qwain_sb_img',
                    'qwain_sb_title'   => '',
                ),
                $atts
            )
        );

        $qwain_sb_img_url = wp_get_attachment_image_src( $qwain_sb_img, "large");

        // Fill $html var with data
        $html = '
        <div class="qw-service-block-wrap">

            <img class="qw-service-block-img" src="'. $qwain_sb_img_url[0] .'">

            <h2 class="qw-service-block-title">' . $qwain_sb_title . '</h2>

            <div class="qw-service-block-text">'. $content .'</div>

        </div>';

        return $html;

    }

} // End Element Class

// Element Class Init
new vcInfoBox();

Het belangrijkst gedeelte hier begint vanaf regel 25 ( vc_map ). Vanaf daar wordt het element gedefinieerd:

  • op regel 27 geven we het element een naam (‘name’ => …);
  • op regel 30, plaatsen we het element in een eigen tabblad (‘category’  =>…). Bestaat dat tabblad nog niet, maakt WPBakery die aan, bestaat die wel wordt het element daaraan toegevoegd;
  • op regel 31, geven we een ‘eigen’ icoontje aan het element;
  • en op regel 32 een korte omschrijving welke onder de naam van het element getoond wordt.

De volgende regels (vanaf regel 33 t/m 66) zijn de onderdelen welke we aan het element gaan toevoegen (titel, afbeelding en service-omschrijving).

De regels 84 t/m 92 zijn de daadwerkelijk HTML-codes om het element te maken (te tonen aan de voorkant van de website).

Hebben we deze bestanden geupload naar onze plugin map en de plugin geactiveerd, verschijnt het tabblad en het element in WPBakery:

Eigen element toegevoegd aan WPBakery

Element in WPBakery

Kiezen we dan het element, kunnen we onderdelen invullen welke we op de regels 33 t/m 66 van de code hebben gedefinieerd:

Visual Composer Element in Pagina Plaatsen

Element aan pagina toevoegen

Het service-blok ziet er op de frontend (voorkant) van de website nu zo uit:

Qwain Service Blok Frontend weergave

Frontend Weergave

De styling van het blok hebben we aangemaakt in het bestand “qwain-wpb-addons-styles.css”, welke we in het plugin-bestand bekend hadden gemaakt.

De style-codes zien er dan als volgt uit:

/* Service Block Styling */

.qw-service-block-wrap {
    border: 1px solid #404870;
    border-radius: 5px;
    margin-bottom: 31px;
    padding-bottom: 28px;
}
.qw-service-block-img {
  object-fit: cover;
  width: 100%;
  height: 230px;
  margin-bottom: 10px;
}
.qw-service-block-title {
    color: #404870;
    font-size: 20x;
    line-height: 27px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: none;
    margin-bottom: 6px;
    padding: 8px 30px 5px 30px;
}
.qw-service-block-text {
    font-size: 16px;
    line-height: 23px;
    padding: 0px 30px 0px 30px;
}

Wordt vervolgd….

In het volgende deel van dit artikel gaan we het element uitbreiden met een label en een knop om door te linken naar bijvoorbeeld een extra service-pagina. Tevens zullen we dan extra styling aan de titel en de afbeelding toevoegen.

Dit vervolg vindt je hier: Service Blok Maken, Vervolg…

Vragen & Info

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

We verzorgen ook trainingen speciaal voor WordPress Design en WPBakery. Voor meer info, bekijk dan deze pagina: WordPress Trainingen.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *