Snabb prototyping med WordPress: från koncept till plugin
Jag har pratat om att använda WordPress som ett verktyg för snabb applikationsutveckling i en tidigare artikel.
Men ju längre jag arbetar med WordPress och ju mer kod jag ser, desto större potential inser jag att det har som både en plattform för snabb prototypframställning och att sedan ta dessa prototyper till fullt utvecklade applikationer.
Dessa plugins kan vara webbapplikationer, plugins, teman, webbplatser, vad som helst. För detta inläggs syfte spelar det ingen roll. Det som är viktigt är att till exempel:
- du har en idé om ett plugin,
- du vill se hur det kan fungera i WordPress,
- du sätter snabbt ihop något,
- du börjar förfina det.
För många som engagerar sig för mer seriös WordPress-utveckling tänkte jag att det kan vara värt att ta en titt på hur det här ser ut. Jag ska nämligen ta en idé till ett plugin, prototypa det och sedan förfina det till ett välorganiserat, objektorienterat plugin.
Så i nästa serie artiklar kommer jag att gå igenom den processen.
Snabb prototyping med WordPress: konceptet
Även om detta inte alltid är fallet, kommer de initiala koncepten för, säg, en plugin ur ett behov av något som du kanske vill ha för dig själv eller för någon annan.
Om du är som jag, hjälper det att skissera några första idéer om hur det kan fungera och göra eventuella anteckningar som kan hjälpa till i utvecklingen.
Mina skarpa designkunskaper för prototypen.
Naturligtvis, för andra kan de välja att hoppa direkt in i IDE och börja arbeta med koden. Och eftersom det i den här fasen bara är en snabb prototyp, är det inget fel med det.
Som du kan se från skissen ovan funderar jag på att skriva ett litet plugin som kommer att visa mina tre senaste inlägg i en metabox.
Tanken bakom pluginet är denna:
- När jag skriver ett inlägg, genom att lätt referera till mina tre senaste inlägg, kan jag enkelt länka till dem när jag vill dela mitt innehåll socialt.
Kanske verkar syftet med plugin-programmet dumt; kanske inte. Kom ihåg att vad du än väljer att bygga bör vara något som är fördelaktigt både för dig och din publik. Om någon annan inte förstår det är det bra.
Starta processen
Nu när vi har en grundläggande idé på plats vet vi att vi kommer att behöva några saker:
- Plugin-filen för visning på WordPress Plugin-skärmen,
- En metabox för att visa inläggen,
- En fråga för att hämta inläggen,
- Ett sätt att visa ett meddelande om det inte finns några inlägg att visa.
Genom att använda några grundläggande krokar och WordPress API:er kan vi sätta ihop något, ahem, snabbt. Här är hur:
Instickshuvudet
Kom ihåg att pluginhuvudet är ansvarigt för att visa innehållet i pluginet – dess titel, beskrivning, version och författare – på pluginskärmen. Se till att det är kortfattat, beskrivande och rakt på sak.
<?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
*/När detta är skrivet kommer pluginet att dyka upp inom WordPress administrationsområdet, men det kommer faktiskt inte att göra någonting. Så låt oss ge pluginet lite faktisk funktionalitet.
Metaboxen
Först måste vi registrera en metabox. Vi kan använda add_meta_boxes- kroken för detta. Det är lätt att definiera och koppla upp på vår metabox. Notera kommentarerna för vart och ett av metodargumenten.
<?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.
);
}Märker nästan att vi har en funktion som ansvarar för att visa information. Vi måste definiera detta annars kommer WordPress att försöka aktivera en funktion som inte finns och detta kommer att resultera i ett fel.
Låt oss definiera den funktionen nu :
<?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();
}
}
Om du märker att den här funktionen förlitar sig på tre olika funktioner för att hjälpa den att göra sitt arbete. Så vi måste också definiera dessa funktioner. Helst bör var och en av dessa funktioner ha ett funktionssyfte, men med tanke på att vi snabbt skapar prototyper för detta projekt kan vi ha lite mer arbete per funktion än vanligt.
Söker efter inlägg
Först måste vi fråga efter inlägg. För att göra detta kommer vi att dra fördel av 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;
}
Observera att vi returnerar instansen av frågeobjektet. Vi kommer att göra mer med detta ett ögonblick.
Visar ett resultat
Om det finns inlägg att visa kommer vi att använda en funktion för att iterera genom inläggen instansen av WP_Query hittade och återge permalänken och titeln i en ordnad lista.
<?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;
}
Observera att detta kommer att lista upp till tre, men inte nödvändigtvis totalt tre.
Visar inget resultat
Om det inte finns några resultat måste vi visa ett meddelande till användaren att frågan inte hittade några inlägg. Koden kan se ut ungefär så här :
<?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;
}
Naturligtvis kan du anpassa meddelandet för detta helt på egen hand.
Snabb prototypning, klar.
Vid det här laget finns det ett plugin med full funktionalitet. Det är dock inte utan problem:
- Vi blandar HTML med vår PHP vilket resulterar i tätare koppling än nödvändigt,
- HTML-koden är inte sanerad eller säker på något sätt,
- Det finns absolut ingen objektorientering för dessa funktioner, vilket, även om vissa kanske hävdar att det är onödigt, gör detta mycket omodulärt.
Men poängen med den här serien är att ta en snabb prototyp och flytta den till ett mer professionellt plugin. Så vi har gjort den första delen och nu är det dags att börja gå in i den andra fasen.
Under tiden kan du följa utvecklingen av detta plugin på GitHub. Jag kommer att tagga varje release som motsvarar ett blogginlägg. Så just detta inlägg kan hittas i 0.1.0 -taggen.
Mastergrenen kommer också att inkludera den senaste versionen av all sammanslagen kod och utvecklingsgrenen kommer att inkludera koden jag jobbar på men är inte komplett (inte heller stabil).
Och det ska jag börja göra i nästa inlägg.
Serie inlägg
- Snabb prototyping med WordPress: från koncept till plugin
- Snabb prototyping med WordPress: konceptanalys
- Rapid Prototyping: Prototype To Code, del 1
- Rapid Prototyping: Prototype To Code, del 2
- Rapid Prototyping: Introduktion av Autoloading