[kodemondo]

In questo breve tutorial andremo a spiegare come personalizzare i post del nostro tema inserendo un icona relativa alla categoria del nostro articolo.
Nonostante esistano dei plugin creati per raggiungere il nostro scopo a mio avviso, nei casi in cui risulti possibile e poco invasivo, è decisamente meglio concederci 5 minuti in più e aggiungere poche righe di codice per avere lo stesso risultato. WP non è sicuramente una piattaforma leggerissima, se poi ci andiamo ad aggiungere sfilze di plugin in molti casi utili per puri scopi estetici andremo ulteriormente ad appesantire il nostro CMS.

Nell'esempio che segue useremo Kubrik, di default su WP, come template di riferimento e andremo a modificare il file index.php contenuto nella directory del tema.

Passo 1
Inanzitutto andremo a creare una cartella che conterrà le nostre icone. Personalmente l'ho creata dentro alla cartella images del tema in uso, naturalmente potrete decidere come meglio credete basta che il percorso alle immagini sia corretto.

Passo 2
Fatto ciò aprite con il vostro editor o con l'editor dei temi di WP il file index.php e cercate la riga di codice:

Contenuto visibile solo ai registrati.

quindi inserite immediatamente sotto questo codice (togliete pure la parte commentata se volete):

Contenuto visibile solo ai registrati.

• Come potete vedere analizzando il codice è stata associata all'immagine una classe (alignleft), già esistente nel CSS del tema, che rende la formattazione più gradevole allineando l'icona alla sinistra del post e permettendo al testo di flottare alla sua destra. Per capirci in mancanza di questa classe si avrebbe l'effetto non troppo gradevole dell'icona sopra e del testo subito sotto.

• Per quanto riguarda il percorso delle immagini, come già decritto in precedenza, in questo esempio si è tenuto conto del loro inserimento in una sottocartella "images" del tema in uso ma volendo si può benissimo inserirle in altra destinazione.

• La variabile $category->cat_name . '.png richiama l'immagine ed è di fondamentale importanza, per la visualizzazione corretta l'icona deve avere lo stesso nome della categoria ad essa associata, per esempio:
  nome categoria "pippo" > immagine pippo.png
  nome categoria "pluto" > immagine pluto.png e così via
  
  in alternativa è possibile associare alla variabile $category invece del nome (name) l'ID della categoria in questo modo $category->cat_ID . '.png. In questo caso le icone dovranno avere lo stesso numero dell'ID di categoria:
  ID categoria "1" > immagine 1.png
  ID categoria "2" > immagine 2.png

• Il formato delle icone di questo esempio è .png ma volendo si possono inserire anche altri tipi di immagini, l'importante è cambiarne l'estensione nel codice dell'esempio precedente:
  $category->cat_name . '.png per immagini Png
  $category->cat_name . '.jpg per immagini Jpg etc.

Alla prossima!

[frhell]

quali sarebbero i plugin che fanno ciò?

[kodemondo]

Nessun plugin è solo codice da inserire nel template.

[frhell]

io ero rimasto alla frase:
Nonostante esistano dei plugin creati per raggiungere il nostro scopo....

[frhell]

e la dimensione della thumb si può modificare?

[cionfs]

Penso di si.

[frhell]

in che modo?

[cionfs]

Credo modificando la dimensione della thumb direttamente.

[frhell]

ma la thumbs viene generato dinamicamente se non erro...

[cionfs]

aspettiamo kodemondo

[kodemondo]

Le thumbs le crei tu della dimensione che vuoi.

[frhell]

da dove? devo farle a mano? posso impedire di mostrare la thumbnail se presente una immagine all'interno del post, in modo da evitare che appaiano due immagini una affianco all'altra per i post che hanno al loro interno già una immagine?

[Smith]

GRANDE!

Funziona perfettamente, praticamente regala un qualcosa in più all'estetica generale. Ho fatto una piccola modifica che riporto:

ATTENZIONE: se mettendo le icone il vostro tema ci mette un bordo, potete eliminarlo aggiungendo la stringa

Contenuto visibile solo ai registrati.

tra i settings di img.alignleft nel css

Grazie ancora

[Smith]

Scusate il doppio post ma non credevo non si potesse editare.

Comunque ho inserito il plugin Facebook Connect, quindi attualmente la situazione è questa:

http://img834.imageshack.us/img834/9900/83709277.png

è possibile inserire un separatore (anche una linea verticale) tra il blocco categorie e il blocco facebook?

Suppongo che dovrebbe essere un'immagine da caricare nell'index immediatamente dopo lo script nel primo post, giusto? Ma come?

	facebookstrategy

[Smith]

Scusate il cross posting eh, ma googlando ho trovato idee per aggiungere un separatore, per ora senza riuscire a beccare la soluzione precisa.

SOLUZIONE 1

Al css si può aggiungere, sempre in alignleft, la stringa

Contenuto visibile solo ai registrati.

Il problema, come nel mio caso, è che se avete scelto PIU' CATEGORIE per il post, il separatore (altro non è che un bordo visibile solo a destra) si ripete per TUTTE le categorie.

E' vero che separa l'ultima categoria dal "mi piace", però separa anche ogni icona delle categorie.

SOLUZIONE 2

Ho beccato un articolo che diceva come aggiungere un separatore per il menu e poi toglierlo al primo e all'ultimo tramite questa aggiunta:

Contenuto visibile solo ai registrati.

Allora ho pensato "e se invece di rimuovere dall'ultimo figlio io aggiungessi?"

Ho dunque modificato l'alignleft in questo modo:

Contenuto visibile solo ai registrati.

Nessun risultato.

SOLUZIONE 3

Allora mi sono detto: "ok e se creassi un separatore da richiamare quando voglio io?"
Ho rimesso a posto il codice e ho googlato.
Googlando ho trovato un menu con un paio di separatori richiamati dall'utente.

Ho spulciato il codice e ho trovato che ha creato una classe specifica:

Contenuto visibile solo ai registrati.

che poi richiamava all'occorrenza con:

Contenuto visibile solo ai registrati.

Ho messo il primo codice nel css (ovviamente ho salvato l'immagine, caricata nella cartella con Filezilla, ecc...) e il secondo immediatamente dopo il codice di kodemondo, ma non funge.

Ho anche provato a togliere i tag ".nav" o "<li></li>" ma senza successo.

L'unica cosa positiva che sono riuscito a fare tra vari problemi, è stato mettere il separatore ALL'ESTREMA SINISTRA, quindi PRIMA delle categorie.

//

Ragazzi ce l'ho messa tutta ma non riesco proprio a giungere al mio obiettivo

[Smith]

Tralasciando il problema abbastanza stupido e da pignolo quale sono, del separatore, adesso però vi espongo un problema reale.

Ho voluto provare ad inserire lo script nel primo post non solo in index ma anche in archivio ed archivio singolo.

Risultato? Funziona a metà, nel senso che le stringhe escono, sia negli archivi globali richiamati da un menu che in ogni singolo post, ma senza il supporto delle immagini.

Come mai?

[kodemondo]

Quando ho un attimo vedo di fare qualche prova

[Smith]

Sai darmi novità? Si vedono solo in index

[Z_arab]

Ciao.. grazie per l'ottimo spunto..
però:

se un articolo è associato a più categorie escono più icone?
e se volessi che solo alcune categorie mostrano l'icona?

[kodemondo]

Originariamente scritto da Z_arab

se un articolo è associato a più categorie escono più icone?

si

Originariamente scritto da Z_arab

e se volessi che solo alcune categorie mostrano l'icona?

potresti semplicemente creare per quella specifica categoria un immagine da 1px in modo che comunque non si veda

[Z_arab]

Belin proprio vero che a volte le soluzioni sono proprio semplici..

è tutto il pomeriggio che mi sto scornando per fare prendere a wordpress solo un'icona per articolo. (Anzi, nel mio caso vorrei che prendesse solo l'icona delle novità dalla categoria novità)..

Ti ringrazio.. veramente tanto..

grandissimo..

PS: c'è un modo più "pulito" per fare quello che voglio io?

[kodemondo]

Avendo conoscenze basilari di php non ti posso essere d'aiuto fino in fondo.
Sicuramente si può arrivare ad avere un codice più specifico per le tue esigenze, magari usando i tag condizionali, prova a vedere anche questa discussione per farti un' idea http://www.cionfs.it/forum/discussio...a-vt15149.html
il funzionamento è simile...
se ho categoria la 1 faccio vedere l'immagine 1
se ho categoria la 2 faccio vedere l'immagine 2
e così via

[Z_arab]

Però.. effettivamente devo trovare la soluzione come l'avevo in mente io..
ho 100000 categorie.. non ha senso fare 100000 png trasparenti per fare vedere solo quella novità...

siccome sono abbastanza convinto che un modo ci sia.. c'è qualcuno che sa dirmi dove cercare? cosa leggere? cosa fare? .. ..

grazie
--------messaggio unito in automatico--------------
Grande grazie.. scusa per la risposta subito sopra.. non avevo letto la tua.. abbiamo scritto insieme..

[kodemondo]

Volendo puoi provare anche questo plugin WordPress › Category Icons ? WordPress Plugins

[Z_arab]

esistono vari plugin.. li ho provati tutti oggi.. ma nulla che fa al caso mio..
la vedo buia .. eppure un modo c'è.. in qualche tema premium l'ho visto..
mi sa che ne comprerò uno e lo smonto..

ti ringrazio moltissimo kodemondo