[ kalizi.dev ]

Come iniziare lo sviluppo di plugin WordPress con Docker: Parte 2, creare una pagina semplice

Photo by Stephen Phillips - Hostreviews.co.uk on Unsplash

Simplicity is the essence of happiness. ~ Cedric Bledsoe

Mi piace iniziare i post del blog con una citazione e questa, in particolare, è incredibilmente vera. Pensa un secondo alla filosofia K.I.S.S. (Keep It Simple, Stupid): dice semplicemente che i sistemi funzionano meglio quando restano… beh… semplici! Se non hai mai sentito parlare di questo principio, a prima vista potrebbe sembrarti “questo è abbastanza ovvio”, ma ti assicuro che non lo è.

Pensa a quante volte hai usato un nuovo paradigma o un nuovo pattern e hai pensato troppo a come usarlo, oppure hai sovraingegnerizzato il tuo progetto per garantirti maggiore manutenibilità o una struttura più pulita ma… non è così.

Shortcodes

Uno Shortcode è il modo più semplice per “collegare” il contenuto di una pagina a una funzione PHP. In breve, questo significa che ti basta scrivere uno shortcode nell'editor, con i tuoi parametri (se ce ne sono) e farà tutto lui!

Ma come funzionano gli shortcode?

[shortcodeName parameter1="value1" parameter2="value2"]

E come registrarli?

add_shortcode('shortcodeName', 'functionName');

E come gestirli?

function functionName( $attributes ) {
    // do the magic
}

Semplicissimo!

Gli shortcode e il nostro boilerplate

Vogliamo mantenere coerente la logica del nostro boilerplate, questo significa che dobbiamo seguire il flusso del plugin per aggiungere il nostro shortcode. Ma al momento il boilerplate del plugin non supporta gli shortcode, il che significa che dobbiamo aggiungerne il supporto! Le action e i filter sono attualmente supportati e caricati tramite il loader incluso in includes/class-*-loader.php. Qui filter e action sono memorizzati in due array separati e poi applicati quando viene chiamato il metodo run, quindi per aggiungere gli shortcode ci basta aggiungere questo:

/**
  * The array of shortcodes registered with WordPress.
  *
  * @since    1.0.0
  * @access   protected
  * @var      array    $shortcodes The shortcodes registered with WordPress to fire when the plugin loads.
  */
 protected $shortcodes;
/**
  * Add a new shortcode to the collection to be registered with WordPress
  *
  * @since     1.0.0
  * @param     string        $tag           The name of the new shortcode.
  * @param     object        $component      A reference to the instance of the object on which the shortcode is defined.
  * @param     string        $callback       The name of the function that defines the shortcode.
  */
 public function add_shortcode( $tag, $component, $callback, $priority = 10, $accepted_args = 1 ) {
    $this->shortcodes = $this->add( $this->shortcodes, $tag, $component, $callback, $priority, $accepted_args );
 }

La add shortcode metterà in coda il nostro shortcode nell'array degli shortcode e tutti i parametri del metodo sono gli stessi della documentazione di WordPress, quindi niente di nuovo qui!

E miglioriamo il metodo run in questo modo:

/**
  * Register the filters and actions with WordPress.
  *
  * @since    1.0.0
  */
 public function run() {
    // other stuff...
    foreach ( $this->shortcodes as $hook ) {
       add_shortcode( $hook['hook'], array( $hook['component'], $hook['callback'] ), $hook['priority'], $hook['accepted_args'] );
    }
}

Registrare il nostro primo shortcode

Ora che il nostro loader è pronto a gestire gli shortcode, ci basta registrarli nella classe core in includes/class-*.php.

Quindi vai dritto al define_public_hooks e aggiungi il nostro shortcode in questo modo:

$this->loader->add_shortcode( 'hello_from_kalizi', $plugin_public, 'shortcode_hello' );

Questo significa che il nostro shortcode sarà hello_from_kalizi e che verrà gestito dal $plugin_public tramite il suo metodo shortcode_hello. Quindi l'unico passo che dovremo fare è definire il metodo in public/class-*-public.php.

La struttura delle cartelle del frontend è la stessa del lato admin, questo significa che abbiamo una cartella partials dove sono memorizzate tutte le view. A scopo di test, modificherò il file lì dentro mettendoci semplicemente un “Hello world from Kalizi”.

E infine, definirò il mio metodo in questo modo:

public function shortcode_hello($attributes) {
    include 'partials/kalizi-hello-world-public-display.php';
}

Saluta, shortcode

Ora che il nostro plugin è pronto a gestire lo shortcode, ci basta creare una nuova pagina e aggiungerlo! Quindi vai alla sezione pagine in WordPress e crea una nuova pagina. Una volta nell'editor, cerca gli shortcode per aggiungerli alla tua pagina.

Aggiunta del componente shortcode

E dopo aver scelto lo shortcode, dobbiamo dire a WordPress che lo shortcode è quello dichiarato in precedenza, ovvero [hello_from_kalizi].

Shortcode aggiunto (ricorda le parentesi quadre)

E se tutto è andato bene, dopo aver pubblicato la pagina, dovresti vedere l'hello world!

Hello world, dallo shortcode!

Ok, il tema che ho scelto non era molto elegante ma possiamo lavorarci!

Il primo passo è fatto!

Photo by Volodymyr Hryshchenko on Unsplash

Come ho detto nell'episodio precedente di questa serie, il mondo di WordPress è davvero grande e ha tantissime cose che puoi fare in modi molto diversi. Gli shortcode sono un modo semplice per gestire il contenuto delle pagine con poco codice, sono molto potenti.

Se hai qualche domanda su questa parte, vuoi saperne di più su wp-admin o hai una domanda sullo sviluppo di plugin, lascia pure un commento qui sotto. 💬

Resta sintonizzato per i prossimi articoli di questa serie, ci addentreremo nel boilerplate, parleremo di come fare qualcosa sulla parte pubblica, di come usare ajax o il tuo framework o le tue librerie JS preferite, e di molto altro ancora! Fammi sapere se vuoi che mi concentri su qualche aspetto dello sviluppo dei plugin WP e buona giornata! ☕️