Share
Footers er ofte et oversett aspekt ved å designe et nettsted - når de faktisk kan være ganske praktisk og informativ. I denne opplæringen vil vi gå gjennom noen alternativer du kan ha for ditt WordPress-nettsted.
Som vanlig, med disse opplæringene, trenger du en WordPress-katalog. Ved nå, hvis du har gjort dem, bør du allerede ha ett oppsett! Hvis ikke, er det opplæringsprogrammer for å kjøre Wordpress lokalt her for Windows, og her for OS X.
Vi skal gå gjennom hvordan du lager en statisk footer med all den informasjonen du trenger, så gjør vi det dynamisk, slik at du kan redigere alt via WordPress Backend!
nedlasting disse bildene, og legg dem i en ny mappe i wp-innholdet / temaene. Navn mappen 'WPFooter'.
Sett raskt denne koden i en ny fil 'style.css' i den nye WPFooter-mappen:
/ * Tema navn: WPFooter Theme URI: http://net.tutsplus.com/ Beskrivelse: En praktisk WordPress-bunntekst. Versjon: 1.0 Forfatter: Harley Alexander Forfatter URI: http://www.baffleinc.com/ * /
Hvis du åpner WordPress-katalogen din i en nettleser, navigerer du til wp-admin / themes.php, og velger det nye temaet.!
"
Vi viser bare en kort overskrift og en enkel sløyfe for dette. Senere i opplæringen, vil vi gå gjennom å ha flere sidefelt (en for sidebjelken, en for bunnteksten). Vi starter med en enkel base:
<?php bloginfo('name'); ?><?php wp_title(); ?> ">
Jeg vet det er mye, men det er alt ganske grunnleggende ting, og egentlig foruten poenget med hva opplæringen handler om, så er det ikke en stor sak. I utgangspunktet noen headerinfo for en WordPress-blogg, en kort overskrift (som blir et fint headerbilde) og en kort sløyfe for å vise innholdet.
Deretter holder vi oss fast i en statisk sidefelt. Erstatt 'sidebar her' kommentere med:
Dette er bare igjen en vanlig sidebar. Annonsene vi skal lage ganske senere i CSS-kode ... Nå trenger vi den interessante delen: bunnteksten.
Som jeg sa ovenfor, blir det mer og mer fremtredende for nettsteder å ha mer informative og nyttige footers, heller enn bare en dum opphavsrettsnavnetavn. Så i stedet skal vi fylle det med innhold til direkte lesere til andre sider. Tross alt er innholdet konge, ikke sant? Dette er bunnteksten:
Arkiv
Siste innlegg
Handle om
Hei, denne bloggen handler om en masse søppel. Faktisk er beskrivelsen ganske selvforklarende: . Nyt oppholdet, og vi håper å se deg tilbake!
lenker
Endelig noe interessant!
Allerede har vi en bunntekst som er interessant. Det ser ikke ut som en bunntekst akkurat nå, så la oss hoppe inn i CSS!
La oss få litt prettiness å gå. Åpne style.css, og la oss få koding!
* margin: 0; polstring: 0; oversikt: 0; kropp bakgrunnsfarge: # e3e3e3; polstring: 30px 0; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif; .clearfix display: block; klare: begge; bredde: 1px; #wrapper width: 960px; margin: 0 auto; bakgrunn: #fff; polstring: 30px 0;
Vi starter med noen grunnleggende 'reset' info, som justerer alt, gjør teksten normal og definerer en klasse som er vår 'clearfix'.
Nå skal vi fikse opp toppteksten. Husk bildemappen du unzipped i starten? Det er et bilde deri kalt 'mywebsite.png'. Jeg var lat, og laget et bilde med noen effekter for denne delen.
Det vil ikke vise navnet til bloggen din, men det vil vise 'Mitt nettsted'. Denne teknikken viser hvordan bildet utskifting er gjort via CSS trygt ...
h1 margin: 40px auto 0; bredde: 930px; stilling: relativ; topp: -30px; h1 a farge: # b3b7ba; tekst-dekorasjon: ingen; skjerm: blokk; bredde: 203px; høyde: 38px; tekstindeks: -999em; bakgrunn: url (bilder / mywebsite.png) no-repeat right top; flyte: høyre;
Som du kan se, har "a" blitt utvidet og blokkert for å passe til bakgrunnsbildet på "Min nettside" -bilde. Dette er en rask og skitten måte å gjøre det på - også krysser nettleseren jeg tror!
Fortsett, vi stiler nå innholdsdelen:
#content polstring: 30px; flyte: venstre; bredde: 650px; h2 brevavstand: -2px; tekst-transformer: store bokstaver; skriftstørrelse: 16px; margin-bunn: 10px; .entry margin-bottom: 20px; .entry a color: # 164774; tekst-dekorasjon: ingen;
Utformingen begynner allerede å skape, men Sidebar og Footer trenger fortsatt litt arbeid, og de-squashifying!
Vi kan gjøre noen av styling til sidefeltet, men ikke alt av det. Å se som vi sikter mot universelle widgets, kan det meste av stylingen til Sidebar Widgets gjøres sammen med Footer s.
#sidebar float: left; bredde: 220px; margin: 0 10px; polstring: 30px; #sidebar> ul> li margin-bottom: 10px! VIKTIG; #ads li display: inline-block; bredde: 100%; bakgrunn: # f7f7f7; høyde: 50px; tekst-align: center; margin-bunn: 10px; farge: grå; linjehøyde: 50px; grense: 1px solid;
Hvis du oppdaterer, vil du legge merke til at det fortsatt er litt squashy. La oss fikse det med noen styling for Footer og Sidebar
#footer clear: both; #footer div, #sidebar> ul> li float: left; bredde: 220px; margin: 0 10px; bakgrunn: url (bilder / modalBox.png) repeat-y sentertopp; farge: #fff; #footer p padding: 10px; #footer a, #sidebar a color: #fff; tekst-dekorasjon: ingen; #footer h3, #sidebar h3 margin-bottom: 10px; bakgrunn: url (bilder / modalBoxHeader.png) no-repeat center top; høyde: 14px; skriftstørrelse: 12px; tekst-align: center; farge: #fff; font-weight: normal; tekstskygge: # 000 1px 1px 3px; #footer ul, #sidebar ul> li> ul listestil: none; polstring: 10px; bakgrunn: url (bilder / modalBoxFooter.png) no-repeat midtbunn; #footer ul li polstring-bunn: 5px;
Det er en pokker i en blokk! Men nå må WordPress-bloggen din se mye mer interessant! Det splitter også de 4 bunnseksjonene i 4 kolonner - for fint, pent UI!
Ferdig! Det er den manuelle delen av nettstedet som er gjort. Nå som det er gjort skjønt, skal vi ta dette skrittet videre og gjøre det 100% håndterbart gjennom WordPress Admin.
Dynamiske sidebjelker er en fantastisk innebygd funksjon av WordPress. De er enkle å bruke, og gir i utgangspunktet en måte å administrere mer av innholdet ditt via et webgrensesnitt. La oss lage vår index.php sidebar-kompatible.
For det første skal vi erstatte de store kodene med kode som består av sidefeltet og bunnteksten med dynamisk kode. Erstatt alt i #sidebar div> ul med:
Og erstatt alt mellom #footer div med:
Hvis du oppdaterer siden din, forsvinner alt. Opprett en ny fil i katalogen som heter functions.php, og la oss få koding!
Vi må opprette to funksjoner - både 'register_sidebar ()'. Registrer en for den faktiske sidefeltet, og en for fotfeltet.
'Sidebar', 'before_widget' => '
Disse arrays er serien av informasjon som skal festes til hvert sidebjelke. Navnet (slik at vi kan velge de forskjellige i WordPress Admin), og informasjonen som skal legges før / etter (container) hver widget, og før / etter hver overskrift. Fordi koden vår er spesifikk for h3s, må vi fortelle den å pakke inn i h3s. Våre footer-seksjoner er divs, så vi må pakke dem inn i divs i stedet for standard lis. Enkel! Hvis du oppdaterer, kan du eller ikke finne innhold som venter på deg. Hvis ikke, vil vi fikse det i neste trinn.
Som jeg sa, kan det være eller ikke være noe å vente på. Slik redigerer du det. Gå til WP Dashboard, og besøk widgetsiden via design (For WP 2.3+) (Dashboard> Design> Widgets). I høyre kolonne skal det være din sidefelt!
Du kan nå hoppe over dem, lagre endringer, besøke siden din og redigere innholdet enkelt via et webgrensesnitt i stedet for å trawle gjennom kode! Bare vær sikker på at "Footer" -feltet bare har 4 widgets maks, da det ellers vil begynne å bløde på neste linje.
Så her tar du din siste unnskyldning for ikke å ha en interessant bunntekst - du vet nå hvordan du gjør det enkelt. Det er egentlig en ekstra sidebar. Dette sparer også mye verdifullt plass i sidebjelken din, som du kan fylle ut med mye viktigere ting, for eksempel feeds, merknader, etc. Hvis du har en interessant footer selv, kan du få beskjed om det!
Accentsconagua