Share
Scopri in questo tutorial come creare un Portafoglio filtrabile con jQuery integrato con WordPress, ricorda che questo tipo di portfolio può fare una grande differenza sui tuoi temi!
Puoi utilizzare il codice di questo tutorial in qualsiasi tema che hai creato o che stai creando, seguiremo semplici passaggi e nel mio caso utilizzerò l'impostazione predefinita Venti undici tema e in esecuzione WordPress 3.3. Ok, lavoriamo!
Puoi utilizzare il codice utilizzato in questo tutorial in qualsiasi tema che hai creato o stai creando.
Dovremo creare una sezione sulla barra di amministrazione chiamata Progetto, in questa sezione creerai tutte le voci del portfolio con le rispettive miniature e collegamento demo.
Apri il functions.php file e alla fine, creiamo una funzione per registrare l'elemento del progetto. (Puoi vedere la funzione completa alla fine di questo passaggio)
Accentsconagua
add_action ('init', 'project_custom_init'); / * SECTION - project_custom_init * / function project_custom_init () // il resto del codice va qui / * #end SECTION - project_custom_init - * / In questo codice stiamo usando il add_action funzione in modo che quando WordPress inizia a caricare la nostra funzione verrà chiamata.
All'interno della funzione project_custom_init aggiungiamo il codice che registra a Tipo di messaggio personalizzato chiamato Progetto.
// I seguenti sono tutti i nomi, nel nostro tutorial, usiamo "Project" $ labels = array ('name' => _x ('Projects', 'post type general name'), 'singular_name' => _x (' Project ',' post type singular name '),' add_new '=> _x (' Aggiungi nuovo ',' progetto '),' add_new_item '=> __ (' Aggiungi nuovo progetto '),' edit_item '=> __ (' Modifica progetto '),' new_item '=> __ (' Nuovo progetto '),' view_item '=> __ (' Visualizza progetto '),' search_items '=> __ (' Cerca progetti '),' not_found '=> __ ('Nessun progetto trovato'), 'not_found_in_trash' => __ ('Nessun progetto trovato nel Cestino'), 'parent_item_colon' => ", 'menu_name' => 'Portfolio'); // Alcuni argomenti e nell'ultima riga 'supporta', diciamo a WordPress quali funzionalità sono supportate sul tipo di post Project $ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true , 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array ('titolo', 'ed itor ',' author ',' thumbnail ',' excerpt ',' comments ')); // Chiamiamo questa funzione per registrare il tipo di post personalizzato register_post_type ('project', $ args); Il codice sopra aggiungerà un elemento nel menu Admin chiamato Portafoglio e sarà in questa sezione che creeremo tutti gli elementi del portfolio.
Ora, all'interno della funzione, aggiungiamo altro codice.
// Inizializza etichette tassonomia $ labels = array ('name' => _x ('Tags', 'nome generale della tassonomia'), 'singular_name' => _x ('Tag', 'nome singolo della tassonomia'), 'search_items' = > __ ('Tipi di ricerca'), 'all_items' => __ ('Tutti i tag'), 'parent_item' => __ ('Tag padre'), 'parent_item_colon' => __ ('Tag padre:'), ' edit_item '=> __ (' Modifica tag '),' update_item '=> __ (' Aggiorna tag '),' add_new_item '=> __ (' Aggiungi nuovo tag '),' new_item_name '=> __ (' Nuovo nome tag '),); // Registra Tassonomia personalizzata register_taxonomy ('tagportfolio', array ('project'), array ('hierarchical' => true, // definisce se utilizzare un sistema come tag o categorie 'labels' => $ labels, 'show_ui' => true, 'query_var' => true, 'rewrite' => array ('slug' => 'tag-portfolio'),)); Attenzione all'argomento "gerarchico" su register_taxonomy funzione, se si digita vero avrai un sistema come categorie per gli articoli del tuo portfolio, ma se digiti falso avrai un sistema come tag. Preferisco il sistema di stile di categoria.
O si! Il funzione project_custom_init () è finito! Vedi sotto per il codice completo di questa funzione.
add_action ('init', 'project_custom_init'); / * - Custom Post Init Begin - * / function project_custom_init () $ labels = array ('name' => _x ('Projects', 'post type general name'), 'singular_name' => _x ('Progetto ',' post type singular name '),' add_new '=> _x (' Aggiungi nuovo ',' progetto '),' add_new_item '=> __ (' Aggiungi nuovo progetto '),' edit_item '=> __ (' Modifica Project '),' new_item '=> __ (' Nuovo progetto '),' view_item '=> __ (' Visualizza progetto '),' search_items '=> __ (' Cerca progetti '),' not_found '=> __ ( 'Nessun progetto trovato'), 'not_found_in_trash' => __ ('Nessun progetto trovato nel Cestino'), 'parent_item_colon' => ", 'menu_name' => 'Progetto'); $ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array ('titolo', 'editor', 'autore', 'miniatura', 'estratto ',' commenti ')); // Il seguente è il passaggio principale in cui registriamo il post. register_post_t ipo ( 'progetto', $ args); // Inizializza nuove etichette tassonomia $ labels = array ('name' => _x ('Tags', 'nome generale della tassonomia'), 'singular_name' => _x ('Tag', 'nome tassonomo singolare'), 'search_items' => __ ('Tipi di ricerca'), 'all_items' => __ ('Tutti i tag'), 'parent_item' => __ ('Tag padre'), 'parent_item_colon' => __ ('Tag padre:'), 'edit_item' => __ ('Modifica tag'), 'update_item' => __ ('Aggiorna tag'), 'add_new_item' => __ ('Aggiungi nuovo tag'), 'new_item_name' => __ ('Nuovo tag Nome' ), ); // Tassonomia personalizzata per Tag progetto register_taxonomy ('tagportfolio', array ('project'), array ('hierarchical' => true, 'labels' => $ labels, 'show_ui' => true, 'query_var' => true , 'rewrite' => array ('slug' => 'tag-portfolio'),)); / * - Iniziali post personalizzati - * / Se vai all'Amministratore ora, vedrai una nuova voce sul menu chiamata Portafoglio come l'immagine qui sotto:
Creiamo una nuova funzione che assicuri che vengano visualizzati dei messaggi piacevoli quando l'utente, ad esempio, crea un nuovo elemento sul portfolio o qualcosa del genere.
Il seguente codice deve essere digitato sotto la nostra ultima funzione e non dentro.
/ * --- Messaggi personalizzati - project_updated_messages --- * / add_filter ('post_updated_messages', 'project_updated_messages'); function project_updated_messages ($ messages) global $ post, $ post_ID; $ messages ['project'] = array (0 => ", // Unused. I messaggi iniziano all'indice 1. 1 => sprintf (__ ('Progetto aggiornato. Visualizza progetto'), esc_url (get_permalink ($ post_ID)))) , 2 => __ ('Campo personalizzato aggiornato.'), 3 => __ ('Campo personalizzato eliminato.'), 4 => __ ('Progetto aggiornato.'), / * Traduttori:% s: data e ora di la revisione * / 5 => isset ($ _ GET ['revision'])? sprintf (__ ('Progetto ripristinato alla revisione da% s'), wp_post_revision_title ((int) $ _GET ['revision'], false)): false, 6 => sprintf (__ ('Progetto pubblicato. Visualizza progetto'), esc_url (get_permalink ($ post_ID))), 7 => __ ('Progetto salvato.'), 8 => sprintf (__ ('Progetto inviato . Anteprima progetto '), esc_url (add_query_arg (' preview ',' true ', get_permalink ($ post_ID)))), 9 => sprintf (__ (' Progetto pianificato per: % 1 $ s. Anteprima del progetto '), // traduttori: pubblica il formato data della casella, vedi http://php.net/date date_i18n (__ (' M j, Y @ G: i '), strtotime ($ post-> post_date)), esc_url (get_permalink ($ post_ID))), 10 => sprintf (__ ('Progetto bozza aggiornato. Progetto anteprima'), esc_url (add_query_arg ('preview', 'true', get_permalink ($ post_ID))))); restituire $ messaggi; / * --- #end SECTION - project_updated_messages --- * / Questa funzione crea messaggi personalizzati per quando un utente modifica il post del portfolio, vedere un esempio di messaggio sull'immagine sottostante:
Puoi vedere che solo con questo codice puoi aggiungere tag / categorie al tuo portafoglio e creare nuovi elementi del portfolio! Ma aggiungiamo più funzionalità, buona idea? Sicuro!
In questo passaggio, aggiungeremo una meta casella sulla schermata di creazione degli articoli del portfolio in cui l'utente può incollare un url al sito web o altra pagina.
Creiamo tre funzioni per aggiungere questa meta-box in cui salveremo il nostro URL per l'elemento del portfolio. Il codice scende sotto l'ultima funzione che abbiamo creato.
/ * --- Demo URL meta box --- * / add_action ('admin_init', 'portfolio_meta_init'); function portfolio_meta_init () // aggiungi una meta-box per WordPress 'project' tipo add_meta_box ('portfolio_meta', 'Project Infos', 'portfolio_meta_setup', 'project', 'side', 'low'); // aggiunge una funzione di callback per salvare tutti i dati che un utente inserisce in add_action ('save_post', 'portfolio_meta_save'); function portfolio_meta_setup () global $ post; ?>
'; function portfolio_meta_save ($ post_id) // verifica nonce if (! isset ($ _ POST ['meta_noncename']) ||! wp_verify_nonce ($ _ POST ['meta_noncename'], __FILE__)) return $ post_id; // controlla le funzionalità if ('post' == $ _POST ['post_type']) if (! current_user_can ('edit_post', $ post_id)) return $ post_id; elseif (! current_user_can ('edit_page', $ post_id)) return $ post_id; // exit on autosave if (defined ('DOING_AUTOSAVE') == DOING_AUTOSAVE) return $ post_id; if (isset ($ _ POST ['_ url'])) update_post_meta ($ post_id, '_url', $ _POST ['_ url']); else delete_post_meta ($ post_id, '_url'); / * --- #end Demo URL meta box --- * / Non spiegherò nei dettagli questo codice perché in questo tutorial puoi conoscere le meta box: Riempi le caselle Meta personalizzate o semplicemente fare una piccola ricerca attraverso il codice WordPress o su Google.
Il codice sopra crea solo una meta-scatola con un campo in cui l'utente può digitare un URL. Abbiamo bisogno di tutte queste funzioni, la prima solo inizializza la meta-box, la seconda è il codice meta-box e l'ultima è una funzione per salvare i dati.
Ok! Dopo questo, possiamo passare al prossimo passo e lavorare sul front-end, perché il back-end è fatto! Successivamente aggiungeremo il contenuto.
Ora lavoreremo per mostrare le voci del nostro portfolio all'utente! Ma prima creiamo alcune categorie e poi aggiungiamo alcuni elementi al portfolio.
In questo tutorial userò un layout di portfolio a due colonne, con alcune modifiche su markup e CSS è possibile creare molti layout!
Alcuni consigli per creare un elemento del portfolio
Ok, la prima cosa che dovremo fare ora è crearne una nuova Modello di pagina chiamato "Portfolio 2 Columns", quindi andiamo!
In primo luogo, duplica il page.php file. Quindi, rinominalo in page_portfolio_2c.php.
Abbiamo bisogno di modificare questo nuovo file e incollare il codice qui sotto sulla prima riga del file:
Questo mostrerà una nuova opzione sulla schermata di creazione della pagina, ma ricordalo questo codice DEVE essere incollato sulla prima riga del file!
Ora basta cancellare tutto il contenuto all'interno del contenuto div, in questo tutorial, sto usando il Venti undici tema e dopo aver cancellato, ho questo codice nel mio file:
Se stai usando il tuo tema, cancella tutte le linee che ottengono il contenuto dalla tua pagina, come ad esempio il contenuto (). Creeremo un codice personalizzato, quindi non lasciare altro codice qui, nella pagina del portfolio abbiamo solo bisogno dei tuoi progetti!
Ora vai su WordPress Admin e crea una nuova pagina chiamata "Portfolio" e non dimenticare di selezionare "Portfolio 2 Columns" nel campo Template, come l'immagine qui sotto.
Basta aggiungere un titolo e lasciare il contenuto vuoto, non ne abbiamo bisogno.
Se provi ad accedere alla pagina ora riceverai solo l'intestazione, il piè di pagina e il contenuto vuoto. Quindi, aggiungiamo la vita al nostro portafoglio filtrabile!
Parliamo un po 'del plugin che useremo per creare il portfolio.
In questo tutorial farò uso di un plugin chiamato Filterable, questo plugin è stato creato da GetHifi.
Questo plugin è stato scritto senza la modalità di compatibilità di jQuery, quindi l'ho appena modificato e la versione che funziona perfettamente con WordPress è nel file del codice sorgente per questo tutorial.
Il plugin è un po 'vecchio, per essere più precisi, è del 2009, ma è acceso Licenza MIT, quindi puoi utilizzare temi premium, siti commerciali e ovunque desideri.
Basta scaricare lo script modificato che si trova sul codice sorgente (link sul tutorial in alto) e cominciamo! Se vuoi, visita la homepage per avere maggiori dettagli a riguardo.
Usare Filterable è molto semplice! Il primo passo è usare il giusto markup, il plugin si aspetta il markup come nell'esempio seguente:
Qui abbiamo gli elementi filtro, quando clicchiamo su uno di questi link, allora tutta la magia accadrà. Importante: tutte le voci avranno bisogno di una classe con lo stesso testo negli attributi 'href' e 'rel'.
E ora, abbiamo il markup degli articoli del portfolio:
Importante: Ciò che conta davvero qui è che tutti gli elementi (li) devono essere all'interno di un (ul), in altre parole, devono essere avvolti. Nota che usiamo a div anche noi lo usiamo perché "galleggiamo" Li elementi, quindi è importante avere un altro wrapper e a chiaro div per evitare problemi di rottura della struttura.
Dopo questo, dovremo chiamare il filtrabile script nel nostro file functions.php e inizializzare il portafoglio filtrabile chiamando il filtrabile () funzione, come il seguente codice:
Ma per ora aggiungeremo il nostro markup personalizzato all'interno di Li, ma, avremo bisogno di generare tutti i filtri e i nomi delle classi con PHP per ottenere tutte le categorie, le voci del portfolio e tutti gli altri dettagli da WordPress! Lavoriamo!
Torniamo al page_portfolio_2c.php file e scrivi il filtro del portfolio. Il codice è in realtà qualcosa come il seguente codice:
Abbiamo bisogno di ottenere tutti i termini / categorie da WordPress, modificare alcuni nomi da usare all'interno dell'attributo class e stampare a ul per il modello richiesto.
Digiteremo il seguente codice all'interno del #content div:
'; eco '
Il codice sopra genererà a ul con l'elemento predefinito 'Tutti', e fai un ciclo sui termini per stampare tutte le altre categorie avere voci. Facciamo una spiegazione più dettagliata:
Per prima cosa, creiamo una variabile chiamata $ termini, e usiamo il get_terms () funzione che restituisce un array con tutti i termini. Come parametro, la funzione richiede una stringa o una matrice di stringhe con i nomi di tassonomia, passiamo tagportfolio, quello era il nome che usavamo nel nostro functions.php file. Puoi ottenere informazioni più dettagliate sotto get_terms () nel codice WordPress.
Quindi, creiamo una variabile chiamata $ count e usiamo il contare() funzione per ottenere il numero totale di elementi nella matrice, stampiamo il markup di default e il Tutti articolo.
Successivamente, verifichiamo se la variabile $ count è maggiore di zero, in caso affermativo, abbiamo almeno una categoria con gli elementi da stampare.
Dentro se, creiamo un ciclo foreach per ottenere tutti i valori dell'array e creare un diverso elemento li per ogni elemento nell'array $ terms.
All'interno di foreach, creiamo una variabile chiamata $ termname per memorizzare il nome del termine, ricordiamo che cambiamo il testo in lettere minuscole, perché questa variabile verrà utilizzata all'interno dell'attributo class.
Quindi, sostituiremo qualsiasi spazio bianco con a - usando il str_replace funzione, questa linea ti permetterà di usare categorie / termini con più di una parola, come ad esempio "Temi WordPress".
E per ultimo, stampiamo un Li elemento e utilizzare le nostre variabili per stampare i dati nel posto giusto.
Se esegui il test ora, vedrai un elenco categorie / termini con i nomi creati in Amministratore WordPress. Ora, lavoriamo sugli articoli.
Ora mostriamo gli articoli del portfolio, dobbiamo farlo seguendo il modello richiesto mostrato sopra.
Lo faremo semplicemente aggiungendo il codice seguente:
'progetto', 'posts_per_page' => -1)); $ count = 0; ?>have_posts ()): $ loop-> the_post (); ?> ID, 'tagportfolio'); if ($ terms &&! is_wp_error ($ terms)): $ links = array (); foreach ($ terms as $ term) $ links [] = $ term-> nome; $ links = str_replace (", '-', $ links); $ tax = join (" ", $ links); altrimenti: $ tax ="; finisci se; ?>
">
">
"target =" _ blank "> Anteprima dal vivo →"> Altri dettagli →
- Siamo spiacenti, non sono state trovate voci di portfolio.
Un sacco di righe di codice, no? Ma non ti preoccupare, ti spiego il codice per te.
Il primo passo è creare una query personalizzata, con cui lo facciamo Funzione WP_Query, Passo come parametro il tipo di post personalizzato "progetto", che abbiamo creato su functions.php file. Questa query otterrà tutti i progetti che hai creato.
Quindi, faccio un ciclo come facciamo normalmente con la mostra delle poste, per esempio.
Nel frattempo, facciamo lo stesso processo utilizzato per la creazione dei filtri, ma qui creiamo un array chiamato link dove archiviamo tutti i termini del post. Nota che ora, oltre al nome della tassonomia, passiamo l'ID del post get_the_terms ().
Quindi, usiamo aderire e creare una stringa univoca con tutti gli elementi dell'array, se i termini del post sono "WordPress" e "Design", la variabile $ tax sarà uguale a "wordpress design", useremo questo per aggiungere le classi giuste per consentire il portfolio essere filtrabile.
Se il post non ha termini, impostiamo semplicemente $ tax uguale a una stringa vuota.Dopodiché, creiamo una variabile denominata $ infos in cui otterremo l'URL demo dal nostro campo post personalizzato creato nel functions.php file
Quindi, stampiamo semplicemente il markup del template e usiamo funzioni come get_the_excerpt (), the_post_thumbnail (nota che puoi cambiare le dimensioni per adattarle al tuo layout, se per esempio vuoi creare un portfolio di tre colonne).
Se aggiorni la pagina, vedrai tutti gli elementi elencati, ma il filtro continua a non funzionare. Risolviamolo!
Utilizzo di Filterable in WordPress
Ora, usiamo il nostro plugin. L'hai già scaricato? Se sì, copia e incolla il filterable.js file all'interno del js / cartella.
Nel functions.php file, aggiungiamo prima la libreria jQuery al tag 'head'. Per farlo useremo una funzione personalizzata e il wp_enqueue_script funzione.
function enqueue_filterable () wp_register_script ('filterable', get_template_directory_uri (). '/js/filterable.js', array ('jquery')); wp_enqueue_script ('filterable'); add_action ('wp_enqueue_scripts', 'enqueue_filterable');Ora, torniamo al page_portfolio_2c.php file e sotto l'ultimo codice aggiunto ma all'interno del contenuto div, aggiungi il seguente codice:
Questo collega solo il plugin alla pagina e chiama il filtrabile () funzione per rendere il nostro portafoglio filtrabile.
Codice completo
'; eco 'Tutti '; if ($ count> 0) foreach ($ terms as $ term) $ termname = strtolower ($ term-> name); $ termname = str_replace (", '-', $ termname); echo ''$ TERM-> nome.' '; eco "";?> 'progetto', 'posts_per_page' => -1)); $ count = 0; ?>have_posts ()): $ loop-> the_post (); ?> ID, 'tagportfolio'); if ($ terms &&! is_wp_error ($ terms)): $ links = array (); foreach ($ terms as $ term) $ links [] = $ term-> nome; $ links = str_replace (", '-', $ links); $ tax = join (" ", $ links); altrimenti: $ tax ="; finisci se; ?>
">
">
"target =" _ blank "> Anteprima dal vivo →"> Altri dettagli →
- Spiacente, non ci sono voci nel portfolio per il tempo.
Passaggio 5: un po 'di stile
Ora che abbiamo codificato tutto ciò di cui abbiamo bisogno, aggiungiamo alcuni CSS al nostro style.css file, se hai altri file basta aggiungere il codice lì.
/ * CLEARFIX ----------------------------------------------- * / .clearboth display: block; margine: 0; padding: 0; chiaro: entrambi; / * FILF PORTAFILO STILE -------------------------------------------- --- * / # portfolio-filter list-style-type: none; # portfolio-filter li display: inline; padding-right: 10px; # portfolio-filter li a color: # 777; decorazione del testo: nessuna; # portfolio-filter li .current, # portfolio-filter li: hover color: # 084a9a; / * ELENCO PORTAFOGLIO STILE -------------------------------------------- --- * / # portfolio-wrapper padding-bottom: 25px; # portfolio-list list-style-type: none; # portfolio-list .portfolio-item width: 400px; fluttuare: a sinistra; margin-right: 5px; # portfolio-list .portfolio-item h3 a color: # 084a9a; text-transform: maiuscolo; font-weight: bold; # portfolio-list .portfolio-item .excerpt text-align: justify; font-size: 14px; altezza della linea: 18px; padding-right: 15px; margin-bottom: 5px; # portfolio-list .portfolio-item .excerpt a color: # 555; # portfolio-list .portfolio-item .excerpt a: hover text-decoration: none;Ora, se esegui un nuovo test, otterrai un bel portafoglio filtrabile! Wow, tutto il lavoro è finito!
Conclusione
Ed è fatto! Ora sai come creare un fantastico portafoglio filtrabile con un plugin jQuery gratuito che puoi utilizzare in qualsiasi lavoro tu faccia.
!
