WordPress-lohkon rakentaminen tekoälyn avulla – kolme tapaa ja niiden sudenkuopat

Tekoäly osaa tehdä WordPressin editoriin oman lohkon muutamassa minuutissa. Siihen on kolme tapaa: virallinen JavaScript-lohko build-prosessilla, ACF Blocks PHP-pohjalla tai kevyt lisäosa, joka toimii ilman build-vaihetta ja asennetaan zip-tiedostona. Ne sopivat eri tilanteisiin. Ennen kuin tekoälyn tekemää koodia asentaa tuotantosivustolle, kannattaa kuitenkin tietää, mitä tehdä sivuston kaatuessa ja kuka vastaa koodin tietoturvasta.

Tapa 1: oikea lohko build-prosessilla

WordPressin virallinen tapa on luoda lohkolle oma lisäosa create-block-työkalulla:

npx @wordpress/create-block@latest yhteystietokortti
cd yhteystietokortti
npm start

Työkalu luo valmiin rakenteen: block.json kuvaa lohkon, edit.js määrittää lohkon ulkoasun editorissa ja save.js sivulle tallennettavan sisällön. Tekoälylle annetaan tehtäväksi kuvata lohko, esimerkiksi "yhteystietokortti, jossa on kuva, nimi, titteli ja puhelinnumero. Kuvan voi vaihtaa sivupalkista." Tekoäly muokkaa nämä tiedostot. Lopuksi npm run build kääntää koodin ja npm run plugin-zip paketoi lisäosan asennettavaksi.

Sopii, kun lohkossa on paljon vuorovaikutusta editorissa, se on osa isompaa teemaa tai lisäosaa ja koodia ylläpidetään versionhallinnassa.

Haittana on Node.js-ympäristö ja build-vaihe, jota ilman koodia ei voi muuttaa. Jos tiedostoja muokataan suoraan palvelimella, muutos ei vaikuta mihinkään.

Tapa 2: ACF Blocks

ACF:llä lohko tehdään PHP:llä ja kentillä. Editorin puoli syntyy ACF:n kenttäryhmästä, joten JavaScriptiä ei tarvita. ACF 6.0:sta alkaen lohko määritellään samalla block.json-tiedostolla kuin WordPressin omat lohkot ja ACF:n asetukset ovat acf-avaimen alla:

{
  "name": "acf/yhteystietokortti",
  "title": "Yhteystietokortti",
  "category": "widgets",
  "acf": { "mode": "preview", "renderTemplate": "template.php" }
}

Lohkon HTML kirjoitetaan PHP-sivupohjaan:

<div class="yhteystietokortti">
  <h3><?php echo esc_html( get_field( 'nimi' ) ); ?></h3>
  <a href="tel:<?php echo esc_attr( get_field( 'puhelin' ) ); ?>">
    <?php echo esc_html( get_field( 'puhelin' ) ); ?>
  </a>
</div>

Lohko rekisteröidään teemassa tai lisäosassa register_block_type()-funktiolla ja kentät luodaan ACF:n hallintanäkymässä.

Sopii, kun sisältö on rakenteista ja päivittäjän pitää täyttää vain tietyt kentät. Tekoäly tuottaa ACF-lohkon luotettavasti, koska rakenne on yksinkertainen.

Haittana on, että ACF Blocks vaatii ACF PRO -lisenssin ja editorin esikatselu on hieman jäykempi kuin JavaScript-lohkossa.

Tapa 3: kevyt lohko ilman build-vaihetta, zip-tiedostona

Yksinkertaisen lohkon voi tehdä tavallisella JavaScriptillä, joka käyttää suoraan WordPressin editorin valmiita kirjastoja. Lisäosassa on neljä tiedostoa samassa kansiossa:

lainauslaatikko.php

<?php
/**
 * Plugin Name: Lainauslaatikko
 * Description: Yksinkertainen lainauslohko.
 * Version: 1.0.0
 */
add_action( 'init', function () {
	register_block_type( __DIR__ );
} );

block.json

{
  "apiVersion": 3,
  "name": "peltopiri/lainauslaatikko",
  "title": "Lainauslaatikko",
  "category": "text",
  "attributes": {
    "teksti": { "type": "string", "source": "html", "selector": "p" }
  },
  "editorScript": "file:./index.js"
}

index.asset.php kertoo WordPressille, mitä kirjastoja skripti tarvitsee:

<?php return array( 'dependencies' => array( 'wp-blocks', 'wp-element', 'wp-block-editor' ), 'version' => '1.0.0' );

index.js

( function ( blocks, element, blockEditor ) {
	const el = element.createElement;
	const { RichText, useBlockProps } = blockEditor;

	blocks.registerBlockType( 'peltopiri/lainauslaatikko', {
		edit: ( { attributes, setAttributes } ) =>
			el( 'div', useBlockProps( { className: 'lainauslaatikko' } ),
				el( RichText, {
					tagName: 'p',
					value: attributes.teksti,
					onChange: ( teksti ) => setAttributes( { teksti } ),
					placeholder: 'Kirjoita lainaus…',
				} )
			),
		save: ( { attributes } ) =>
			el( 'div', useBlockProps.save( { className: 'lainauslaatikko' } ),
				el( RichText.Content, { tagName: 'p', value: attributes.teksti } )
			),
	} );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

Kansio pakataan zipiksi (zip -r lainauslaatikko.zip lainauslaatikko) ja asennetaan kohdasta Lisäosat → Lisää uusi → Lataa lisäosa.

Sopii pieneen, yksittäiseen lohkoon, jonka haluaa sivustolle nopeasti ilman kehitysympäristöä.

Haittana on, että koodi on kömpelömpää kirjoittaa kuin JSX:llä ja lohkon kasvaessa siitä tulee nopeasti vaikea ylläpitää.

Sudenkuoppa 1: sivusto kaatuu

Tekoälyn tekemä lisäosa voi sisältää PHP-virheen, joka kaataa koko sivuston. WordPress 5.2:sta alkaen palautustila lähettää tällöin ylläpitäjän sähköpostiin linkin, jolla pääsee hallintaan ja voi poistaa vikaantuneen lisäosan käytöstä. Se toimii vain, jos sivuston sähköposti toimii ja ylläpitäjän osoite on oikea.

Jos sähköpostia ei tule, lisäosa pitää poistaa käytöstä palvelimen puolelta:

• SFTP:llä tai hosting-palvelun tiedostonhallinnassa: nimeä lisäosan kansio uudelleen wp-content/plugins-kansiossa.
• SSH:lla ja WP-CLI:llä: wp plugin deactivate lainauslaatikko.

Ennen kuin asennat mitään, tarkista, että sinulla on jokin näistä pääsyistä. Jos ainoa pääsy sivustoon on WordPressin hallintapaneeli, olet kaatumisen jälkeen hosting-palvelun tuen armoilla. Ota myös varmuuskopio ja kokeile lisäosaa ensin testiympäristössä, jos sellainen on.

Sudenkuoppa 2: lohkon validointivirhe

JavaScript-lohkon save-funktio tallentaa HTML:n sivun sisältöön. Jos tekoäly myöhemmin muuttaa sitä, jo tehdyt lohkot näyttävät editorissa virheilmoituksen, jonka mukaan lohko sisältää odottamatonta sisältöä. Ratkaisuja on kaksi: lohkolle määritellään sen vanhat tallennusmuodot (deprecated), tai lohko tehdään dynaamiseksi, jolloin HTML tulostetaan PHP:llä joka kerta. ACF Blocks ovat aina dynaamisia, joten niissä tätä ongelmaa ei ole.

Sudenkuoppa 3: kuka vastaa tietoturvasta?

Zip-tiedostona asennettu lisäosa ajetaan samoilla oikeuksilla kuin WordPress itse. Se voi lukea tietokantaa, lähettää dataa ja muuttaa mitä tahansa. Tekoälyn koodi näyttää usein valmiilta, mutta siitä voi puuttua:

• tulosteiden suojaus, kuten esc_html(), esc_attr() ja wp_kses_post()
• käyttöoikeuksien tarkistus ja nonce-tunnisteet, jos lohko tallentaa tai hakee tietoja
• syötteiden tarkistus.

Vastuu on sillä, joka asentaa koodin. Valmiille lisäosalle tulee päivityksiä tekijältä, mutta itse tehtyä ei päivitä kukaan muu. Siksi jokaisella omalla lisäosalla pitää olla nimetty ylläpitäjä, koodi versionhallinnassa ja tieto siitä, mitä se tekee. Koodin pitää myös olla jonkun ihmisen lukema ennen asennusta.

Mikä tapa kannattaa valita?

• Build-prosessi, kun lohko on osa ammattimaisesti ylläpidettyä teemaa tai lisäosaa.
• ACF Blocks, kun sisältö on rakenteista ja ACF PRO on jo käytössä. Teen itse suurimman osan lohkoista näin.
• Kevyt zip-lohko, kun tarvitaan yksi pieni lohko nopeasti ja ymmärrät, mitä koodi tekee.

Jos haluat sivustollesi omia lohkoja, jotka on rakennettu ylläpidettäviksi ja turvallisiksi, se kuuluu WordPress-työhöni.

Usein kysyttyä

Voiko tekoälyn tekemän lisäosan asentaa suoraan tuotantoon?

Ei kannata. Kokeile ensin testiympäristössä, ota varmuuskopio ja varmista, että pääset tarvittaessa poistamaan lisäosan palvelimen puolelta.

Tarvitaanko ACF Blocksiin ACF PRO?

Kyllä. ACF Blocks on ACF PRO -lisenssin ominaisuus. Ilmainen ACF riittää kenttiin, mutta ei lohkoihin.

Mitä teen, jos sivusto näyttää vain virheilmoituksen?

Tarkista ylläpitäjän sähköposti palautuslinkin varalta. Jos sitä ei tule, poista viimeksi asennettu lisäosa käytöstä SFTP:llä, hosting-palvelun tiedostonhallinnalla tai WP-CLI:llä, tai pyydä apua hosting-palvelun tuesta.