Navigazione veloce
ITES Luigi Einaudi > Tutorial > - Il sito "Scuola Aperta Sul Web"

- Il sito "Scuola Aperta Sul Web"

logo di porteaperte

Il modello di sito creato in WordPress per Porte aperte sul web è una realizzazione fortemente personalizzata,  ma in realtà tutte le modifiche fatte coinvolgono unicamente i files del tema, su un’installazione standard della piattaforma.

Personalizzazione dei menù di navigazione

La maggior parte delle modifiche riguarda il sistema di navigazione. La decisione del gruppo di lavoro è stata infatti quella di offrire un modello di sito che affiancasse alla navigazione principale, basata sulla struttura dei contenuti suddivisi per argomento, una navigazione per tipologia di utenza.

topbarLa navigazione per tipologia di utenza e la navigazione contestuale sono state ottenute aggiungendo del codice ai files che compongono il tema, anche se possono essere ottenuti risultati analoghi con i plugin presentati nella sezione di questo tutorial  dedicata all’arricchimento di un sito WordPress.

La navigazione per tipologia di utenza appare evidente dalla barra di navigazione orizzontale, la topbar che invita il navigatore a intraprendere il percorso di navigazione relativo alla categoria a cui appartiene. Essa è stata ottenuta con il comando:

wp_list_pages('include=2,5,7,9&title_li=');

Questa istruzione, che sfrutta il tag di WordPress wp_list_pages, permette di visualizzare, accanto al link alla home page, link alle pagine che hanno ID 2, 5, 7 e 9, ossia le pagine Studenti, Famiglie, Docenti e Personale ATA, che sono la porta di ingresso ai rispettivi menù di navigazione.

sezione studentiSi tratta di menù contestuali che si aprono in alto sulla destra e restano aperti in tutte le pagine della sezione relativa alla tipologia di utenza a cui si riferiscono. Anche questi sono stati ottenuti con delle istruzioni in PHP: oltre al tag wp_list_pages è stato utilizzato anche wp_ list_categories, dal momento che alcune delle etichette che fanno parte dei menù non sono link a pagine, ma a categorie di articoli, come ad esempio News Studenti, o Circolari Docenti e simili.

Oltre alle liste di link, per la creazione dei menù contestuali sono stati utilizzati anche i Tag Condizionali, per far sì che ogni menù sia visualizzato solo in determinate pagine. All’interno del files rightsidebar.php è stato quindi inserito tutto il codice relativo ai menù di ciascuna sezione con le istruzioni relative alle condizioni di visualizzazione.

cliccare sull'immagine per ingrandire

cliccare sull'immagine per ingrandire

Allo stesso modo sono stati creati anche i menù delle sezioni In evidenza, che contiene le voci Circolari (ID 6) e News (ID3)

wp_list_categories ('include=6,3&hide_empty=0&sort_column=menu_order&title_li=');

Scuola, che contiene tutte le sottopagine della pagina Scuola (ID11)

wp_list_pages('child_of=11&sort_column=menu_order&depth=1&title_li=');

Segreteria (ID57)

 wp_list_pages('child_of=57&sort_column=menu_order&depth=1&title_li=');

e Didattica (ID59),

wp_list_pages('child_of=59&sort_column=menu_order&depth=1&title_li=');

che costituiscono la navigazione principale del sito e sono stati inseriti prima della funzione che gestisce la presenza dei widget

if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) :

menu esternoE allo stesso modo è stato costruito anche il menù relativo alle pagine “di servizio” nella barra in alto sopra l’header.

Se si desiderano ottenere menù personalizzati e menù contestuali come quelli qui presentati, si possono utilizzare i già citati plugin Menubar e Widget Logic.

Non è comunque troppo complicato gestire il codice per la creazione manuale di menu. Ciascuno dei menù è stato creato richiamando il numero ID delle pagine o delle categorie da elencare. Se si effettuano modifiche alle pagine o se si vuole ricreare menù simili bisogna tener presente il numero ID delle pagine o categorie che si vogliono presenti nell’elenco.

Nel caso di bisogno, si consiglia comunque di copiare il codice direttamente dal file, aperto con un editor, e non da questa pagina, dove è indicato solo a scopo dimostrativo, ma dove è necessario apportare modifice, o togliere i tag di contenimento, per evitare anomalie di visualizzazione da parte del browser.

Come ottenere l’ID delle pagine in WordPress?

id delle pagineA partire dalla versione 2.5 WordPress non mostra più gli ID di pagine, categorie, post, nella pagina di gestione degli stessiche all’interno del pannello di amministrazione.

Per recuperare l’ID di un elemento e necessario leggere l’indirizzo che appare nella barra dei collegamenti quando, sempre sulla pagina di gestione di pagine/post/categorie, si passa con il mouse sulla voce che interessa.

La gerarchia del template

files del temaIn un tema WordPress solo il file index.php è obbligatorio, ma di norma esistono anche il file header.php, sidebar.php e footer.php. Nel file index.php, ad ogni modo, sono contenute tutte le istruzioni su come deve essere visualizzata la pagina, sia essa una pagina statica, un articolo o un archivio di articoli.

Tuttavia, se lo si desidera, è possibile diversificare l’aspetto in base alla tipologia di contenuto: oltre a sfruttare le potenzialità dei Tag condizionali (is_ page, is_category, …) è possibile inserire nel tema altri files, con i quali impostare le opzioni di visualizzazione. È possibile ad esempio creare un file category.php; se ci si trova su una pagina di categoria, WordPress verificherà l’esistenza o meno di questo tipo di file: se esiste verranno visualizzate le informazioni in esso contenute, altrimenti la visualizzazione seguirà lo standard di index.php.

Per essere ancora più specifici è possibile creare una pagina category-ID.php, dove ID sta per il numero ID di una specifica categoria. Se ci si trova in una qualunque pagina di categoria WordPress utilizzerà le opzioni di visualizzazione contenute in category.php, ma se la categoria  è quella contrassegnata dall’ID in questione, allora verranno visualizzate le informazioni contenite in category-ID.php.

Questo sistema di selezione del file da visualizzare è detto Gerarchia dei Template ed offre ulteriori opportunità di personalizzazione rispetto ai Tag Condizionali.

I nostri template di categoria

visualizzazione circolariNel nostro tema abbiamo creato un file category.php che visualizza i post contenuti in una specifica categoria (ad esempio News) in modo più conciso rispetto a quello di default. Abbiamo creato poi i files category-6.php, category-12.php e category-13.php per visualizzare rispettivamente le circolari, le circolari per docenti e le circolari per personale ATA.  Per queste categorie è stata scelta una visualizzazione tabellare, che permette un veloce sguardo d’insieme.

Sia per l’elenco lineare di articoli che per la tabella è stato scelto di pubblicare, se questo è presente, l’abstract dell’articolo stesso (excerpt).

I template di pagina

wordpress-page-templateAnche per le pagine si possono definire temlate differenziati, ma il meccanismo è leggermente diverso. Se si vuole che una pagina o una serie di pagine visualizzi il proprio contenuto in modo diverso dalle altre, tutto quello che si deve fare è creare una pagina con le opzioni di visualizzazione che si desiderano, da tenere come modello. Si può salvare la pagina con il nome che si desidera, anche se è prassi abbastanza comune far precedere il nome da un prefisso del tipo “tmpl-”, ma all’inizio del file devono essere contenuto del codice che aiuti WordPress a riconoscerlo come un template:

/*
Template Name: Nome-del-template
*/

Quando si crea una nuova pagina o la si modifica, tra gli attributi della pagina sarà possibile scegliere anche il template.

pagina formazioneTra le pagine con template speciali del nostro sito ci sono le pagine Formazione, Materiali, News, Circolari e Modulistica che indirizzano verso le relative pagine di categoria, diversificate a seconda della tipologia di utenza.

Un’altra pagina per la quale abbiamo utilizzato i template di pagina è la pagina della mappa del sito, per la quale è previsto, dopo un eventuale contenuto, di visualizzare l’elenco gerarchico di tutte le pagine e di tutte le categorie presenti nel sito, su due colonne, ottenuti coi tag wp_list_pages e wp_list_categories.

In realtà per ottenere semplici personalizzazioni della visualizzazione dei contenuti delle diverse pagine non è necessario creare template di pagina: basterebbe poter inserire del codice PHP direttamente nei post. Questo non è possibile in una installazione base di Worpress, ma è possibile con il plugin Exec PHP. Con questo plugin è possibile richiamare la lista di determinate pagine o categorie all’interno del testo di una pagina o articolo.

La home page

Lo stesso discorso vale per la Home page. In scuola Aperta Sul Web abbiamo scelto di visualizzare una pagina statica come Home page del sito e di dividere questa pagina in due colonne: la prima e più larga contiene informazioni sulla scuola, ovvero un post con testo e immagine; la colonna più a destra invece richiama sotto forma di elenco gli ultimi articoli contenuti nella categoria News. Per creare questa colonna è necessario inserire l’istruzione:

	global $post;
	$myposts = get_posts('numberposts=3&category=3');
	foreach($myposts as $post) :
			setup_postdata($post);
			global $more;
			$more = 0;

Considerato che 3 nel nostro sito è l’ID della categoria News. Non è possibile inserire questa istruzione nel testo di una pagina se non è installato un plugin come Exec PHP, perciò noi abbiamo scelto di creare un template Home, salvato nel file tmpl_home.php che inserisce l’istruzione dopo lo spazio riservato al contenuto (post).

Per approfondire l’argomento sulla personalizzazione del tema e sulla definizione di template di pagina si consiglia la lettura di

  • A.H.Silver e H. Hayder, WordPress 2.7 Complete, Packt Publishing (in inglese 296 pagine)



Comunicazioni

18 ott 18 - Progetto laboratorio “Arte e Magia nella cultura orientale”

Allegati firmato_1539777864_segnatura_1539757770_20181016_progettolaboratorioinasia (169.58 KB18.10.2018)

16 ott 18 - Proclamazione sciopero generale del 26 ottobre 2018

Sciopero generale del 26/10/2018 Allegati segnatura_1539686658_scioperogenerale_20181016 (393.97 KB16.10.2018)

16 ott 18 - Master orientamento blocco A

Allegati 20181015_circ_62_master_blocco_a (1.3 MB16.10.2018)

16 ott 18 - Attività di personalizzazione curricolo – SPAGNOLO –

Allegati firmato_1539608766_segnatura_1539337212_20181010_attivit_personalizzazione_curricolo_spagnolo (343.97 KB16.10.2018)

16 ott 18 - Attività di personalizzazione curricolo – LETTERE –

Allegati firmato_1539608766_segnatura_1539345796_20181012_attivit_personalizzazione_curricolo_lettere_capobianco (164.7 KB16.10.2018)

16 ott 18 - Attività di personalizzazione del curricolo – Difesa personale –

Allegati firmato_1539609019_segnatura_1539584305_20181015_attivit_personalizzazione_curricolo_difesapersonale_dal_b (153.68 KB16.10.2018)

15 ott 18 - Elezioni dei rappresentanti degli studenti negli Organi Collegiali

Indizione elezioni per le classi 4E 5D 5E 5F Allegati 20181015_indizionielezioni_4e_5d_5e_5f (121.62 KB15.10.2018)

15 ott 18 - Assemblea d’Istituto – ERRATA CORRIGE

19 ottobre – errata corrige Allegati 20181012_assembleaistituto_19_ottobre_errata_corrige (137.66 KB15.10.2018)

12 ott 18 - Assemblea d’Istituto del 19 ottobre 2018

In Aula Magna Allegati segnatura_1539332559_20181012_assembleaistituto_19_ottobre (132.15 KB12.10.2018)

11 ott 18 - Copertura Assicurativa Ites L.Einaudi 2018-2021

copertura_assicurativa_triennio_2018-2021 Allegati copertura_assicurativa_triennio_2018-2021 (28.1 KB11.10.2018)

11 ott 18 - Documentario sull’immigrazione a Verona

Allegati firmato_1539240684_segnatura_1539071008_20181009_documentario_immigrazione_a_verona (143.25 KB11.10.2018)

11 ott 18 - Attività di personalizzazione del curricolo – corso di lingua russa

Allegati firmato_1539240959_segnatura_1539240883_20181010_attivit_personalizzazione_curricolo_linguarussa (158.37 KB11.10.2018)

11 ott 18 - Attività di personalizzazione del curricolo – Modifica corsi di inglese

Allegati firmato_1539240192_segnatura_1539235023_20181010_attivit_personalizzazione_curricolo_modificainglese (197.92 KB11.10.2018)

8 ott 18 - Attività di personalizzazione – Inglese – Geografia (modifica calendario)

Allegati firmato_1538988265_segnatura_1538739847_20181005_attivit_personalizzazione_curricolo_modifica_nuovicorsi-1 (303.46 KB08.10.2018)

8 ott 18 - Intercultura: incontro informativo per le classi Terze

In Aula Magna Allegati firmato_1538988265_segnatura_1538984904_20181008_intercultura_incontroinformativo (162.23 KB08.10.2018)

4 ott 18 - Attività di personalizzazione – a.s. 2018/19

Lettere – Scienze Motorie – Francese Allegati firmato_1538631402_segnatura_1538563621_20181003_attivit_personalizzazione_curricolo_2018_19 (625.13 KB04.10.2018)

2 ott 18 - Entrata delle classi per Assemblea Sindacale del 03 Ottobre 2018

Allegati segnatura_1538476485_20181002_entrata_classi_assemblea_sindacale_03_10_18 (133.4 KB02.10.2018)

2 ott 18 - Convocazione collegio docenti 05/10/2018

Allegati segnatura_1538396063_20181001_convocazione_collegio_docenti_05_10_18 (130.61 KB02.10.2018)

1 ott 18 - Attività di personalizzazione curricolo a.s. 2018/2019

Allegati firmato_1538378156_segnatura_1538378104_20181001_attivit_personalizzazione_curricolo_2018_19 (800.08 KB01.10.2018)