I blog di Alessioempoli

Data 31 agosto 2016

WordPress – 2°

Per ingrandire il testo, cliccare sul browser

Per ingrandire le foto, cliccarci sopra

       I template tag nei temi di WordPress

 

 

I template tag sono funzioni definite nel core di WordPress che prelevano informazioni dal database e generano dinamicamente un output, quest’ultimo può essere mandato direttamente a video o restituito come valore di una variabile.

 

Molti template tag generano informazioni relative a post e pagine, come il titolo, l’autore, la data di pubblicazione, etc. Questi tag vanno utilizzati all’interno del Loop. Altri tag generano informazioni di carattere generale e possono essere utilizzati al di fuori del Loop.

 

 

 

Tag frequentemente utilizzati

 

Tra i tag di utilizzo più frequente, bloginfo() fornisce un semplice esempio di come restituire a video informazioni sul sito Web corrente:

 

<h2  class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

 

L’argomento individua il tipo di informazione richiesta e la funzione invia direttamente l’output al browser. Il codice precedentemente proposto manda a video il seguente testo:

 

<h2  class=”site-description”>Un nuovo sito targato WordPress</h2>

 

Spesso l’output restituito a video non è costituito da una semplice stringa di testo, ma da un frammento di codice HTML:

 

<article id=”post-<?php the_ID(); ?>” <?php  post_class(); ?>>

 

the_ID() restituisce l’ID del post corrente in forma di stringa; post_class(), invece, restituisce un frammento di codice HTML, sicché l’output a video sarà:

 

<article id=”post-90″ class=”post-90 post  type-post  status-publish  format-standard  hent

 

 

Tra le molte decine di tag, è possibile individuare due sottogruppi che si presentano con caratteristiche omogenee: i tag con prefisso the_ e i tag con prefisso get_.

 

 

 

I tag the_

 

Il prefisso the_ individua un tag che manda a video un output. the_title() e the_permalink(), ad esempio, restituisce a video il titolo e il permalink di un post (o di una pagina) e deve necessariamente essere utilizzato all’interno del Loop. Si consideri questo esempio:

 

 

<h2><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2> 

 

Con questa istruzione vengono stampati a video il permalink e il titolo di un post all’interno di un titolo delimitato da h2. Altri tag the_ di impiego comune sono:

 

1-69k

 

 

I tag get_

 

Se i tag the_ stampano un output a video, i tag get_ restituiscono una stringa da gestire via PHP. Il framework dispone, per molti tag the_, di un corrispondente tag get_. Così i tagget_permalink() e get_the_title() permettono di ottenere lo stesso risultato dell’esempio precedente:

 

<a href=”<?php esc_url( get_permalink() ); ?>”><?php echo get_the_title(); ?></a></h2>

 

get_permalink() e get_the_title() possono essere utilizzati al di fuori del Loop, e quindi si prestano ad una molteplicità di impieghi. Altri tag di uso comune

sono get_bloginfo(),get_the_author(), get_the_author_meta(), get_the_time(), get_the_date(),get_the_excerpt() e get_the_content() i cui nomi rendono facilmente intuibile la funzione svolta.

 

 

Tag condizionali

 

Sono funzioni che permettono di testare una condizione. Grazie a questi tag, è possibile generare un output alternativo a seconda del valore TRUE o FALSE restituito. is_single(), ad esempio, restituisce TRUE al caricamento di una pagina singola:

 

2-39k

 

 

Altri tag condizionali di uso corrente sono is_home() e is_front_page(), che testano se la pagina corrente sia la Home Page del sito Web corrente (blog o pagina statica); is_page(), che verifica che l’utente si trovi in una pagina statica; is_category(), che verifica la categoria del post corrente.

 

 

 

Include tags

 

Gli Include Tags, di cui si è già parlato nei capitoli precedenti, sono funzioni che includono il contenuto di specifici template. Si tratta dei seguenti template tags:

 

– get_header()

– get_footer()

– get_sidebar()

– get_template_part()

– get_search_form()

– comments_template()

 

Anche in questo caso i nomi dei tags rendono facilmente intuibile la funzione svolta

 

 

 

I parametri

 

Come tutte le funzioni PHP, i template tag possono accettare o meno argomenti. bloginfo(), ad esempio, accetta una stringa che individua il tipo di dato da mandare a video. Nel caso non venisse passato alcun argomento, bloginfo() stamperà il nome del sito Web corrente. Alcuni tag accettano argomenti come ogni funzione PHP; a tal proposito si consideri la seguente istruzione:

 

<?php single_post_title( ‘Title: ‘, TRUE ); ?>

 

 

 

Qui il primo argomento è un testo da visualizzare prima dell’output, il secondo stabilisce se la funzione deve mandare a video il testo, o restituirlo in una variabile PHP. Infine, alcuni tag accettano argomenti nella forma di array o di querystring:

 

<?php wp_list_categories( ‘orderby=name&exclude=4,5&title_li=<h2>’ . __(‘Events’) . ‘</h

 

 

L’argomento passato alla funzione consiste in una querystring che imposta i valori di quattro parametri: orderby, exclude, title_li e taxonomy. In alternativa alla querystring, gli stessi parametri avrebbero potuto essere trasmessi come elementi di un array.

 

 

 

La gerarchia dei template in WordPress

 

 

Si è più volte fatto riferimento alla gerarchia dei template. Si tratta della gerarchia in base alla quale WordPress individua il template con cui viene generata ogni singola pagina del sito. L’informazione relativa al tipo di pagina viene trasmessa tramite le querystring e la selezione del template avviene in base ai nomi dei file disponibili.

 

Tra tutti i template file, l’unico indispensabile è il file index.php, utilizzato da WordPress qualora manchino template più specifici per la pagina richiesta dall’utente.

 

 

 

La pagina iniziale

 

Per restituire la pagina iniziale di un sito Web basato su WordPress sono previsti due template: home.php e front-page.php. Il primo viene utilizzato quando la pagina iniziale mostra gli ultimi articoli del blog; il secondo quando viene impostata una pagina statica nel menu “Impostazioni lettura” del pannello di amministrazione.

 

In mancanza del file home.php, viene caricato il file index.php, in mancanza del file front-page.php, invece, WordPress cercherà il template page.php, nel caso in cui la pagina iniziale sia una pagina statica; in alternativa, qualora la pagina iniziale sia un elenco di articoli, WordPress cercherà di nuovo il template home.php.

 

3-47K

 

 

Pagine singole

 

Per rendere singoli post e pagine statiche sono disponibili due template generali: single.php per gli articoli e page.php per le pagine statiche. Prima di questi due template, però, WordPress ne cercherà di più specifici. Quella che segue è la gerarchia prevista per articoli, tipi di post personalizzati e allegati:

 

Nel caso dei Post avremo:

 

single-post.php

single.php

 

Nel caso dei Custom post types avremo invece:

 

single-$posttype.php

single.php

 

Infine, nel caso degli allegati:

 

$mimetype.php

$subtype.php

$mimetype_$subtype.php

attachment.php

single.php

 

Le pagine statiche possono avere un template specifico per la singola pagina:

 

$custom.php

page.php

 

Oppure seguire lo schema della gerarchia:

 

page-$slug.php

page-$id.php

page.php

 

Come sempre, ogni qual volta manchino tutti i template della gerarchia, WordPress cercherà il file index.php.

 

4-47K

 

 

 

Pagine di archivio

 

Una pagina di archivio è una pagina che ospita un elenco di notizie. Può trattarsi delle notizie di una specifica categoria, etichettate con un certo tag o con una determinata tassonomia, appartenenti ad un tipo di post personalizzato, create da un certo autore, o, infine, pubblicate in una certa data.

 

In tutti questi casi, WordPress cercherà template specifici per il tipo di archivio, secondo il seguente schema:

 

5-52K

 

6-52K

 

 

Commenti, 404 e risultati di ricerca

 

Gli ultimi template generano il pop-up dei commenti (comments-popup.php), la pagina di errore 404 (404.php) e la pagina che mostra i risultati di una ricerca interna al sito (search.php).

 

7-56K

 

Nell’immagine conclusiva di questo capitolo viene mostrata un’infografica dell’intera struttura gerarchica dei template.

 

8-59K

 

 

 

Il file style.css: intestazione e layout della pagina

 

 

Il file style.css non è solo il foglio di stile principale del tema, è anche il file che fornisce a WordPress tutte le informazioni necessarie al corretto funzionamento del tema stesso. Queste informazioni sono contenute in un’intestazione sotto forma di commento e sono strutturate come coppie chiave/valore, definite seguendo le regole indicate nella File Header Specification.

 

La seconda parte del file contiene le dichiarazioni CSS che permettono di creare la veste grafica del sito. WordPress genera numerosissimi nomi di classi CSS che vengono assegnati automaticamente agli elementi che compongono le pagine del front-end. Una volta noti i nomi delle classi, sarà agevole definire con precisione le caratteristiche grafiche di ogni elemento della pagina.

 

 

 

L’intestazione del file

 

Quelli che seguono sono i metadati che possono comporre l’intestazione del file style.css:

 

9-67K

 

 

La lista proposta non è tassativa e altre coppie chiave/valore possono essere aggiunte all’elenco. Quello che segue è invece un esempio di intestazione:

 

 

/*

Theme Name: Seventy One Theme

Theme URI: http://example.com

Description: A basic theme for HTML.it readers

Author: Carlo Daniele

Author URI: https://www.linkedin.com/in/carlodaniele

Version: 0.1

*/

 

 

Queste stesse informazioni saranno visibili nel pannello di amministrazione, nella scheda “Dettagli Tema” della pagina “Aspetto > Temi”.

 

10-46K

 

 

Si passa poi alla dichiarazione degli stili. Non è strettamente necessario, ma, prima di creare i propri stili, è una buona abitudine azzerare gli stili predefiniti dei browser. A tal scopo, in questa guida si è fatto ricorso al Reset CSS di Eric Meyer.

 

 

 

Il layout delle pagine

 

Dopo aver azzerato gli stili predefiniti, si passa alla progettazione della presentazione del sito, con la creazione del layout. Si vedrà più avanti come generare il markup, ma già da ora si può definire il seguente schema:

 

11-63K

 

 

La div#page esterna costituisce il contenitore generale. I blocchi interni sono costituiti dall’elemento header, contenente il titolo del sito e il menu principale di navigazione, dalla div#main-content, che ospita i contenuti, dall’elemento aside, che ospita la sidebar principale e, infine, dall’elemento footer, che ospiterà una diversa sidebar e le informazioni di copyright.

 

12-44K

 

Definita la struttura, si può procedere alla creazione del layout. Nel foglio di stile andranno aggiunte le seguenti istruzioni:

 

13-42K

 

Come è possibile notare, sono state utilizzate unità di misura relative per fare in modo che il layout sia flessibile e si adatti alla dimensione dello schermo. Il blocco #main-content occupa il 72% circa dell’area disponibile, mentre la barra laterale occupa il 22%. Le proporzioni vanno ora adattate agli schermi di dimensioni inferiori:

 

14-50K

 

7 Risposte a “WordPress – 2°”

  1. yolk scrive:

    I like it!

  2. tonight scrive:

    I tһink tһiѕ is among the most important info for me. And i am glad reading your article.
    But wanna remark on sօme general things, The web site style is great, the articles is really excellent : D.
    Good job, cheers

  3. basic scrive:

    Ι really love your site.. Very niϲe colors & theme. Did
    you make this website yourself? Please reply back as I’m trying to create my own personal blog and
    woulԁ love to learn where you got this fгom or ԝhat
    the thеme is named. Many tһanks!

  4. about scrive:

    I am ѕսгe thiѕ article has touched all the internet users, its really really pleasant post on buildіng up new
    blog.
    ____
    TY

  5. difference scrive:

    Βecaսse the admin of tһis site is working, no
    doubt very quіckly it will be famous, due to its quaⅼity contents.

  6. eternal scrive:

    Wow, aᴡesome blog ⅼayout! Hoѡ long have you been blogging for?
    you maԀe blogging look easy. The overall look of your web site
    is fantastic, let aⅼone the content!

  7. kicked scrive:

    If you deѕire to grow your familiɑrity simply keep visiting this web site and be updаted with the most up-to-date information posted here.

Rispondi a kicked