Share
Destul de bine, cea mai bună adăugare la WordPress 3.0 a fost aceea a Tipurilor personalizate de postări. Acest lucru a făcut ca WordPress să fie un CMS care poate gestiona posturile și paginile pentru a putea gestiona orice poate fi ușor de gândit de utilizator. Nu mai trebuie să adăugați câmpuri personalizate în postări - puteți adăuga suport la nivel înalt propriilor tipuri, creând propriile fișiere de pagini tematice și zone administrative. Unul dintre primele lucruri pe care le-am făcut folosind tipuri personalizate de posturi a fost revigorarea portofoliului meu și astăzi vă voi arăta cum am făcut-o!
Recent, v-am arătat câteva instrumente utile pentru crearea tipurilor de postări personalizate "instantanee". Astăzi este vorba despre construirea unui proiect folosind CPT-uri de la zero? Vom face totul, de la crearea tipului personalizat - la styling-ul pentru utilizarea în temă. CSS (și CSS3!) Pe care le folosesc ar trebui să fie suficient de generic pentru majoritatea temelor, dar în caz că nu este, nu ezitați să o schimbați! Acesta este destinat să fie folosit ca un punct de lansare pentru toată lumea, deci nu ezitați să deveniți creativi!
Primul lucru de reținut este că atunci când creăm un tip de post particularizat, avem câteva opțiuni cu privire la modul în care vrem să le abordăm; Cele două implementări principale pe care le-ați putea lua în considerare sunt:
Există argumente pro și contra pentru fiecare. În acest tutorial, deoarece ne integrăm cu tema noastră, o vom face parte din temă, sunând tot ce ne trebuie în fișierul functions.php.
Nota dezvoltatorului: Pentru că vom construi acest lucru direct în tema noastră, asta nu înseamnă că acesta este cel mai bun mod pentru dvs.? ia în considerare utilizarea finală a temei. Dacă există o șansă bună ca utilizatorii dvs. să schimbe teme în viitor sau dacă vă lansați tema ca produs public sau premium pentru o mulțime de utilizatori, probabil că veți dori să construiți tipul dvs. de post personalizat ca fișier independent, pe care oamenii îl pot lua cu ei fără să sară prea mult prin codul tău.
Gândiți-vă doar la acest lucru, dacă tema dvs. este singurul lucru care vă încarcă tipurile personalizate de postări și schimbați teme, datele postului personalizat nu vor fi utilizate; Va exista în continuare în baza de date, dar nu va apărea în teme noi într-un mod semnificativ. Uneori acest lucru nu este posibil dacă schimbați cu adevărat o temă pentru a utiliza un CPT prin includerea unei mulțimi de personalizări și șabloane, dar cel puțin luați în considerare ce ar putea fi necesar ca utilizatorii să facă pentru a păstra utilizarea datelor pe termen lung.
Să începem atunci!
Așa cum am spus mai sus, vom adăuga acest lucru la tema curentă (folosesc propria mea temă personalizată), așa că primul lucru pe care trebuie să-l facem este să mergem la tema noastră și să deschidem functions.php fişier. Vom plasa codul personalizat tip de post într-un fișier diferit (așa că este mai ușor de citit / gestionat), așa că vom numi acest fișier în partea de sus a fișierului funcțiilor noastre:
require_once ( 'portofoliu-type.php');
Acum vom adăuga două fișiere la tema noastră: portfolio-type.php și portfolio.css. După cum probabil puteți ghici, toate CSS-urile noastre pentru noul tip vor merge în ultimul fișier.
Înainte de a înregistra noul tip, trebuie să adăugăm suport pentru o parte integrantă a imaginilor prezentate în prezentarea de portofoliu. După adăugarea etichetelor php pentru deschiderea și închiderea portofoliului-type.php, adăugați următorul cod:
Accentsconagua
dacă (funcția_există ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (280, 210, true); // miniaturi post normale add_image_size ('screen-shot', 720, 540); // ecran complet de dimensiuni Aceste linii, după verificarea pentru a vă asigura că instalarea dvs. particulară acceptă miniaturi post, le va adăuga la tema curentă, apoi puteți seta câteva mărimi implicite. set_post_thumbnail_size () va, după cum sugerează și numele, setați dimensiunea implicită pentru miniatură. Următorul rând (add_image_size () va crea o altă imagine pe care o putem numi "screen-shot", care va fi de 720x540. Vom folosi aceste imagini când afișăm portofoliul nostru.
Chiar aici este locul unde se întâmplă magia - acum îi vom spune lui WordPress despre noul tip de post. Adăugați următorul cod în portofoliu-type.php:
add_action ('init', 'portfolio_register'); funcția port_register () $ args = array ('label' => __ ('Portfolio'), 'singular_label' => __ ('Project'), 'public' => true, '=>' post ',' hierarchical '=> false,' rewrite '=> true,' suporta '=> array (' title ',' editor ',' thumbnail ')); register_post_type ("portofoliu", $ args); Prima linie aici este un cârlig în WordPress care ne va numi funcția, portfolio_register () la inițializare. Funcția în sine stabilește o serie de argumente pentru a le trimite cu tipul nostru de post personalizat. În special, setăm etichetele de admin, oferind acest tip toate capabilitățile unei postări standard WordPress, permițând rescrierea URL-urilor (pentru destul de multe permalinks) și adăugând suport pentru câmpurile de titlu, editor și câmpuri de imagine. Puteți citi mai multe despre toate argumentele pentru register_post_type () aici.
După configurarea matricei argumentelor ($ args), trecem împreună cu numele de tip la funcție register_post_type ().
Ultimul lucru pe care îl vom face în această secțiune este crearea unei taxonomii personalizate pentru noul nostru tip. Adăugați următoarea linie de cod în fișierul dvs. de tip portofoliu:
register_taxonomy ("tip de proiect", array ("portofoliu"), array ("hierarchical" => true, "label" => true )); Acest lucru va crea noul tip de tip "tip de proiect" și îl va aplica în portofoliul post tip. Puteți citi mai multe despre register_taxonomy () aici.
Nu am avea mult de tip personalizat, fără a avea niște informații suplimentare pe care să le adăugăm la postare. Vom adăuga acele informații sub formă de câmpuri personalizate. Mai specific, vom adăuga un câmp suplimentar pentru un link către mai multe informații despre proiect sau despre proiectul în sine. Adăugați următorul cod în fișierul dvs. type.php de tip portofoliu:
add_action ("admin_init", "portofoliu_meta_box"); funcția port_meta_box () add_meta_box ("projInfo-meta", "opțiuni de proiect", "portofoliu_meta_opțiuni", "portofoliu", "partea", "scăzută"); funcție portofoliu_meta_opțiuni () global $ post; dacă (definit ('DOING_AUTOSAVE') && DOING_AUTOSAVE) returnați $ post_id; $ custom = get_post_custom ($ post-> ID); $ link = $ personalizat ["projLink"] [0]; ?> 
Acest cod va crea caseta "Opțiuni proiect" pe care o vedem aici. Mai întâi folosim cârligul WordPress admin_init pentru a ne numi funcția portfolio_meta_box () când este creat adminul WordPress. Funcția noastră va adăuga o altă cutie tipului nostru de portofoliu, care poate fi populat cu orice. Cu ce este populată cutia este acoperită de argumentul 3, care este o funcție de apel invers. În acest caz, funcția noastră este numită portfolio_meta_options ().
În portfolio_meta_options () vom crea un câmp de formular care va fi utilizat pentru capturarea link-ului proiectului. Primul lucru pe care îl facem este să atragem lumea $ postare astfel încât să putem obține câmpurile personalizate pentru orice post pe care îl editați. În următoarea linie, verificăm să vă asigurați că WordPress nu salvează în prezent posturile sau câmpurile personalizate; dacă este, este posibil să vedem rezultate inexacte atunci când luăm datele personalizate.
Dacă WordPress nu face o salvare, luăm câmpurile personalizate pentru postarea curentă și creăm un câmp de formular utilizând acele informații. $ personalizate (ce sa întors de la get_post_custom () este o matrice 2D în cazul în care cheia este ceea ce numim câmpul de formular pentru personalizarea noastră. Uitați-vă la caseta de text pentru link. Veți observa că numele se potrivește cu indicele pe care îl numim în lista noastră $ personalizate matrice. De asemenea, veți observa că nu avem un formular separat sau un buton de trimitere. Acest câmp este adăugat la formularul utilizat pentru a edita întreaga postare.
În timp ce noi creăm doar unul aici, puteți crea în mod evident cât mai multe pe cât doriți.
Salvarea datelor personalizate
Acum, că am creat meta-caseta personalizată, este timpul să creăm o funcție care să salveze informațiile. Adăugați următoarele linii de cod în fișierul dvs. de tip portofoliu:
add_action ('save_post', 'save_project_link'); funcția save_project_link () global $ post; dacă (definit ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; altceva update_post_meta ($ post-> ID, "projLink", $ _POST ["projLink"]); Mai întâi, ca de obicei, avem cârligul nostru - de data aceasta pentru a ne apela funcția când postul este salvat. În funcția însăși, luăm din nou $ postare astfel încât să putem obține ID-ul postului și să verificăm dacă postarea este salvată automat. Dacă nu includem această linie, o vom face pierd datele noastre, așa că este important să păstrăm asta în.
Dacă postarea nu se actualizează, vom salva câmpurile personalizate folosind update_post_meta (), trimiterea ID-ului postului, a câmpului personalizat și a valorii noi.
Iată ce arată întregul kit și caboodle!
Pasul 4: Personalizarea coloanelor de administrare
Aici vom personaliza lista cu toate proiectele noastre. Adăugați următorul cod în fișierul dvs. type.php de tip portofoliu:
add_filter ("manager_edit-coloane de portofoliu", "coloane de proiect_dezidere"); funcția project_edit_columns ($ coloane) $ columns = array ("cb" => ""," description "=>" Descriere "," link "=>" Link "," type "=>" Tip de proiect " ($ coloană) caz "descriere": the_excerpt (); break; caz "link": $ custom = get_post_custom (); echo $ personalizat ["projLink"] [0]; pauză; caz "tip": echo get_the_term_list ($ post-> ID, "proiect"; 
Iată noua noastră listă de proiecte. După cârligul nostru pentru prima funcție (project_edit_columns ()), facem ceva destul de interesant în ceea ce privește editarea coloanelor. WordPress plasează coloanele pentru lista de afișare a tipului de post într-un tablou cu o cheie și o valoare. Vom crea acele perechi cheie-valoare în această funcție. În următoarea funcție (project_custom_columns ()), folosim o instrucțiune de comutare pentru a apuca cheia și apoi a afișa informațiile dorite pe baza acesteia. După cum puteți vedea, la fel ca în secțiunea anterioară, ajungem la nivel global $ postare astfel încât să putem obține ID-ul postului pentru a afișa corect toate informațiile personalizate, cum ar fi link-ul nostru și taxonomia.
Probabil că ați observat că numărul de cazuri nu corespunde numărului de coloane din lista noastră coloane $ matrice. Asta pentru că pentru anumite chei, cum ar fi cb și titlu, WordPress are valori implicite pe care nu dorim să le suprascriem.
Pasul 5 Adăugarea unor funcții de afișare
Înainte de a ajunge la crearea unei pagini de șabloane, vreau să vă dau câteva funcții pe care le-am inclus pentru a afișa proiectele la dreapta. Deschideți fișierul functions.php și adăugați următoarele trei componente:
add_filter ('excerpt_length', 'my_excerpt_length'); funcția my_excerpt_length ($ length) return 25; add_filter ('excerpt_more', 'new_excerpt_more'); Funcția new_excerpt_more ($ text) return "; portofoliu_thumbnail_url ($ pid) $ image_id = get_post_thumbnail_id ($ pid); $ image_url = wp_get_attachment_image_src ($ image_id, Primele două perechi de cârlige / funcții sunt comune pentru WordPress - modifică pur și simplu lungimea fragmentului și indicatorul "mai mult text", pe care l-am înlocuit doar cu un spațiu. Rețineți că acest lucru se va întâmpla cu toate postările, nu doar cu postul de portofoliu și că dacă utilizați o temă de copil, este posibil să nu funcționeze.
Funcția personalizată, portfolio_thumbnail_url () preia ID-ul postului ca argument și apucă versiunea cu ecranul imaginii pe care am încărcat-o. O vom numi pe pagina noastră de șabloane, așa că fii atent la asta!
Pasul 6 Creați o pagină șablon
Acum, dacă avem tipul nostru de post particularizat setat în admin, este timpul să creați o pagină de temă pentru a le putea afișa. Pentru a realiza acest lucru, vom crea un șablon cu numele "Portofoliu" și apoi vom atribui șablonul unei pagini în WordPress. În timp ce putem crea, de asemenea, arhive-portfolio.php pentru a realiza același lucru, nu vom putea adăuga acea pagină la un meniu de la administratorul WordPress, deci acest traseu este cel mai bun. Păstrați cu convențiile de numire WordPress, creați un nou fișier numit page-portfolio.php și adăugați următorul cod:
Acest lucru va crea șablonul "Portofoliu". Aceste câteva linii stabilesc cele mai importante părți ale paginii. Prima linie permite WordPress să știe că acesta este un șablon de pagină care ar trebui să meargă după numele "Portofoliu". Apoi, după apelarea antetului temei, am setat interogarea pentru a apuca ultimele 9 posturi de portofoliu de tip. Următorul lucru pe care trebuie să-l faceți este să le afișați. Adăugați acest cod în fișierul dvs. de pagină-portofoliu.php:
Portofoliul muncii
: "rel =" lightbox [lucreaza] "href ="ID)?> "> : : "rel =" lightbox [lucreaza] "href ="ID)?> "> (Mai mult)
"> Vizitați site-ul
Linkul live nu este disponibil
Veți observa câteva lucruri aici: mai întâi, după ce suntem în buclă, trebuie să tăiem caracterele străine "" din titlul și conținutul nostru folosind str_ireplace (). Nu sunt sigur de ce apar aici, dar din ceea ce pot spune acest lucru este un pas necesar. De asemenea, trebuie să observați că folosim casete lightbox. În timp ce noi am putea adăuga noi înșine (ceea ce aș recomanda, probabil, dacă acesta ar fi un plugin), deoarece ne modificăm propria temă, am putea descărca unul dintre multele pluginuri lightbox disponibile în repozitoriul WordPress. Doar alege-ți favoritul!
În afară de asta, ar trebui să pară familiară oricum cine a lucrat cu bucla WordPress. Ceea ce facem aici este crearea de blocuri cu miniaturile și descrierile noastre, care leagă (folosind lightbox) imaginea ecranului pentru fiecare dintre cele 9 proiecte. Nu am inclus link-uri către alte pagini (în cazul în care aveți mai mult de 9 proiecte), deoarece vreau doar utilizatorii mei să vadă cele mai recente 9 proiecte. Puteți permite utilizatorilor să acceseze alte postări utilizând posts_nav_link (), dacă alegeți astfel.
De asemenea, trebuie să rețineți că am eliminat link-ul implicit pentru WordPress, deoarece a fost legat de o singură pagină de postare și am vrut să folosesc caseta lightbox, așa că am construit propria mea.
Pasul 7 Modelarea tipului de portofoliu
Iată o parte distractivă: făcând tipul nostru de portofoliu să arate destul. Iată câteva CSS pe care le-am inclus - îl puteți adăuga în partea de jos a foii dvs. stil.css sau în noul nostru portofoliu portfolio.css. Doar asigurați-vă că ați folosit @import pentru a apela portofoliul.css în partea superioară a stilului dvs. cc (nu va funcționa în altă parte):
.element float: left; margine: 5px; lățime: 310px; fundal: #EFEFEF; -moz-border-radius: 7px; -webkit-border-radius: 7px; raza de graniță: 7px; text-align: centru; -moz-box-shadow: 0px 0px 6px # 999; -webkit-box-shadow: 0px 0px 6px # 999; box-shadow: 0px 0px 6px # 999; .item p text-aliniere: stânga; .item p a text-aliniere: stânga; font-weight: bold; .imag img margin-top: 5px; text-align: centru; frontieră: 1px solid # 000000; max-width: 280px; / * flotări auto-clare * / .group: după content: "."; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns;
Dacă veți consulta pagina noastră de șabloane, veți vedea că fiecare proiect este înfășurat într-un div numit "element", la care aplicăm acum CSS. Din moment ce nici două teme nu sunt la fel, este posibil să trebuiască să vă optimizați propriul CSS, dar aici este un punct de plecare frumos pentru dvs. Am inclus, de asemenea, o clasă pentru flotoare de auto-compensare. Aceasta este o tehnică pe care am obținut-o de la Dan Cederholm și cred că este un pic mai elegant decât metoda standard "clearfix" de curățare a conținutului după divite plutitoare.
Concluzie
Asta e! Acum aveți un portofoliu simplu care utilizează tipuri personalizate de posturi. În timp ce aceasta a fost construită pentru a satisface nevoile mele și am vrut să păstrez lucrurile simple, posibilitățile pentru acest lucru sunt nesfârșite, pe măsură ce o puteți adapta pentru a se potrivi oricăror tipuri de portofoliu pe care le aveți (scris / articole, fotografie, grafică etc.). Dacă nu doriți să utilizați caseta lightbox pentru a afișa singurul proiect, puteți crea o pagină temă cu numele single-portfolio.php, care va aplica apoi codul în cadrul fiecărui proiect individual, la fel ca single.php pentru postări pe blog.
