Share
Am proiectat site-ul nostru și l-am convertit într-un fișier HTML static în ultimele două tutoriale. Ultima parte a acestei serii vom seta WordPress ca un CMS și vom converti fișierul HTML într-un șablon compatibil WordPress.
Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.
Mergeți pe WordPress.org și descărcați cea mai recentă versiune de WordPress.
Dezarhivați arhiva și mutați toate fișierele din dosarul WordPress pe serverul dvs. local sau web.
Creați o bază de date MySQL goală și amintiți-vă toate informațiile de conectare, veți avea nevoie de ea în aproximativ 3 secunde.
Deschideți browserul dvs. și treceți la directorul care conține fișierul dvs. WordPress. Vi se va solicita să creați un fișier de configurare. Clic Creați fișierul de configurare
Acum trebuie să introduceți informațiile bazei de date MySQL și să rulați instalarea.
Dacă totul a mers bine la instalare, vi se va prezenta noul dvs. login. Copiați noua parolă și conectați-vă în backend-ul WordPress. Odată ce vă conectați la backend veți fi sugerat să vă schimbați parola. Faceți asta acum!
Acum, că suntem configurați cu noul nostru utilizator putem începe să configuram WordPress pentru a fi folosit ca un CMS. Mai întâi vom permite permalinks-urilor să ne facă căile frumoase. Pune deasupra Setări și faceți clic pe săgeata din dreapta pentru a afișa mai multe opțiuni și faceți clic pe permalinks.
Vom folosi opțiunile Day and name, deci selectați opțiunea respectivă și apăsați Salvează modificările.
WordPress ne oferă un post fals și o pagină falsă, așa că vom șterge aceste și vom adăuga orice pagini de care avem nevoie.
Treceți peste Mesaje și faceți clic pe săgeată pentru a afișa opțiunile. Click pe Editați | ×. Dacă hover peste Hello World! vor apărea câteva opțiuni suplimentare, dați clic pe Șterge apoi confirmați acțiunea.
Notă: Acest pas nu este necesar, îmi place să păstrez totul curat și ordonat.
Extindeți Pagini opțiuni și faceți clic pe Editați apoi ștergeți Despre pagină.
În Pagini stânga bara laterală faceți clic pe Adăuga nou astfel încât să putem adăuga paginile noastre.
Completați titlul și conținutul dorit pe pagina dvs. și apoi după ce ați terminat lovit Publica în partea dreaptă a paginii.
Dacă nu doriți ca pagina să fie vizibilă, puteți lovi Salveaza schita pentru a lucra mai târziu.
Vrem să creăm câteva pagini de tip Child of Pricing & Signup, astfel încât atunci când ajungeți la realizarea paginilor pentru care trebuie să modificăm o opțiune în pagina editorului de pagini.
În captura de ecran de mai sus am subliniat opțiunea care trebuie schimbată. Vrem ca Planul ieftin să fie o pagină copilătoare de prețuri și înscriere, astfel încât să le spunem WordPress că prețurile și înscrierea sunt părinții planului ieftin. Acest lucru ne va permite să creați o navigație specifică pentru tema noastră.
Odată ce ați creat toate paginile dvs., secțiunea Editare a paginilor ar trebui să arate ca imaginea de mai jos.
Tot ceea ce avem nevoie pentru configurare pentru acum a fost de configurare, astfel încât să putem acum trece la convertirea fișierul nostru HTML într-un șablon WordPress.
Deschideți editorul și navigați la dosarul rădăcină WordPress.
Vrem să navigăm la teme wp-content>.
Vom șterge tema clasică. Din nou, aceasta este doar pentru a păstra toate dosarele noastre ordonate și ordonate. Deci, ștergeți implicit clasic și duplicat. Redenumiți implicit la wordpress_cms.
Accesați folderul wordpress_cms și ștergeți rtl.css și folderul cu imagini.
Apoi, deschide-te style.css și ștergeți totul, dar secțiunea principală a comentariilor din partea de sus a fișierului.
Noi ne-am creat pe noi style.css fișier care trăiește în interiorul unui dosar. Acest style.css fișierul spune WordPress câteva informații despre șablonul nostru, chiar dacă avem propriile noastre style.css fișier, trebuie să-l păstrăm pe acesta.
Editați style.css fișier pentru a arăta ceva similar cu codul de mai jos. Schimba informațiile mele pentru a se potrivi cu informațiile dvs.!
/ * Tema Nume: WordPress CMS Tema URI: http://your-site.com Descriere: Folosind WordPress ca un CMS. NetTuts + Tutorial! Versiune: 1 Autor: Matt Vickers URI autor: http://envexlabs.com/ * /
Salvați acest fișier și reveniți la browser. Extindeți Aspect bara laterală și faceți clic pe tematică. Ar trebui să vedeți tema WordPress CMS ca o opțiune. Clic Activati pentru a face WordPress utilizarea noii noastre teme.
WordPress este acum gata să accepte site-ul nostru pre-codat!
Dacă navigați la rădăcina WordPress din browserul dvs., ar trebui să vedeți pagina principală WordPress fără a aplica stiluri.
Copiați folderele inc și img și tot conținutul în WordPress_cms.
Trebuie să îi spunem WordPress că vrem să folosim foile de stil în loc să fie deschise header.php
Vom șterge niște coduri inutile. Am comentat zonele de care aveți nevoie pentru a fi șterse, deci vă rugăm să consultați codul de mai jos.
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> >/ ">
De asemenea, puteți șterge din eticheta corporală. Ar trebui să avem un fișier de antet destul de simplu, deci vă permite să adăugați cele 2 fișiere css în tema noastră.
Chiar sub eticheta titlului vom folosi eticheta de legătură normală.
Veți observa că folosim o funcție numită bloginfo (). Această funcție este utilizată pentru a obține informații despre blogul dvs. curent. Putem muta serverele sau să schimbăm structura de directoare în viitor, astfel încât nu dorim să punem căi grele în foile de stil astfel încât să trecem o valoare de template_url care returnează calea șablonului nostru actual. Acest lucru este foarte puternic dacă intenționați să creați un șablon pe care alți utilizatori îl vor folosi pentru că nu știți cum este setat WordPress.
Dacă încărcați site-ul, trebuie să vedeți că unele dintre stilurile noastre implicite din foaia de stil sunt aplicate pe site.
Apoi, deschide-te footer.php și ștergeți tot între comentarii și wp_footer ().
De asemenea, deschideți-vă sidebar.php și ștergeți totul după comentarii. Suntem gata să copiem peste containerele noastre HTML fișierele noastre WordPress.
Deschideți index.html fișier din tutorialul nostru precedent și copiați totul între
Etichete. Inserați acest cod în header.php.Pentru a face lucrurile mai ușoare, permiteți ștergerea tuturor etichetelor și a conținutului din interiorul fiecărui container, astfel încât să rămână numai diviziile pentru containere.
Acesta este locul unde se poate obține un pic dificil. Trebuie să cuprindem acest cod între 4 fișiere. Am comentat în cazul în care fiecare piesă trebuie să meargă, deci mergeți mai departe și copiați și lipiți fiecare secțiune în fișierul în care aparține.
Bine, doar pentru a vă asigura că totul funcționează așa cum ar trebui, verificați dacă fiecare fișier este completat cu conținutul corespunzător. Fișierele dvs. ar trebui să arate ca exemplele de mai jos.
header.php
><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?> sidebar.php
footer.php
Dacă paginile dvs. arată bine, permiteți-le să meargă mai departe. Dacă nu, arătați-le ca exemplele de mai sus.
Dacă vă întoarceți în browser și adăugați la sfârșitul adresei și apăsați pe Enter. Acest lucru ar trebui să vă ducă la pagina dvs. despre.
Vom începe cu crearea antetului și a elementelor noastre de navigare, deci dacă nu îl deschideți deja, deschideți-l header.php
În interiorul header_container trebuie să adăugăm eticheta noastră h1 # logo.
Noi folosim bloginfo () funcționează din nou, dar de data aceasta luăm numele blogului nostru.
Dacă vă reîmprospătați ar trebui să vedeți logo-ul nostru minunat! Acum trebuie să adăugăm navigația noastră.
În loc să codificăm greu în elementele noastre de navigare, vom folosi o funcție construită în WordPress numită wp_list_pages (). Acest lucru ne va permite să controlam ce elemente de pagină dorim să afișăm, precum și să creăm linkuri către fiecare dintre aceste pagini.
Transmitem câteva opțiuni la această funcție, astfel încât să putem avea WordPress listează paginile exact așa cum ne dorește.
Prima opțiune pe care o trimitem este title_li. Implicit, WordPress generează un titlu li care afișează Pagini. Nu vrem acest lucru, așa că trimitem doar o valoare necompletată.
A doua opțiune este adâncimea. Din nou, în mod implicit, WordPress va afișa o listă a fiecărei pagini care este inclusă, inclusiv paginile copilului. Nu vrem ca acest lucru să se întâmple, așa că vom trece o variabilă de 1, astfel încât WordPress va afișa numai pagini de nivel superior.
Valoarea finală este inclusă. Nu vrem să afișăm fiecare pagină pe care am creat-o, dorim să afișăm numai Despre, Preturi și înregistrare și Contact. Transmitem ID-urile pentru fiecare pagină pe care dorim să o afișăm. Codurile de identificare din exemplul respectiv nu se potrivesc cu ID-ul paginii dvs. AȘEFImați-vă că le schimbați la ID-ul dvs.
Pentru a obține codul paginilor navigați la secțiunea de editare a paginii. Când plasați cursorul peste linkul de pagină, identificatorul poate fi găsit în link. adică: wp-admin / page.php? action = editează & post = 15
Toate opțiunile disponibile pot fi găsite la http://codex.WordPress.org/Template_Tags/wp_list_pages
Dacă reîmprospătați pagina, ar trebui să avem o navigație bună.
Suntem norocoși, putem folosi această funcție exactă pentru a avea grijă de bara noastră laterală, precum și de navigarea în subsolul nostru. Trebuie doar să facem câteva modificări la opțiunile pe care le trimitem pentru a se potrivi fiecărei nevoi.
Deschide sidebar.php și scrie un pic de cod în sidebar_container.
post_parent) wp_list_pages ('title_li = & child_of ='. $ post-> post_parent); ?>
Vrem doar să afișăm navigarea bara laterală dacă pagina curentă este o pagină copil. Facem acest lucru verificând dacă pagina curentă are o valoare atribuită postului_parent. Dacă pagina nu este copil, această valoare va fi 0.
Informațiile despre ambele postări și pagini sunt găzduite în $ postare variabil. Dacă print_r ($ post) veți putea vedea toate informațiile despre postarea care vă este disponibilă.
Acum, când verificăm un părinte post, trebuie să enumerăm toți copiii părintelui nostru. Pentru a face acest lucru vom transmite o variabilă de child_of și vom transmite ID-ul curent post-părinte.
Dacă ID-ul nostru de mamă este de 5 spunem wp_list_pages () pentru a afișa fiecare pagină care are un ID post-părinte de 5. Este foarte util atunci când se ocupă de navigarea pe mai multe niveluri.
Apoi, vom reuni repede subsolul nostru și apoi vom trece la afișarea unor conținut pe paginile noastre. Acest lucru va trage intregul site impreuna si putem incepe sa punem atingerea finala pe noul site condus de WordPress.
Deschide footer.php și pentru ultima dată adăugați wp_list_pages () funcţie.
Drepturi de autor Gear'd © 2009
Această funcție este exact aceeași cu cea a antetului nostru de navigare, dar în loc să folosim include includeți exclude pentru a elimina toate elementele principale de navigare principale din subsolul nostru de navigare.
Codurile de identificare din exemplul respectiv nu se potrivesc cu ID-ul paginii dvs. AȘEFImați-vă că le schimbați la ID-ul dvs.
Un ultim fișier de șabloane care trebuie modificat înainte de a fi terminat. Deschide post.php și ștergeți totul între ele get_header () și get_sidebar ().
Aici vom adăuga conținutul nostru content_container
Când este vorba de afișarea mesajului și a conținutului paginii WordPress utilizează un set de funcții special numit The Loop. Pe scurt, este nevoie de conținutul dvs. și formate-l, pregătindu-l pentru a fi afișat utilizatorului final.
În interiorul containerului nostru de conținut vom adăuga o declarație if și o buclă.
Mai intai verificam daca vom avea postari, daca facem sa ne bifam prin fiecare post si sa setam diverse functii pe care le putem folosi pentru a afisa continutul.
În interiorul bucla noastră în timp ce noi vom adăuga tot conținutul nostru rămas.
post_parent):?>post_parent); ?>
Folosim câteva funcții noi pentru a afișa conținutul paginii noastre. Lucru frumos despre WordPress este că multe dintre funcții folosesc limbajul englez pentru convențiile de numire.
Aveam nevoie de titlul paginii, așa că vom folosi titlul() pentru ao afișa. Putem, de asemenea, să luăm titlul oricărui post sau pagină utilizând get_the_title ($ POST_ID) și transmiterea codului postului, deoarece este doar variabilă.
Vrem doar să afișăm a doua rubrică dacă suntem pe o pagină copil, așa că folosim în cazul în care ($ post-> post_parent) din nou, pentru a verifica dacă suntem pe o pagină copilărească și, dacă suntem, vom folosi titlul acelui părinte post get_the_title ().
Nu în ultimul rând, folosim continutul() pentru a afișa orice conținut pe care îl are pagina.
Așteaptă, bara noastră laterală pare să fie în locul greșit de pe pagină, așa că ia-o get_sidebar () și mutați-o dedesubt get_header (). Acum, bara noastră laterală vine înaintea conținutului nostru.
Legătura se termină
Dacă încărcați rădăcina instalării WordPress în browserul dvs., ar trebui să fiți întâmpinați cu o eroare Nu a fost găsită.
Acest lucru se datorează faptului că, în mod implicit, pagina principală a WordPress este o listă a tuturor postărilor dvs. Nu folosim WordPress pentru blogging, așa că trebuie să-i spunem lui WordPress să folosească una din paginile noastre.
Întoarceți-vă la backend-ul WordPress și încărcați-l Citind pagina în Setări. Prima opțiune este Ecranul Front Page și opțiunea selectată ar trebui să fie Ultimele Mesaje. Vrem să selectăm o pagină statică și să folosim meniul derulant pentru a schimba pagina principală în funcție de postul dorit. Pentru acest exemplu voi îndruma pagina noastră Despre.
Salvați modificările și reîncărcați pagina de root pe care o instalați WordPress. Ar trebui să vă redirecționeze către pagina Despre.
Următorul lucru pe care îl veți observa este că navigația noastră nu mai arată o stare activă, chiar dacă suntem pe pagina potrivită. Acest lucru se datorează faptului că pentru pagina noastră statică folosim o clasă activă. wp_list_pages () atribuie o valoare diferită pentru stările active, așa că trebuie doar să adăugăm câteva clase în foile noastre de stil. Cele două clase pe care le vom adăuga sunt .current_page_item și .current_page_parent.
ul.nav li.activă a, ul.nav li.current_page_item a, ul.nav li.current_page_parent a #sidebar_container ul li.activă a, #sidebar_container ul li.current_page_item aMergeți mai departe și folosiți codul de mai sus pentru a adăuga clasele atât la navigarea de sus, cât și la cea laterală. Reîmprospătați pagina și ar trebui să aveți o stare activă pentru orice pagină în care vă aflați în prezent.
Încă două schimbări și putem încheia acest lucru.
Pagina noastră de prețuri și înscriere este într-adevăr doar un titlu pentru paginile copilului său, dar WordPress îl tratează ca pe o pagină proprie. Vrem să redirecționăm utilizatorul la pagina planului gratuit atunci când dă clic pe Pricing & Signup.
Unul dintre multe lucruri minunate despre WordPress este capabilitatea plugin-ului. Există 1000 de plugin-uri care sunt scrise pentru WordPress care adaugă funcționalități nesfârșite care nu sunt disponibile din cutie. Vom instala un plugin de redirecționare pe care îl putem folosi pentru a redirecționa utilizatorul.
Pluginul pe care îl vom folosi poate fi descărcat aici: http://WordPress.org/extend/plugins/redirect/. Descărcați pluginul și mutați folderul de redirecționare în wp-content / plugins.
Acum trebuie să activați plugin-ul în backend-ul WordPress pentru al putea folosi. În backend-ul dvs. faceți clic pe Plugin-uri și ar trebui să fii redirecționat către o pagină cu toate pluginurile disponibile.
Găsiți pluginul nostru de redirecționare și apăsați Activati. Pluginul nostru este acum activat.
Fiecare plugin funcționează diferit, deci asigurați-vă că citiți instrucțiunile pentru fiecare înainte de a începe să le utilizați. Pluginul nostru de redirecționare folosește câmpuri personalizate pentru a spune WordPress care post pe care dorim să-l redirecționăm și unde. Mergi la Pagini și faceți clic pe editați sub pagina noastră de prețuri și înscriere.
Chiar sub editorul textarea este secțiunea Custom Fields. Prima intrare pe care o vom da o valoare de redirecționare, astfel încât WordPress știe că vrem să redirecționăm, iar a doua intrare va fi adresa paginii noastre Planul gratuit. După ce ați terminat lovit Adăugați câmpul personalizat și asigurați-vă că Actualizare pagină în partea dreaptă sus.
Dacă reveniți la browserul dvs. și faceți clic pe Pricing & Signup, veți fi redirecționat (ă) la pagina Planului gratuit.
Sortarea tuturor
Prelevarea noastră de prețuri și înregistrarea pare puțin cam necorespunzătoare. Planul nostru gratuit este localizat ultima dată când ar trebui să fie în partea de sus. Putem seta ordinea de post chiar în susținut, astfel încât să încărcați pagina principală a Pagini și să treceți cu mouse-ul peste planul gratuit și faceți clic pe Quick Edit.
Câmpul pe care dorim să îl actualizăm este Ordin. Modificați valoarea de la 0 la 1 și apăsați pe Actualizare pagină. Faceți același lucru pentru planurile ieftine (ordine 2) și scumpe (comanda 3) care actualizează ordinea în consecință.
Actualizați browserul nostru pentru a vedea noile actualizări.
Acest lucru se aplică și în cazul navigației pe antet și în subsol, astfel încât dacă nu vă place ordinea în care se află, nu ezitați să le schimbați.
Îmi plac lucrurile personalizate
Câmpurile personalizate sunt minunate. Ne-au permis să transmitem informații specifice pentru fiecare post. Putem adăuga imagini la postarea noastră utilizând Media Uploader, dar pentru acest exemplu vom folosi câmpuri personalizate pentru a transmite informații către fișierul nostru page.php.
Deschideți pagina Despre în editorul de pagini WordPress.
Vom folosi Media Uploader pentru a încărca o imagine care să fie utilizată pentru antetul nostru atât de aproape Încărcați / Inserare faceți clic pe pictograma imagine.
Voi încărca banner.gif pe care l-am folosit înainte de a da un clic Selectati fisierele și găsiți-o pe computer.
Odată ce ați încărcat fișierul, trebuie să vi se prezinte informații despre imaginea dvs. În partea de jos a acestei ferestre modale ar trebui să vedeți o intrare numită Link URL și calea spre imagine. Vrem să copiem această adresă URL. Dacă această intrare este goală, puteți face clic pe butonul URL pentru fișier chiar mai jos și va actualiza intrarea.
Odată ce ați copiat această cale, putem închide această fereastră și mergem în secțiunea Câmpuri personalizate. Prima intrare pe care o vom folosi este header_image, iar a doua valoare este calea către fișierul nostru.
Adăugați câmpul personalizat apăsând Adăugați câmpul personalizat și Actualizare pagină în colțul din dreapta sus.
Deschide page.php și găsiți header_image div.
Vrem să verificăm dacă există o imagine care trebuie să fie afișată și, dacă există, vom apuca calea și vom afișa imaginea.
ID, "header_image", adevărat); dacă ($ image):?>
Mai întâi folosim get_post_meta () pentru a atribui calea imaginii noastre variabilei $ image.
Primul argument pe care îl trimitem get_post_meta () este ID-ul paginii pe care ne aflăm. A doua valoare este numele câmpului personalizat, care în cazul nostru este header_image. Ultimul argument spune WordPress că dorim să revenim doar la un câmp particularizat.
Apoi verificăm dacă $ image este gol. Dacă nu există un câmp personalizat numit header_image, nu afișăm imaginea, altfel vom afișa header_image div, precum și imaginea din interiorul acestuia.
Rezumăm valoarea imaginii $ ca sursă de imagine pentru a afișa imaginea noastră.
Reîmprospătați browserul și vizualizați a lua legatura pagină. Nu ar trebui să vedeți nicio imagine. Dacă încărcați pagina Despre, ar trebui să vedeți imaginea noastră, precum și cutia albastră rotunjită care o ține.
Aia este. Am făcut-o! Ia-ți un moment să te felicit pentru că ai făcut tot parcursul tutorialului și că te-ai ocupat de stilul meu de predare decent.
Am scos doar abia suprafata WordPress, dar ti-am dat o fundatie solida pentru a incepe sa mergi mai adanc in WordPress.
Dacă doriți să continuați să învățați ce fel de funcții are WordPress să vă ofere, vă sugerez să aruncați o privire la Codex-ul WordPress.
Când întâmpinați probleme sau încercați să realizați ceva ce WordPress nu oferă, dați internetului o căutare rapidă. Sunt șanse că cineva a întâmpinat aceeași problemă și 99% din timp există un plugin care să o remedieze!
Din nou, vă mulțumim că ați citit tutorialul! Sper că ați învățat multe și acum puteți începe să oferiți clienților dvs. un CMS solid pentru a vă ușura atât viața, cât și viața.
Accentsconagua
