Un Bloc Amb Wordpress

UN BLOG FET AMB WORDPRESS  Projecte del curs D116. Creació i gestió d’entorns web dinàmics (PHP)  Sebastià Mora Masot. Mestre del CEIP Enric Grau Fontseré de Flix. 

http://phobos.xtec.cat/smor a/index.php  Després de valorar diferents possibilitats, bàsicament triar entre instal∙lar un WIKI o un  BLOG, em vaig decidir per WordPress, un blog multiusuari que desenvolupa molta gent  i sobre el qual trobaria molts suports arreu.  Més informació: 

http://ca.wikipedia.org/wiki/Wiki  http://ca.wikipedia.org/wiki/Bloc  http://ca.wikipedia.org/wiki/Wordpress 

Volia un bloc on els meus alumnes pengessin els seus treball creatius, expressió escrita,  oral i plàstica. Si utilitzava un bloc comercial (blogger) no em feia gràcia haver de fer  usuaris els alumnes d’una web comercial i això era necessari si volia que ells mateixos  es pengessin els seus propis treballs.  D’entrada vaig tenir sempre clar que en accedir­hi es veuria sempre una mateixa pàgina  inicial, no era important veure la darrera entrada, el més important és poder arribar a  totes. Per això vaig modificar els accessos i a l’inici del bloc sempre es veu una pàgina  de presentació que explica la finalitat del mateix. A partir d’aquesta pàgina es pot triar,  des del costat, quina categoria de treballs vols veure i, altres pàgines en les quals també  hi ha treballs però recollits de manera conjunta. També es pot accedir a la pàgina autors  dels bloc, aquesta la considero una pàgina importantíssima, en accedir­hi es veu el  llistat d’usuaris, de manera que clicant sobre un usuari es veuen tots els treballs de totes  les categories que ha aportat al bloc aquell usuari.  Hem va ajudar molt trobar el tema connections ja que s’adaptava plenament a  l’estructura que volia per al bloc.  Ben aviat em vaig adonar que si volia que s’hi veiessin imatges posades en altres webs  (per exemple flickr), i hi hagués reproductors de vídeos (per exemple youtube) i de sons  (razz, clickcaster, eSnips) necessitava instal∙lar plugins. No necessitava posar una llista  d’articles al costat, als articles s’hi arribaria per les categories. Aquest és un altre  aspecte important del bloc, l’estructura del mateix per categories. Les pàgines són un  complement secundari.  Una vegada explicats els motius i mencionats aquells aspectes que han constituït la base  de la feina desenvolupada passaré a explicar com he fet la instal∙lació i posteriors  modificacions del bloc. Trobareu els següents apartats:  Instal∙lació del bloc.  Gestió del bloc.  Canvi del tema i dels accessos.  Instal∙lació de plugins i widgets

1. Espai web on instal∙lar WordPress  Com a mestre del Departament d’Educació de la Generalitat de Catalunya vaig demanar  un espai web amb suport PHP a la xtec.  http://www.xtec.net/at_usuari/gestusu/identificacio/php/normes_us.htm 

2. Instal∙lació de WordPress  La primera informació la vaig obtenir del Bloc del CRP del Tarragonès que també està  fet amb WordPress i pot servir de model sobre les possibilitats que ofereix aquest gestor  de continguts programat amb PHP.  http://phobos.xtec.cat/crp­tarragones/zonatic­n/  http://phobos.xtec.cat/crp­tarragones/zonatic­n/?page_id=47  Les instruccions concretes d’instal∙lació del blog wordpress les vaig treure del  document elaborat per Àngel Solans, coordinador territorial TIC a Lleida.  http://phobos.xtec.net/semtic/files/blocs_wp.pdf  Aquestes instruccions les vaig seguir al peu de la lletra i em va funcionar tot molt bé.  Com en totes les coses, sobre aquest aspecte, voldria comentar un parell de coses:  2.1.  Quan diu que us descomprimiu el fitxer zip en una carpeta de nom  wordpress (pàgina 9) heu de tenir en compte que en descomprimir es crea de  manera automàtica una carpeta de nom wordpress amb tot el contingut a  l’interior.  2.2.  Vaig utilitzar el programa FILEZILLA per pujar el fitxers a remot (pàgina  13, apartat e). Vegeu una mostra de com configurar­lo.

Per poder fer proves vaig instal∙lar també el bloc en local, tingueu en compte que per  poder obrir el bloc en local cal que tingueu engegat un servidor de webs (apache) i un  servidor Mysql.  Els paràmetres de configuració del fitxer wp­config.php han de canviar­se per poder  treballar en local, vegeu a continuació els canvis en aquest fitxer que vaig fer jo. 

3. Gestió del bloc  Una vegada el vaig tenir instal∙lat em va començar a preocupar l’aspecte i l’ús. Em va  caldre un aprenentatge d’utilització del bloc.  Vaig seguir les instruccions del document “Gestionar el blog wordpress“  http://phobos.xtec.net/semtic/files/wordpress.pdf  Aquí vaig començar a tenir més problemes, a continuació comentaré els entrebancs que  vaig trobar.  3.1. 

Per pujar imatges s’han de donar permisos d’escriptura a la carpeta wp­  contents/uploads. Això ho vaig fer utilitzant el programa FILEZILLA, vegeu  una imatge de com fer­ho: 

3.2. 

Segons el rol específic que li atorguem a un usuari aquest podrà fer diferents  coses, com que volia usuaris mestres i usuaris alumnes vaig haver de fer un  estudi de la temàtica, vegeu les conclusions a les que vaig arribar: 

Llistat d’accions que pot fer   l’administrador   Canviar temes  Editar temes  Activar plugins  Editar plugins  Editar usuaris  Editar fitxers  Gestionar opcions  Importar  Moderar comentaris  Gestionar categories  Gestionar links  Permetre codi html ­ javascript  Editar entrades publicades  Editar entrades d’altres usuaris  Editar pàgines  Carregar arxius  Publicar entrades  Editar entrades  Llegir  Nivell 10 

Editor  

Autor  

Sí  Sí  Sí  Sí  Sí  Sí  Sí  Sí  Sí  Sí  Sí  Nivell 7 

Sí  Sí  Sí  Sí  Nivell 2 

Col∙laborador   Subscriptor  

Sí  Sí  Nivell 1 

Sí  Nivell 0 

En conseqüència els alumnes seran autors, sempre podem rebaixar­ne algun a  col∙laborador si publica coses no desitjables, i els mestres seran editors.

També he consultat per obtenir més informació sobre la instal∙lació i la gestió de  WordPress les adreces següents, a més a més contenen links a altres llocs amb més  informació.  http://e­profes.net/blog/tutorial­wordpress/  http://web.educastur.princast.es/servicio/documentos/edublog_v01.pdf 

4. Canvi del tema i dels accessos  Després de veure bastants temes i provar­los vaig decidir­me pel tema connections.  Estava traduït al català, m’agradava, s’adaptava moltíssim al que desitjava i em deixava  canviar el fitxer de capçalera fàcilment.  Vaig obtenir­lo a ... http://wiki.bitassa.net/index.php/WP­CA 

Canvi de la imatge de la capçalera de la pàgina.  Vaig fer una nova imatge amb les mides  i el nom de top.jpg. La imatge antiga és la que  es veu com a top_ini.jpg. 

Modificar la pàgina inicial  Mitjançant les opcions de lectura farem que les entrades ordenades per data no formin la  pàgina inicial sinó que sigui una pàgina concreta la que es mostri inicialment. Vegeu  com es fa: 

També podem decidir que hi hagi una pàgina que mostri totes les entrades per ordre  cronològic.

Veure totes les entrades d’un determinat usuari  Una de les coses que buscava en els temes era si portava un mòdul que mostrés una  llista de tots els usuaris i permetés accedir i veure totes les entrades d’un mateix usuari.  Això em donava una doble funcionalitat, les categories em permetien veure totes les  entrades similars (per exemple totes les receptes de cuina) i si trobava el sistema, un  alumne podria ensenyar d’una manera fàcil tot el que ell havia fet.  Finalment vaig decidir crear una pàgina, posar­hi el llistat dels alumnes i lincar l’adreça  corresponent a cada un d’ells. Hagués pogut afegir un blogroll lateral però hauria  allargat massa la columna dreta. Així vaig crear la pàgina autor s del bloc, vegeu com  està feta: 

Solament cal mirar a la llista d’usuaris quina és la seva ID 

L’adreça sempre ha de ser del tipus http://phobos.xtec.cat/smora/wp2/?author=7

Afegir un Blogroll per veure un llistat d’usuaris  Si voleu crear un blogroll en el que es vegi la llista d’usuaris heu de crear una nova  categoria de links i afegir a aquesta categoria tots els links que vulgueu. Vegeu com es  fa:

No es veien els Blogrolls en el tema connections  Un problema amb el que em vaig trobar era que no es veien els blogrolls si no obria la  pàgina inicial amb les entrades ordenades per data. Això es pot arreglar modificant el  fitxer sidebar.php (barra lateral) del tema connections. Observeu primer com és  originàriament: 

Observeu ara com ha de quedar:

5. ELS PLUGINS  Els plugins són eines que permeten ampliar el WordPress, ofereixen noves funcions  d’ús. Amb els plugins cada usuari pot fer­se a mida el seu lloc i adequar­lo a les seves  necessitats específiques.  Només cal buscar el que ens fa falta, descarregar­lo, normalment descomprimir­lo,  pujar­lo amb el FileZilla a la carpeta wp­contents/plugins i activar­lo des de  l’administrador de plugins del wordpress.  Podeu trobar plugins a la web http://codex.wordpress.org/Plugins/. En aquesta mateixa  pàgina trobareu molts altres vincles a altres pàgines que contenen plugins per a  wordpress.  També heu de verificar que el plugin que activeu esta actualitzat i funciona amb la  versió del WordPress que teniu instal∙lada. Podeu consultar la compatibilitat d’un plugin  amb la versió 2.1 del WP en aquesta adreça:  http://codex.wordpress.org/Plugins/Plugin_Compatibility/2.1  A mi m’ha funcionat molt bé fer cerques al google posant per exemple: plugin  wordpress flickr . 

5.1.  Instal∙lació del Plugin Falbum. Per veure fotos i  col∙leccions(sets) del Flickr dintre de WordPress  He obtingut les instruccions de la pàgina:  http://www.randombyte.net/wiki/falbum/falbum  De tota manera, i com estan en anglès, passo a comentar tot el que he fet.  1.  Ens baixem l’arxiu comprimit on es troben tots els fitxers que caldrà instal∙lar des de  l’adreça: http://sourceforge.net/project/showfiles.php?group_id=144263  2.  Descomprimim el fitxer FAlbum­0.6.9.zip(és la darrera versió que jo he trobat) en  una carpeta temporal. De manera automàtica ens crearà una carpeta falbum amb  tots els fitxers a dintre.  3.  Amb un programa de transmissió de fitxers(per exemple, Filezilla) pugem aquesta  carpeta fins al nostre lloc web. Cal posar la carpeta dins de  \wp2\wp­content\plugins\falbum ( o un camí adaptat a la vostra instal∙lació)

4.  Anar fins l’administrador de plugins del nostre WordPress i activar el plugin. 

5.  A continuació caldrà completar la instal∙lació fent dos passes més:  a.  Autoritzar a FAlbum per accedir a un compte de flickr. Caldrà accedir al  compte i identificar­se. Podeu saber si el permís és correcte  des del mateix  flickr. 

b.  A continuació clicar sobre el segon pas: Get authentication Token.  6.  Anar a editar les opcions de Falbum, en principi no cal que canvieu res. 

7.  Ara podeu provar com funcionen diverses adreces posades al blogroll:  La primera ens mostra una col∙lecció de flickr.  http://phobos.xtec.cat/smora/wp2/wp­content/plugins/falbum/wp/album.php?album=72157594332716110 

La segona ens mostra el contingut de flickr.  http://phobos.xtec.cat/smora/wp2/wp­content/plugins/falbum/wp/album.php

8.  Es pot posar els links en una entrada o en una pàgina. Vegeu a continuació com funciona  posada des del blogroll. 

5.2.  Instal∙lació del Plugin per executar fitxers Flash  He obtingut les instruccions de la pàgina:  http://blog.unijimpe.net/wp­swfobject/ 

1.  Les instruccions estan en castellà i es poden seguir perfectament. Solament afegir  com he deixat el fitxer de configuració del plugin.

2.  També he tingut problemes amb el camí que se li dona al fitxer flash, solament quan  l’he deixat de la següent manera m’ha funcionat.  [swf]/smora/wp2/wp­content/uploads/2007/ninot11.swf, 300, 300[/swf]  smora és l’usuari phobos on està instal∙lat el WordPress.  3.  Vegeu un model de pàgina:  http://phobos.xtec.cat/smora/wp2/?page_id=172 

5.3.  Instal∙lació del Plugin per a  vídeos de youtube  He obtingut les instruccions de la pàgina:  http://www.skarcha.com/wp­plugins/wpvideo/  1.  Les instruccions estan en castellà i es poden seguir perfectament.  2.  Aquí és on d’anar a parar els fitxers del plugin: 

3.  Solament afegir com he deixat el fitxer de configuració del plugin.

4.  He tingut problemes quan he escrit el codi des de l’editor visual utilitzant els codis    Introduint els codis des de l’editor de code i escrivint­ho de la següent manera m’ha  funcionat:  [video]http://www.youtube.com/watch?v=DpXx0HjzMGQ[/video] 

5.4.  Escoltar fitxers de so penjats a altres webs  He buscat plugins per executar fitxers MP3 que es troben a altres webs (en concret,  RAZZ, Clickcaster, eSnips). He trobat un plugin, l’audio player, per funcionar sembla  ser que necessita l’adreça web del fitxer i aquestes webs, a diferencia de youtube,  proporcionen embeds i links a la pàgina per executar el fitxer, però no l’adreça concreta  del fitxer.  De tota manera sembla ser que els embeds funcionen bé enganxant­los dins d’una  entrada del wordpress. A vegades però l’editor de codi del wordpress juga alguna mala  passada. A mi m’ha funcionat bé posant els diferents elements dintre de cel∙les d’una  taula. És com si els embeds necessitessin una separació del text, si aquesta separació la  fem programant una taula sembla ser que la cosa funciona prou bé.    //inici d’una taula     //inici d’una fila     //inici d’una cel∙la 

//si hi posem una imatge ens quedarà un codi similar a aquest      //final de la cel∙la     //final de la fila     //inici d’una fila     //inici d’una cel∙la  //si hi posem un embed ens quedarà un codi similar a aquest        //final de la cel∙la     //final de la fila     //inici d’una fila     //inici d’una cel∙la  //si hi posem un text  ens quedarà un codi similar a aquest 

 

Por la noche, ya el subir  .../he tallat el text per fer­ho més curt/...  azul de jacarandá.

 

  //final de la cel∙la     //final de la fila     //final de la taula   Vegeu un exemple que m’ha funcionat. Primer hi ha una imatge, després un text i per  últim un àudio mp3 que es troba a esnips.com i s’escolta mitjançant un embed (en  negreta) que genera el mateix esnips:             

 

¡Ay, señora, mi vecina,  se me murió la gallina!  ...Aquí hi va tot el text escrit...  cómo no voy a llorar  se me murió la gallina!

 

                  gallina.mp3      He provat diverses coses però si provo de modificar l’embed després no funciona. Es  tracta de copiar al final de tot l’embed tal com ens arriba del lloc d’origen una vegada  hem posat tots els altres elements (imatge, text).  Vegeu exemples de fitxers MP3 que es troben en altres webs i que s’escolten des del  worpress: http://phobos.xtec.cat/smora/wp2/?cat=14

5.5.  Millorar l’editor d’entrades WYSIWYG .  Baixar el plugin advanced­wysiwyg.php. Anar a la següent web, clicar amb el botó  dret sobre l’enllaç i triar desa l’enllaç al disc.  http://blog.labnotes.org/2005/12/26/advanced­editing­for­wordpress­20/ 

Pujar­lo, amb Filezilla per exemple, a la carpeta remota wp­content/plugins. 

Activar el plugin. 

Editar el plugin. Com que permet dues i fins a tres línies d’icones, jo l’he deixat com  segueix:

Si voleu que es vegin les icones pantalla completa i insertar una taula cal  instal∙lar els plugins TinyMCE adicionals i per separat.  Baixeu­vos el fitxer TinyMCE 2.1.0, de la pàgina  http://sourceforge.net/project/showfiles.php?group_id=103281  Descomprimiu­lo en una carpeta i copieu les carpetes table i fullscr een a la vostra  carpeta remota /wp­includes/js/tinymce/plugins/ 

L’editor wysiwyg TinyMCE del WordPress es veurà ara d’aquesta manera i permetrà  més funcions que abans, serà una mica més complert. 

6. ELS WIDGETS  Els Widgets són elements que podeu posar a la barra lateral del vostre blog.  Per a instal∙lar widgets abans caldrà que instal∙leu el plugin Sidebar widgets, aquest  plugin permetrà modificar la barra lateral segons la nostra voluntat. 

6.1.  Instal∙lació del plugin sidebar widgets  1.  Descarregar­vos el plugin de la pàgina: http://automattic.com/code/widgets/

2.  Descomprimir­lo i pujar, amb el FileZilla, per exemple, la carpeta / widgets/ al  directori remot /wp­content/plugins/ 

3.  Activar el plugin SidebarWidgets des del menú Plugins del Panell  d’administració. 

Fent això podreu arribar a l’opció Sidebar Widgets del menú presentació del panell de  l’administrador, és des d’on podreu configurar els diferents widgets a la sidebar, o barra  lateral del blog. 

El blog ha de tenir un tema que suporti els “widgets” a la barra lateral. El tema  connections que utilitzo jo està preparat per a utilitzar els widgets. En un primer  moment dóna un missatge dient que es perdrà la configuració de la barra lateral si  s’instal∙len widgeds, no cal patir, tirem endavant, i comencem a instal∙lar widgeds. 

Incorporar els widgets a la barra lateral (Sidebar)  Arrossegar amb el ratolí un element de la zona “Available Widgets” o widgets  disponibles, a la zona “Sidebar 1” i col∙locar­lo en el lloc desitjat. De la mateixa  manera, però en sentit invers, també podeu treure un “widget” de la zona “Sidebar 1” a  la zona “Available Widgets”, ja no serà visible a la barra lateral del blog.

Els widgets que necessiten ser configurats tenen un quadrat a la dreta, fent clic  accedirem a una finestra de configuració.  També podeu triar el nombre de widgets de text o de RSS que necessitem.  A l’adreça http://widgets.wordpress.com/ trobareu més widgets per instal∙lar. Si en  trobeu un que necessiteu, heu de descarregar­lo, descomprimir­lo i pujar­lo a la carpeta  del WordPress /wp­content/plugins/widgets/. 

Haureu d’activar­lo des de Gestió de Plugins del panell d’administració i incorporar­lo a  la Barra Lateral (“sidebar”) des de Presentació ­ Sidebar Widgets.  Mireu sempre si el widget va acompanyat  d’un fitxer amb instruccions o consells per al  seu correcte funcionament o si n’hi ha a la pàgina web de l’autor.

6.2.  Picasa Web Matrix Widget Plugin per Wordpress  Description: Mostra imatges de Picasa Web Albums a la barra lateral.  Author: Stephen Reinhardt  Version: 1.0  Author URI: http://www.vaguedream.com 

Obtenció del widget  http://vaguedream.com/wordpress­themes/ 

Instal∙lació  1.  Extreu el contingut de PicasaWebMatrix.zip i mitjançant Filezilla envia’l al teu  wp­content/plugins/widgets/ directori remot.  Contingut descomprimit que s’ha d’enviar a remot: 

2.  Dona permisos 777 a la carpeta picasacache remota.  3.  Activa el plugin Picasa Web Matrix des de l’administrador de plugins del  wordpress. Ha de quedar com a la imatge següent. 

Configuració  1.  Ves al menú presentació del wordpress i clica sobre Sidebar Widgets.  2.  Arrossega el widget Picasa Web Matrix a dintre de sidebar.  3.  Clica el quadre per obrir la finestra de configuració.

Model possible de configuració 

Com obtenir la Picasa Web Feed URL:  1.  2.  3.  4. 

Obrir la pàgina web picasa on hi ha l’àlbum del qual vols obtenir la Feed URL.  Clica amb el botó de la dreta sobre l’enllaç RSS.  Còpia la ubicació de l’enllaç.  Enganxa­la a la finestra de configuració del widget. 

6.3.  Flickr Badge Widget Plugin for Wordpress  By Ben Coleman 27­01­2007  És un widget per a la barra lateral del WordPress que mostra fotos del Flickr. 

On trobar el widget?  Aneu a aquesta pàgina  http://www.bencoleman.co.uk/flickr­widget­plugin­for­your­wordpress­sidebar/

Requeriments  Wordpress 2.x or superior ­ http://wordpress.com/  Sidebar Widgets Plugin  ­ http://automattic.com/code/widgets/ 

Instal∙lació  Extreu el fitxer flickr­widget.php i copia’l a la carpeta remota wp­  content/plugins/widgets/ 

Des de l’administració de plugins del WordPress activa el plugin “Flickr Badge  Widget”. Així et quedarà quan l’hagis activat: 

Configuració  4.  Des de l’administració del wordpress clica l’opció Sidebar Widgets del menú  Presentació. 

5.  Arrossega el widged "Flickr Badge" dintre del sidebar (barra lateral).  6.  Clica sobre el quadre per obrir la finestra de configuració del widget 

.

Opcions modificables 

Widget Title: El títol que vols que es vegi a la barra lateral, és opcional.  Sour ce: Sel∙lecciona "User" si vols veure totes les fotos del usuari flikr.  Flickr  ID: Per veure les fotos d’un user o d’un  group escriu la ID. Utilitza  http://idgettr.com/ per trobar la teva ID. Més endavant s’explica millor com fer­ho, no  és tracta de posar­hi el teu codi d’usuari de flickr.  Tag:  Escriu un tag si solament vols veure les fotos corresponents a aquell tag.  Photo Count: Nombre de fotos que es veuran.  Layout: Orientació de les fotos (horitzontal o vertical).  Which Photos: Tria veure­les per atzar o les darreres que s’hi ha posat.  Photo Size: Mida de les fotos que es veuran.  Alignment: Alineació de les fotos (esquerra, centre, dreta). 

Com utilitzar idgettr.com 

Model de configuració de Flickr Badge Widget

7. Agraïments:  A Xavier Suñé, del CRP del Tarragonès, que em va donar les primeres indicacions per  fer la tria i començar a caminar.  A Àngel Solans, coordinador territorial TIC a Lleida que va elaborar les instruccions  d’instal∙lació que vaig seguir.  A Xavier Montagut, que ha estat el meu professor del curs D116. Creació i gestió  d’entorns web dinàmics (PHP).  A Carme Cubells Larrosa, mestra del CEIP Enric Grau Fontseré i companya meva de  nivell. M’ha ajudat molt en la tasca d’omplir de contingut el bloc.  A tots els alumnes de 2CS del CEIP Enric Grau Fontseré de Flix, els seus treballs fan  possible que el bloc tingui contingut. Sempre he cregut que el contingut està per damunt  de les eines que el mostren.  A tota la gent que ha programat eines que he utilitzat i a tots aquells que han posat  informació als blocs que he consultat, la llista seria llarguíssima i molt difícil de fer. 

Podeu trobar coses meves a:  http://phobos.xtec.cat/smora  http://www.xtec.cat/~smora/  http://smora.blogspot.com/  http://www.xtec.net/centres/e3001127/index.htm  http://ceipflix.xtec.cat/ 

Si us voleu comunicar amb mi:  [email protected]  [email protected]