Verkkokomponenttien käyttäminen WordPressissä on helpompaa kuin luulet

Nyt kun olemme sen nähneet verkkokomponentit ja interaktiiviset verkkokomponentit ovat molemmat helpompia kuin luulet, katsotaanpa niiden lisäämistä sisällönhallintajärjestelmään, nimittäin WordPressiin.

Voimme lisätä ne kolmella päätavalla. Ensinnäkin manuaalisen syöttämisen kautta sivustolle-sijoittamalla ne suoraan widgetteihin tai tekstilohkoihin, periaatteessa minne tahansa, johon voimme sijoittaa muuta HTML-koodia. Toiseksi voimme lisätä ne teematiedoston tulosteeksi. Ja lopuksi voimme lisätä ne mukautetun lohkon tuotokseksi.

Ladataan verkkokomponenttitiedostoja

Riippumatta siitä, miten päädymme lisäämään verkkokomponentteja, meidän on varmistettava muutama asia:

1. mukautetun elementtimme malli on saatavilla, kun tarvitsemme sitä,
2. kaikki tarvitsemamme JavaScript-koodit on asetettu oikein jonoon ja
3. kaikki tarvitsemamme kapseloimattomat tyylit ovat jonossa.

Lisäämme <zombie-profile> verkkokomponentti edellinen artikkelini interaktiivisista verkkokomponenteista. Tarkista koodi CodePenissä.

Ostetaan tämä ensimmäinen kohta. Kun meillä on malli, on tarpeeksi helppoa lisätä se WordPress-teemaan footer.php tiedostoon, mutta sen sijaan, että lisäisit sen suoraan teemaan, on parempi liittyä siihen wp_footer niin, että komponentti ladataan riippumatta footer.php tiedostoon ja kokonaisteemasta riippumatta – olettaen, että teema käyttää wp_footer, mitä useimmat tekevät. Jos malli ei näy teemassasi, kun yrität sitä, tarkista se wp_footer kutsutaan teemassasi footer.php mallitiedosto.

<?php function diy_ezwebcomp_footer() { ?> <!-- print/echo Zombie profile template code. --> <!-- It's available at https://codepen.io/undeadinstitute/pen/KKNLGRg -->
<?php } add_action( 'wp_footer', 'diy_ezwebcomp_footer');

Seuraavaksi asetetaan komponenttimme JavaScript jonoon. Voimme lisätä JavaScriptin kautta wp_footer samoin, mutta enqueueing on suositeltu tapa linkittää JavaScript WordPressiin. Laitetaan siis JavaScript tiedostoon nimeltä ezwebcomp.js (nimi on täysin mielivaltainen), kiinnitä tiedosto teeman JavaScript-hakemistoon (jos sellainen on) ja aseta se jonoon ( functions.php tiedosto).

wp_enqueue_script( 'ezwebcomp_js', get_template_directory_uri() . '/js/ezwebcomp.js', '', '1.0', true );

Haluamme varmistaa, että viimeinen parametri on asetettu arvoon true , eli se lataa JavaScriptin ennen sulkevaa body-tagia. Jos lataamme sen sen sijaan päähän, se ei löydä HTML-malliamme ja siitä tulee erittäin ällöttävä (heitä joukko virheitä.)

Jos pystyt kapseloimaan verkkokomponentin kokonaan, voit ohittaa tämän seuraavan vaiheen. Mutta jos sinä (kuten minä) et pysty tekemään sitä, sinun on asetettava nämä kapseloimattomat tyylit jonoon, jotta ne ovat käytettävissä kaikkialla, missä verkkokomponenttia käytetään. (JavaScriptin tapaan voisimme lisätä tämän suoraan alatunnisteeseen, mutta tyylien asettaminen jonoon on suositeltava tapa tehdä se). Niin hyvin jonoon CSS-tiedostomme:

wp_enqueue_style( 'ezwebcomp_style', get_template_directory_uri() . '/ezwebcomp.css', '', '1.0', 'screen' );

Se ei ollut liian kovaa, eikö? Ja jos et aio käyttää sitä muita käyttäjiä kuin järjestelmänvalvojat, sinun pitäisi olla valmis lisäämään nämä haluamaasi paikkaan. Mutta näin ei aina ole, joten jatkamme eteenpäin!

Älä suodata verkkokomponenttiasi pois

WordPressillä on useita eri tapoja auttaa käyttäjiä luomaan kelvollista HTML-koodia ja estämään Eddie-setäsi liittämästä Shady Al:lta saamaansa "hupaisaa" kuvaa suoraan editoriin (täydennettynä skripteillä jokaisen vierailijasi pwn-koodiksi).

Joten kun lisäät verkkokomponentteja suoraan lohkoihin tai widgeteihin, meidän on oltava varovaisia ​​WordPressin sisäänrakennetun koodisuodatuksen suhteen. Sen poistaminen käytöstä yhdessä antaisi setä Eddien (ja laajemmin Shady Alin) valloilleen, mutta voimme muokata sitä päästämään mahtava verkkokomponenttimme portin läpi, joka (onneksi) pitää Eddien-setä poissa.

Ensinnäkin voimme käyttää wp_kses_allowed suodatin lisätäksesi verkkokomponenttimme elementtiluetteloon emme suodattaa pois. Se on ikään kuin lisäämme komponentin sallittujen luetteloon, ja teemme sen lisäämällä sen sallittujen tunnisteiden taulukkoon, joka välitetään suodatintoimintoon.

function add_diy_ezwebcomp_to_kses_allowed( $the_allowed_tags ) { $the_allowed_tags['zombie-profile'] = array();
}
add_filter( 'wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Lisäämme tyhjän taulukon <zombie-profile> komponentti, koska WordPress suodattaa pois attribuutteja elementtien lisäksi – mikä tuo meidät toiseen ongelmaan: the slot attribuutti (sekä part ja muut Web-komponenttiattribuutit, joita saatat käyttää) eivät ole oletuksena sallittuja. Joten meidän on sallittava ne erikseen jokaisessa elementissä, jossa aiot käyttää niitä, ja lisäksi kaikissa elementeissä, joihin käyttäjäsi saattaa päättää lisätä ne. (Odota, ne elementtiluettelot eivät ole sama, vaikka kävit sen läpi kuusi kertaa jokaisen käyttäjän kanssa… kuka tiesi?) Siten alla olen asettanut slot että true on <span>, <img> ja <ul>, kolme elementtiä, jotka laitan paikoilleen <zombie-profile> komponentti. (Asetin myös part että true span-elementeissä, jotta voisin päästää myös tämän määritteen läpi.)

function add_diy_ezwebcomp_to_kses_allowed( $the_allowed_tags ) { $the_allowed_tags['zombie-profile'] = array(); $the_allowed_tags['span']['slot'] = true; $the_allowed_tags['span']['part'] = true; $the_allowed_tags['ul']['slot'] = true; $the_allowed_tags['img']['slot'] = true; return $the_allowed_tags;
}
add_filter( 'wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Voisimme myös ottaa käyttöön slot (Ja part) -attribuutti kaikissa sallituissa elementeissä jollain tavalla:

function add_diy_ezwebcomp_to_kses_allowed($the_allowed_tags) { $the_allowed_tags['zombie-profile'] = array(); foreach ($the_allowed_tags as &$tag) { $tag['slot'] = true; $tag['part'] = true; } return $the_allowed_tags;
}
add_filter('wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Valitettavasti tähän liittyy vielä yksi mahdollinen ryppy. Et ehkä törmää tähän, jos kaikki elementit, jotka laitat paikkoihin ovat rivi-/lauseelementtejä, mutta jos sinulla on lohkotason elementti lisättäväksi verkkokomponenttiin, joudut todennäköisesti nyrkkitaisteluihin lohkon jäsentimen kanssa. koodieditorissa. Saatat olla parempi nyrkkitaistelija kuin minä, mutta hävisin aina.

Syistä, joita en pysty täysin selittämään, asiakaspuolen jäsentäjä olettaa, että verkkokomponentissa pitäisi olla vain sisäisiä elementtejä, ja jos laitat <ul> or <div>, <h1> tai jokin muu lohkotason elementti siinä, se siirtää sulkevan verkkokomponenttitunnisteen juuri viimeisen rivi-/fraasielementin jälkeen. Vielä pahempaa on, että WordPress Developer Handbookin huomautuksen mukaan tällä hetkellä "ei ole mahdollista korvata asiakaspuolen jäsentäjää".

Vaikka tämä on turhauttavaa ja joudut kouluttamaan verkkotoimittajasi, siihen on olemassa kiertotapa. Jos laitamme verkkokomponentin mukautettuun HTML-lohkoon suoraan lohkoeditorissa, asiakaspuolen jäsentäjä ei jätä meitä itkemään jalkakäytävälle, keinumaan edestakaisin ja kyseenalaistamaan kykyämme koodata… Ei sillä, että näin olisi koskaan tapahtunut kuka tahansa… etenkään ihmiset, jotka kirjoittavat artikkeleita…

Komponentti ylös teema

Fantastisen verkkokomponenttimme näyttäminen teematiedostossamme on yksinkertaista, kunhan sitä ei päivitetä HTML-lohkon ulkopuolelle. Lisäämme sen samalla tavalla kuin lisäisimme sen missä tahansa muussa kontekstissa, ja olettaen, että meillä on malli, komentosarjat ja tyylit paikoillaan, asiat vain toimivat.

Mutta oletetaan, että haluamme tulostaa WordPress-viestin sisällön tai mukautetun viestityypin verkkokomponentissa. Tiedätkö, kirjoita viesti ja se viesti on komponentin sisältö. Tämän ansiosta voimme käyttää WordPress-editoria arkiston pumppaamiseen <zombie-profile> elementtejä. Tämä on hienoa, koska WordPress-editorissa on jo suurin osa käyttöliittymästä, jota tarvitsemme syöttääksemme yhden sisällön <zombie-profile> osat:

• - postin otsikko voi olla zombien nimi.
• Tavallinen kappalelohko viestissä olevaa sisältöä voidaan käyttää zombin lausuntoon.
• - varustellun kuva voidaan käyttää zombien profiilikuvana.

Siinä suurin osa! Mutta tarvitsemme silti kenttiä zombien iästä, tartuntapäivästä ja kiinnostuksen kohteista. Luomme nämä sisäänrakennetulla WordPressillä Mukautetut kentät ominaisuus.

Käytämme jokaisen postauksen tulostamista käsittelevää malliosaa, esim content.php, tulostaaksesi verkkokomponentin. Ensin tulostetaan avaus <zombie-profile> -tunniste, jota seuraa viestin pikkukuva (jos sellainen on).

<zombie-profile> <?php // If the post featured image exists... if (has_post_thumbnail()) { $src = wp_get_attachment_image_url(get_post_thumbnail_id()); ?> <img src="<?php echo $src; ?>" slot="profile-image"> <?php } ?>

Seuraavaksi tulostamme nimen otsikon

<?php // If the post title field exits... if (get_the_title()) { ?> <span slot="zombie-name"><?php echo get_the_title(); ?></span> <?php }
?>

Olen testannut koodissani, ovatko nämä kentät olemassa ennen niiden tulostamista kahdesta syystä:

1. On vain hyvä ohjelmointikäytäntö (useimmissa tapauksissa) piilottaa otsikot ja elementit tyhjien kenttien ympärille.
2. Jos päädymme tulostamaan tyhjän <span> nimeen (esim <span slot="zombie-name"></span>), kenttä näkyy tyhjänä lopullisessa profiilissa sen sijaan, että käytät verkkokomponenttimme sisäänrakennettua oletustekstiä, kuvaa jne. (Jos haluat esimerkiksi tekstikenttien olevan tyhjiä, jos niissä ei ole sisältöä, voi joko lisätä välilyönnin mukautettuun kenttään tai ohittaa if lauseke koodissa).

Seuraavaksi nappaamme mukautetut kentät ja asetamme ne paikkoihin, joihin ne kuuluvat. Tämä taas menee teemamalliin, joka tulostaa viestin sisällön.

<?php // Zombie age $temp = get_post_meta(the_ID(), 'Age', true); if ($temp) { ?> <span slot="z-age"><?php echo $temp; ?></span> <?php } // Zombie infection date $temp = get_post_meta(the_ID(), 'Infection Date', true); if ($temp) { ?> <span slot="idate"><?php echo $temp; ?></span> <?php } // Zombie interests $temp = get_post_meta(the_ID(), 'Interests', true); if ($temp) { ?> <ul slot="z-interests"><?php echo $temp; ?></ul> <?php }
?>

Yksi WordPressin mukautettujen kenttien käytön huonoista puolista on, että et voi tehdä mitään erityistä muotoilua. Ei-teknisen verkkoeditorin, joka täyttää tämän, on kirjoitettava luettelon kohteiden HTML-koodi (<li>) jokaisesta luettelon kiinnostuksesta. (Voit todennäköisesti kiertää tämän käyttöliittymän rajoituksen käyttämällä vahvempaa mukautettua kenttälaajennusta, kuten Muokatut kentät, palot, tai samankaltainen.)

Lopuksi. lisäämme zombien lausunnon ja loppuosan <zombie-profile> tunnisteita.

<?php $temp = get_the_content(); if ($temp) { ?> <span slot="statement"><?php echo $temp; ?></span> <?php }
?>
</zombie-profile>

Koska käytämme lausunnossamme viestin tekstiosaa, saamme sopimukseen hieman ylimääräistä koodia, kuten sisällön ympärille olevat kappaletunnisteet. Profiililausekkeen asettaminen mukautettuun kenttään lieventää tätä, mutta käyttötarkoituksistasi riippuen se voi olla myös tarkoitettu/toivottu käyttäytyminen.

Voit sitten lisätä niin monta viestiä/zombie-profiilia kuin tarvitset yksinkertaisesti julkaisemalla jokaisen postauksena!

Estä osapuoli: verkkokomponentit mukautetussa lohkossa

Mukautetun lohkon luominen on loistava tapa lisätä verkkokomponentti. Käyttäjäsi voivat täyttää vaaditut kentät ja saada kyseisen verkkokomponentin taikuuden ilman koodia tai teknistä tietämystä. Lisäksi lohkot ovat täysin riippumattomia teemoista, joten voisimme todella käyttää tätä lohkoa yhdessä sivustossa ja asentaa sen sitten muille WordPress-sivustoille – tavallaan kuten odotamme verkkokomponentin toimivan!

Mukautetussa lohkossa on kaksi pääosaa: PHP ja JavaScript. Lisäämme myös pienen CSS:n muokkauskokemuksen parantamiseksi.

Ensinnäkin PHP:

function ez_webcomp_register_block() { // Enqueues the JavaScript needed to build the custom block wp_register_script( 'ez-webcomp', plugins_url('block.js', __FILE__), array('wp-blocks', 'wp-element', 'wp-editor'), filemtime(plugin_dir_path(__FILE__) . 'block.js') ); // Enqueues the component's CSS file wp_register_style( 'ez-webcomp', plugins_url('ezwebcomp-style.css', __FILE__), array(), filemtime(plugin_dir_path(__FILE__) . 'ezwebcomp-style.css') ); // Registers the custom block within the ez-webcomp namespace register_block_type('ez-webcomp/zombie-profile', array( // We already have the external styles; these are only for when we are in the WordPress editor 'editor_style' => 'ez-webcomp', 'editor_script' => 'ez-webcomp', ));
}
add_action('init', 'ez_webcomp_register_block');

CSS ei ole välttämätön, se auttaa estämään zombien profiilikuvan päällekkäisyyden WordPress-editorin sisällön kanssa.

/* Sets the width and height of the image. * Your mileage will likely vary, so adjust as needed. * "pic" is a class we'll add to the editor in block.js
*/
#editor .pic img { width: 300px; height: 300px;
}
/* This CSS ensures that the correct space is allocated for the image, * while also preventing the button from resizing before an image is selected.
*/
#editor .pic button.components-button { overflow: visible; height: auto;
}

Tarvitsemme JavaScript on hieman enemmän mukana. Olen pyrkinyt yksinkertaistamaan sitä mahdollisimman paljon ja tekemään siitä mahdollisimman kaikkien saatavilla, joten olen kirjoittanut sen ES5:een poistaakseni tarpeen kääntää mitään.

(function (blocks, editor, element, components) { // The function that creates elements var el = element.createElement; // Handles text input for block fields var RichText = editor.RichText; // Handles uploading images/media var MediaUpload = editor.MediaUpload; // Harkens back to register_block_type in the PHP blocks.registerBlockType('ez-webcomp/zombie-profile', { title: 'Zombie Profile', //User friendly name shown in the block selector icon: 'id-alt', //the icon to usein the block selector category: 'layout', // The attributes are all the different fields we'll use. // We're defining what they are and how the block editor grabs data from them. attributes: { name: { // The content type type: 'string', // Where the info is available to grab source: 'text', // Selectors are how the block editor selects and grabs the content. // These should be unique within an instance of a block. // If you only have one img or one <ul> etc, you can use element selectors. selector: '.zname', }, mediaID: { type: 'number', }, mediaURL: { type: 'string', source: 'attribute', selector: 'img', attribute: 'src', }, age: { type: 'string', source: 'text', selector: '.age', }, infectdate: { type: 'date', source: 'text', selector: '.infection-date' }, interests: { type: 'array', source: 'children', selector: 'ul', }, statement: { type: 'array', source: 'children', selector: '.statement', }, }, // The edit function handles how things are displayed in the block editor. edit: function (props) { var attributes = props.attributes; var onSelectImage = function (media) { return props.setAttributes({ mediaURL: media.url, mediaID: media.id, }); }; // The return statement is what will be shown in the editor. // el() creates an element and sets the different attributes of it. return el( // Using a div here instead of the zombie-profile web component for simplicity. 'div', { className: props.className }, // The zombie's name el(RichText, { tagName: 'h2', inline: true, className: 'zname', placeholder: 'Zombie Name…', value: attributes.name, onChange: function (value) { props.setAttributes({ name: value }); }, }), el( // Zombie profile picture 'div', { className: 'pic' }, el(MediaUpload, { onSelect: onSelectImage, allowedTypes: 'image', value: attributes.mediaID, render: function (obj) { return el( components.Button, { className: attributes.mediaID ? 'image-button' : 'button button-large', onClick: obj.open, }, !attributes.mediaID ? 'Upload Image' : el('img', { src: attributes.mediaURL }) ); }, }) ), // We'll include a heading for the zombie's age in the block editor el('h3', {}, 'Age'), // The age field el(RichText, { tagName: 'div', className: 'age', placeholder: 'Zombie's Age…', value: attributes.age, onChange: function (value) { props.setAttributes({ age: value }); }, }), // Infection date heading el('h3', {}, 'Infection Date'), // Infection date field el(RichText, { tagName: 'div', className: 'infection-date', placeholder: 'Zombie's Infection Date…', value: attributes.infectdate, onChange: function (value) { props.setAttributes({ infectdate: value }); }, }), // Interests heading el('h3', {}, 'Interests'), // Interests field el(RichText, { tagName: 'ul', // Creates a new <li> every time `Enter` is pressed multiline: 'li', placeholder: 'Write a list of interests…', value: attributes.interests, onChange: function (value) { props.setAttributes({ interests: value }); }, className: 'interests', }), // Zombie statement heading el('h3', {}, 'Statement'), // Zombie statement field el(RichText, { tagName: 'div', className: "statement", placeholder: 'Write statement…', value: attributes.statement, onChange: function (value) { props.setAttributes({ statement: value }); }, }) ); }, // Stores content in the database and what is shown on the front end. // This is where we have to make sure the web component is used. save: function (props) { var attributes = props.attributes; return el( // The <zombie-profile web component 'zombie-profile', // This is empty because the web component does not need any HTML attributes {}, // Ensure a URL exists before it prints attributes.mediaURL && // Print the image el('img', { src: attributes.mediaURL, slot: 'profile-image' }), attributes.name && // Print the name el(RichText.Content, { tagName: 'span', slot: 'zombie-name', className: 'zname', value: attributes.name, }), attributes.age && // Print the zombie's age el(RichText.Content, { tagName: 'span', slot: 'z-age', className: 'age', value: attributes.age, }), attributes.infectdate && // Print the infection date el(RichText.Content, { tagName: 'span', slot: 'idate', className: 'infection-date', value: attributes.infectdate, }), // Need to verify something is in the first element since the interests's type is array attributes.interests[0] && // Pint the interests el(RichText.Content, { tagName: 'ul', slot: 'z-interests', value: attributes.interests, }), attributes.statement[0] && // Print the statement el(RichText.Content, { tagName: 'span', slot: 'statement', className: 'statement', value: attributes.statement, }) ); }, });
})( //import the dependencies window.wp.blocks, window.wp.blockEditor, window.wp.element, window.wp.components
);

Liittäminen verkkokomponentteihin

Eikö olisikin hienoa, jos joku hyväsydäminen, artikkeleita kirjoittava ja täysin mahtava henkilö loisi mallin, johon voit liittää verkkokomponentin ja käyttää sitä sivustossasi? Se kaveri ei ollut tavoitettavissa (hän ​​oli auttamassa hyväntekeväisyyttä tai jotain), joten tein sen. Se on githubissa:

Tee se itse – helpot verkkokomponentit WordPressille

Plugin on koodausmalli, joka rekisteröi mukautetun verkkokomponenttisi, asettaa jonoon komponentin tarvitsemat skriptit ja tyylit, tarjoaa esimerkkejä mahdollisesti tarvitsemistasi mukautetuista lohkokentistä ja jopa varmistaa, että asiat on muotoiltu kauniisti editorissa. Laita tämä uuteen kansioon /wp-content/plugins Kuten minkä tahansa muun WordPress-laajennuksen manuaalisesti asentaisit, muista päivittää se tietyllä verkkokomponentillasi ja aktivoida se sitten WordPressissä "Asennetut laajennukset" -näytössä.

Ei niin paha, eihän?

Vaikka se näyttää paljon koodilta, teemme todella muutamia melko tavallisia WordPress-toimintoja rekisteröidäksemme ja hahmontaaksemme mukautetun verkkokomponentin. Ja koska pakkasimme sen laajennuksena, voimme pudottaa sen mille tahansa WordPress-sivustolle ja alkaa julkaista zombiprofiileja mielemme mukaan.

Sanoisin, että tasapainotus pyrkii saamaan komponentin toimimaan yhtä hienosti WordPressin lohkoeditorissa kuin etupäässä. Olisimme voineet tyrmätä tämän paljon pienemmällä koodilla ilman tätä harkintaa.

Silti onnistuimme saamaan täsmälleen sama komponentti, jonka teimme aiemmissa artikkeleissani sisällönhallintajärjestelmään, jonka avulla voimme ponnahtaa sivustolle mahdollisimman monta zombieprofiilia. Yhdistimme tietomme verkkokomponenteista WordPress-lohkoihin kehittääksemme uudelleen käytettävän lohkon uudelleenkäytettävälle verkkokomponentillemme.

Millaisia ​​komponentteja aiot rakentaa WordPress-sivustollesi? Uskon, että täällä on paljon mahdollisuuksia, ja olen kiinnostunut näkemään, mitä päädyt tekemään.

Lähde: https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/