Share
Molto probabilmente la migliore aggiunta a WordPress 3.0 è stata quella dei Tipi di post personalizzati. Ciò ha richiesto a WordPress di essere un CMS in grado di gestire post e pagine per essere in grado di gestire qualsiasi cosa l'utente possa pensare piuttosto facilmente. Non è più necessario aggiungere campi personalizzati ai post: è possibile aggiungere il supporto di alto livello ai propri tipi, creando i propri file di pagine tema e aree di amministrazione. Una delle prime cose che ho fatto usando i tipi di post personalizzati è stata rinnovare il mio portfolio e oggi vi mostrerò come l'ho fatto!
Di recente ti abbiamo mostrato alcuni semplici strumenti per creare tipi di messaggi personalizzati "istantanei". Oggi tutto ruota attorno alla creazione di un progetto utilizzando i CPT da zero? Faremo di tutto, dalla creazione del tipo personalizzato, allo styling da utilizzare nel tema. Il CSS (e CSS3!) Che uso dovrebbe essere abbastanza generico per la maggior parte dei temi, ma nel caso non lo fosse, sentitevi liberi di cambiarlo! Questo è pensato per essere utilizzato come punto di partenza per tutti, quindi sentiti libero di essere creativo!
La prima cosa da notare è che quando si crea un tipo di post personalizzato, abbiamo un paio di opzioni su come vogliamo avvicinarci; Le due principali implementazioni che potresti prendere in considerazione sono:
Ci sono pro e contro per ciascuno. In questo tutorial, poiché ci stiamo integrando con il nostro tema, lo faremo parte del tema, chiamando tutto ciò di cui abbiamo bisogno attraverso il file functions.php.
Nota dello sviluppatore: perché lo stiamo costruendo direttamente nel nostro tema, ciò non significa che questo sia il modo giusto per te? considera l'uso finale del tuo tema. Se ci sono buone possibilità che i tuoi utenti cambieranno temi in futuro, o stai pubblicando il tuo tema come prodotto pubblico o premium per molte persone da utilizzare, probabilmente vorrai creare il tuo tipo di post personalizzato come un file autonomo che le persone possono portare con sé senza troppe ricerche nel codice.
Pensaci in questo modo, se il tuo tema è l'unica cosa che sta caricando i tuoi tipi di post personalizzati e cambi temi, i dati del tipo di post personalizzato non saranno utilizzabili; Verrà ancora presente nel database, ma non verrà visualizzato in nuovi temi in alcun modo significativo. A volte ciò non è possibile se si sta veramente revisionando un tema per utilizzare un CPT includendo molte personalizzazioni e modelli, ma almeno si consideri ciò che gli utenti potrebbero aver bisogno di fare per preservare l'uso dei loro dati a lungo termine.
Iniziamo quindi!
Come ho detto sopra, aggiungeremo questo al nostro tema attuale (sto usando il mio tema personalizzato), quindi la prima cosa che dobbiamo fare è andare al nostro tema e aprire il functions.php file. Inseriremo il nostro codice personalizzato del tipo di post in un file diverso (solo così è più facile da leggere / gestire), quindi chiameremo quel file nella parte superiore del nostro file delle funzioni:
require_once ( 'portafoglio-type.php');
Ora aggiungeremo due file al nostro tema: portfolio-type.php e portfolio.css. Come probabilmente puoi immaginare, tutti i nostri CSS per il nuovo tipo andranno nel secondo file.
Prima di registrare il nuovo tipo, è necessario aggiungere il supporto per una parte integrante delle immagini presentate in portfolio. Dopo aver aggiunto i tag php di apertura e chiusura a portfolio-type.php, aggiungi il seguente codice:
Accentsconagua
if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (280, 210, true); // Normal post thumbnails add_image_size ('screen-shot', 720, 540); // Schermo a dimensione intera Queste linee, dopo aver verificato che la tua installazione particolare supporti le miniature dei post, le aggiungeranno al tuo tema corrente, quindi imposteranno un paio di dimensioni predefinite. set_post_thumbnail_size () sarà, come suggerisce il nome, impostare la dimensione predefinita per la miniatura. La riga successiva (add_image_size () creerà un'altra immagine che possiamo chiamare chiamata 'screen-shot', che sarà 720x540. Useremo queste immagini durante la visualizzazione del nostro portfolio.
Proprio qui è dove avviene la magia - ora diremo a WordPress il nostro nuovo tipo di post. Aggiungi il seguente codice a portfolio-type.php:
add_action ('init', 'portfolio_register'); function portfolio_register () $ args = array ('label' => __ ('Portfolio'), 'singular_label' => __ ('Project'), 'public' => true, 'show_ui' => true, 'capability_type '=>' post ',' hierarchical '=> false,' rewrite '=> true,' supports '=> array (' title ',' editor ',' thumbnail ')); register_post_type ('portfolio', $ args); La prima linea qui è un gancio in WordPress che chiamerà la nostra funzione, portfolio_register () sull'inizializzazione. La funzione stessa imposta una serie di argomenti da inviare con il nostro tipo di post personalizzato. In particolare, impostiamo le nostre etichette di amministrazione, dando a questo tipo tutte le funzionalità di un post WordPress standard, consentendo la riscrittura degli URL (per i permalink piuttosto) e aggiungendo il supporto per il titolo, l'editor e i campi dell'immagine in primo piano. Puoi leggere di più su tutti gli argomenti per register_post_type () Qui.
Dopo aver impostato l'array arguments ($ args), lo passiamo insieme al nome del tipo alla funzione register_post_type ().
L'ultima cosa che faremo in questa sezione è creare una tassonomia personalizzata per il nostro nuovo tipo. Aggiungi la seguente riga di codice al tuo file portfolio-type.php:
register_taxonomy ("project-type", array ("portfolio"), array ("hierarchical" => true, "label" => "Tipi di progetto", "singular_label" => "Tipo di progetto", "riscrittura" => true )); Ciò creerà la nuova tassonomia "tipo di progetto" e la applicherà al "portafoglio" di tipo post. Puoi leggere di più su register_taxonomy () Qui.
Non avremmo molto di un tipo personalizzato senza avere alcune informazioni aggiuntive da aggiungere al post. Aggiungeremo queste informazioni sotto forma di campi personalizzati. Nello specifico, aggiungeremo un campo in più per un collegamento a maggiori informazioni sul progetto o sul progetto stesso. Aggiungi il seguente codice al tuo file portfolio-type.php:
add_action ("admin_init", "portfolio_meta_box"); function portfolio_meta_box () add_meta_box ("projInfo-meta", "Opzioni progetto", "portfolio_meta_options", "portfolio", "side", "low"); function portfolio_meta_options () global $ post; if (definito ('DOING_AUTOSAVE') && DOING_AUTOSAVE) restituisce $ post_id; $ personalizzato = get_post_custom ($ post-> ID); $ link = $ custom ["projLink"] [0]; ?> 
Questo codice creerà la casella "Opzioni progetto" che vediamo qui. Per prima cosa usiamo il gancio WordPress admin_init chiamare la nostra funzione portfolio_meta_box () quando viene creato l'amministratore di WordPress. La nostra funzione aggiungerà un'altra casella al nostro tipo di portafoglio, che può essere popolato con qualsiasi cosa. Ciò che la casella è popolata è coperto dal terzo argomento, che è una funzione di callback. In questo caso, la nostra funzione è denominata portfolio_meta_options ().
Nel portfolio_meta_options () creeremo un campo modulo che verrà utilizzato per catturare il link del progetto. La prima cosa che facciamo è afferrare il globale $ postale array in modo che possiamo ottenere i campi personalizzati per qualsiasi post che stiamo modificando. Nella prossima riga, stiamo verificando che WordPress non stia salvando i post o i campi personalizzati; se lo è, potremmo vedere risultati inaccurati quando prendiamo i dati personalizzati.
Se WordPress non sta eseguendo un salvataggio, prendiamo i campi personalizzati per il post corrente e creiamo un campo modulo utilizzando tali informazioni. $ personalizzati (cosa viene restituito da get_post_custom () è un array 2D in cui la chiave è qualsiasi cosa denominiamo il campo modulo per la nostra abitudine. Dai un'occhiata alla nostra casella di testo per il collegamento. Noterai che il nome corrisponde all'indice che chiamiamo nel nostro $ personalizzati array. Noterai inoltre che non abbiamo un modulo separato o un pulsante di invio. Questo campo viene aggiunto al modulo utilizzato per modificare l'intero post.
Mentre ne creiamo solo uno, puoi ovviamente crearne quanti ne vuoi.
Salvataggio dei dati personalizzati
Ora che abbiamo creato la nostra meta-box personalizzata, è ora di creare una funzione che salvi le informazioni. Aggiungi le seguenti righe di codice al tuo file portfolio-type.php:
add_action ('save_post', 'save_project_link'); function save_project_link () global $ post; if (definito ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; else update_post_meta ($ post-> ID, "projLink", $ _POST ["projLink"]); Innanzitutto, come al solito, abbiamo il nostro gancio, questa volta per chiamare la nostra funzione quando il post viene salvato. Nella stessa funzione, afferriamo nuovamente il $ postale array in modo che possiamo ottenere l'ID del post e verificare se il post è autosalvataggio. Se non includiamo questa linea, lo faremo perdere i nostri dati, quindi è importante che continuiamo a farlo.
Se il post non si aggiorna, salviamo i nostri campi personalizzati usando update_post_meta (), inviando l'id del post, il nome del campo personalizzato e il nuovo valore.
Ecco come appare l'intero kit e il cabinato!
Passaggio 4 Personalizzazione delle colonne di amministrazione
Qui andremo a personalizzare l'elenco visualizzando tutti i nostri progetti. Aggiungi il seguente codice al tuo file portfolio-type.php:
add_filter ("manage_edit-portfolio_columns", "project_edit_columns"); function project_edit_columns ($ columns) $ columns = array ("cb" => ""," title "=>" Project "," description "=>" Description "," link "=>" Link "," type "=>" Tipo di progetto ",); return $ columns; add_action (" manage_posts_custom_column "," project_custom_columns "); function project_custom_columns ($ column) global $ post; switch ($ column) case" description ": the_excerpt (); break; case" link ": $ custom = get_post_custom (); echo $ custom ["projLink"] [0]; break; case "type": echo get_the_term_list ($ post-> ID, 'project-type', ", ',',"); break; 
Ecco la nostra lista dei progetti appena modificata. Dopo il nostro hook per la prima funzione (project_edit_columns ()), facciamo qualcosa di abbastanza interessante in termini di modifica delle colonne. WordPress colloca le colonne per l'elenco di visualizzazione di un tipo di post in una matrice con una chiave e un valore. Creiamo queste coppie chiave-valore in questa funzione. Nella prossima funzione (project_custom_columns ()), usiamo un'istruzione switch per afferrare la chiave e quindi visualizzare le informazioni che vogliamo basate su di essa. Come puoi vedere, proprio come nella sezione precedente, otteniamo il globale $ postale array in modo che possiamo ottenere l'ID del post per visualizzare correttamente qualsiasi informazione personalizzata, come il nostro link e la tassonomia.
Probabilmente hai notato che il numero di casi non corrisponde al numero di colonne nel nostro $ colonne array. Questo perché per alcune chiavi, come cb e title, WordPress ha valori predefiniti che non vogliamo sovrascrivere.
Passaggio 5 Aggiunta di alcune funzioni di visualizzazione
Prima di creare una pagina di modello, voglio darvi alcune funzioni che ho incluso per ottenere la visualizzazione dei progetti giusto. Apri il tuo file functions.php e aggiungi i seguenti tre componenti:
add_filter ('excerpt_length', 'my_excerpt_length'); function my_excerpt_length ($ length) return 25; add_filter ('excerpt_more', 'new_excerpt_more'); function new_excerpt_more ($ text) return "; function portfolio_thumbnail_url ($ pid) $ image_id = get_post_thumbnail_id ($ pid); $ image_url = wp_get_attachment_image_src ($ image_id, 'screen-shot'); restituisci $ image_url [0]; Le prime due coppie hook / function sono comuni a WordPress: cambiano semplicemente la lunghezza dell'estratto e l'indicatore "more text", che ho sostituito con solo uno spazio. Tieni presente che questo accadrà a tutti i post, non solo al post del portfolio, e che se stai usando un tema figlio, questo potrebbe non funzionare.
La funzione personalizzata, portfolio_thumbnail_url () prende l'ID di un post come argomento e afferra la versione schermata dell'immagine che abbiamo caricato. Lo chiameremo nella nostra pagina dei modelli, quindi tienilo d'occhio!
Passaggio 6 Creare una pagina di modello
Ora che abbiamo il nostro tipo di post personalizzato impostato nell'amministratore, è ora di creare una pagina tematica in modo che possiamo visualizzarli. Per fare ciò, creeremo un modello con il nome "Portfolio" e quindi assegneremo il modello a una pagina in WordPress. Mentre possiamo anche creare archivi-portfolio.php per realizzare la stessa cosa, non saremo in grado di aggiungere quella pagina ad un menu dall'amministratore di WordPress, quindi questo percorso è il migliore. Mantenendo le convenzioni di denominazione di WordPress, crea un nuovo file chiamato page-portfolio.php e aggiungi il seguente codice:
Questo creerà il modello 'Portfolio'. Queste poche righe stabiliscono le parti più importanti della pagina. La prima riga consente a WordPress di sapere che questo è un modello di pagina che dovrebbe andare sotto il nome "Portfolio". Quindi, dopo aver chiamato l'intestazione del tema, impostiamo la query per afferrare gli ultimi 9 post di tipo portfolio. La prossima cosa da fare è mostrarli. Aggiungi questo codice al tuo file page-portfolio.php:
Portfolio of Work
: "rel =" lightbox [lavoro] "href ="ID)?> "> : : "rel =" lightbox [lavoro] "href ="ID)?> "> (Altro)
"> Visita il sito
Collegamento live non disponibile
Noterai alcune cose qui: in primo luogo, dopo essere entrati nel ciclo, dobbiamo ritagliare caratteri "" "estranei dal titolo e dal contenuto utilizzando str_ireplace (). Non sono esattamente sicuro del motivo per cui appaiono qui, ma da quello che posso dire è un passo necessario. Dovresti anche notare che stiamo usando lightbox. Mentre potremmo aggiungerlo da soli (che probabilmente raccomanderei se si trattasse di un plugin), dal momento che stiamo modificando il nostro tema, potremmo scaricare uno dei tanti plugin lightbox disponibili nel repository di WordPress. Scegli il tuo preferito!
A parte questo, questo dovrebbe sembrare familiare a chi ha lavorato con il ciclo di WordPress. Quello che stiamo facendo qui è creare blocchi con le nostre miniature e descrizioni, che collegano (usando lightbox) la schermata per ciascuno dei 9 progetti. Non ho incluso collegamenti ad altre pagine (nel caso abbiate più di 9 progetti) perché voglio solo che i miei utenti vedano gli ultimi 9 progetti. Puoi consentire agli utenti di accedere ad altri post utilizzando posts_nav_link (), se lo scegli tu.
Dovrei anche notare che ho rimosso il collegamento di default di WordPress più perché collegato a una singola pagina di post, e volevo usare lightbox, così ho costruito il mio.
Passaggio 7 Disegnare il tipo di portafoglio
Ecco la parte divertente: rendere il nostro portfolio di tipo carino. Ecco alcuni CSS che ho incluso: puoi aggiungerlo alla fine del tuo foglio style.css o nel nostro file portfolio.css appena creato. Assicurati di usare @importare per chiamare portfolio.css in cima allo style.css del tuo tema (non funzionerà da nessun'altra parte):
.item float: left; margine: 5px; larghezza: 310 px; background: #EFEFEF; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; allineamento del testo: centro; -moz-box-shadow: 0px 0px 6px # 999; -webkit-box-shadow: 0px 0px 6px # 999; box-shadow: 0px 0px 6px # 999; .item p text-align: left; .item p a text-align: left; font-weight: bold; .item img margin-top: 5px; allineamento del testo: centro; border: 1px solid # 000000; max-width: 280px; / * auto-clear floats * / .group: after content: "."; blocco di visualizzazione; altezza: 0; chiaro: entrambi; visibilità: nascosta;
Se farai riferimento alla nostra pagina modello, vedrai che ogni progetto è racchiuso in un div chiamato "item", al quale ora applichiamo i CSS. Dato che non ci sono due temi uguali, potresti dover modificare un po 'il tuo CSS, ma qui è un buon punto di partenza per te. Ho anche incluso una classe per i galleggianti auto-pulenti. Questa è una tecnica che ho ricevuto da Dan Cederholm, e penso che sia un po 'più elegante il metodo standard "clearfix" per cancellare i contenuti dopo i flottanti..
Conclusione
Questo è tutto! Ora disponi di un portafoglio semplice utilizzando i tipi di post personalizzati. Mentre questo è stato costruito per soddisfare le mie esigenze, e volevo mantenere le cose semplici, le possibilità per questo sono infinite in quanto puoi adattarle per adattarle a qualsiasi tipo di portfolio (scrittura / articoli, fotografia, progettazione grafica, ecc.). Se non vuoi usare lightbox per visualizzare il singolo progetto, puoi anche creare una pagina tematica con il nome single-portfolio.php, che applicherà il codice all'interno di ogni singolo progetto, proprio come fa il single.php per i post del blog.
