Una funzionalità utile di WordPress è il modo in cui genera classi e ID. Alcuni di questi sono generati dal sistema stesso, mentre in altri casi si inserisce del PHP nel proprio tema e WordPress lo usa per aggiungere classi e ID al markup della pagina.
In questo tutorial, mostrerò tre modi in cui WordPress fa questo e fornirò applicazioni pratiche ed esempi per ognuno. Le tre aree con cui mi occuperò sono le seguenti:
Classi e ID generati per le immagini che carichi su WordPress tramite l'uploader multimediale
Tag del modello che vengono utilizzati nei file modello di un tema per generare classi e ID in base al contenuto e alla pagina visualizzata
Parametri che puoi impostare quando registri widget e menu (o che saranno già impostati in un tema ben scritto), che genererà classi e ID relativi a tipi specifici di widget, singoli widget e voci di menu
Per ognuno di questi, spiegherò come funzionano e quindi mostrerò ciascuno con alcuni esempi.
Cosa è necessario per completare questo tutorial
Per seguire gli esempi pratici in questo tutorial, avrai bisogno di:
Un'installazione di sviluppo di WordPress
Un tema che puoi modificare
Lavorerò con un tema figlio di Twenty Twelve: puoi accedere ai file del tema nel pacchetto di codice.
Classi e ID generati per immagini da Media Uploader
Quando carichi le immagini tramite Media Uploader, ti viene data la possibilità di specificare come deve essere allineata l'immagine, come mostrato nello screenshot. Ti viene anche chiesto di scegliere la dimensione dell'immagine che desideri visualizzare: miniatura, media, grande o full size.
In base alla selezione, WordPress assegna il tag per le tue immagini caricate un numero di classi. Le classi per l'allineamento sono le seguenti:
.alignnone
.allinea al centro
.AlignRight
.allineare a sinistra
Inoltre, WordPress assegna il .wpcaption classificare qualsiasi didascalia che aggiungi ad un'immagine. Le didascalie avranno questa classe così come una delle classi di allineamento sopra, in base a come scegli di allineare l'immagine.
WordPress aggiunge anche classi per ogni dimensione dell'immagine:
.size-full
.formato-grandi
.dimensioni medie
.size-miniature
Puoi usarli per creare immagini di ogni dimensione del file.
La maggior parte dei temi includerà i CSS per definire in modo appropriato ciascuna di queste classi, ad esempio il tema Twenty Twelve include quanto segue:
Il CSS sopra allinea tutti gli elementi (non solo le immagini) con il .allineare a sinistra, .AlignRight o .allinea al centro classe, nel senso che puoi anche usare queste classi per creare contenuti diversi dalle immagini se lo desideri.
Inoltre aggiunge margini alle immagini che hanno queste classi e assicura che le immagini a grandezza piena e grande non si allontanino al di fuori del loro elemento di contenimento, usando larghezza massima: 100%.
Puoi vedere l'effetto di questo nello screenshot qui sotto. La prima immagine è allineata a destra e la seconda è centrata e piena.
Aggiungi il tuo stile personale utilizzando queste classi e ID
Oltre a impostare l'allineamento e i margini per ciascuna di queste classi, è possibile utilizzarle per aggiungere uno stile aggiuntivo.
La prima immagine nello screenshot qui sopra è allineata a destra. Se lo schermo viene ridimensionato, rimane della stessa dimensione e il testo si avvolge in modo disordinato attorno ad esso:
Puoi aggiungere uno stile per assicurarti che qualsiasi immagine allineata a destra occupi non più del 50% della larghezza dello schermo, in modo che il testo si avvolga in modo più ordinato, aggiungendo il seguente CSS al foglio di stile:
img.alignright larghezza massima: 50%;
Ora quando la pagina viene visualizzata su uno schermo stretto, l'immagine è meno dominante:
Oltre ad aggiungere CSS per il layout o il dimensionamento, è possibile aggiungere uno stile decorativo alle immagini allineate in un certo modo. Per aggiungere uno stile decorativo a immagini a schermo intero centrate, aggiungi quanto segue al tuo foglio di stile:
Questo aggiunge un bordo all'immagine e ne riduce le dimensioni:
Tag modello per l'aggiunta di classi e ID
Le classi e gli ID che abbiamo guardato per le immagini sono generati da WordPress stesso. Altre classi e ID possono essere generati da tag modello nel tema.
Nota: Se non hai familiarità con i tag del modello, dai un'occhiata all'articolo del Tag Model del Codex.
Esistono due set di tag modello: uno che si applica a Tag HTML e due che si applicano ai singoli post.
Il body_class () Tag modello
Un tema ben scritto avrà il seguente tag nella sua header.php file:
>
Questo sostituisce il normale etichetta. Il body_class () template tag dice a WordPress di assegnare classi al file tag in base alla pagina visualizzata e al file modello utilizzato dal tema attivo.
L'elenco delle classi che possono essere generate è lungo e puoi trovarlo nel codice WordPress.
Alcuni esempi includono:
.casa per la pagina iniziale
.single-postid- ID quando viene visualizzato un singolo post, dove ID è l'ID numerico di quel post
.archivio per qualsiasi pagina di archivio
.Pagina-template- filename -PHP quando viene utilizzato un modello di pagina personalizzato
Se si desidera aggiungere ulteriori classi al tag che non sono generati da WordPress, è possibile. Ad esempio per aggiungere la classe "ciao", il codice è:
>
Puoi aggiungere tutte le classi che vuoi in questo modo, separandole con spazi.
Puoi usare le classi generate dal body_class () tag per aggiungere uno stile specifico per una determinata posizione nel sito o un file modello o per gli elementi all'interno di tale file modello.
Ad esempio, nel mio tema figlio ho creato un modello di pagina chiamato Pagina-full-width-con-sidebar.php, che è progettato per visualizzare pagine con il contenuto a larghezza intera e la barra laterale sotto il contenuto anziché alla sua destra. È possibile trovare questo modello di pagina nel pacchetto di codice.
Usando il body_class () tag, WordPress genera a .Pagina-template-page-full-width-con-sidebar-php classe per il tag (tra le altre classi).
Quindi, per creare uno stile per gli elementi di una pagina usando questo modello, aggiungi quanto segue al tuo foglio di stile:
/ * layout di stile per il modello di pagina intera con barra laterale * / .page-template-page-full-width-with-sidebar-php. -site-content, .page-template-page-full-width-with-sidebar-php. widget-area larghezza: 100%; chiaro: entrambi; .page-template-page-full-width-with-sidebar-php # secondary.widget-area .widget width: 48%; margine: 0 1%; fluttuare: a sinistra;
Imposta la larghezza del contenuto principale e della barra laterale (#secondario) al 100% e allinea anche i widget nella barra laterale l'uno accanto all'altro. Puoi vedere l'effetto nello screenshot:
Nota: Se il tuo tema è reattivo, assicurati di apportare eventuali modifiche alla larghezza dei widget su schermi stretti nelle tue query multimediali.
Il post_class () e post_id () Tag modello
Questi tag funzionano in modo simile a body_class () tag, ma li usi con singoli post nel ciclo invece che con elemento.
Ad esempio, nel tema Twenty Twelve, ogni post nel ciclo è racchiuso in a elemento con questi tag applicati:
> // contenuto qui
Questo genera un numero di classi in base alla categoria e al tipo del post e un ID basato sull'ID numerico del post. Ad esempio, un post nel mio sito demo con la categoria di "rosso" avrà le seguenti classi e ID generati:
// contenuto
È possibile utilizzare queste classi per assegnare stili ai post di singole categorie in modo diverso. Nel sito demo sono disponibili tre categorie: "rosso", "blu" e "importante".
Per modellarli, aggiungi il seguente CSS al foglio di stile del tema:
/ * post di stile nella categoria 'rosso' * / .category-red border-top: 2px solid # cc0000; / * post di stile nella categoria 'blu' * / .category-blue border-top: 2px solid # 3366ff; / * post di stile nella categoria "importante" * / .blog .category-important padding-top: 2em; margin-left: 2em; .category-important: before content: 'LEGGI QUESTO POST! È IMPORTANTE';
Ciò aggiunge uno stile per ciascuna categoria: un bordo colorato per ciascuna categoria di colori e un margine aggiuntivo per la categoria "importante". Utilizza anche uno pseudo-elemento per inserire contenuti aggiuntivi prima di ogni post nella categoria "importante".
Il risultato è mostrato nello screenshot.
Utilizzo di classi e ID con widget e menu
Quando i widget sono registrati in un tema (o talvolta in un plug-in), le funzioni utilizzate possono includere codice che indica a WordPress di generare classi e ID in base al nome, al tipo e all'ID del widget.
Quando i menu sono registrati, WordPress può generare classi in base al nome del menu, alla posizione degli elementi all'interno del menu e alla posizione nel sito. Puoi usarli tutti per modellare i tuoi widget e menu.
Classi e ID per i widget
Per registrare un'area del widget, usi il register_sidebar () funzione nel tuo tema functions.php file. Questo prende i seguenti parametri:
Esistono due parametri che generano classi e / o ID:
'class' => "
'before_widget' => '
'
Il 'classe' parametro consente di specificare manualmente una classe per l'area del widget. Le impostazioni per 'Before_widget' parametro dire a WordPress di generare un ID univoco per ogni widget nell'area del widget e un numero di classi per esso, che sarà basato sul tipo di widget che è.
Ad esempio nel sito demo ho aggiunto due widget: un elenco di post e un elenco di pagine. Per l'elenco dei post viene generato il seguente codice HTML:
Per l'elenco di pagine viene generato il seguente codice HTML:
Puoi usarlo per assegnare uno stile ai widget che elencano i post, aggiungendo il seguente CSS al foglio di stile del tema:
/ * widget specifico per lo stile * / aside.widget_pages border: 1px solid # 3366ff; imbottitura: 5px;
Questo aggiunge un bordo ai widget che elencano le pagine, come mostrato nello screenshot:
Nota: Funziona nel sito demo perché utilizza un tema figlio del tema ventidue, che ha i sidebar registrati correttamente. Se stai costruendo il tuo tema, dovrai aggiungere il tag register_sidebar () con i parametri sopra. Scopri come farlo nell'articolo Codex associato.
Classi e ID per i menu
I menu di navigazione sono visualizzati usando wp_nav_menu () tag nei tuoi temi header.php file. Questo richiede un numero di parametri, come descritto in wp_nav_menu articolo.
Uno di questi aggiunge classi e ID a ciascun elemento nel menu:
'items_wrap' => '
% 3 $ s
'
Ciò aggiunge un ID e un numero di classi a ciascun elemento. Le classi sono basate sulla classe per il menu stesso e la posizione nel sito. Ad esempio, quando l'utente si trova su una pagina del sito, la sua voce nel menu di navigazione avrà il .current_page_item classe.
Puoi usare questo per aggiungere uno stile alla voce della pagina corrente nel menu. Ad esempio, per aggiungere una sottolineatura alla pagina corrente, aggiungi quanto segue al tuo foglio di stile:
/ * attiva il link della pagina attiva nella navigazione * / .main-navigation .current_page_item a text-decoration: underline;
La sottolineatura risultante può essere vista nello screenshot (così come il cambio di colore che è già nel foglio di stile del tema principale):
Nota: Poiché sto utilizzando un tema figlio del tema dei ventidue anni, non ho bisogno di aggiungere il wp_nav_menu () tag, poiché questo è già presente nel tema principale.
Sommario
Come abbiamo visto sopra, ci sono diversi modi in cui WordPress genererà classi e ID sugli elementi di un sito. Alcuni di questi sono generati da WordPress stesso e altri usano tag modello o parametri di funzione per dire a WordPress di produrre classi e ID. Puoi usarli per disegnare pagine, menu, widget, inserzioni e altri elementi nel tuo design.
Esistono molti altri modi in cui è possibile utilizzare queste classi e ID per lo stile dei progetti. Per esempio:
È possibile creare un sito con un numero di sezioni distinte, utilizzando le classi generate dal body_class () tag per rendere il contenuto in ogni sezione aspetto molto distinto
È possibile assegnare uno stile ai singoli elenchi di post in modo diverso in una pagina di archivio scegliendo come target l'ID generato da the_ID () etichetta
È possibile evidenziare le voci di menu correnti nella navigazione, creando un effetto simile a un pulsante e utilizzando immagini, sfondi, sfumature e altro
È possibile utilizzare una combinazione di quanto sopra, ad esempio lo styling di determinati widget in modo diverso in diverse aree del sito
Le possibilità sono limitate solo dalla tua immaginazione!
risorse
Alcune utili pagine del Codex sugli argomenti trattati in questo tutorial:
Classi generate per immagini: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
Il body_class () tag: http://codex.wordpress.org/Function_Reference/body_class
Il post_class () tag: http://codex.wordpress.org/Function_Reference/post_class
Il the_ID () tag: http://codex.wordpress.org/Function_Reference/the_ID
Il wp_register_sidebar (): http://codex.wordpress.org/Function_Reference/register_sidebar
Il wp_nav_menu () tag: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Una guida ai tag del modello: http://codex.wordpress.org/Template_Tags
Share
Accentsconagua
