Nopea prototyyppien luominen WordPressillä: konseptista laajennukseen
Olen puhunut WordPressin käyttämisestä työkaluna nopeaan sovellusten kehittämiseen aiemmassa artikkelissa.
Mutta mitä pidempään työskentelen WordPressin kanssa ja mitä enemmän näen koodia, sitä enemmän ymmärrän, että sillä on sekä alustana nopeaa prototyyppiä että prototyyppien viemistä täysin kehitettyihin sovelluksiin.
Nämä laajennukset voivat olla verkkosovelluksia, laajennuksia, teemoja, verkkosivustoja, mitä tahansa. Tämän postauksen kannalta sillä ei ole väliä. Sen sijaan tärkeää on, että esim.
- sinulla on idea lisäosasta,
- haluat nähdä, kuinka se voisi toimia WordPressissä,
- laitat nopeasti jotain yhteen,
- alat jalostaa sitä.
Monille, jotka ovat mukana vakavammassa WordPress-kehityksessä, ajattelin, että voisi olla syytä katsoa, miltä tämä näyttää. Nimittäin otan idean laajennukseksi, teen sen prototyypin ja jalostan sen sitten hyvin organisoiduksi, olioliitokseksi.
Joten seuraavassa artikkelisarjassa aion käydä tämän prosessin läpi.
Nopea prototyyppien luominen WordPressillä: konsepti
Vaikka näin ei aina ole, esimerkiksi laajennuksen alkukäsitteet syntyvät tarpeesta jotain, mitä saatat haluta itsellesi tai jollekin toiselle.
Jos olet kuten minä, se auttaa hahmottamaan alustavia ideoita siitä, miten se voisi toimia, ja tehdä tarvittavia muistiinpanoja, jotka auttavat kehitystä.
Terävä suunnittelutaitoni prototyyppiin.
Tietenkin muut voivat halutessaan hypätä suoraan IDE:hen ja alkaa työstää koodia. Ja koska tässä vaiheessa se on vain nopea prototyyppi, siinä ei ole mitään väärää.
Kuten yllä olevasta luonnoksesta näet, aion kirjoittaa pienen laajennuksen, joka näyttää kolme viimeisintä viestiäni metalaatikossa.
Pluginin idea on tämä:
- Kun kirjoitan viestiä, voin helposti viitata kolmeen viimeisimpään viestiini, jotta voin helposti linkittää niihin, kun haluan jakaa sisältöäni sosiaalisessa mediassa.
Ehkä laajennuksen tarkoitus näyttää typerältä; ehkä ei. Muista, että minkä tahansa valitsemasi rakentamisen pitäisi olla jotain, josta on hyötyä sekä sinulle että yleisöllesi. Jos joku muu ei ymmärrä, ei hätää.
Prosessin aloittaminen
Nyt kun meillä on perusidea, tiedämme, että tarvitsemme muutamia asioita:
- WordPress Plugin -näytössä näytettävä laajennustiedosto,
- Metalaatikko viestien näyttämiseen,
- Viestien hakemista koskeva kysely,
- Tapa näyttää viesti, jos näytettäviä viestejä ei ole.
Muutamien peruskoukkujen ja WordPress-sovellusliittymien avulla voimme koota jotain, heh, nopeasti. Näin:
Plugin Header
Muista, että laajennuksen otsikko vastaa laajennuksen sisällön – sen otsikon, kuvauksen, version ja tekijän – näyttämisestä laajennusnäytöllä. Varmista, että se on ytimekäs, kuvaava ja ytimekäs.
<?php
/**
* Three Recent Posts
*
* @package TRP
* @author Tom McFarlin
* @copyright 2017 Tom McFarlin
* @license MIT
*
* @wordpress-plugin
* Plugin Name: Three Recent Posts
* Plugin URI: https://tommcfarlin.com/rapid-prototyping/
* Description: Displays the three mot recent posts in your post editor screen.
* Version: 0.1.0
* Author: Tom McFarlin
* Author URI: https://tommcfarlin.com
* Text Domain: three-recent-posts
* License: MIT
* License URI: http://www.gnu.org/licenses/gpl-3.0.txt
*/Kun tämä on kirjoitettu, laajennus tulee näkyviin WordPressin hallinta-alueelle, mutta se ei tee mitään. Joten annetaan laajennukselle joitain todellisia toimintoja.
Meta Box
Ensin meidän on rekisteröitävä metalaatikko. Voimme käyttää add_meta_boxes -koukkua tähän. Se on helppo määrittää ja liittää metalaatikkoomme. Huomioi kunkin menetelmäargumentin kommentit.
<?php
add_action( 'add_meta_boxes', 'three_recent_posts_meta_box' );
/**
* Registers the Meta Box with WordPress. Defines the ID, title, display function,
* and the post type on which it will live.
*/
function three_recent_posts_meta_box() {
add_meta_box(
'three-recent-posts', // Meta Box ID.
'Three Recent Posts', // Meta Box Title.
'three_recent_posts_display', // Function for rendering the meta box.
'post', // Post type on which this meta box will live.
'side' // Where the meta box will be displayed.
);
}Huomaa melkein, että meillä on toiminto, joka vastaa tietojen näyttämisestä. Meidän on määritettävä tämä, muuten WordPress yrittää käynnistää toiminnon, jota ei ole olemassa, ja tämä johtaa virheeseen.
Määritetään nyt tämä funktio :
<?php
/**
* If there are posts to display, renders them in the metabox. Otherwise, displays
* a note that there are no posts to display.
*/
function three_recent_posts_display() {
$query = _three_recent_posts_get();
if ($query->have_posts()) {
_three_recent_posts_show_posts( $query );
} else {
_three_recent_posts_no_posts();
}
}
Jos nyt huomaat, tämä toiminto tukeutuu kolmeen eri toimintoon, jotka auttavat sitä suorittamaan työnsä. Joten meidän on myös määriteltävä nämä toiminnot. Ihannetapauksessa jokaisella näistä toiminnoista tulisi olla funktion tarkoitus, mutta koska prototyyppimme projektin nopeasti valmistuu, meillä voi olla tavallista enemmän työtä toimintoa kohti.
Viestien kysely
Ensin meidän on kysyttävä viestejä. Tätä varten hyödynnämme WP_Query.
<?php
/**
* Defines a query for retrieving the three most recent posts and orders them by
* descing date (with the most recent being first).
*
* @return WP_Query $query The query for retrieving the three most recent posts.
*/
function _three_recent_posts_get() {
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'desc',
);
$query = new WP_Query( $args );
return $query;
}
Huomaa, että palautamme kyselyobjektin ilmentymän. Teemme tällä hetkellä lisää.
Tuloksen näyttäminen
Jos näytettäviä viestejä on, käytämme funktiota, joka toistaa löytämänsä WP_Query-esiintymän viestit ja hahmonnamme pysyvän linkin ja otsikon järjestetyssä luettelossa.
<?php
/**
* Creates the content for the meta box if there are posts to display. Creates a notice
* that up to three posts will be displayed, then links to each of the three most recent
* post.
*
* @param WP_Query $query The query that contains results to render in the display.
*/
function _three_recent_posts_show_posts( $query) {
// There may not always be three posts, so display a message explaining.
$html = '<p>';
$html .= '<span class="description">';
$html .= 'Displays up to the three most recent posts.';
$html .= '</span>';
$html .= '</p>';
// Create an ordered lists of the most recent posts.
$html .= '<ol>';
while ($query->have_posts()) {
$query->the_post();
$html .= '<li>';
$html .= '<a href="'. get_the_permalink(). '">';
$html .= get_the_title();
$html .= '</a>';
$html .= '</li>';
}
$html .= '</ol>';
echo $html;
}
Huomaa, että tässä luetellaan enintään kolme, mutta ei välttämättä kaikkia kolmea.
Ei tulosta
Jos tuloksia ei ole, meidän on näytettävä käyttäjälle viesti, että kysely ei löytänyt viestejä. Koodi voi näyttää tältä :
<?php
/**
* Displays a message in the meta box if there are no recent posts.
*/
function _three_recent_posts_no_posts() {
$html .= '<span class="description">';
$html .= 'There are no recent posts.';
$html .= '</span>';
echo $html;
}
Voit tietysti muokata viestiä tätä varten itse.
Nopea prototyyppi, valmis.
Tässä vaiheessa on täysin toiminnallinen laajennus. Se ei kuitenkaan ole ilman ongelmia:
- Sekoitamme HTML:ää PHP:n kanssa, mikä johtaa tarpeettoman tiiviimpään kytkentään,
- HTML ei ole desinfioitu tai turvallinen millään tavalla,
- Näillä funktioilla ei ole minkäänlaista oliosuuntausta, mikä, vaikka jotkut saattavat väittää olevan tarpeetonta, tekee tästä erittäin epämodulaarisen.
Mutta tämän sarjan tarkoitus on ottaa nopea prototyyppi ja siirtää se ammattitason laajennukseen. Joten olemme tehneet ensimmäisen osan ja nyt on aika siirtyä toiseen vaiheeseen.
Sillä välin voit seurata tämän laajennuksen kehitystä GitHubissa. Merkitsen jokaisen julkaisun, joka vastaa blogikirjoitusta. Joten tämä tietty viesti löytyy 0.1.0 – tunnisteesta.
Päähaara sisältää myös uusimman version kaikesta yhdistetystä koodista ja kehityshaara sisältää koodin, jonka parissa työskentelen, mutta se ei ole täydellinen (eikä vakaa).
Ja aion tehdä sen seuraavassa postauksessa.