Administració d'un CMS: Wordpress II

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

La majoria de les tasques administratives les farem accedint a la zona d'aministració (wp-admin/). Ara bé, a vegades hem de fer coses que només es podran fer tocant el codi, modificant una plantilla CSS, tocant directament la bd... aquí és on has de demostrar les teves dots d'administrador de sistemes i programador.

Desenvolupament

Categories i subcategories. Taxonomia. Taules jeràrquiques

Per al teu bloc has de definir un arbre de categories i subcategories. No cal que totes les branques tinguin el mateix número de fills/ancestres.

Per exemple, el professor, en el bloc d'ocells defineix les següents categories:

Taxonomia > Charadriiformes > Laridae (gavines)
Taxonomia > Aus terrestres > Falconidae (xoriguer, falcó)
Taxonomia > Aus terrestres > Passeriformes > Hirundinidae (orenetes)

Anem a veure en quines taules es guarda aquesta informació, i les consultes per accedir a aquesta jerarquia.

select * from wp_terms; -> taula on es guarden els terms
select * from wp_term_taxonomy; -> taula on es guarden les relacions entre els terms.
select * from wp_term_relationships -> relaciona els posts (o links) amb la categoria a què pertanu.

Podem creuar les taules wp_terms i wp_term_taxonomy:

select t.term_id,name,taxonomy, parent from wp_terms t, wp_term_taxonomy tt where t.term_id=tt.term_id;

i si fem un inner join sobre la mateixa taula wp_term_taxonomy:

select tt1.term_id,tt1.description,tt1.parent,tt2.description from wp_term_taxonomy tt1 inner join wp_term_taxonomy tt2 where tt2.term_id=tt1.parent;

Dues consultes més on es mostra tota la jerarquia:

SELECT tt1.term_id AS lev1, tt2.term_id as lev2, tt3.term_id as lev3, tt4.term_id as lev4
FROM wp_term_taxonomy AS tt1
LEFT JOIN wp_term_taxonomy AS tt2 ON tt2.parent = tt1.term_id
LEFT JOIN wp_term_taxonomy AS tt3 ON tt3.parent = tt2.term_id
LEFT JOIN wp_term_taxonomy AS tt4 ON tt4.parent = tt3.term_id;

SELECT tt1.term_id AS lev1, tt1.description, tt2.term_id as lev2, tt2.description, tt3.term_id as lev3,
 tt3.description, tt4.term_id as lev4, tt4.description
FROM wp_term_taxonomy AS tt1
LEFT JOIN wp_term_taxonomy AS tt2 ON tt2.parent = tt1.term_id
LEFT JOIN wp_term_taxonomy AS tt3 ON tt3.parent = tt2.term_id
LEFT JOIN wp_term_taxonomy AS tt4 ON tt4.parent = tt3.term_id;

Aquesta query es pot millorar encara. Pots estudiar aquest link per entendre bé les relacions de jerarquia:

Blog multiidioma. Instal.lació del plugin polylang o bé qTranslate X

NOTA: Per al curs 2017-2018 instal.larem el plugin polylang.

L'objectiu és aconseguir la mateixa funcionalitat que el blog del professor: www.joanillo.org. Primer de tot instal.laràs aquest plugin i et familiaritzaràs amb ell.

Pots descarregar-te el plugin del següent enllaç:

o bé descarregar-lo directament des de la zona d'administració

Abans de descarregar-lo i instal.lar-lo, acostuma't a mirar la informació del plugin, concretament:

De fet en la mateixa web podem veure la compatibilitat entre la versió del wordpress i la versió del plugin. A data d'avui (febrer 2017), tenim instal.lat Wordpress 4.7.2, i volem instal.lar qTranslateX 3.4.6.8. I veiem que aquesta combinació funciona! Per tant, podem instal.lar sense problemes el plugin.

NOTA Febrer 2018: pel mateix motiu, després de mirar la documentació, el curs 17-18 preferim instal.lar polylang en comptes de qTranslateX. S'ha de mirar la informació del plugin i veure la compatibilitat i suport amb la nostra versió del wordpress.

La icona del català te la pots descarregar de:

i la URL també et diu a on l'has de copiar.

Fixa't que en la barra del menú apareix la selecció Català, Español, English. Aquesta funcionalitat només s'ha aconseguit tocant el codi. Esbrinar com fer-ho. Ajuda: pots mirar el següent comentari (però això no vol dir que es segueixi al peu de la lletra):

La manera fàcil d'aconseguir la funcionalitat multiidioma és amb els widgets, però això només serà possible si el teu theme admet widgets. Si aquest és el cas, et serà fàcil afegir un widget amb les banderetes catalana i espanyola per tal de commutar entre els dos idiomes. Per traduir a l'anglès, http://translate.google.com pot ser una bona ajuda, però cal no abusar.

En el cas del polylang, l'adaptació del plugin al bloc és especialment fàcil. Des del tema que hem escollit, hem de veure com és possible afegir un widget que ens permetrà seleccionar els idiomes.

Quan a la base de dades, la solució que adopten els dos plugins és ben diferent:

Per accedir als continguts en català, castellà o inglès, sempre podem utiltizar a la url el paràmetre lang, que és un estàndar. Per ex:

Còpies de seguretat del blog

Suposo que a aquestes alçades ja hauràs escrit diversos pots, i que hauràs inclòs algunes fotos (ensenya-ho al professor).

Fer la còpia de seguretat del mysql (amb mysqldump, això ja es va fer en una altra pràctica) està molt bé. Ara bé, on estan les fotos que has penjat? Has de localitzar els arxius i carpetes que consideris rellevants i fer una còpia física d'aquestes. Escriu les comandes necessàries per fer una còpia de la base de dades i copiar els arxius rellevants.

En el següent enllaç el professor us dóna un exemple de com realitzar una copia de seguretat d'un projecte web amb mysql. D'una banda es fa la còpia de la bd (in s'importa en el servidor destí), i d'altra banda es fa la còpia dels fitxers en el servidor destí.

Solució:

#!/bin/bash
NOM_BACKUP="UbuntuServer"
tdate=`date +%y%m%d`

#1. Còpia de seguretat mysql local
mysqldump --add-drop-table -i -C -u alumne -pkeiL2lai -r backup/wordpress_"$tdate".dmp -v wordpress


#2. Còpia dels fitxers de la web (conté els uploads, entre altres coses)
cp -r /home/joan/M09_IAW_1718/UF2/wordpress/wp-content/* backup/fitxers

#3. Fitxer llegir.txt (conté totes les notes, TODO, etc.)
cp -r /home/joan/M09_IAW_1718/UF2/wordpress/llegir.txt backup/fitxers

exit 0

Millores d'aquest script:

Creació automàtica d'usuaris. Enginyeria inversa

Des de la zona d'administració, anem a crear un usuari nou: alumne

Fico el nou usuari com a rol d' Autor, amb password keiL2lai, per tal de què pugui publicar un article.

Aquest usuari ja pot anar a la zona d'administració i publicar un article.

Ara vaig a la bd i miro la taula wp_users:

$ desc wp_users
| ID                  | bigint(20) unsigned
| user_login          | varchar(60)
| user_pass           | varchar(64)
| user_nicename       | varchar(50)
| user_email          | varchar(100)
| user_url            | varchar(100)
| user_registered     | datetime
| user_activation_key | varchar(60)
| user_status         | int(11)
| display_name        | varchar(250)
mysql> select * from wp_users;
...
|  2 | alumne     | $P$By8T.ts1I0OUxAJVqqeHUzKmlXKLQ3/ | alumne        | alumne@gmail.com |          | 2014-02-28 15:46:07 |                     |           0 | Nom Alumne Cognom Alumne |

Però tan important com la taula wp_users és la taula wp_usermeta:

mysql> desc wp_usermeta;
+------------+---------------------+------+-----+---------+----------------+
| Field      | Type                | Null | Key | Default | Extra          |
+------------+---------------------+------+-----+---------+----------------+
| umeta_id   | bigint(20) unsigned | NO   | PRI | NULL    | auto_increment |
| user_id    | bigint(20) unsigned | NO   | MUL | 0       |                |
| meta_key   | varchar(255)        | YES  | MUL | NULL    |                |
| meta_value | longtext            | YES  |     | NULL    |                |
+------------+---------------------+------+-----+---------+----------------+
mysql> select * from wp_usermeta;
...
|       17 |       2 | first_name                            | Nom Alumne      |
|       18 |       2 | last_name                             | Cognom Alumne   |
|       19 |       2 | nickname                              | alumne  |
|       20 |       2 | description                           |    |
|       21 |       2 | rich_editing                          | true    |
|       22 |       2 | comment_shortcuts                     | false     |
|       23 |       2 | admin_color                           | fresh  |
|       24 |       2 | use_ssl                               | 0   |
|       25 |       2 | show_admin_bar_front                  | true  |
|       26 |       2 | wp_capabilities                       | a:1:{s:6:"author";b:1;}  |
|       27 |       2 | wp_user_level                         | 2   |
|       28 |       2 | dismissed_wp_pointers                 | wp330_toolbar,wp330_saving_widgets,wp340_choose_image_from_library,wp340_customize_current_theme_link,wp350_media,wp360_revisions,wp360_locks |
|       29 |       2 | wp_dashboard_quick_press_last_post_id | 12

Per tant, per crear un nou usuari en la línia de comandes (alumne2/keiL2lai), les comandes seran:

insert into wp_users values (3, 'alumne2', '$P$By8T.ts1I0OUxAJVqqeHUzKmlXKLQ3/', 'alumne2', 'alumne2@gmail.com', '', '2014-02-28 15:46:07', '', 0, 'Nom Alumne2 Cognom Alumne2');

insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'first_name','Nom Alumne2');
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'last_name','Cogom Alumne2');
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'nickname','alumne2');
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'description','');
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'rich_editing',true);
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'comment_shortcuts',false);
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'admin_color','fresh');
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'use_ssl',0);
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'show_admin_bar_front',true);
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'wp_capabilities','a:1:{s:6:"author";b:1;}');
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'wp_user_level',2);
insert into wp_usermeta(user_id, meta_key, meta_value) values(3,'dismissed_wp_pointers','wp330_toolbar,wp330_saving_widgets,wp340_choose_image_from_library,wp340_customize_current_theme_link,wp350_media,wp360_revisions,wp360_locks');

I això em permet afegir usuaris nous de forma automàtica. Concretament, el professor afegirà amb un script els alumnes del curs, i aquests alumnes crearan una entrada en el wordpress del professor.

Pots descarregar-te i analitzar el fitxer que hem vist a classe, que és un full de càlcul amb les dades originals i les manipulacions que hem fet per tal d'obtenir les sentències SQL que omplen les dades dels alumnes:

És interessant que estudïis bé aquest fitxer i com funciona la funcó CONCATENA (molt de lio amb les cometes dobles i simples, comes i punts i comes), perquè és una tècnica habitual per exportar dades provinents de Excel (i fulls de càlcul) a scripts SQL.


nota: el professor dóna la seva IP als alumnes:

i els alumnes han d'editar el seu fitxer /etc/hosts, associant la IP del professor al domini www.videojocs.cat.

L'alumne ja pot fer un ping:

$ ping www.videojocs.cat

i ja pots entrar a la url del blog i de la seva zona d'administració:

Com que tens un login i un password, ja pots editar un post (multiidioma, en català, castellà i anglès), i també pots ficar comentaris als posts dels teus companys (sense posar tonteries).

En el post hauràs d'incloure una imatge en format 400x300, alineada a la dreta.

Abans, però, en la zona d'administració (Settings > General), el professor ha d'eliminar la referència a localhost i posar www.videojocs.cat, necessari per tal de què es carregui bé el tema.

Aquest és el procediment que s'ha de seguir si els alumnes volen que els seus companys també escriguin entrades en el seu bloc.

Eliminar el missatge del peu de pàgina Gràcies al WordPress

Fem un find:

$ cd ~/M09_IAW_1617/UF2/wordpress
$ find ./wordpress/ -type f -print | xargs egrep -i Gràcies

...
./wp-content/languages/themes/twentysixteen-ca.po:msgstr "Gràcies al %s"
Hi ha coincidències en el fitxer binari ./wp-content/languages/themes/twentysixteen-ca.mo
./wp-content/languages/themes/twentyseventeen-ca.po:msgstr "Gràcies al %s"
./wp-content/languages/themes/twentyfifteen-ca.po:msgstr "Gràcies al %s."

Veig que aquesta informació és depenen del Theme que tinc seleccionat. En el meu cas tinc el Theme twentysixteen, i per tant hauré de modificar el fitxer ./wp-content/languages/themes/twentysixteen-ca.po.

$ joe wp-content/languages/themes/twentysixteen-ca.po

#: footer.php:51
msgid "Proudly powered by %s"
msgstr "Gràcies al %s"

Aquest és un fitxer de traduccions .po, que es pot editar amb eines com ara poEdit. Veiem com el text original Proudly powered by s'ha traduït al català com a Gràcies al. Canviar el text en aquest fitxer no n'hi ha prou. S'ha de compilar amb poEdit per generar el fitxer binari .mo. Així és com treballa la gent que col.labora en fer les traduccions dels projectes open source.

Sortosament, tenim la referència de footer.php (línia 51), que és on s'utilitza aquesta entrada.

$ joe wp-content/themes/twentysixteen/footer.php

I en la línia 51 veiem el que ens interessa.

<?php printf( __( 'Proudly powered by %s', 'twentysixteen' ), 'WordPress' ); ?></a>

El símbol __ és un àlies de la funció gettext() que crida a la traducció. Si el que volem és que no surti, el que hem de fer és eliminar una línia o ficar-la com a comentari:

<?php //printf( __( 'Proudly powered by %s', 'twentysixteen' ), 'WordPress' ); ?></a>

Ja no apareix el missatge en el peu de pàgina.

Aquesta és la idea bàsica de com podem cercar informació i modificar-la dins del blog.

Exemple pràctic SQL. Substitució de la ela geminada pel punt volat

En l'escriptura en català s'utilitza freqüentment la ela geminada amb la grafia l.l (per exemple, Brussel.les), en comptes d'utilitzar el punt volat: Brussel·les.

Anem a fer una substitució directament a la base de dades de totes les ela geminades per punts volats. Procés:

1. els posts que estan publicats

select ID,post_title,post_status from ins_posts where post_status='publish';

2. els posts que estan publicats, mostrem també el contingut

select ID,post_title,post_status, post_content from ins_posts where post_status='publish';

3. I ara mostrem els posts que tenen ela geminada:

select ID,post_title,post_status, post_content from ins_posts where post_status='publish' and post_content like '%l.l%';

4. I ara que ja veiem quins són els posts afectats, podem modificar el seu contingut substituïnt en les eles geminades mal formatades ficant el punt volat:

Primer de tot fem una prova de com quedaria la substitució:

select ID,post_title,post_status, replace(post_content,'l.l','l·l') from ins_posts where post_status='publish' and post_content like '%l.l%';

5. I ara ja podem fer la substitució (update):

update ins_posts set post_content=replace(post_content,'l.l','l·l') where post_status='publish' and post_content like '%l.l%';
Query OK, 2 rows affected (0,07 sec)
Rows matched: 2  Changed: 2  Warnings: 0

NOTA: També funciona, i potser és millor:

update ins_posts set post_content=replace(post_content,'l.l','·') where post_status='publish' and post_content like '%l.l%';

Aquest és un petit exemple de com podem fer canvis directament en la base de dades, si coneixem les taules i la relació que hi ha entre elles.

Exemple pràctic: canvi de color del fons del tema

El professor té el fons twentysixteen, que és un dels temes per defecte del Wordpress. Per canviar el color del fons és molt senzill, doncs des de la zona d'administració podem accedir a moltes opcions del tema, entre elles el color de fons.

Hem canviat el color de fons del tema. Nou color: #e0d023.

On es guarda aquesta informació? Es guarda a la base de dades:

mysql> select * from wp_options where option_value like '%e0d023%';


157 | theme_mods_twentysixteen | a:4:{i:0;b:0;s:18:"nav_menu_locations";a:0:{}s:18:"custom_css_post_id";i:-1;s:21:"page_background_color";s:7:"#e0d023";} | yes  
mysql> desc wp_options;
+--------------
| Field       
+-------------
| option_id   
| option_name 
| option_value 
| autoload
+----------------

Veiem que la taula wp_options és una col·lecció de parells nom-valor, que serveix per guardar opcions associades als temes, plugins, etc.

Per tant, puc canviar directament el color (per exemple dins de la gamma del verd) fent un update directament a la base de dades:

mysql> update wp_options set option_value='a:4:{i:0;b:0;s:18:"nav_menu_locations";a:0:{}s:18:"custom_css_post_id";i:-1;s:21:"page_background_color";s:7:"#005500";}'
where option_id=157;

Probablement sabràs que els aspectes de disseny es guardan en els fitxers CSS, i l'estil sixteen té efectivament el fitxer style.css i la carpeta css/ on hi ha d'altres fitxers.

Tanmateix, la informació que ens interessa (el color de fons) no es guarda de forma estàtica en aquests fitxers, sinó que es guarda a la base de dades i es consulta/carrega cada cop que accedim al Wordpress.

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, febrer 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