W poprzednim artykule mówiłem o używaniu WordPressa jako narzędzia do szybkiego tworzenia aplikacji .
Ale im dłużej pracuję z WordPressem i im więcej kodu widzę, tym większy jest dla mnie potencjał zarówno jako platformy do szybkiego prototypowania, jak i przenoszenia tych prototypów do w pełni opracowanych aplikacji.
Wtyczkami tymi mogą być aplikacje internetowe, wtyczki, motywy, strony internetowe, cokolwiek. Na potrzeby tego posta nie ma to znaczenia. Zamiast tego ważne jest, że na przykład:
- masz pomysł na wtyczkę,
- chcesz zobaczyć, jak to może działać w WordPressie,
- szybko coś poskładasz,
- zaczynasz go udoskonalać.
Dla wielu, którzy angażują się w poważniejszy rozwój WordPressa, pomyślałem, że warto przyjrzeć się, jak to wygląda. Mianowicie wezmę pomysł na wtyczkę, sprototypuję go, a następnie dopracuję w dobrze zorganizowaną, zorientowaną obiektowo wtyczkę.
W następnej serii artykułów omówię ten proces.
Szybkie prototypowanie z WordPress: koncepcja
Chociaż nie zawsze tak jest, początkowe koncepcje, powiedzmy, wtyczki wyjdą z potrzeby czegoś, czego możesz chcieć dla siebie lub dla kogoś innego.
Jeśli jesteś podobny do mnie, warto naszkicować kilka wstępnych pomysłów na to, jak to może działać i zrobić niezbędne notatki, które pomogą w rozwoju.
Moje ostre umiejętności projektowania prototypu.
Oczywiście inni mogą zdecydować się na przejście od razu do IDE i rozpoczęcie pracy nad kodem. A ponieważ na tym etapie jest to tylko szybki prototyp, nie ma w tym nic złego.
Jak widać na powyższym szkicu, chcę napisać małą wtyczkę, która wyświetli moje trzy najnowsze posty w metaboxie.
Idea wtyczki jest następująca:
- Kiedy piszę post, posiadanie łatwego odniesienia do moich trzech ostatnich postów da mi możliwość łatwego linkowania do nich, gdy chcę udostępnić moje treści w mediach społecznościowych.
Może cel wtyczki wydaje się głupi; może nie. Pamiętaj, że cokolwiek zdecydujesz się zbudować, powinno być czymś korzystnym zarówno dla Ciebie, jak i Twoich odbiorców. Jeśli ktoś inny tego nie rozumie, to w porządku.
Rozpoczęcie procesu
Teraz, gdy mamy już podstawowy pomysł, wiemy, że będziemy potrzebować kilku rzeczy:
- Plik wtyczki do wyświetlenia na ekranie wtyczki WordPress,
- Meta box do wyświetlania postów,
- Zapytanie o pobranie postów,
- Sposób wyświetlania wiadomości, jeśli nie ma postów do wyświetlenia.
Dzięki zastosowaniu kilku podstawowych hooków i interfejsów API WordPressa możemy coś szybko złożyć. Oto jak:
Nagłówek wtyczki
Pamiętaj, że nagłówek wtyczki odpowiada za wyświetlanie zawartości wtyczki – jej tytułu, opisu, wersji i autora – na ekranie wtyczki. Upewnij się, że jest zwięzły, opisowy i na temat.
<?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
*/Gdy to zostanie napisane, wtyczka pojawi się w obszarze administracyjnym WordPressa, ale w rzeczywistości nic nie zrobi. Dajmy więc wtyczce trochę rzeczywistej funkcjonalności.
Meta Box
Najpierw musimy zarejestrować metabox. W tym celu możemy użyć haka add_meta_boxes. Łatwo jest zdefiniować i podłączyć do naszego metaboxa. Zwróć uwagę na komentarze dla każdego z argumentów metody.
<?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.
);
}Zwróć uwagę, że mamy funkcję odpowiedzialną za wyświetlanie informacji. Musimy to zdefiniować, w przeciwnym razie WordPress spróbuje uruchomić funkcję, która nie istnieje, co spowoduje błąd.
Zdefiniujmy teraz tę funkcję :
<?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();
}
}
Teraz, jeśli zauważysz, ta funkcja opiera się na trzech różnych funkcjach, które pomagają jej wykonywać swoją pracę. Więc musimy również zdefiniować te funkcje. W idealnym przypadku każda z tych funkcji powinna mieć określony cel, jednak biorąc pod uwagę, że szybko prototypujemy ten projekt, możemy mieć trochę więcej pracy na funkcję niż zwykle.
Zapytanie o posty
Najpierw musimy zapytać o posty. Aby to zrobić, skorzystamy z 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;
}
Zauważ, że zwracamy instancję obiektu zapytania. Za chwilę zrobimy z tym więcej.
Wyświetlanie wyniku
Jeśli istnieją posty do wyświetlenia, użyjemy funkcji do iteracji postów znalezionej instancji WP_Query i renderowania permalinku i tytułu na uporządkowanej liście.
<?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;
}
Zwróć uwagę, że będzie to lista do trzech, ale niekoniecznie w sumie do trzech.
Wyświetlanie braku wyników
Jeśli nie ma wyników, to musimy wyświetlić użytkownikowi komunikat, że zapytanie nie znalazło postów. Kod może wyglądać mniej więcej tak :
<?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;
}
Oczywiście możesz samodzielnie dostosować wiadomość do tego wszystkiego.
Szybkie prototypowanie, gotowe.
W tym momencie dostępna jest w pełni funkcjonalna wtyczka. Nie obyło się jednak bez problemów:
- Mieszamy HTML z naszym PHP, co skutkuje ściślejszym sprzężeniem niż to konieczne,
- HTML nie jest w żaden sposób oczyszczony ani bezpieczny,
- Nie ma absolutnie żadnej orientacji obiektowej dla tych funkcji, co, chociaż niektórzy mogą twierdzić, że jest niepotrzebne, sprawia, że jest to wysoce niemodularne.
Ale celem tej serii jest wzięcie szybkiego prototypu i przeniesienie go do bardziej profesjonalnej wtyczki. Zrobiliśmy więc pierwszą część, a teraz nadszedł czas, aby przejść do drugiej fazy.
W międzyczasie możesz śledzić rozwój tej wtyczki na GitHub. Każde wydanie, które odpowiada wpisowi na blogu, będzie oznaczać tagami. Tak więc ten konkretny post można znaleźć w tagu 0.1.0.
Gałąź główna będzie również zawierała najnowszą wersję całego scalonego kodu, a gałąź deweloperska będzie zawierała kod, nad którym pracuję, ale nie jest kompletny (ani stabilny).
I zacznę to robić w następnym poście.
Posty z serii
- Szybkie prototypowanie z WordPress: od koncepcji do wtyczki
- Szybkie prototypowanie z WordPress: analiza koncepcji
- Szybkie prototypowanie: Prototypowanie do kodu, część 1
- Szybkie prototypowanie: Prototypowanie do kodu, część 2
- Szybkie prototypowanie: Przedstawiamy automatyczne ładowanie