Share
Subsolurile sunt adesea un aspect neglijat de proiectare a unui site - când acestea pot fi de fapt la îndemână și informative. În acest tutorial vom trece prin câteva opțiuni pe care le puteți avea pentru site-ul dvs. WordPress.
Ca de obicei, cu aceste tutoriale, veți avea nevoie de un director WordPress. Până acum, dacă le-ați făcut, ar trebui să aveți deja o configurație! Dacă nu, există tutoriale despre rularea Wordpress local aici pentru Windows, și aici pentru OS X.
Vom trece prin modul de a crea un subsol static cu toate informațiile de care aveți nevoie, apoi o vom face dinamică, astfel încât să puteți edita totul prin WordPress Backend!
Descarca aceste imagini și plasați-le într-un folder nou în conținutul / temele de pe wp. Denumiți folderul "WPFooter".
Rapid, plasați acest cod într-un fișier nou 'style.css' în noul dosar WPFooter:
/ * Tema Nume: WPFooter Tema URI: http://net.tutsplus.com/ Descriere: Un foaier WordPress la îndemână. Versiune: 1.0 Autor: Harley Alexander Autor URI: http://www.baffleinc.com/ * /
Dacă deschideți directorul WordPress într-un browser, navigați la wp-admin / themes.php și selectați noua temă!
"
Vom arăta doar un antet scurt și o simplă buclă pentru asta. Mai târziu, în tutorial, vom trece prin mai multe Sidebars (unul pentru bara laterală, unul pentru subsol). Vom începe cu o bază ușoară:
<?php bloginfo('name'); ?><?php wp_title(); ?> „>
Știu că este o mulțime, dar toate lucrurile sunt de bază și, cu adevărat, în afară de ceea ce reprezintă tutorialul, nu este o afacere uriașă. Practic, unele informații de antet pentru un blog WordPress, un antet scurt (care va deveni o imagine frumoasă a antetului) și o buclă scurtă pentru afișarea conținutului.
În continuare, vom rămâne într-o bară laterală statică. Înlocuiți comentariul "Bara laterală aici" cu:
Aceasta este doar, din nou, bara laterală obișnuită. Anunțurile pe care le vom face mai târziu în codul CSS ... Acum avem nevoie de partea interesantă: subsolul.
Asa cum am spus mai sus, devine din ce in ce mai proeminent ca site-urile Web sa aiba footer mai informativ si mai util, decat doar o bara de nume de drepturi de autor. Deci, în schimb, o vom umple cu conținut pentru a îndrepta cititorii către alte pagini. La urma urmei, conținutul este rege, nu? Acesta este subsolul:
Arhive
Postări recente
Despre
Bună ziua, acest blog este despre o mulțime de junk. De fapt, descrierea este destul de explicativă: . Bucurați-vă de șederea dvs. și sperăm să vă vedem înapoi!
Link-uri
În cele din urmă ceva interesant!
Deja avem un subsol interesant. Nu prea arata ca un subsol chiar acum, deci hai sa sari in CSS!
Să mergem la o preludiu. Deschide stil.css și hai să obținem codificarea!
* marja: 0; umplutura: 0; contur: 0; corp fundal-culoare: # e3e3e3; padding: 30px 0; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif; .clearfix display: block; clar: ambele; lățime: 1px; #wrapper width: 960px; marja: 0 auto; fundal: #fff; padding: 30px 0;
Începem cu câteva informații de bază despre "resetare", care aliniază totul, face textul normal și definește o clasă care este "clarfixul" nostru.
Acum vom rezolva antetul. Amintiți-vă dosarul de imagini pe care l-ați dezarhivat la început? Există o imagine numită "mywebsite.png". Am fost leneș și am făcut o imagine cu unele efecte pentru această parte.
Acesta nu va afișa numele blogului dvs., dar va afișa "My Website". Această tehnică arată cum se realizează înlocuirea imaginii prin CSS în condiții de siguranță ...
h1 margine: 40px auto 0; lățime: 930px; poziție: relativă; top: -30px; h1 a culoare: # b3b7ba; text-decoration: nici unul; afișare: bloc; lățime: 203px; înălțime: 38px; text-liniuță: -999em; fundal: url (imagini / mywebsite.png) nu-repeta dreapta sus; float: dreapta;
După cum puteți vedea, modelul "a" a fost extins și blocat pentru a se încadra în imaginea de fundal a imaginii "Site-ul meu". Acesta este un mod rapid și murdar de a face acest lucru - de asemenea, cruce browser-ul cred!
Continuând, noi stilul de secțiune de conținut:
#content padding: 30px; plutește la stânga; lățime: 650px; h2 spațierea literelor: -2px; text-transform: majuscule; font-size: 16px; margin-bottom: 10px; .entrie margin-bottom: 20px; .artați o culoare: # 164774; text-decoration: nici unul;
Formatul începe deja să se formeze, dar Bara laterală și subsolul încă mai au nevoie de ceva de lucru și de de-squashifying!
Putem face ceva din stil la Sidebar, dar nu tot. Văzând că țintim spre widget-uri universale, cea mai mare parte a stilului pentru Widget-urile Sidebar poate fi făcut împreună cu Footer's.
#sidebar float: left; lățime: 220px; margine: 0 10px; padding-top: 30px; #sidebar> ul> li margin-bottom: 10px! IMPORTANT; #ads li afișare: inline-block; lățime: 100%; fundal: # f7f7f7; înălțime: 50px; text-align: centru; margin-bottom: 10px; culoare: gri; linia-înălțime: 50px; frontieră: 1px solid;
Dacă vă reîmprospătați, veți observa că este încă un pic cam ciudat. Să rezolvăm asta cu un stil pentru Footer și Sidebar
#footer clar: ambele; #footer div, #sidebar> ul> li float: stânga; lățime: 220px; margine: 0 10px; fundal: url (images / modalBox.png) repeat-y center top; culoare: #fff; #footer p padding: 10px; #footer a, #sidebar a culoare: #fff; text-decoration: nici unul; #foter h3, #sidebar h3 margin-bottom: 10px; fundal: url (imagini / modalBoxHeader.png) centru de top fără repetiție; înălțime: 14px; font-size: 12px; text-align: centru; culoare: #fff; font-weight: normal; text-shadow: # 000 1px 1px 3px; #footer ul, #sidebar ul> li> ul stil-style: none; padding: 10px; fundal: url (imagini / modalBoxFooter.png) fundul centrului nu se repetă; #footer ul li padding-bottom: 5px;
Asta-i cam nebun! Dar acum blogul dvs. WordPress ar trebui să arate mult mai interesant! Aceasta, de asemenea, împarte cele 4 secțiuni de subsol în 4 coloane - pentru interfața uimitoare, îngrijită!
Totul este gata! Aceasta este partea manuală a site-ului. Acum, asta a fost făcut, totuși, vom face un pas mai departe și vom face 100% gestionabil prin WordPress Admin.
Sidebars dinamice sunt o funcție fantastică încorporată în WordPress. Sunt ușor de folosit și, practic, oferă o modalitate de a gestiona mai mult conținutul dvs. printr-o interfață Web. Să facem bara noastră side.php compatibilă.
În primul rând, vom înlocui bucățile imense de cod care au alcătuit bara laterală și subsolul cu cod dinamic. Înlocuiți totul în cadrul #sidebar div> ul cu:
Și înlocuiți totul între diviziunea #footer div cu:
Dacă actualizați pagina dvs., totul va dispărea. Creați un fișier nou în directorul numit functions.php și să obținem codificarea!
Trebuie să creăm două funcții - atât "register_sidebar ()". Înregistrați unul pentru bara laterală actuală și una pentru subsol.
'Sidebar', 'before_widget' => '
Aceste matrice reprezintă seria de informații care se atașează fiecărei bare laterale. Numele (astfel încât să putem selecta cele diferite în WordPress Admin) și informațiile pe care să le punem înainte / după (container) fiecare widget și înainte / după fiecare antet. Deoarece codul nostru este specific pentru h3s, trebuie să-i spunem să înfășoare în h3s. Secțiunile subsolului nostru sunt divs, deci trebuie să le înfășurăm în divs în loc de implicit lis. Simplu! Dacă actualizați, este posibil să nu găsiți conținut care vă așteaptă. Dacă nu, vom rezolva asta în pasul următor.
După cum am spus, poate sau nu să fie mulțumit de așteptare. Acesta este modul în care îl editați. Accesați tabloul de bord WP și vizitați pagina widget-uri prin design (pentru WP 2.3+) (Tablou de bord> Design> Widgets). În coloana din dreapta, ar trebui să fie bara laterală!
Acum puteți săriți între ele, salvați modificări, revizuiți pagina dvs. și editați ușor conținutul printr-o interfață Web, în loc să trageți prin cod! Doar asigurați-vă că bara laterală "Footer" are doar 4 widgeturi maxime, deoarece altfel va începe sângerarea pe următoarea linie.
Deci, aici iei ultima ta scuză că nu ai un subsol interesant - acum știi cum să o faci cu ușurință. Este în esență o bara laterală suplimentară. Acest lucru economisește, de asemenea, o mulțime de spațiu prețios în bara laterală pe care o puteți umple cu lucruri mult mai importante, cum ar fi feed-uri, anunțuri etc. Dacă aveți un subsol interesant, anunțați-ne!
Accentsconagua