Share
Sannsynligvis det beste tillegget til WordPress 3.0 var det for egendefinerte innleggstyper. Dette tok WordPress fra å være et CMS som kan administrere innlegg og sider for å kunne håndtere alt brukeren kan tenke på ganske enkelt. Du trenger ikke lenger å legge til egendefinerte felt for innlegg - du kan legge til støtte på høyt nivå til dine egne typer, lage egne temafilfiler og admin-områder. En av de første tingene jeg gjorde ved hjelp av egendefinerte innleggstyper, var fornyet porteføljen min, og i dag skal jeg vise deg hvordan jeg gjorde det!
Vi har nylig vist deg noen fine verktøy for å lage "Instant" Custom Post Types. I dag handler det om å faktisk bygge et prosjekt som bruker CPT fra grunnen av? Vi skal gjøre alt fra å skape den egendefinerte typen - til å utforme den til bruk i temaet. CSS (og CSS3!) Jeg bruker, bør være generisk nok for de fleste temaer, men hvis det ikke er det, vær så snill å endre det! Dette er ment å bli brukt som et startpunkt for alle, så vær så snill å bli kreativ!
Det første du må merke seg er at når du oppretter en egendefinert innleggstype, har vi et par alternativer til hvordan vi ønsker å nærme dem. De to viktigste implementeringene du kan vurdere er:
Det er fordeler og ulemper for hver. I denne opplæringen, siden vi integrerer med temaet, vil vi gjøre det til en del av temaet, og kaller alt vi trenger gjennom funksjonene .php-fil.
Utviklerens merknad: Fordi vi skal bygge dette direkte inn i vårt tema, betyr det ikke at dette er riktig måte for deg selv? vurdere sluttbruken av temaet ditt. Hvis det er en god sjanse for at brukerne dine skal bytte temaer i fremtiden, eller hvis du slipper ut temaet ditt som et offentlig eller premiumprodukt for mange folk å bruke, vil du sannsynligvis bygge på din egendefinerte innleggstype som en frittstående fil som folk kan ta med seg uten for mye graving gjennom koden din.
Tenk bare på det på denne måten, hvis temaet ditt er det eneste som laster inn egendefinerte innleggstyper, og du endrer temaer, vil de egendefinerte innleggstypene ikke være brukbare. Det eksisterer fortsatt i databasen, men det vil ikke komme opp i nye temaer på noen meningsfull måte. Noen ganger er dette ikke mulig hvis du virkelig overhaler et tema for å bruke en CPT ved å inkludere mange tilpasninger og maler, men i det minste vurdere hva brukerne kanskje må gjøre for å bevare bruken av dataene deres i det lange løp.
La oss komme i gang da!
Som nevnt ovenfor legger vi til dette i vårt nåværende tema (jeg bruker mitt eget tilpassede tema), så det første vi må gjøre er å gå til temaet vårt og åpne opp functions.php fil. Vi skal sette vår egendefinerte posttypekode i en annen fil (bare slik at det er lettere å lese / administrere), så vi kaller den filen øverst i vår funksjonsfil:
require_once ( 'portefølje-type.php');
Nå skal vi legge til to filer til vårt tema: portfolio-type.php og portfolio.css. Som du sikkert kan gjette, går alle våre CSS for den nye typen i den sistnevnte filen.
Før vi registrerer den nye typen, må vi legge til støtte for en integrert del av porteføljepresentasjonen - kjente bilder. Etter å legge til åpnings- og lukkede php-koder til portefølje-type.php, legg til følgende kode:
Accentsconagua
hvis (function_exists ('add_theme_support')) add_theme_support ('post-miniatyrer'); set_post_thumbnail_size (280, 210, true); // Normal post miniatyrbilder add_image_size ('screen-shot', 720, 540); // Skjerm i full størrelse Disse linjene, etter at du har kontrollert at din spesielle installasjon støtter etter miniatyrbilder, vil legge dem til ditt nåværende tema og deretter sette et par standardstørrelser. set_post_thumbnail_size () vil, som navnet antyder, angi standardstørrelsen for miniatyrbildet. Neste linje (add_image_size () vil skape et annet bilde som vi kan ringe kalt "skjermbilde", som vil være 720x540. Vi bruker disse bildene når vi viser vår portefølje.
Her er hvor magien skjer - vi vil nå fortelle WordPress om vår nye posttype. Legg til følgende kode for portfolio-type.php:
add_action ('init', 'portfolio_register'); funksjon portfolio_register () $ args = array ('label' => __ ('Portefølje'), 'singular_label' => __ ('Project'), 'public' => true, 'show_ui' => true, 'capability_type '=>' post ',' hierarkisk '=> false,' rewrite '=> true,' supports '=> array (' tittel ',' editor ',' miniatyrbilde ')); register_post_type ('portefølje', $ args); Den første linjen her er en krok i WordPress som vil ringe til vår funksjon, portfolio_register () ved initialisering. Funksjonen selv setter opp en rekke argumenter for å sende med vår egendefinerte innleggstype. Mest sett setter vi inn våre adminetiketter, og gir denne typen alle mulighetene til et standard WordPress-innlegg, slik at nettadressen skrives om (for ganske permalinks), og legger til støtte for tittelen, redigeringsprogrammet og de utvalgte bildefeltene. Du kan lese mer om alle argumenter for register_post_type () her.
Etter at du har konfigurert argumentargruppen ($ args), sender vi det sammen med typenavnet til funksjonen register_post_type ().
Det siste vi gjør i denne delen, er å opprette en tilpasset taksonomi for vår nye type. Legg til følgende linje med koden til porteføljen-type.php-filen din:
register_taxonomy ("prosjekttype", array ("portefølje"), array ("hierarkisk" => sann, "label" => "Prosjekttyper", "singular_label" => "Prosjekttype", "rewrite" => true )); Dette vil skape den nye taksonomien 'prosjekttype' og bruke den til posttype 'portefølje'. Du kan lese mer om register_taxonomy () her.
Vi ville ikke ha mye av en tilpasset type uten å ha litt ekstra info å legge til innlegget. Vi legger til den informasjonen i form av egendefinerte felt. Spesielt legger vi til ett ekstra felt for en lenke til mer info om prosjektet eller selve prosjektet. Legg til følgende kode i porteføljen-type.php-filen din:
add_action ("admin_init", "portfolio_meta_box"); funksjon portfolio_meta_box () add_meta_box ("projInfo-meta", "Project Options", "portfolio_meta_options", "portfolio", "side", "low"); funksjon portfolio_meta_options () global $ post; hvis (definert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) returnere $ post_id; $ custom = get_post_custom ($ post-> ID); $ link = $ custom ["projLink"] [0]; ?> 
Denne koden vil opprette boksen "Prosjektalternativer" vi ser her. Først bruker vi WordPress-kroken admin_init å ringe vår funksjon portfolio_meta_box () når WordPress admin er opprettet. Vår funksjon vil legge til en annen boks til vår porteføljetype, som kan fylles med noe. Hva boksen er befolket med, er dekket av det tredje argumentet, som er en tilbakeringingsfunksjon. I dette tilfellet er vår funksjon navngitt portfolio_meta_options ().
I portfolio_meta_options () Vi lager et formularfelt som vil bli brukt til å fange prosjektets link. Det første vi gjør er å få tak i det globale $ post array slik at vi kan få de egendefinerte feltene for det innlegget vi redigerer. I vår neste linje kontrollerer vi at WordPress ikke lagrer posten eller egendefinerte felt for øyeblikket. Hvis det er, kan vi se unøyaktige resultater når vi tar tak i de egendefinerte dataene.
Hvis WordPress ikke gjør en lagring, tar vi de egendefinerte feltene for gjeldende innlegg og oppretter et skjemafelt ved hjelp av den aktuelle informasjonen. $ tilpasset (hva er returnert fra get_post_custom () er et 2D-array hvor nøkkelen er hva vi heter formfeltet for våre tilpassede inn. Ta en titt på vår tekstboks for linken. Du vil merke at navnet samsvarer med indeksen vi kaller i vår $ tilpasset array. Du vil også legge merke til at vi ikke har en egen skjema eller sender inn en knapp. Dette feltet er lagt til skjemaet som brukes til å redigere hele innlegget.
Mens vi bare lager en her, kan du selvsagt lage så mange du vil.
Lagre egendefinerte data
Nå som vi har opprettet vår tilpassede metakasse, er det på tide å lage en funksjon som vil lagre informasjonen. Legg til følgende kodelinjer i porteføljen-type.php-filen din:
add_action ('save_post', 'save_project_link'); funksjon save_project_link () global $ post; hvis (definert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; else update_post_meta ($ post-> ID, "projLink", $ _POST ["projLink"]); For det første har vi vår krok - denne gangen for å ringe vår funksjon når posten er lagret. I selve funksjonen griper vi igjen $ post array slik at vi kan få post-ID og sjekke for å se om posten er autosaving. Hvis vi ikke inkluderer denne linjen, vil vi miste dataene våre, så det er viktig at vi holder det inn.
Hvis posten ikke oppdateres, lagrer vi våre egendefinerte felt ved hjelp av update_post_meta (), sender post-ID, navnet på det egendefinerte feltet og den nye verdien.
Her er hva hele settet og caboodle ser ut!
Trinn 4 Tilpasse administrasjonskolonner
Her skal vi tilpasse listen som viser alle våre prosjekter. Legg til følgende kode i porteføljen-type.php-filen din:
add_filter ("manage_edit-portfolio_columns", "project_edit_columns"); funksjon project_edit_columns ($ kolonner) $ kolonner = array ("cb" => ""," title "=>" Project "," description "=>" Beskrivelse "," link "=>" Link "," type "=>" Type prosjekt "); return $ kolonner; add_action manage_posts_custom_column "," project_custom_columns "); funksjon project_custom_columns ($ kolonne) global $ post; switch ($ kolonne) tilfelle" beskrivelse ": the_excerpt (); break; case" link ": $ tilpasset = get_post_custom (); echo $ tilpasset ["projLink"] [0]; pause; sak "type": echo get_the_term_list ($ post-> ID, 'prosjekttype', ',', ')'; break; 
Her er vår nylig endrede prosjektliste. Etter vår krok for den første funksjonen (project_edit_columns ()), gjør vi noe ganske interessant når det gjelder å redigere kolonnene. WordPress plasserer kolonnene for en posttypes visningsliste i en matrise med en nøkkel og en verdi. Vi lager disse nøkkelverdiene i denne funksjonen. I neste funksjon (project_custom_columns ()), bruker vi en bryteretning for å ta tak i nøkkelen og deretter vise informasjonen vi vil ha basert på den. Som du kan se, akkurat som i forrige avsnitt, får vi det globale $ post array slik at vi kan få postens ID til å vise riktig tilpasset informasjon, som vår link og taksonomi.
Du har sikkert lagt merke til at antall tilfeller ikke stemmer overens med antall kolonner i vår $ kolonner array. Det er fordi for enkelte nøkler, som cb og tittel, har WordPress standardverdier som vi ikke vil overskrive.
Trinn 5 Legge til noen skjermfunksjoner
Før vi kommer til å lage en malside, vil jeg gi deg noen funksjoner jeg har inkludert for å vise prosjektene akkurat. Åpne opp din functions.php-fil og legg til følgende tre komponenter:
add_filter ('utdrag_lengde', 'my_excerpt_length'); funksjon my_excerpt_length ($ lengde) return 25; add_filter ('utdrag_more', 'new_excerpt_more'); funksjon new_excerpt_more ($ text) return "; funksjon portfolio_thumbnail_url ($ pid) $ image_id = get_post_thumbnail_id ($ pid); $ image_url = wp_get_attachment_image_src ($ image_id, 'skjermbilde'); returner $ image_url [0]; De to første hook / funksjon-parene er vanlige for WordPress-de endrer bare lengden på utsnittet og "mer tekst" -indikatoren, som jeg har erstattet med bare et mellomrom. Vær oppmerksom på at dette vil skje med alle innlegg, ikke bare porteføljeposten, og at hvis du bruker et barntema, kan dette ikke fungere.
Den tilpassede funksjonen, portfolio_thumbnail_url () tar inn et innleggs ID som argumentet og tar tak i skjermbildet av bildet vi lastet opp. Vi ringer det på vår mal side, så hold øye med det!
Trinn 6 Opprett en malside
Nå som vi har vår egendefinerte innleggstype alle satt opp i administrasjonen, er det på tide å lage en temaside slik at vi kan vise dem. For å oppnå dette, skal vi lage en mal med navnet "Portefølje" og deretter tildele malen til en side i WordPress. Selv om vi også kan opprette arkiver-portfolio.php for å oppnå det samme, vil vi ikke kunne legge til siden til en meny fra WordPress-admin, så denne ruten er best. Holde med WordPress navngivningskonvensjoner, opprett en ny fil som heter page-portfolio.php og legg til følgende kode:
Dette vil skape "Portfolio" -malen. Disse få linjene etablerer de viktigste delene av siden. Den første linjen lar WordPress vite at dette er en sidemaler som skal gå under navnet "Portefølje." Da, etter å ha ringt temaets overskrift, satte vi opp spørringen for å få tak i de siste 9 innleggene i typen portefølje. Den neste tingen å gjøre er å vise dem. Legg til denne koden til din side-portfolio.php-fil:
Portefølje av arbeid
: "rel =" lightbox [work] "href ="ID)?> "> : : "rel =" lightbox [work] "href ="ID)?> "> (Mer)
"> Besøk nettstedet
Live Link Utilgjengelig
Du vil legge merke til noen ting her: Først etter at vi er i løkken, må vi trimme fremmede tegn fra tittelen og innholdet vårt ved å bruke str_ireplace (). Jeg er ikke helt sikker på hvorfor de vises her, men fra det jeg kan fortelle dette er et nødvendig skritt. Du bør også merke at vi bruker lightbox. Selv om vi kunne legge til det selv (som jeg nok vil anbefale hvis dette var et plugin), siden vi endrer vårt eget tema, kan vi laste ned et av de mange lysboksen pluginene som er tilgjengelige i WordPress-depotet. Bare velg din favoritt!
Bortsett fra det, bør dette se ut som kjent hvem som har jobbet med WordPress-løkken. Det vi gjør her er å lage blokker med våre miniatyrbilder og beskrivelser, som kobler til (ved hjelp av lysboksen) skjermbildet for hver av de 9 prosjektene. Jeg har ikke koblet til andre sider (hvis du har mer enn 9 prosjekter) fordi jeg bare vil at brukerne skal se de siste 9 prosjektene. Du kan tillate brukere å komme til andre innlegg ved hjelp av posts_nav_link (), hvis du velger det.
Jeg bør også være oppmerksom på at jeg fjernet WordPress standard mer kobling fordi den var knyttet til en enkelt innleggsside, og jeg ønsket å bruke lightbox, så jeg konstruerte min egen.
Trinn 7 Styling vår porteføljetype
Her er det morsomme: å gjøre vår porteføljetype ser pen ut. Her er noen CSS som jeg har tatt med - du kan legge den til bunnen av style.css-arket, eller til vår nyopprettede portfolio.css-fil. Bare vær sikker på å bruke @importere å ringe portfolio.css øverst temaets stil.css (det fungerer ikke noe annet sted):
.element float: left; margin: 5px; bredde: 310px; bakgrunn: #EFEFEF; -moz-grense-radius: 7px; -webkit-grense-radius: 7px; border-radius: 7px; tekst-align: center; -moz-box-shadow: 0px 0px 6px # 999; -webkit-boks-skygge: 0px 0px 6px # 999; boks-skygge: 0px 0px 6px # 999; .item p text-align: left; .item p a text-align: left; font-weight: bold; .item img margin-top: 5px; tekst-align: center; border: 1px solid # 000000; maksimal bredde: 280px; / * selvklare flyter * / .group: etter innhold: "."; skjerm: blokk; høyde: 0; klare: begge; synlighet: skjult;
Hvis du vil referere til vår mal side, vil du se at hvert prosjekt er pakket inn i en div kalt "element", som vi nå bruker CSS til. Siden ingen to temaer er de samme, må du kanskje tilpasse ditt eget CSS litt, men her er et fint utgangspunkt for deg. Jeg har også tatt med en klasse for selvklarende flyter. Dette er en teknikk jeg har fra Dan Cederholm, og jeg synes det er litt mer elegant at standard "clearfix" -metoden for rydding av innhold etter flytende divs.
Konklusjon
Det er det! Du har nå en enkel portefølje ved hjelp av egendefinerte innleggstyper. Selv om dette ble bygget for å betjene mine behov, og jeg ønsket å holde ting enkelt, er mulighetene for dette uendelig som du kan skreddersy for å passe hva slags portefølje du har (skriving / artikler, fotografering, grafisk design, etc.). Hvis du ikke vil bruke lysboksen til å vise enkeltprosjektet, kan du også opprette en temaside med navnet single-portfolio.php, som deretter vil bruke koden i hvert enkelt prosjekt, ligner single.php for blogginnlegg.
