Administració d'un CMS: Wordpress III

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Els plugins afegeixen funcionalitat al Wordpress. Hi ha molts plugins per instal.lar i que s'adapten a les teves necessitats. Ara bé, si no trobes el plugin que necessites, tu mateix el pots programar. Només cal que aprenguis les tècniques de programació dels plugins i la API que ho suporta:

En aquesta pràctica programarem un plugin des de zero, en el qual també haurem de tocar la base de dades. És un plugin curt i relativament senzill.

Nom del plugin: plugin-cercador.

Què farà el nostre plugin? Volem que quan carreguem determinats posts, automàticament se'ns obri una pestanya del navegador fer una cerca sobre el títol d'aquest post. I els navegadors que podem utilitzar seran diferents.

El plugin el podrem activar/desactivar sempre que vulguem (i així tenim una manera fàcil d'activar/desactivar la funcionalitat), i el plugin només actuarà sobre els posts que desitgem.

Per exemple, si el teu bloc és sobre electrònica i fas un post sobre el Mobile World Congress, pots obrir una pestanya en el navegador que faci la cerca:

Desenvolupament

En l'anterior enllaç (amb anglès) s'explica:

Programació del plugin plugin-cercador

El punt de partida que ha seguit el professor és:

El primer que fem és crear la carpeta plugin-cercador dins de wordpress/wp-content/plugins/. A dins del directori ficarem l'únic fitxer que tindrà aquest plugin:

plugin-cercador.php:

<?php
/*
Plugin Name: Plugin Cercador
*/
?>

En aquest moment, si anem a la zona d'administració del nostre wordpress, ja veurem que apareix el nostre plugin, i que podem activar o desactivar, encara que no faci res.

Se us dóna dues versions del plugin, que és la mateixa. La primera és neta (sense cap mena de comentaris); i la segona és una versió bruta amb comentaris, que es poden descomentar per tal de què l'alumne vegi que fa cada instrucció.

plugin-cercador.php (amb comentaris):

<?php
/*
Plugin Name: Plugin Cercador
*/

function nou_tab_cercador () {
	global $post;
	if ( is_page() || is_object( $post ) ) {
        //echo $post->ID;
        //echo get_post_meta($post->ID, 'cercador_info', true );
        //wp_redirect("http://www.google.es"); //fem una redirecció
        //exit;
		if ( $cercador = get_post_meta($post->ID, 'cercador_info', true ) ) {
                $titol = get_the_title($post->ID);
                //echo $titol;
                echo "<script>";
                //echo "alert('$cercador');";
                //echo "alert('$titol');";
                //https://www.google.es/search?q=vespa asiàtica
                //https://www.amazon.com/s/ref=nb_sb_noss_2?field-keywords=vespa asiàtica
                echo "window.open('$cercador$titol','_blank');";
                echo "</script>";
                }
        }
}

add_action( 'get_header', 'nou_tab_cercador' );

?>

plugin-cercador.php (sense comentaris):

<?php
/*
Plugin Name: Plugin Cercador
*/

function nou_tab_cercador () {
	global $post;
	if ( is_page() || is_object( $post ) ) {
		if ( $cercador = get_post_meta($post->ID, 'cercador_info', true ) ) {
                $titol = get_the_title($post->ID);
                echo "<script>";
                echo "window.open('$cercador$titol','_blank');";
                echo "</script>";
                }
        }
}

add_action( 'get_header', 'nou_tab_cercador' );

?>

Explicació

add_action( 'get_header', 'nou_tab_cercador' );

Quan carreguem la pàgina s'executa la funció nou_tab_cercador() (PHP).

Tan si estem carregant una pàgina com un post, som capaços de saber el id del post: $post->ID.

Ara hem de parlar de la base de dades. Hi ha una taula molt important que és wp_postmeta. En aquesta taula podem guardar informació diversa en forma de parella clau-valor, relacionada amb cada id_post.

mysql> desc wp_postmeta;
+------------+---------------------+------+-----+---------+----------------+
| Field      | Type                | Null | Key | Default | Extra          |
+------------+---------------------+------+-----+---------+----------------+
| meta_id    | bigint(20) unsigned | NO   | PRI | NULL    | auto_increment |
| post_id    | bigint(20) unsigned | NO   | MUL | 0       |                |
| meta_key   | varchar(255)        | YES  | MUL | NULL    |                |
| meta_value | longtext            | YES  |     | NULL    |                |
+------------+---------------------+------+-----+---------+----------------+

Hem de saber quin és el valor màxim actual, doncs volem inserir dades en aquesta taula:

mysql> select max(meta_id) from wp_postmeta;
+--------------+
| max(meta_id) |
+--------------+
|          278 |
+--------------+

També hem d'avariguar quins són els posts que volem activar. És a dir, els posts sobre els quals volem que s'obri una nova pestanya en el navegador. Amb aquesta consulta pots veure els IDs i el títol dels posts.

mysql> select ID,post_title,post_status from wp_posts where post_status='publish';
+-----+------------------------------------------------------+-------------+
| ID  | post_title                                           | post_status |
+-----+------------------------------------------------------+-------------+
|   2 | Pàgina d'exemple                                     | publish     |
|   4 | insectarium                                          | publish     |
|  18 | Espècies de papallones                               | publish     |
|  25 | Tisoretes                                            | publish     |
|  32 | Tipus de papallones                                  | publish     |
|  55 | Insecte Pal                                          | publish     |
...

Per activar un post (en aquest cas dos posts), hem de fer dos inserts a la base de dades:

insert into wp_postmeta values (279,18,'cercador_info','http://www.google.es/search?q=');
insert into wp_postmeta values (280,25,'cercador_info','https://www.amazon.com/s/ref=nb_sb_noss_2?field-keywords=');

Amb el primer insert estem dient que volem utilitzar el Google com a cercador; i en el segon cas utilitzem el Amazon.

Si mirem el fitxer PHP:

$cercador = get_post_meta($post->ID, 'cercador_info', true )
$titol = get_the_title($post->ID);

veiem com som capaços de trobar aquesta informació de la base de dades: tant el títol del post, com el cercador que volem utilitzar per a aquest post.

Finalment, s'executarà un script que obre una nova pestanya en el navegador, concatenant la url del cercador amb el títol del post. Aquest és un tema una mica complicat, doncs el PHP és un codi que s'executa en el servidor, i el <script> s'executa en el client, en el navegador web de l'usuari.

A més a més, a nivell de sintaxi és una mica liat (cometes dobles, cometes simples, punts i coma, parèntesi,...). S'ha d'anar amb una mica de compte amb la sintaxi, però funciona.

Per tant, tenim uns posts pels quals volem afegir la pestanya complementària en el navegador. I tota aquesta funcionalitat la podem activar/desactivar precisament activant/desactivant el plugin.

Tasques a realitzar

En aquest plugin s'obliga a l'alumne a utilitzar la base de dades. Evidentment, aquesta és una funcionalitat avançada. Si vols facilitar la feina a l'usuari final, això passa per fer un plugin més el.laborat que en la zona d'administració tingui paràmetres. En aquesta zona d'administració es podria assignar els posts a diferents tipus de cercador: google, yahoo, amazon,... Però això s'escapa de l'objectiu.

Resum

Després de tot el que has vist, ara estàs en condicions per:

Tot i que el crèdit no està orientat a programació, fixa't que és molt important tenir coneixements de programació per tal de poder adaptar i configurar un blog (o un altre CMS) a les necessitats del client.

Entrega

Recorda la normativa per entregar les pràctiques al Moodle: ASIX-M09-IAW#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Moodle.

Fés alguna captura de pantalla per veure que les funcionalitats demanades s'acompleixen. Això no treu que ensenyis al professor in situ el funcionament del teu blog.


creat per Joan Quintana Compte, març 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines