Les Extensions o Plugins
Les extensions (en anglès plugins) són fragments de codi PHP que permeten afegir funcionalitats a webs fets amb WordPress (sense necessitat de modificar-ne el nucli).
Per defecte, el WordPress s’instal·la amb dues extensions:
- Akismet: Permet detectar, amb l’ajuda d’un servei web extern, si els comentaris de les entrades són en realitat spam. Això sí, cal registrar-se.
- Hello Dolly: És la primera extensió que es va crear per al WordPress. Fa que apareguin fragments de la cançó Hello Dolly a les pantalles d’administració. En realitat es pot esborrar, ja que no té cap utilitat pràctica.
En l’article ginys i extensions en WordPress hi trobaràs com buscar i instal·lar-te extensions per al teu Web. N’hi ha milers i moltes són gratuïtes. Però en el present article explicarem com desenvolupar-ne una de pròpia.
La nostra primera extensió (plantegem un cas pràctic)
Suposem que estem treballant amb un tema que no fa cas de la relació entre pàgines i subpàgines, i necessitem crear una extensió que permeti a una pàgina mare mostrar el contingut de totes les seves subpàgines. A més, volem que a dalt de tot hi aparegui automàticament una llista amb la imatge destacada de cada subpàgina, i que es puguin clicar per anar directament al seu contingut.
El primer que caldrà fer és escollir un nom que identifiqui l’extensió. P. ex. “Llistat de subpàgines amb imatges“.
Implementant l’extensió “Llistat de subpàgines amb imatges“
A partir del nom de l’extensió, decidirem el nom del fitxer PHP amb el codi font, que serà el mateix que el de la carpeta on s’ubicarà. Aquest nom es coneix com a slug de l’extensió. Lògicament, no pot coincidir amb el de cap altra extensió instal·lada.
En el nostre cas hem escollit com a slug llisupima. Per tant, crearem la carpeta llisupima dins de wp-content/plugins (o dins de la carpeta on hi hagi les extensions en cas d’haver-se indicat una altra ruta en el fitxer wp-config.php).
El fitxer amb el codi font de l’extensió l’ubicarem dins de la carpeta que hem creat i es dirà llisupima.php.
Editant el fitxer llisupima.php: la capçalera
El primer que ha de tenir el fitxer principal d’una extensió és la capçalera:
<?php /* Plugin Name: Llistat de Subpàgines amb Imatges Description: Llista les subpàgines d'una pàgina amb la seva imatge destacada com a link Author: webscreatives Version: 0.7 */ // ... ?>
La capçalera és necessària per tal de poder activar l’extensió en el nostre WordPress.
L’únic atribut obligatori és el Plugin Name. La resta són opcionals. De fet, n’hi ha més que es poden afegir:
- Plugin URI. Adreça de la pàgina web de l’extensió.
- Author URI: Adreça de la pàgina web de l’autor de l’extensió.
- License: Llicència de l’extensió (p.ex. GPLv2 or later).
- License URI: Adreça on hi ha el text sencer de la llicència.
- Text Domain: Serveix per a les traduccions quan s’internacionalitza el plugin (des de la versió 4.6, no és necessari si coincideix amb l’slug de l’extensió).
- Domain Path: Lloc on ha d’anar a buscar les traduccions (no és necessari si s’utilitzen les carpetes per defecte).
A continuació es podria incloure un altre comentari (/* ... */) amb el text de la llicència. En aquest article, només volem abordar un cas molt senzill a tall d’exemple. Per tant, no serà necessària aquesta part.
Escrivint la funcionalitat de l’extensió a llisupima.php
Després del comentari inicial amb la capçalera (i, si es vol, el text de la llicència) ja podem “picar” el codi de l’extensió:
if ( !function_exists( 'prefix_get_llisupima' ) )
{
function prefix_get_llisupima()
{
wp_register_style( 'estil_llisupima', plugins_url('/llisupima.css', __FILE__), false, '1.0.0', 'all');
wp_enqueue_style( 'estil_llisupima' );
$pages = get_pages(array('child_of' => get_the_ID(), 'sort_order' => 'ASC', 'sort_column' => 'menu_order'));
$sortida = "<div class=\"imatgesllisupima\"><ul id=\"llisupima-ul\">";
foreach ($pages as $page):
$sortida .= "<li><a href=\"#" . $page->post_name . "\" title=\"" . esc_attr($page->post_title) . "\">";
$sortida .= get_the_post_thumbnail($page->ID, 'medium') . "</a></li>";
endforeach;
$sortida .= "</ul></div>";
foreach ($pages as $page):
$sortida .= "<div id=\"" . $page->post_name . "\" class=\"subpaginallisupima\">";
$sortida .= "<h1 class=\"titolllisupima\">" . $page->post_title . "</h1>";
$sortida .= apply_filters('the_content', $page->post_content);
$sortida .= "<hr class=\"liniallisupima\"/></div>";
endforeach;
return $sortida;
}
}
add_shortcode('llista_subpag_imatges', 'prefix_get_llisupima');
És una bona pràctica validar sempre amb function_exists() que no existeixi ja la funció que volem implementar. També ho és afegir un prefix propi al nom de les nostres funcions.
Ja en el cos de la funció, les dues primeres línies serveixen per carregar la fulla d’estils que s’utilizarà.
A continució, per mitjà de la funció get_pages(), s’obtenen les subpàgines de la pàgina actual, fet que indiquem amb el paràmetre 'child_of' => get_the_ID().
Aleshores, vénen dos bucles. El primer serveix per fer la capçalera, i genera una llista on cada element és un enllaç amb el nom, tooltip i imatge de cada subpàgina. Mentre que el segon serveix per renderitzar les pàgines una a continuació de l’altra. Per cada subpàgina es renderitza el títol, contingut i una línia separadora.
Per últim, ja fora de la funció, creem un codi de substitució (shortcode en anglès) que permetrà incloure aquesta funcionalitat a la pàgina que vulguem. És a dir, allà on incloguem [llista_subpag_imatges], ens apareixerà tot el que es renderitza a la funció prefix_get_llisupima().
Aplicant estils a la nostra extensió: llisupima.css
La fulla d’estils, llisupima.css, la posarem a la mateixa carpeta de l’extensió (wp-content/plugins/llisupima/). El seu contingut serà:
#llisupima-ul li
{
display: inline-block;
list-style-type: none;
padding-right: 30px;
padding-bottom: 10px;
vertical-align: bottom;
}
div.imatgesllisupima
{
text-align: center;
}
div.subpaginallisupima
{
padding-top: 30px;
}
h2.titolllisupima
{
color: #d3b062;
font: 18px arial, sans-serif;
}
hr.liniallisupima
{
color: #d3b062;
background-color: #d3b062;
height: 2px;
border: 0px;
}
Activant i provant l’extensió
A continuació, el que farem és provar l’extensió. Per això, caldrà anar a Extensions > Extensions instal·lades i, en el llistat que apareix, buscar “Llistat de subpàgines amb imatges“. Allà, clicarem l’enllaç “Activa“.
Amb això haurem activat l’extensió. El següent pas és crear una pàgina mare i vàries subpàgines d’aquesta, totes elles amb una imatge destacada.
Aleshores, editem la pàgina mare i hi escrivim: [llista_subpag_imatges], i gravem.
Per últim, ja només ens quedaria navegar pel nostre web, anar a la pàgina mare i veure què surt!
Desitgem que aquest article t’hagi estat d’utilitat i que el comparteixis a les xarxes socials!