We hebben ook de relevante div's en wrappers voor de volgende sectie geopend.
Styling the Header
Als u nu naar uw WordPress-installatie gaat, ziet het er ongeveer zo uit:
Vergeet niet dat we alle kleurstijlen erin opnemen deepblue.css zodat we later eenvoudig verschillende kleurenschema's kunnen maken. Al het andere komt binnen style.css.
Algemene stijlen
Het eerste dat ik altijd in mijn stylesheet opneem, is een browser-reset, gevolgd door een basisstijl voor alinea's, lijsten, kopteksten en links.
* opvulling: 0; marge: 0; body font-family: Arial, Helvetica, sans-serif; p font-size: 0.9em; regelhoogte: 1.5em; margin-bottom: 10px; ul, ol margin: 0 0 10px 10px; li font-size: 0.9em; regelhoogte: 1.5em; lijst-stijl-positie: binnen; margin-bottom: 3px; img border: none; h1, h2, h3, h4, h5, h6 font-weight: normaal; h3, h4 margin: 15px 0 2px 0; h4, h5, h6 font-weight: bold; a: link, a: visited text-decoration: none; a: hover, a: active, a: focus text-decoration: onderstrepen; overzicht: geen;
Dit zou best rechttoe rechtaan moeten zijn voor iedereen met een basiskennis van HTML en CSS. We hebben de marges en padding voor alle (*) elementen op 0 gezet om de standaardstijlen te overschrijven die elke browser op een pagina toepast. Vervolgens voegen we nieuwe marges, lettertypegrootten en lijnhoogten toe voor de belangrijkste elementen om de leesbaarheid tussen deze elementen te vergroten.
Header Styling
Vervolgens maken we een beetje een lay-out:
#wrap margin: 0 auto; breedte: 980 px; #head margin: 25px 0; overloop verborgen; #head h1 float: links; marge links: 20 px; #head h3 font-family: Georgia, "Times New Roman", Times, serif; font-size: 0.8em; lettertype-stijl: cursief; zweven: rechts; regelhoogte: 1.7em; text-align: right; marge: 0 20px 0 0; breedte: 500 px;
De #wikkelen element is de container die alles vasthoudt. We gebruiken een breedte van 980px (dit is ongeveer zo hoog als we kunnen gaan terwijl het nog steeds voldoet aan 1024x768-resoluties). En we hebben gebruikt marge: 0 auto; om het in de browser te centreren.
De titel en taglines (h1 en h3 respectievelijk) worden vervolgens naar beide zijden van de container gedreven.
#hoofd heeft een eigenschap van overloop verborgen; zodat het de zwevende elementen correct houdt. Typisch, zal een div zich niet wikkelen rond drijvende kinderen (zoals we hier hebben). Zie de afbeelding hieronder als een voorbeeld (het geel staat voor de toegewezen marge #hoofd):
Navigatie Styling
#nav border-top-left-radius: 15px; border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; border-bottom: none; beiden opschonen; opvulling: 0 20px; breedte: 939 px;
Bekijk de voorbeeldafbeeldingen bovenaan de zelfstudie en u zult merken dat we afgeronde hoeken gebruiken bovenaan het navigatiegedeelte. In plaats van dit effect te bereiken via een aantal afbeeldingen en extra HTML-tags, gaan we de nieuwe CSS3 gebruiken border-radius eigenschap om een straal van 15px aan beide bovenste hoeken te geven.
Huidige browsers ondersteunen deze eigenschap echter nog niet, maar Mozilla- en Webkit-gebaseerde browsers hebben die van zichzelf -moz-border-radius en -webkit-border-radius eigenschappen die we ook kunnen gebruiken om de afgeronde hoeken aan het werk te krijgen in Firefox 3, Safari en Chrome. Internet Explorer en Opera gebruiken eenvoudig een vierkante rand totdat ze worden ondersteund border-radius.
Opmerking: als u deze leverancierspecifieke eigenschappen in uw CSS gebruikt, stopt het valideren van uw stylesheet. Maar omdat het alleen deze zijn die de validatie stoppen - who cares?
Verderop, stylen we de lijstitems in de navigatie om inline (horizontaal) weer te geven:
#nav ul margin: 0; #nav ul li display: inline; lettergrootte: 1em; regelhoogte: 1.3em; margin-right: 25px; #nav ul li a: link, #nav ul li a: visited display: -moz-inline-stack; weergave: inline-block; lettertype: vet; tekstdecoratie: geen; opvulling: 20px 10px; #nav ul li a: hover, #nav ul li a: active, #nav ul li a: focus outline: none;
Merk op dat we gebruiken weergave: -moz-inline-stack; op de links. Dit is puur voor Firefox 2 en lager, die (om wat voor reden dan ook) niet ondersteunen weergave: inline-block; - zelfs IE6 ondersteunt het!
We geven veel vulling aan de koppelingen om het klikbare gebied te vergroten (in tegenstelling tot het opvullen van de li in plaats daarvan).
Bekijk nu de pagina in uw browser en het zou er zo uit moeten zien. Beter, maar nu heeft het wat kleur nodig!
Wat kleur
Sla eerst de volgende afbeelding op in de / Stijlen / deepblue / map als bg.jpg.
En deze afbeelding in dezelfde map als trans.png (het is eigenlijk een donkere 1px semi-transparante afbeelding).
Nu open /styles/deepblue.css, en typ:
/ * Innovatie standaardstijl - deepblue.css * / body background: url ("deepblue / bg.jpg") no-repeat # 101010 top gecentreerd; kleur: # 333; a: link, a: visited color: # 5c6e80; #head h1 color: #eee; #head h3 color: #ddd; #nav background: url ("deepblue / trans.png") herhalen; rand: 1px vast # 111; #nav ul li a: link, #nav ul li a: visited color: #ddd; #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: bezocht background: url ("deepblue / trans.png") herhalen; kleur: #eee; #nav ul li a: hover, #nav ul li a: active, #nav ul li a: focus color: #eee; We hebben de grote achtergrondafbeelding ingesteld op de hoofdtekst (en hebben deze zo gemaakt dat deze niet beweegt wanneer u bladert), de transparante afbeelding wordt gebruikt als achtergrond voor de navigatie en we stellen ook een aantal lettertypekleuren in.
Bekijk een voorbeeld en je hebt nu iets als:
Portfolio berichten
Voordat we de bovenkant van onze startpagina maken waar onze twee nieuwste portfolio-items beschikbaar zijn, hebben we een paar berichten nodig om te testen. Het thema gebruikt een paar 'Aangepaste velden' om extra informatie weer te geven voor de portfolio-items:
-
datum (de datum waarop het werk is voltooid) -
cliënt (voor wie het werk was) -
link (naar een live versie van je werk) -
voorvertoning (URL van een afbeelding van 930 px breed van uw werk) -
Preview-full (grotere versie van het werk, wordt weergegeven in een lightbox)
Maak een nieuwe blogpost, waarbij de titel de naam van het project is (zoals in de afbeelding hierboven) en voer wat inhoud over het werk in. Plaats het bericht in uw categorie 'Portfolio'.
Voordat je het bericht opslaat, scrol je omlaag naar het gedeelte 'Aangepaste velden':
Voer hier alle aangepaste velden hierboven in. Alleen de voorvertoning veld is verplicht. U kunt de volgende afbeeldingen gebruiken voor uw voorvertoning veld als u er nog geen heeft (rechtsklikken en opslaan):
Nadat u de velden hebt ingevuld, kunt u het bericht publiceren. Herhaal dit proces totdat je ten minste twee berichten hebt (bij voorkeur meer).
De startpagina
Nu we aan alle vereisten voldoen, kunnen we eindelijk het hoofdgedeelte van de startpagina coderen. In page-home.php, typ het volgende:
laatste projecten
query_posts (); is een WordPress-functie voor het ophalen van specifieke berichten uit de database. Zoals je kunt zien in de argumenten voor de functie (de delen tussen haakjes), vertellen we WordPress dat je alleen 2 berichten uit de categorie Portfolio krijgt ($ ts_portfolio_cat krijgt de informatie van de pagina met opties die we hebben gemaakt).
Met terwijl();, we zijn begonnen met de 'WordPress Loop'. Hier kunnen we WordPress vertellen welk deel van elke post we nodig hebben.
$ Teller ++; $ preview = get_post_meta ($ post-> ID, 'preview', true); $ date = get_post_meta ($ post-> ID, 'date', true); ?>
Op de eerste regel hebben we er een toegevoegd aan het loket (we zullen dit binnenkort gebruiken). $ Teller ++; is van korte hand om te schrijven $ teller = $ teller + 1;
We gebruiken dan de get_post_meta (); functies om onze aangepaste velden 'preview' en 'date' uit de post te krijgen - die in de $ voorvertoning en $ date variabelen.
">
Hierboven hebben we een div gemaakt met een werk klasse voor het portfolio-item dat moet worden bewaard. Maar merk op dat we dat ook controleren als onze $ teller is gelijk aan 2 (dit is het tweede portfolio-item), we voegen een andere klasse toe aan de div met de naam laatste. Deze les komt van pas als we dit gedeelte stylen.
Vervolgens voeren we de voorbeeldafbeelding uit:
Als er een voorbeeldafbeelding bestaat, dan zijn we ...
"> ; ?>/inc/thumb.php?src=<?php echo $preview; ?>& w = 450 & h = 210 & zc = 1 & q = 100 )
De the_permalink (); functie wordt gebruikt om de link naar het huidige bericht uit te voeren.
Vervolgens voeren we de voorbeeldafbeelding uit. Maar we gebruiken het ook via de TimThumb-resizer om het formaat van de afbeelding te wijzigen naar 450 px in de breedte en 210 px in hoogte (van de 930 px-afbeelding in werkelijkheid). Merk op hoe we gebruiken bloginfo (template_directory); om ervoor te zorgen dat WordPress onze themamap controleert (het is een equivilant van de TemplatePath we gebruikten in het vorige deel van de serie).
We moeten nu gewoon de tekstregel uitvoeren die onder de afbeelding (de titel en de datum) valt:
"> ($ Date)";?>
Dit is relatief eenvoudig. We gebruiken the_permalink (); om de link voor het huidige bericht te krijgen. de titel(); wordt gebruikt om de titel van het huidige bericht te krijgen.
We controleren vervolgens of een aangepast datumveld is ingevoerd (in de $ date variabele) voor deze post. Als dat zo is, voeren we het uit.
Share
Accentsconagua
; ?>/inc/thumb.php?src=<?php echo $preview; ?>& w = 450 & h = 210 & zc = 1 & q = 100 )
