Fw

Wordpress Creative Developer

WordPress, jQuery e CSS – Gestione dei Post

  • Tutorial Jquery
  • -

Appuntamento con i tutorial jQuery più WordPress, dove oggi voglio condividere con te un piccolo trucchetto che ho utilizzato in un blog che sto sviluppando per un cliente.

Veniamo subito al dunque.

Il problema

Nell’home page del blog devo visualizzare i tre post più rilevanti rispetto alle tre categorie principali, disposti uno di fianco all’altro.

Wordpress e jQuery - Problema

Il codice html/php riguardante una tab è il seguente

Codice HTML

Per disporre i post uno di fianco all’altro si è utilizzata la proprietà float:left, associata alla classe home-article, come puoi vedere nel codice CSS.

Codice CSS

Il problema è che il margine destro di 60 px viene assegnato anche all’ultimo post, e di conseguenza va a capo. Se fossimo in una situazione “statica”, basterebbe aggiungere una classe all’ultimo elemento e assegnare nel css margin-right:0.

Un’altra soluzione che può venire in mente è di utilizzare il selettore last-child, che però non è cross-browser.

La soluzione. jQuery e metodo last()

Quindi la soluzione è utilizzare jQuery e tramite il metodo last() prendere l’ultimo elemento della lista e assegnare la proprietà css voluta.

jQuery e WordPress - La Soluzione

In questo modo verrà assegnato lo stile margin-right:0, solo all’ultimo elemento della lista.

Conoscevi questo metodo? Ti sei mai trovato in una situazione simile a quella descritta?

18 Commenti

  1. Uuu bravo fede! Certo che mi sono trovato in una situazione simile! Non conoscevo questa soluzione in jquery.
    Ho aperto anche io un blog, vieni a lasciarmi qualche critica?? =)
    Ciao!

  2. Ciao Daniele e benvenuto nel blog 😉

    Bene spero ti sia utile! Appena trovo un’attimo di tempo vengo a farci una visita 😉

  3. Ciao Fede forse vado fuori tema ma ho un problema e non so bene dove cercare istruzioni (affidabili).
    Il mio problema è il seguente: nella schermata category dove vengono visualizzati thumb excerpt e alcuni custom field ho esigenza di mettere un link sotto ogni post che apra una pop up in jquery (modal). All’interno di questo pop up va inserito il titolo del post corrispondente (più altre cose che non sono rilevanti per il mio problema).
    In breve quando clicco sul link la pop up si apre ma prende sempre il titolo del primo post (ovviamente).
    Il div della pop up sta inizialmente su display:none; e poi viene visualizzata con il metodo modal() del plugin.
    Il problema è più comprensibile con il metodo toggle()… agisce su una classe e se clicco sul link apre tutti i div nascosti non quello del post corrispondente. Dovrei assegnare una classe in maniera dinamica col nome del post ma non so come richiamarla nella funzione jquery.
    Se già ci sei passato basterebbe anche solo un link per indirizzarmi.
    Ti ringrazio e mi scuso per l’utilizzo “a sbafo”…

  4. Ciao Daniele e benvenuto nel blog 😉

    Mmmm non è una cosa banale..sinceramente non ho mai avuto per fortuna l’esigenza di dover fare qualcosa di simile..provo a ragionarci un po’ su e vedo se riesco a darti una risposta 😉

  5. Grazie fede, googlando ho trovato questo e ho risolto

    http://jsfiddle.net/mattball/X7p28/

    alla prossima

  6. Ottimo! mi fa piacere ciao!

  7. ciao federico,

    il tuo blog è molto interessante e utile davvero!
    da poco mi sono avvicinato a html / php quindi spero mi scuserai se la
    mia domanda è banale o per certi versi insensata… il fatto pero’ è che non capisco perche’ per ottenere quel layout io debba per forza usare

    margin-right: 60px

    non è che è possibile ottenere la stessa soluzione con

    margin-left: 30px
    margin-right: 30px

    ?

    in questo modo nel loop php avrei tre blocchi identici
    e l’ultimo articolo non mi potrebbe andare a capo. ..

    mi sbaglio?
    mi piacerebbe capire perche’ questa non potrebbe essere una soluzione…
    grazie per l’aiuto!

  8. Ciao Fede già abbiamo avuto modo di conoscerci perchè il mio sito era nella rubrica raggi x. Ho un problema con i Costum post type e spero che tu mi possa dare una mano….

    Ho usato Custom Content Type manager per la realizzazione di unun Custom type chiamato “Espositori” , per un sito di una fiera , dove ho creato i dettagli dell’espositore come:
    -Tipologia
    -Categoria
    -N° Stand
    -Inserimento foto
    etc…

    Ho necessita di far visualizzare in modo corretto in una pagina personalizzata tutti gli espositori di un certa tipologia esempio:

    Motorizzazioni
    n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
    n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
    n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)

    Fiori
    n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
    n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)
    n° stand Nome Espositore (con link che porti alla mia scheda precedentemente creata con Custom Content Type manager)

    etc…..

    in più se è possibile chreare a inzio pagina un search per Tipologia – Nome – Categoria

    come posso settare queste cose con WP_Query ?

    AIUTAMI!!!! Ti Ringrazio anticipatamente ciao Luigi

    • Ciao Luigi si mi ricordo di te!

      Esattamente di cosa avresti bisogno? Comunque utilizzerei le tassonomie per distinguere i diversi espositori.

      Per la ricerca il discorso è più complesso..

      • Ciao Fede
        Grazie per la risposta
        avrei bisogno di sistemare la mia lista attualmente è così disposta:
        Motorizzazioni
        n° stand Nome Espositore(non riesco a puntare alla sua pagina)
        Fiori
        n° stand Nome Espositore (non riesco a puntare alla sua pagina)
        Motorizzazioni
        n° stand Nome Espositore (non riesco a puntare alla sua pagina)
        si dispone in maniera casuale e in ordine di inserimento poi non riesco ad inserire il link che mi porti alla sche da me fatta precedentemente

        ‘espositori’, ‘orderby’ => ‘tipologia’, ‘order’ => ‘DESC’ );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post();
        print_custom_field(‘tipologie’);
        echo ”;
        print_custom_field(‘stand’);
        the_title(‘‘,’‘);
        echo”;
        endwhile;
        ?>

        non so come sistemare ….. per il search hai un link o qualche esempio da vedere?

        CIAO E GRAZIE!!!

  9. il codice scritto non si visualizza bene….. se vuoi ti mando una mail

  10. Ciao fede
    Ho sistemato il tutto in maniera diversa ma ci son riuscito…..
    Ho un’altro problema dovrei aggiungere altre 3 sidebar nel footer praticamente nell’area description dove l’ho rinominata supplementary-2, il problema non è tanto a realizzarle ma a gestirle con i css oppure sbaglio qualcosa a crearle hai un tutorial dove spiega bene il tutto?

    CIAO GRAZIE

    • Ciao Luigi,
      sono contento che hai risolto, ti avrei risposto a giorni.

      Per quanto riguarda l’altro problema, non capisco che difficoltà ci siano con i css. Per caso è on line il sito che stai realizzando, o comunque una versione di prova?

  11. Ciao Fede

    Ti ringrazio per la disponibilità ma anche questo problemino ci son riuscito…. 🙂 grazie lo stesso. CIAO

  12. Problemi dopo aggiunta nuovo blocco css
    Ragazzi ho fatto delle modifiche
    al mio tema WordPress aggiungendo una sidebar in più
    quella in questione è #blocco.

    Ho raggiunto il risultato che cercavo cioè
    quello di inserire un nuovo blocco di larghezza maggiore
    sopra le due sidebar native.

    #blocco{
    height:100px;
    margin-left:530px;
    margin-top:0px;
    position:absolute;
    width:320px;
    height:250px;
    }

    #primary {
    height:100px;
    margin-left:500px;
    margin-top:300px;
    position:absolute;
    width:220px;

    }
    #secondary {

    margin-left:730px;
    margin-top:300px;
    position:absolute;
    margin-top:300px;
    width: 220px;
    }

    Ora pero’ riscontro un problemone se aggiungo widget
    alle due sidebar queste si sviluppano in verticale andando
    sopra il footer, in poche parole non allungano la pagina
    ma passano sopra al footer.

    Il codice nei css originario è il seguente:

    #primary {
    width:220px;
    float:right;
    margin:0 0 0 10px;
    }
    #secondary {
    width: 220px;
    float:right;
    margin:0;
    }
    #footer {
    clear:both;

    Sapete dirmi cosa sbaglio per far funzionare al meglio????

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *