Share
Voetteksten zijn vaak een over het hoofd gezien aspect van het ontwerpen van een site - wanneer ze eigenlijk best handig en informatief kunnen zijn. In deze zelfstudie bespreken we enkele opties die u kunt gebruiken voor uw WordPress-site.
Zoals gewoonlijk heb je met deze tutorials een WordPress-map nodig. Als je ze nu al hebt gedaan, zou je al één setup moeten hebben! Als dat niet het geval is, zijn er tutorials over het lokaal uitvoeren van Wordpress voor Windows en hier voor OS X..
We zullen doornemen hoe u een statische voettekst kunt maken met alle informatie die u nodig hebt, waarna we deze dynamisch maken, zodat u alles kunt bewerken via WordPress Backend!
Download deze afbeeldingen en plaats ze in een nieuwe map in de wp-content / thema's. Noem de map 'WPFooter'.
Plaats deze code snel in een nieuw bestand 'style.css' in de nieuwe WPFooter-map:
/ * Theme Name: WPFooter Theme URI: http://net.tutsplus.com/ Beschrijving: Een handige WordPress-footer. Versie: 1.0 Auteur: Harley Alexander Auteur URI: http://www.baffleinc.com/ * /
Als u uw WordPress-map opent in een browser, navigeert u naar wp-admin / themes.php en selecteert u het nieuwe thema!
"
We laten hier alleen een korte koptekst en een eenvoudige lus zien. Later in de zelfstudie gaan we door met het gebruik van meerdere Sidebars (één voor de zijbalk, één voor de voettekst). We beginnen met een eenvoudige basis:
<?php bloginfo('name'); ?><?php wp_title(); ?> ">
Ik weet dat dat veel is, maar het zijn allemaal vrij basale dingen, en echt naast het punt waar de tutorial over gaat, dus het is geen grote deal. Eigenlijk wat header-informatie voor een WordPress-blog, een korte header (dat wordt een mooie header-afbeelding) en een korte lus om de inhoud weer te geven.
Vervolgens plakken we in een statische zijbalk. Vervang de opmerking 'zijbalk hier' met:
Dit is gewoon, nogmaals uw normale zijbalk. De advertenties die we vrij later in CSS-code maken ... Nu hebben we het interessante onderdeel nodig: de voettekst.
Zoals ik hierboven al zei, wordt het steeds prominenter voor websites om meer informatief en bruikbare voetteksten te hebben, dan alleen een domme auteursrechtnaambalk. Dus in plaats daarvan vullen we het met inhoud om lezers naar andere pagina's te leiden. Inhoud is tenslotte koning, toch? Dit is de voettekst:
archief
recente berichten
Wat betreft
Hallo, deze blog gaat over heel veel rotzooi. In feite is de beschrijving behoorlijk vanzelfsprekend: . Geniet van je verblijf en we hopen je terug te zien!
Links
Eindelijk iets interessants!
We hebben al een voettekst die interessant is. Het lijkt op het moment echter nog niet zo op een voetnoot, dus laten we in de CSS springen!
Laten we wat moois gaan maken. Open style.css en laten we coderen!
* marge: 0; opvulling: 0; overzicht: 0; body achtergrondkleur: # e3e3e3; opvulling: 30px 0; lettertype: 12px "Lucida Grande", Lucida, Verdana, schreefloos; .clearfix weergave: blok; beiden opschonen; breedte: 1px; #wrapper width: 960px; marge: 0 auto; achtergrond: #fff; opvulling: 30px 0;
We beginnen met een aantal 'reset'-info, die alles uitlijnt, de tekst normaal maakt en een klasse definieert die onze' clearfix 'is.
Nu gaan we de koptekst repareren. Weet je nog de afbeeldingenmap die je aan het begin hebt uitgepakt? Er staat daar een afbeelding met de naam 'mywebsite.png'. Ik was lui en maakte een afbeelding met wat effecten voor dit onderdeel.
De naam van uw blog wordt niet weergegeven, maar 'Mijn website' wordt weergegeven. Deze techniek laat zien hoe het vervangen van afbeeldingen via CSS veilig gebeurt ...
h1 margin: 40px auto 0; breedte: 930 px; positie: relatief; top: -30px; h1 a color: # b3b7ba; tekstdecoratie: geen; weergave: blok; breedte: 203 px; hoogte: 38 px; text-indent: -999em; achtergrond: url (images / mywebsite.png) no-repeat right top; zweven: rechts;
Zoals u kunt zien, is de 'a' uitgebreid en geblokkeerd zodat deze past op de achtergrondafbeelding van de afbeelding 'Mijn website'. Dit is een snelle en vuile manier om het te doen - ik denk ook dat ik een browser kan gebruiken!
Verderop, we stylen nu de inhoudssectie:
#content opvulling: 30px; zweven: links; breedte: 650 px; h2 letter-spacing: -2px; text-transform: hoofdletters; lettergrootte: 16px; margin-bottom: 10px; .entry margin-bottom: 20px; .entry a color: # 164774; tekstdecoratie: geen;
De lay-out begint al te vormen, maar de zijbalk en voettekst hebben nog steeds wat werk en de-squashing nodig!
We kunnen sommige stijlen toepassen op de zijbalk, maar niet alles. Aangezien we streven naar universele widgets, kunnen de meeste styling voor de Sidebar-widgets worden gedaan samen met de voettekst..
#sidebar float: left; breedte: 220 px; marge: 0 10px; padding-top: 30px; #sidebar> ul> li margin-bottom: 10px! BELANGRIJK; #ads li display: inline-block; breedte: 100%; achtergrond: # f7f7f7; hoogte: 50px; text-align: center; margin-bottom: 10px; kleur: grijs; regelhoogte: 50px; rand: 1px vast;
Als je opfrist, zul je merken dat het nog steeds een beetje slordig is. Laten we dit oplossen met wat styling voor de voettekst en zijbalk
#footer duidelijk: beide; #footer div, #sidebar> ul> li float: left; breedte: 220 px; marge: 0 10px; achtergrond: url (images / modalBox.png) herhaalt-y middenbovenkant; kleur: #fff; #footer p opvulling: 10px; #footer a, #sidebar a color: #fff; tekstdecoratie: geen; #footer h3, #sidebar h3 margin-bottom: 10px; achtergrond: url (images / modalBoxHeader.png) no-repeat center top; hoogte: 14 px; lettergrootte: 12px; text-align: center; kleur: #fff; font-gewicht: normaal; text-shadow: # 000 1px 1px 3px; #footer ul, #sidebar ul> li> ul lijststijl: geen; opvulling: 10px; achtergrond: url (images / modalBoxFooter.png) no-repeat center bottom; #footer ul li padding-bottom: 5px;
Dat is een blok van een blok! Maar nu moet je WordPress-blog er een stuk interessanter uitzien! Dat verdeelt ook de 4 footer secties in 4 kolommen - voor een mooie, nette gebruikersinterface!
Helemaal klaar! Dat is het handmatige deel van de site gedaan. Nu dat echter is gebeurd, gaan we nog een stap verder gaan en het voor 100% beheersbaar maken via WordPress Admin.
Dynamic Sidebars zijn een fantastische ingebouwde functie van WordPress. Ze zijn eenvoudig te gebruiken en bieden in feite een manier om meer van uw inhoud via een webinterface te beheren. Laten we onze index.php zijbalkcompatibel maken.
Ten eerste vervangen we de enorme stukjes code die onze zijbalk en voettekst vormen met dynamische code. Vervang alles binnen de #sidebar div> ul door:
En vervang alles tussen de #footer div door:
Als u uw pagina vernieuwt, verdwijnt alles. Maak een nieuw bestand in de map met de naam functions.php, en laten we coderen!
We moeten twee functies maken - beide 'register_sidebar ()'. Registreer er een voor de eigenlijke zijbalk en een voor de voettekst.
'Sidebar', 'before_widget' => '
Deze arrays vormen de reeks informatie die aan elke zijbalk moet worden gekoppeld. De naam (zodat we de verschillende kunnen selecteren in WordPress Admin), en de informatie die vóór / na (container) elke widget moet worden geplaatst, en vóór / na elke header. Omdat onze code specifiek is voor h3s, moeten we zeggen dat deze moet worden ingepakt in h3s. Onze footer-secties zijn divs, dus we moeten ze in divs inpakken in plaats van in de standaard lis. Eenvoudig! Als u de pagina vernieuwt, vindt u mogelijk al dan niet inhoud die op u wacht. Zo niet, dan lossen we dat in de volgende stap op.
Zoals ik al zei, kan er al dan niet inhoud wachten. Dit is hoe je het bewerkt. Ga naar het WP-dashboard en bezoek de widgetspagina via ontwerp (voor WP 2.3 of hoger) (Dashboard> Ontwerp> Widgets). In de rechterkolom moet uw zijbalk staan!
U kunt nu daartussen overslaan, wijzigingen opslaan, uw pagina opnieuw bezoeken en de inhoud eenvoudig bewerken via een webinterface in plaats van trawl door code! Zorg er wel voor dat uw 'Voettekst'zijbalk slechts 4 widgets max heeft, anders zal het op de volgende regel gaan bloeden.
Dus hier neemt je je laatste excuus om geen interessante voettekst te hebben - je weet nu hoe je het gemakkelijk moet doen. Het is in wezen een extra zijbalk. Dit scheelt ook een heleboel kostbare ruimte in je zijbalk die je kunt vullen met veel belangrijker dingen zoals feeds, mededelingen, etc. Als je zelf een interessante voettekst hebt, laat het ons dan weten!
Accentsconagua