Share
Het mooie van WordPress is dat het niet beperkt hoe de inhoud wordt weergegeven, maar biedt een 'raamwerk' van manieren om dit te doen. Sterker nog, het is mogelijk om de weergave te veranderen op basis van de inhoud. Bij het schrijven van deze tutorial was het moeilijk om uit te leggen wat er aan de hand was ... Maar de beste manier is dit: de post zal in de loop worden weergegeven op basis van de inhoud ervan - of contextuele verschillen. Hoe dan ook, het bevat specifieke bestanden die overeenkomen met de categorie van het bericht.
In deze zelfstudie wordt ervan uitgegaan dat u een WordPress-engine uitvoert op een server waartoe u toegang hebt om bestanden te uploaden, bestanden te downloaden en naar te bladeren. Als u een lokale server op uw computer wilt uitvoeren met een WordPress-installatie, is hier een handleiding voor Windows en hier voor OS X.
Laat me wat dieper ingaan op wat we gaan doen. Veel WordPress-sites zijn tegenwoordig meer dan alleen een blog. Voor degenen die een blog, een nieuwssysteem en een portfolio integreren, zijn er vele manieren om onderscheid te maken tussen elk van deze berichten. Om te beginnen is de hoeveelheid meta-informatie die WordPress aan elke post hecht monumentaal. Datums, categorieën, aangepaste velden, opties, tags, aantal tags, etc. Het gaat door. Door een van deze te selecteren, kunt u WordPress manipuleren om bepaalde dingen weer te geven, zelfs wanneer de context verandert (dat wil zeggen, verschillende categorienaam, andere tag, enz.). De methode die ik ga geven, komt erachter wanneer een bepaalde categorie aan een bepaalde post is gekoppeld en breng dan een ander bestand in. Contextueel! Als het context is van een blog, laat het zien als een blogpost! Als het context is van een portfolio-item, geef het weer als een portfolio-item! Enzovoort, enzovoort. Je snapt het. Laten we gaan!
Ik heb een paar bestanden voorbereid; style.css, index.php en enkele afbeeldingen (bedankt Tuts-sites!). We gaan deze opbouwen om ons eindproduct te maken. Download ze en plaats de map in de map wp-content / themes. Ga nu naar het WordPress-dashboard, klik op 'ontwerp' of 'presentatie' als u nog in de steentijd leeft en selecteer het thema 'Contextbestanden'. Super goed! Nu is het geactiveerd kunnen we duiken in het bewerken van de bestanden en doorgaan met de tutorial.
Voor de methode om te werken, moet een groep berichten een bepaalde categorie hebben. Hiervoor gaf ik een paar van hen de categorie 'Blog', sommige 'hunNieuws', en liet de rest over als de portfolio-groep, zonder een specifieke categorie. Zorg ervoor dat u dit doet, anders zullen uw resultaten niet te gevarieerd zijn. Zorg er dus voor dat je berichten (voor deze tutorial tenminste) op de een of andere manier gegroepeerd zijn. Het is van vitaal belang!
De functionele manier om te beschrijven wat er gebeurt, is afhankelijk van de categorie, een specifiek bestand is opgenomen voor de luscode. De hiërarchie ziet er zo uit:
Een blogbericht ziet er als volgt uit:
Een nieuwsitem wordt als volgt weergegeven:
En alle andere berichten of portfolio-items zullen hierop lijken:
Let op de kleine watermerken in de rechterbovenhoek van elke post? Dat is het bewijs dat ons systeem zal werken!
Hoe dan ook. Tussen de body-tags hebben we een header en een lus nodig. Voeg dit toe:
"title =" Home ">
Vervolgens moeten we de categorie voor elk bericht krijgen. Hiervoor wordt een aangepaste WordPress / PHP-syntaxis gebruikt. Meestal kun je get_the_category gebruiken voor de waarde, maar je kunt ELKE categorie-informatie krijgen via deze methode (ondergaat of vervangt de opmerking in PHP):
foreach ((get_the_category ()) als $ categorie) $ categoryName = $ category-> cat_name. ";
Nu daarmee, moeten we deze waarde tegen een waarde controleren. Als u uw categorieën 'Blog' of 'hunNieuws' hebt genoemd, kunnen we de variabele $ categoryName nu vergelijken met exact die namen / waarden. Onthoud dat dit in de lus zit, dus deze controle wordt gemaakt voor elke afzonderlijke post.
if ($ categoryName == 'Blog') include (TEMPLATEPATH. '/ blogTemplate.php'); elseif ($ categoryName == 'theirNews') include (TEMPLATEPATH. '/ newsTemplate.php'); else (include (TEMPLATEPATH. '/ portfolioTemplate.php'));
Elke regel van de 3 hierboven is relatief hetzelfde. De PHP '==' betekent 'is gelijk aan'. Het is two = 's omdat bij gebruik van slechts één = een variabele definieert. Niet wat we willen. Als, elseif, en anders zijn een paar voorwaardelijke PHP-tags. U kunt meerdere elseif-instructies gebruiken als u meer dan drie bestanden wilt hebben!
Als de PHP is voltooid, kunnen we nu de eigenlijke bestanden maken die hierboven zijn opgenomen. Wat interessant is aan deze sjabloon, is dat je de hele loop, categorie en alles binnen een reeks PHP-tags kunt houden. rendement!
Deze bestanden zijn eigenlijk wat er in de loop gaat, bestaande uit loopsjabloontags. We kunnen dus elke categorie toewijzen met het watermerk rechtsboven, een andere klasse wordt toegepast op elk ander categoriebestand. Anders zijn dit allemaal eenvoudige WordPress-dingen. Maak een nieuw bestand met de naam 'blogTemplate.php' in de themamap en vul het met wat PHP-goedheid!
"title ="">
Gepost door | gearchiveerd onder
"> Meer lezen | |
Slechts een ding om op te merken. Ik weet dat het om SEO-redenen erg slecht is, maar the_content (") heeft de 2-en zodat er geen 'lees meer' wordt weergegeven. De 'Meer lezen'-link in de postMetaData maakt dit goed!
Dit is behoorlijk minimalistisch. De kop is ook kleiner!
Bezoek Source |
Eindelijk het laatste subsjabloonbestand.
; ?>/images/portfolio.png )
"title ="">
"> Bekijk project
En dat is al de PHP / HTML die u nodig heeft! Als u uw WordPress-pagina laadt, ziet het er nu ongeveer zo uit:
Merk op dat je de verschillen in elk bericht al kunt zien!
Nu om het mooi te maken! We beginnen met een aantal standaardcode. Dit is om het te basismodel te maken, dingen die we niet willen te verwijderen en algemene tags te stijlen (bijvoorbeeld headers, enzovoort).
een text-decoration: none; kleur: # b93a00; * marge: 0; opvulling: 0; body background: # 000; kleur: # 5b5b5b; font-family: "Lucida Grande", Lucida, Verdana, sans-serif; lettergrootte: 75%; hl, h2, h3, hla, h2a, h3a font-family: "Trebuchet MS", Arial, Helvetica; kleur: #fff; letter-spacing: -2 px; tekstdecoratie: geen; h1 a: hover, h2 a: hover, h3 a: hover color: # 8b8b8b; h2 font-size: 35px; margin-bottom: 10px; h3 font-size: 20px; kleur: # a8a8a8; letter-spacing: -1px; padding-bottom: 20px;
Nu hebben we wat structuur nodig op onze pagina.
#wrapper margin: 0 auto; breedte: 500 px; font-size: 11px; #header height: 150px; font-family: Georgia, 'Times New Roman', Times, serif; border-bottom: 1px solid; randkleur: # 222; #content padding-top: 20px; .post margin-bottom: 40px; minimale hoogte: 150 px;
Vervolgens voegen we de kleine blackground watermerken toe aan:
.blog background: url (images / blogbg.png) no-repeat rechtsboven; .portfolio background: url (images / portfoliobg.png) no-repeat rechtsboven; minimale hoogte: 150 px; .news background: url (images / newsbg.png) no-repeat rechtsboven; opvulling rechts: 100px;
Ons thema krijgt vorm! Het enige dat overblijft is enkele beeldstyling en de vormgeving van de postMetaData!
#header h1 font-size: 50px; padding-top: 30px; #header p.description font-style: italic; lettergrootte: 16px; .post img float: left; opvulling rechts: 10px; padding-bottom: 20px; .post p padding-bottom: 15px; .postInfo opvulling: 10px; .postMetaData opvulling: 10px; achtergrond: # 141414; marge: 10 px 0; breedte: 480 px; weergave: blok; beiden opschonen; .postMetaData a color: # 06f;
Het laatste gedeelte van de code is nodig, je thema zou er nu compleet uit moeten zien! Deze tutorial leert je een aantal dingen. Een veelzijdige manier om categorie-info te krijgen, hoe dit te gebruiken in combinatie met voorwaardelijke tags en PHP te groeperen!
Vorige week heb ik jullie allemaal gevraagd om een net ogend Dashboard / Desktop te maken. Jullie gaan helemaal FLIPEN als je hoort wat er in deze volgepakte handleiding zit! Meer focus op het Dashboard (ik zweer dat het cooler is dan het klinkt en vereist veel code), en ik zal zelfs ingaan op het maken van een stapel (los van het dock, sorry jqDock houdt niet van genesteld
Lees verder
jQuery voegt een heleboel coole functionaliteit toe aan je websites. Het kan verschillende dingen doen, van animatie tot AJAX. Het wordt meestal afgekeurd om sterk afhankelijk te zijn van jQuery om je sites te ontwerpen, maar het is leuk om zo nu en dan wild te gaan. In deze zelfstudie leer ik je hoe je jQuery gebruikt om een volledig gecodeerd Dashboard te maken, net als Leopard! Dit kan handig zijn bij het verbergen van een heleboel gadgets of widgets waar je geen ruimte voor hebt!
Lees verder
CSSEdit is wederom een fantastische web dev-app, die Apple's WebKit bij de tijd neemt om een fantastische real-time visuele CSS-bewerkingservaring te leveren. Maar dat is het gewoon! Mensen kennen het alleen als een visuele CSS-editor, terwijl het eigenlijk veel meer is! Ik gebruik deze 5 fantastische tips om mijn werk snel en soepel te laten verlopen.
Lees verder
in Werken met CMS's door Harley
WP_Query is een krachtig hulpmiddel om te bepalen wat er uit je lus komt. Vandaag ga ik je alles leren hoe je het kunt gebruiken om een 3-columned kranten-thema te maken met al je hoofdblogposten in de hoofdkolom en aan de zijkant een aantal berichten met een bepaalde categorie. We zullen de gebruiken 960 CSS-raamwerk voor de basis lay-out en reset van ons thema, zal het een hoop werk hakken van wat nodig is!
Lees verder
Accentsconagua
; ?>/images/portfolio.png )