Share
Wellicht de beste toevoeging aan WordPress 3.0 was die van Custom Post Types. Dit zorgde ervoor dat WordPress een CMS is die berichten en pagina's kan beheren en alles kan beheren wat de gebruiker gemakkelijk kan bedenken. U hoeft niet langer aangepaste velden aan berichten toe te voegen - u kunt op hoog niveau ondersteuning toevoegen aan uw eigen typen, door hun eigen themapaginabestanden en beheergebieden te maken. Een van de eerste dingen die ik deed met het gebruik van aangepaste berichttypen was het vernieuwen van mijn portfolio en vandaag laat ik je zien hoe ik het heb gedaan!
We hebben onlangs een aantal handige hulpmiddelen voor het maken van "Instant" aangepaste berichttypen getoond. Vandaag gaat het erom om daadwerkelijk een project te bouwen met CPT's vanuit het niets? We doen er alles aan, van het maken van het aangepaste type - tot het stylen voor gebruik in het thema. De CSS (en CSS3!) Die ik gebruik, moet generiek genoeg zijn voor de meeste thema's, maar in het geval dat dit niet het geval is, voel je vrij om het te veranderen! Dit is bedoeld als een startpunt voor iedereen, dus voel je vrij om creatief te worden!
Het eerste dat opvalt, is dat we bij het maken van een aangepast berichttype een aantal opties hebben voor hoe we ze willen benaderen; De twee belangrijkste implementaties die u zou kunnen overwegen zijn:
Er zijn voors en tegens voor elk. In deze zelfstudie, omdat we integreren met ons thema, maken we het onderdeel van het thema en bellen we alles wat we nodig hebben via het bestand functions.php.
Opmerking van de ontwikkelaar: omdat we dit rechtstreeks in ons thema zullen bouwen, wil dat nog niet zeggen dat dit de juiste manier voor u is? denk aan het eindgebruik van je thema. Als de kans groot is dat uw gebruikers in de toekomst van thema gaan veranderen, of als u uw thema publiceert als een openbaar of premium product dat door veel mensen kan worden gebruikt, wilt u waarschijnlijk uw aangepaste berichttype toevoegen als een op zichzelf staand bestand dat mensen kunnen meenemen zonder al te veel door uw code te graven.
Denk er gewoon zo over, als uw thema het enige is dat uw aangepaste berichttypen laadt en u van thema verandert, zijn de gegevens van het aangepaste berichttype niet bruikbaar; Het zal nog steeds in de database aanwezig zijn, maar het zal niet op een zinvolle manier in nieuwe thema's verschijnen. Soms is dit niet mogelijk als u een thema echt grondig vernieuwt om een CPT te gebruiken door veel aanpassingen en sjablonen op te nemen, maar op zijn minst te overwegen wat gebruikers misschien moeten doen om het gebruik van hun gegevens op de lange termijn te behouden.
Laten we beginnen!
Zoals ik hierboven al zei, zullen we dit toevoegen aan ons huidige thema (ik gebruik mijn eigen aangepaste thema), dus het eerste wat we moeten doen is naar ons thema gaan en de functions.php het dossier. We gaan onze aangepaste posttypecode in een ander bestand plaatsen (zodat het eenvoudiger te lezen / beheren is), dus we zullen dat bestand bovenaan ons functiedossier noemen:
require_once ( 'portfolio-type.php');
Nu gaan we twee bestanden toevoegen aan ons thema: portfolio-type.php en portfolio.css. Zoals je waarschijnlijk wel kunt raden, zal al onze CSS voor het nieuwe type in het laatste bestand terechtkomen.
Voordat we het nieuwe type registreren, moeten we ondersteuning toevoegen voor een integraal onderdeel van de portfolio-presentatie-featured afbeeldingen. Nadat u de openings- en sluitings-php-tags aan portfolio-type.php hebt toegevoegd, voegt u de volgende code toe:
Accentsconagua
if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); set_post_thumbnail_size (280, 210, true); // Normale berichtminiatuurlijsten add_image_size ('screen-shot', 720, 540); // Scherm met volledig scherm Deze regels, na controle om te controleren of uw specifieke installatie postminiaturen ondersteunt, voegen ze toe aan uw huidige thema en stellen vervolgens een aantal standaardgroottes in. set_post_thumbnail_size () zal, zoals de naam al doet vermoeden, de standaardgrootte voor de miniatuur instellen. De volgende regel (add_image_size () maakt een andere afbeelding die we 'screenshot' kunnen noemen, die 720x540 is. We zullen deze afbeeldingen gebruiken bij het weergeven van onze portfolio.
Hier gebeurt het magische - we zullen WordPress nu vertellen over ons nieuwe berichttype. Voeg de volgende code toe aan 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); De eerste regel hier is een haak in WordPress die onze functie zal oproepen, portfolio_register () bij initialisatie. De functie zelf stelt een reeks argumenten in om te verzenden met ons aangepaste berichttype. Het belangrijkste is dat we onze beheerderslabels instellen door dit type alle mogelijkheden van een standaard WordPress-bericht te geven, URL-rewrites toe te staan (voor mooie permalinks) en ondersteuning toe te voegen voor de titel, editor en uitgelichte afbeeldingsvelden. U kunt meer lezen over alle argumenten voor register_post_type () hier.
Na het instellen van de array arguments ($ args), geven we dat samen met de typenaam door aan de functie register_post_type ().
Het laatste wat we in deze sectie doen, is een aangepaste taxonomie maken voor ons nieuwe type. Voeg de volgende coderegel toe aan uw portfolio-type.php-bestand:
register_taxonomy ("project-type", array ("portfolio"), array ("hierarchical" => true, "label" => "Project Types", "singular_label" => "Project Type", "rewrite" => true )); Hiermee wordt de nieuwe taxonomie 'projecttype' gemaakt en toegepast op het 'portfolio' van het posttype. U kunt meer lezen over register_taxonomy () hier.
We zouden niet veel van een aangepast type hebben zonder wat extra info toe te voegen aan het bericht. We voegen die informatie toe in de vorm van aangepaste velden. Concreet voegen we een extra veld toe voor een link naar meer informatie over het project of naar het project zelf. Voeg de volgende code toe aan uw portfolio-type.php-bestand:
add_action ("admin_init", "portfolio_meta_box"); function portfolio_meta_box () add_meta_box ("projInfo-meta", "Project Options", "portfolio_meta_options", "portfolio", "side", "low"); function portfolio_meta_options () global $ post; if (defined ('DOING_AUTOSAVE') && DOING_AUTOSAVE) retourneert $ post_id; $ custom = get_post_custom ($ post-> ID); $ link = $ custom ["projLink"] [0]; ?> 
Deze code maakt het vak "Projectopties" dat we hier zien. Eerst gebruiken we de WordPress-haak admin_init om onze functie te bellen portfolio_meta_box () wanneer de WordPress-beheerder is gemaakt. Onze functie voegt een nieuw vak toe aan ons portfolio-type, dat kan worden gevuld met alles. Wat de box bevat, wordt gedekt door het derde argument, dat een callback-functie is. In dit geval wordt onze functie genoemd portfolio_meta_options ().
In portfolio_meta_options () we zullen een formulierveld maken dat zal worden gebruikt om de link van het project vast te leggen. Het eerste dat we doen is de wereldwijde pakken $ bericht array, zodat we de aangepaste velden voor elke post die we bewerken kunnen krijgen. In onze volgende regel controleren we of WordPress de post- of aangepaste velden niet opslaat; Als dat zo is, kunnen we onnauwkeurige resultaten zien als we de aangepaste gegevens verzamelen.
Als WordPress geen opslag uitvoert, nemen we de aangepaste velden voor het huidige bericht en maken we een formulierveld met die info. $ aangepaste (wat is teruggekomen van get_post_custom () is een 2D-array waarbij de sleutel is wat we het formulierveld voor onze aangepaste naam noemen. Bekijk ons tekstvak voor de link. Je zult merken dat de naam overeenkomt met de index die we in onze index noemen $ aangepaste matrix. U zult ook merken dat we geen afzonderlijke formulier- of verzendknop hebben. Dit veld wordt toegevoegd aan het formulier dat wordt gebruikt om het volledige bericht te bewerken.
Hoewel we er hier alleen een maken, kunt u er natuurlijk zoveel maken als u wilt.
De aangepaste gegevens opslaan
Nu we onze aangepaste metabox hebben gemaakt, is het tijd om een functie te maken waarmee de informatie wordt opgeslagen. Voeg de volgende coderegels toe aan uw portfolio-type.php-bestand:
add_action ('save_post', 'save_project_link'); function save_project_link () global $ post; if (defined ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; else update_post_meta ($ post-> ID, "projLink", $ _POST ["projLink"]); Ten eerste, zoals gewoonlijk, hebben we onze haak - dit keer om onze functie te bellen wanneer het bericht is opgeslagen. In de functie zelf nemen we opnieuw de $ bericht array zodat we de post-ID kunnen krijgen en kunnen controleren of het bericht automatisch wordt opgeslagen. Als we deze regel niet opnemen, doen we dat onze gegevens verliezen, dus het is belangrijk dat we dat houden.
Als het bericht niet wordt bijgewerkt, slaan we onze aangepaste velden op met update_post_meta (), het verzenden van het bericht-ID, de naam van het aangepaste veld en de nieuwe waarde.
Dit is hoe de hele set en caboodle eruit zien!
Stap 4 Beheerderskolommen aanpassen
Hier gaan we de lijst aanpassen met al onze projecten. Voeg de volgende code toe aan uw portfolio-type.php-bestand:
add_filter ("manage_edit-portfolio_columns", "project_edit_columns"); function project_edit_columns ($ columns) $ columns = array ("cb" => ""," title "=>" Project "," description "=>" Description "," link "=>" Link "," type "=>" Type project ",); 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 $ aangepast ["projLink"] [0]; pauze; hoofdletter "type": echo get_the_term_list ($ post-> ID, 'project-type', ", ',',"); pauze; 
Dit is onze nieuw aangepaste projectlijst. Na onze haak voor de eerste functie (project_edit_columns ()), we doen iets heel interessants in termen van het bewerken van de kolommen. WordPress plaatst de kolommen voor de weergavelijst van een berichttype in een array met een sleutel en een waarde. We maken die sleutel / waarde-paren in deze functie. In de volgende functie (project_custom_columns ()), gebruiken we een switchinstructie om de sleutel te pakken en vervolgens de informatie weer te geven die we willen. Zoals u kunt zien, krijgen we net als in het vorige gedeelte het wereldwijde overzicht $ bericht array zodat we de ID van het bericht kunnen ophalen om aangepaste informatie correct weer te geven, zoals onze link en taxonomie.
U hebt waarschijnlijk gemerkt dat het aantal gevallen niet overeenkomt met het aantal kolommen in onze $ columns matrix. Dat komt omdat voor bepaalde sleutels, zoals cb en titel, WordPress standaardwaarden heeft die we niet willen overschrijven.
Stap 5 Enkele weergavefuncties toevoegen
Voordat we een sjabloonpagina gaan maken, wil ik u enkele functies geven die ik heb opgenomen om de projecten precies goed weer te geven. Open uw function.php-bestand en voeg de volgende drie componenten toe:
add_filter ('excerpt_length', 'my_excerpt_length'); function my_excerpt_length ($ length) keer terug 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'); return $ image_url [0]; De eerste twee haak / functie-paren zijn hetzelfde voor WordPress - ze veranderen eenvoudig de lengte van het fragment en de "meer tekst" -indicator, die ik heb vervangen door slechts een spatie. Houd er rekening mee dat dit gebeurt met alle berichten, niet alleen met het portfoliostation, en dat als u een kindthema gebruikt dit mogelijk niet werkt.
De aangepaste functie, portfolio_thumbnail_url () neemt het ID van een bericht als argument en grijpt de screenshot van de afbeelding die we hebben geüpload. We zullen het op onze sjabloonpagina noemen, dus houd het in de gaten!
Stap 6 Maak een sjabloonpagina
Nu we ons aangepaste berichttype hebben ingesteld in de beheerder, is het tijd om een themapagina te maken zodat we ze kunnen weergeven. Om dit te bereiken, gaan we een sjabloon maken met de naam 'Portfolio' en vervolgens de sjabloon toewijzen aan een pagina in WordPress. Hoewel we ook archives-portfolio.php kunnen maken om hetzelfde te bereiken, kunnen we die pagina niet toevoegen aan een menu van de WordPress-beheerder, dus deze route is het beste. Blijf bij de conventies voor naamgeving van WordPress en maak een nieuw bestand met de naam page-portfolio.php en voeg de volgende code toe:
Hiermee wordt de sjabloon 'Portfolio' gemaakt. Deze paar regels bepalen de belangrijkste delen van de pagina. De eerste regel laat WordPress weten dat dit een paginasjabloon is met de naam 'Portfolio'. Vervolgens, na het aanroepen van de header van het thema, stellen we de vraag in om de laatste 9 posts van het type portfolio te pakken. Het volgende wat je moet doen is ze weergeven. Voeg deze code toe aan uw page-portfolio.php bestand:
Portfolio van werk
: "rel =" lightbox [werk] "href ="ID)?> "> : : "rel =" lightbox [werk] "href ="ID)?> "> (Meer)
"> Bezoek de site
Live Link niet beschikbaar
U zult hier een paar dingen opmerken: ten eerste, nadat we op de hoogte zijn, moeten we vreemde "" tekens uit onze titel en inhoud verwijderen str_ireplace (). Ik weet niet precies waarom ze hier verschijnen, maar van wat ik kan vertellen is dit een noodzakelijke stap. Je zou ook moeten opmerken dat we lightbox gebruiken. Hoewel we het zelf zouden kunnen toevoegen (wat ik waarschijnlijk zou aanraden als dit een plug-in zou zijn), omdat we ons eigen thema aanpassen, kunnen we een van de vele lightbox-plug-ins downloaden die beschikbaar zijn in de WordPress-repository. Kies gewoon je favoriet!
Afgezien daarvan, zou dit er hoe dan ook bekend uit moeten zien wie met de WordPress-lus heeft gewerkt. Wat we hier doen, is het maken van blokken met onze miniaturen en beschrijvingen, die koppelen aan (met behulp van lightbox) het screenshot voor elk van de 9 projecten. Ik heb geen links naar andere pagina's opgenomen (voor het geval je meer dan 9 projecten hebt) omdat ik alleen wil dat mijn gebruikers de laatste 9 projecten zien. Je kunt gebruikers toestaan om andere berichten te gebruiken via posts_nav_link (), als je dat wilt.
Ik moet ook opmerken dat ik de standaard link meer van WordPress verwijderd heb omdat deze gekoppeld is aan een enkele berichtpagina, en ik wilde lightbox gebruiken, dus ik heb mijn eigen pagina gemaakt.
Stap 7 Ons type portfolio samenstellen
Hier is het leuke gedeelte: ons portfolio-type er mooi uit laten zien. Hier is wat CSS dat ik heb toegevoegd - je kunt het toevoegen aan de onderkant van je styles.css-sheet, of in ons nieuw gemaakte portfolio.css-bestand. Zorg ervoor dat u het gebruikt @importeren om portfolio.css bovenaan de stijl van je thema te callen. css (het werkt nergens anders):
.item float: links; marge: 5px; breedte: 310 px; achtergrond: #EFEFEF; -moz-border-radius: 7px; -webkit-border-radius: 7px; grensradius: 7px; text-align: center; -moz-box-shadow: 0px 0px 6px # 999; -webkit-box-shadow: 0px 0px 6px # 999; vakschaduw: 0px 0px 6px # 999; .item p text-align: left; .item p a text-align: left; lettertype: vet; .item img margin-top: 5px; text-align: center; rand: 1px vast # 000000; max-width: 280px; / * self-clear floats * / .group: after content: "."; weergave: blok; hoogte: 0; beiden opschonen; zichtbaarheid: verborgen;
Als u naar onze sjabloonpagina verwijst, ziet u dat elk project is ingepakt in een div genaamd "item", waar we nu CSS op toepassen. Omdat geen twee thema's hetzelfde zijn, moet je misschien je eigen CSS een beetje aanpassen, maar dit is een goed startpunt voor jou. Ik heb ook een klasse toegevoegd voor zelfopruimende praalwagens. Dit is een techniek die ik kreeg van Dan Cederholm, en ik denk dat het iets eleganter is dat de standaard "clearfix" -methode voor het wissen van inhoud na zwevende divs.
Conclusie
Dat is het! U hebt nu een eenvoudig portfolio met behulp van aangepaste berichttypen. Hoewel dit werd gebouwd om aan mijn behoeften te voldoen, en ik dingen eenvoudig wilde houden, zijn de mogelijkheden hiervoor eindeloos aangezien je het kunt afstemmen op het soort portfolio dat je hebt (schrijven / artikelen, fotografie, grafisch ontwerp, enz.). Als u lightbox niet wilt gebruiken om het afzonderlijke project weer te geven, kunt u ook een themapagina maken met de naam single-portfolio.php, die de code vervolgens binnen elk afzonderlijk project toepast, net als single.php voor Blog berichten.
