Mukautetun CMB2-linkkivalitsinohjaimen luominen WordPressille

Viimeisin päivitys marras 9, 2022

Sisältö

Johdanto / Historia

Miksi CMB2?

Opastus

Lomakkeen rakentaminen

Tyylit

Ohjauksen tekeminen toistettavaksi

Linkin valitseminen

Ohjaimen käyttäminen

Tässä opetusohjelmassa tarkastelen, kuinka voit luoda mukautetun ohjausobjektin laajentaaksesi WebDevStudiosin CMB2 :n (Custom Meta Boxes 2) toimintoja.

Kehitän verkkosivustoja (ja verkkosovelluksia) WordPress CMS:llä (Content Management System), ja kun uusi projekti saapuu, voit taata, että minun on kehitettävä "mukautettuja metalaatikoita", jotta käyttäjä voi hallita tarkasti. sivuston sisällöstä ja asettelusta.

Kerron yksityiskohtaisesti, kuinka rakensin CMB2-ohjauslinkkivalitsimen CMB2:lle (saatavilla kaikista hyvistä WordPress-laajennusten arkistoista). Kuvakaappaus josta on nähtävissä alla.

"Link Picker" CMB2-ohjain toiminnassa

Linkinvalitsin käynnistää sisäänrakennetun WordPressin "Lisää/muokkaa linkkiä" -valintaikkunan, kun napsautat Valitse-painiketta. Tämä näkyy alla olevassa kuvakaappauksessa:

Painamalla painiketta voit valita linkistä (tai lisätä omasi)

Olen varma, että olet samaa mieltä siitä, että tällainen hallinta on uskomattoman kätevää, jos haluat antaa sivustosi toimittajille mahdollisuuden lisätä linkin ja myös etsiä WordPressistä sen sisäisiä linkkejä sen sijaan, että heidän pitäisi leikata ja liittää linkit linkkiin. ala.

Johdanto / Historia

Niille, jotka eivät tiedä, metaruutu on WordPress-viestin muokkausnäytössä, ja se sisältää todennäköisesti erilaisia lomakeohjausobjekteja (tekstilaatikoita, avattavia luetteloita, valintaruutuja jne.). Näiden säätimien avulla verkkosivustosi käyttäjät voivat helposti muuttaa mukautettua tekstiä tai toimintoja sivustolla.

Esimerkki metalaatikosta, jossa on erilaisia lomakeohjausobjekteja

WordPressin avulla voit luoda metalaatikoita funktioiden (kuten [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)) avulla, mutta metalaatikoiden luominen tällä tavalla voi olla pitkä prosessi ja sisältää paljon koodin toistoa (varsinkin jos haluat käyttää samoja lomakeohjausobjekteja useissa projekteissa).

Miksi CMB2?

Jotkut teistä ovat ehkä kuulleet Advanced Custom Fieldsistä (ACF), joka tarjoaa graafisen käyttöliittymän (Graphical User Interface), jonka avulla voit luoda metalaatikoita suoraan WordPressillä.

ACF ei mielestäni ole loistava työkalu millekään skaalautuvalle verkkoratkaisulle. Laajennus on liian riippuvainen tietokantaan tallennetuista tiedoista. Tämä aiheuttaa kipua, kun muutoksia otetaan käyttöön sivustossa, koska et voi vain nostaa koodiasi ja nähdä muutokset välittömästi. Sen sijaan sinun on suoritettava työ uudelleen eri käyttöönottoympäristöissä (vaiheistus, live jne.). Joten tarvitsimme ratkaisun, jonka avulla voimme luoda metalaatikoita ohjelmallisesti. Syötä CMB2.

Ennen kuin otimme käyttöön CMB2:n, käytimme aiemmin HM Custom Meta Boxeja niiltä ihanilta ihmisiltä Human Madessa (joka alkoi WebDevStudion edeltäjänä CMB2:lle,).

Rakastimme HM Custom Meta Boxeja, ja yksinkertaisimpien koodinpätkien avulla pystyimme nopeasti luomaan mukautettuja metalaatikoita melkein mihin tahansa!

HM Custom Meta Box -merkintäesimerkki (tämä on Instagram-metalaatikon merkintä ensimmäisessä kuvakaappauksessa)

Miksi sitten siirrytään CMB2:een? No, HM Custom Meta Boxes ei valitettavasti saanut paljon rakkautta (puhuin sen pääkehittäjälle ja hän on erittäin kiireinen mies), kun taas CMB2 eteni uusilla ominaisuuksilla, uusilla ohjaimilla ja se oli saanut vetoa. WordPress-yhteisössä, jossa monet ihmiset ottavat sen käyttöön ja julkaisevat laajennuksia sen laajentamiseksi (mukaan lukien useat kumppanitoimistomme).

Lopuksi, kuten olet ehkä havainnut, työskentely CMB2:n kanssa on yhtä uskomattoman yksinkertaista kuin olimme tottuneet, sillä molemmilla alustoilla on yhteinen esi-isä.

Opastus

Ennen kuin aloitamme, jokaisella on omat ihanteensa WordPress-laajennuksen luomiseen, ja olen kokeillut muutamia, mutta Tom J Nowellin WordPressin juurikokoonpanon opetusohjelma muutti täysin tapani työskennellä. Mielestäni sen lähestymistapa on puhdas, yksinkertainen, ja se tekee minkä tahansa laajennuksen tulevasta ylläpidosta helppoa. Jos nappaat Link Picker for CMB2 -laajennuksen lähteen, näet hänen opettamansa menetelmät käytännössä.

Lomakkeen rakentaminen

Luodaksemme linkkivalitsimen hahmontavan lomakkeen, meidän on ensin kytkeydyttävä cmb2_render_[control_name]toimintaan. Kuten olen kutsunut tätä ohjausobjektia "link_picker", voimme täydentää koukun seuraavasti:

<?php
add_action( 'cmb2_render_link_picker', array( $this, 'cmb2_render_link_picker' ), 10, 5 );
`

Niille teistä, jotka eivät oikein ymmärrä add_actionkoukkua, se toimii seuraavasti:

Ensimmäinen argumentti cmb2_render_link_pickeron sen koukun nimi, johon haluamme liittyä.
Toinen argumentti array( $this, 'cmb2_render_link_picker' )on funktio, jota haluamme kutsua, kun tämä koukku suoritetaan. Huomaa, että käännän tämän taulukkoon $thisensimmäisenä parametrina, koska kutsun funktiota luokan sisällä. Jos et työskentele luokkien kanssa, voit käyttää vain funktion nimeä cmb2_render_link_picker.
3., 10on järjestys, jossa haluamme funktion käynnistyvän (mitä pienempi numero, sitä nopeammin se käynnistyy, kun toimintoa kutsutaan).
Tämä 5on parametrien määrä, joka välitetään kutsumaani funktioon (tämä selviää pian).

Seuraavaksi luomme funktion, joka hahmontaa lomakkeen:

<?php

public function cmb2_render_link_picker( $field, $value, $object_id, $object_type, $field_type_object) {
…
}
`

Olen jättänyt "DocBlockin" yllä olevaan koodiin, joka kuvaa, mitä kukin funktioon siirretty parametri cmb2_render_link_picker()tekee.

Huomaa, että funktioni alkaa publicilmoituksella. Tämä taas johtuu siitä, että työskentelen luokassa. Jos et työskentele luokkien kanssa, voit jättää tämän pois.

Tämän kentän arvo välitetään funktioon $valueparametrin kautta. Tämän kentän tapauksessa kuljemme taulukon läpi, koska ohjausobjektissamme on kolme erillistä elementtiä:

Teksti
URL-osoite
Jos linkki avautuu uuteen ikkunaan (tai ei)

Koska $valuearvoa ei aina ole asetettu (esimerkiksi ohjausobjektin ensimmäistä kertaa renderöidessään), meidän on alustettava se joillakin oletusarvoilla. Teemme tämän seuraavalla koodibitillä:

<?php
$value = wp_parse_args( 
    $value, 
    array(
        'text'  => '',
        'url'   => '',
        'blank' => 'false',) );

Sitten voimme ryhtyä työhön lomakkeen laatimiseen. Tässä on esimerkki ensimmäisestä tekstinsyöttösäätimestä:

<p>
    <label for="<?php echo $field_type_object->_id( '_text' ); ?>'">
        <?php echo esc_html( $field_type_object->_text( 'link_picker_text', 'Text') ); ?>
    </label>
</p>
<?php 
    echo $field_type_object->input( 
            array(
            'class' => 'cmb_text',
            'name'  => $field_type_object->_name( '[text]' ),
            'id'    => $field_type_object->_id( '_text' ),
            'value' => $value['text'],) ); 
?>

Huh huh! Näyttää vähän sekavalta eikö? Jaotetaan se rivi riviltä:

Aloituskappaleen tunniste.
Ohjaimen avaustunniste, mutta parametrin forautomaattisesti asettama attribuutti. $field_type_object _idTämä luo automaattisesti tunnuksen ohjausobjektille, kun se hahmonnetaan.
Tarramme teksti, joka on rakennettu käyttämällä ohjausvaihtoehtojen taulukon tekstiä (tai palaa sanaan "Teksti").
Päättävä etiketti
Päättävä kappaletunniste.
Aloita PHP-ilmoitus
Käytä syöttösäädintä (osa lomakesyötteen $field_type_objectluomiseen (oletustyyppi on teksti).
Aloita parametrien joukko
Aseta syötteen luokka.
Aseta syötteen nimi uudelleen $field_type_objectapuohjelmalla.
Aseta syötteen tunnus samaksi tunnukseksi, joka määritettiin tarratunnisteeseen.
Hanki arvo kohdasta $value, koska tämä on taulukko, haluamme tekstiavaimen tälle ohjausobjektille.
Sulje joukko.
Sulje syöttötoiminto.
Sulje PHP-ilmoitus.

URL-lomakkeen kentän merkintä on pitkälti sama, vain HTML5-syöttötyyppejä varten voimme asettaa lisäparametrin ’type’ arvoon ’url’:

<?php 
…
'type'  => 'url',
…

Lopuksi haluamme ottaa käyttöön pudotusvalikon. Merkintä on hyvin tuttu:

<?php
echo $field_type_object->select( 
    array(
        'class'   => 'cmb_dropdown',
        'name'    => $field_type_object->_name( '[blank]' ),
        'id'      => $field_type_object->_id( '_blank' ),
        'options' => $blank_options,) );

Huomaa, että käyttämämme $field_type_objecttoiminto selecton avattavan valikon luominen. Huomaa myös, että rivillä 6 meillä on uusi attribuutti options. Tähän välitämme joukon "vaihtoehtoja". Tämä luodaan ennen tätä ohjausta seuraavasti:

<?php 
$blank_options = '';
$blank_options .= '<option value="false" '. selected( $value['blank'], 'false', false) .'>Opens in same</option>';
$blank_options .= '<option value="true" '. selected( $value['blank'], 'true', false) .'>Opens in new</option>';

Sitten meidän tarvitsee vain kääriä se joihinkin <div>ja meillä on täysin renderöity hallinta:

<?php
public function cmb2_render_link_picker( $field, $value, $object_id, $object_type, $field_type_object) {
    $value = wp_parse_args( $value, array(
        'text'  => '',
        'url'   => '',
        'blank' => 'false',) );
    $blank_options = '';
    $blank_options .= '<option value="false" '. selected( $value['blank'], 'false', false) .'>Opens in same</option>';
    $blank_options .= '<option value="true" '. selected( $value['blank'], 'true', false) .'>Opens in new</option>';
    ?>
    <div class="link-picker">
        <div class="text">
            <p>
                <label for="<?php echo $field_type_object->_id( '_text' ); ?>'">
                    <?php echo esc_html( $field_type_object->_text( 'link_picker_text', 'Text') ); ?>
                </label>
            </p>
            <?php 
                echo $field_type_object->input( 
                    array(
                        'class' => 'cmb_text',
                        'name'  => $field_type_object->_name( '[text]' ),
                        'id'    => $field_type_object->_id( '_text' ),
                        'value' => $value['text'],
                        'desc'  => '',) ); 
            ?>
        </div>
        <div class="url">
            <p>
                <label for="<?php echo $field_type_object->_id( '_url' ); ?>'">
                    <?php echo esc_html( $field_type_object->_text( 'link_picker_url', 'URL') ); ?>
                </label>
            </p>
            <?php 
                echo $field_type_object->input( 
                    array(
                        'class' => 'cmb_text_url',
                        'name'  => $field_type_object->_name( '[url]' ),
                        'id'    => $field_type_object->_id( '_url' ),
                        'value' => $value['url'],
                        'type'  => 'url',
                        'desc'  => '',) ); 
            ?>
        </div>
        <div class="blank">
            <p>
                <label for="<?php echo $field_type_object->_id( '_blank' ); ?>'">
                    <?php echo esc_html( $field_type_object->_text( 'link_picker_blank', 'Window') ); ?>
                </label>
            </p>
            <?php 
                echo $field_type_object->select( 
                    array(
                        'class'   => 'cmb_checkbox',
                        'name'    => $field_type_object->_name( '[blank]' ),
                        'id'      => $field_type_object->_id( '_blank' ),
                        'options' => $blank_options,
                        'desc'    => '',) ); 
            ?>
        </div>
        <div class="choose">
            <p>
                <label>Choose</label>
            </p>
            <button class="dashicons dashicons-admin-links js-insert-link button button-primary" title="<?php esc_html_e( 'Insert Link', 'cmb' ); ?>">
                 <span class="screen-reader-text"><?php esc_html_e( 'Choose Link', 'cmb' ); ?></span>
             </button>
        </div>
    </div>
    <p class="clear">
        <?php echo $field_type_object->_desc();?>
    </p>
<?php
}

Ja siinä se! Olemme saaneet kontrollimme! CMB2 käsittelee automaattisesti kaikki tiedot, jotka haluamme tallentaa, joten siellä ei ole mitään tekemistä.

Tyylit

Luomassamme ohjausobjektin kuvakaappauksessa (lähellä tämän viestin yläosaa) on käytetty muutamia mukautettuja tyylejä, jotta se hahmonnetaan tekstissä. En mene tänään lomakkeen tyyliin, mutta jos olet utelias, voit ladata laajennuksen ja tarkastella lähdettä.

Ohjauksen tekeminen toistettavaksi

Niille teistä, jotka haluavat edistyä hieman, voit saada ohjauksen toimimaan CMB2:n toistettavien alueiden kanssa. Tätä varten sinun on tehtävä hieman taulukkokartoitusta. Voit tehdä sen käyttämällä alla olevaa koodia:

<?php

public function cmb2_sanitize_link_picker( $check, $meta_value, $object_id, $field_args, $sanitize_object) {

    if (! is_array( $meta_value) ||! $field_args['repeatable']) {
        return $check;
    }
    foreach ($meta_value as $key => $val) {
        $meta_value[ $key ] =  null;
        if(! empty( $val['url'])) {
            $meta_value[ $key ] = array_map( 'sanitize_text_field', $val );
        }
    }
    return $meta_value;
}
public function cmb2_types_esc_link_picker( $check, $meta_value, $field_args, $field_object) {

    if (! is_array( $meta_value) ||! $field_args['repeatable']) {
        return $check;
    }
    foreach ($meta_value as $key => $val) {
        $meta_value[ $key ] =  null;
        if(! empty( $val['url'])) {
            $meta_value[ $key ] = array_map( 'esc_attr', $val );
        }
    }
    return $meta_value;
}

Linkin valitseminen

Tietysti linkkivalitsimen koko tarkoitus on integroida WordPressin omaan linkinvalintatoimintoon, jolloin ’Lisää/muokkaa linkkiä’ -valintaikkuna tulee esiin, kun ’Valitse’-painiketta napsautetaan.

Jotta tämä tapahtuisi, luotamme suuresti JavaScriptiin. Käytän erityisesti jQueryä asioiden toteuttamiseen.

Ennen kuin näytän sinulle valintaikkunan käynnistävän JavaScriptin, meidän on ensin asetettava jonoon WordPressin oma sisäinen JavaScript, joka esilataa modaalit ja kirjastot, joista koodimme riippuu. Se näyttää vähän tältä:

<?php
global $post_id;

if (isset( $post_id)) {
    wp_enqueue_media( array( 'post' => $post_id) );
}

$plugin_js_url  = plugins_url( 'js/plugin.js', ROOT );
wp_enqueue_script( 'wholesomecode', $plugin_js_url, array( 'jquery', 'jquery-ui-core', 'jquery-ui-draggable', 'jquery-ui-droppable', 'thickbox', 'wpdialogs' ), '1.0.0', true );

Kuten näet, monet sisäiset WordPress-kirjastot luottavat jQueryyn ponnahdusikkunan lataamiseen, joten ponnahdusikkunan laukaisumme on järkevää tehdä samoin. Tämä tehdään /js/plugin.jsyllä olevan esimerkin riville 10 ladatun komennolla.

jQuery(document).ready(function($) {

    var url   = $('body');
    var text = $('body');
    var blank = $('body');

    $('body').on('click', '.js-insert-link', function(event) {

        event.preventDefault? event.preventDefault(): event.returnValue = false;
        event.stopPropagation();

        url            = $(this).closest('.link-picker').find('input.cmb_text_url ');
        text           = $(this).closest('.link-picker').find('input.cmb_text ');
        blank          = $(this).closest('.link-picker').find('input.cmb_checkbox ');

        wpActiveEditor = true;
        wpLink.open();
        wpLink.textarea = url;

        return false;
    });

    $('body').on('click', '#wp-link-cancel, #wp-link-backdrop, #wp-link-close', function(event) {

        wpLink.textarea = url;
        wpLink.close();
        event.preventDefault? event.preventDefault(): event.returnValue = false;
        event.stopPropagation();
        return false;
    });

    $('body').on('click', '#wp-link-submit', function(event) {
        console.log(text)
        var linkAtts = wpLink.getAttrs();

        linkAtts.text = $('#wp-link-text').val();

        url.val(linkAtts.href);

        if( linkAtts.text != '') {
            text.val(linkAtts.text);
        }

        if (linkAtts.target == '_blank') {
            blank.prop('checked', true);
        } else {
            blank.prop('checked', false);
        }

        wpLink.textarea = url;
        wpLink.close();
        event.preventDefault? event.preventDefault(): event.returnValue = false;
        event.stopPropagation();
        return false;
    });
});

Käyttämällä luokkia, jotka kietoimme lomakeohjausobjektien ympärille, JavaScript kohdistaa ohjaimiin ja työntää valitun tuloksen linkkivalitsimen ponnahdusikkunasta asianmukaisiin ohjauskenttiin.

Ohjaimen käyttäminen

Joten, kun olet katsonut yllä olevan opetusohjelman ja mahdollisesti tarkistanut Link Picker for CMB2 -laajennuksen lähdekoodin tai vain ladannut versioni, saatat nyt miettiä, kuinka käyttää asiaa CMB2:n kanssa. No, se ei voisi olla helpompaa:

<?php
function wholesomecode_create_meta_boxes() {
  $prefix = '_profile_';

    $cmb = new_cmb2_box(
        array(
            'id'            => 'cta',
            'title'         => __( 'Call to Action', 'cmb2' ),
            'object_types'  => array( 'profile' ),
            'context'       => 'normal',
            'priority'      => 'low',
            'show_names'    => true,) );

    $field1 = $cmb->add_field( 
        array(
            'name' => __( 'Link Picker', 'cmb2' ),
            'id'   => $prefix. 'cta_link',
            'type' => 'link_picker',) );
}
add_action( 'cmb2_admin_init', 'wholesomecode_create_meta_boxes' );

: wholesomecode.ltd