Share
Vom face o temă personalizată pentru CMS open source, Anchor. Anchor este un sistem de gestionare a conținutului foarte simplu, ușor și rapid. Puteți lua o copie a ancorei de pe site-ul Anchor CMS, plus puteți, de asemenea, checkout unele dintre temele disponibile pentru Anchor on Anchor Themes.
Poate că sunteți un designer de web sau un dezvoltator de front end și căutați o cale de a face lucrurile un pas mai departe? Poate că aveți un prototip HTML static al unui site web, doriți să puteți crea rapid pagini și articole, dar nu doriți să aveți probleme de scriere a codului de fiecare dată. Anchor CMS vă va oferi controlul fără a vă da o durere de cap de dezvoltare.
Acest articol presupune cel puțin o cunoaștere de bază a conceptului de web design și dezvoltare, cum ar fi găzduirea unui site web și codarea HTML. Veți avea nevoie de o instalare de lucru a Anchor CMS, care poate fi instalată la distanță sau local. Pentru a instala Anchor (local sau la distanță), descărcați o copie și urmați instrucțiunile de instalare.
Împreună cu instalarea dvs. veți avea nevoie de un prototip al temei. Prototipul ar trebui să fie vizibil HTML clar, cu o foaie de stil și orice materiale pe care le-ați utilizat, cum ar fi imagini și JavaScript. Pentru a demonstra întregul proces, voi face și eu o temă. Puteți vedea tema mea de mai jos și puteți descărca prototipul HTML din link-ul din partea de sus a paginii:
Îmi place să cred că ancora este ca și cum ai face un sandwich și știu că o mulțime de oameni sunt parțiali unui sandviș bun. Deci, sper ca referințele mele să vă ajute în încercarea de a înțelege pașii prin care trec. De asemenea, prefer să prezint ceea ce fac efectiv unele funcții din Anchor, deoarece acest lucru pare să fie un mod mai simplu de a le explica.
Ți-e foame? Să mâncăm apoi ...
La fel ca alte sisteme de management al conținutului, Anchor are un director pentru doar teme. Dacă mergeți la rădăcina instalării, va exista un folder numit "teme". Creați un dosar nou aici și numiți-l indiferent de tema pe care o veți numi, în cazul meu o să-mi sun tema "Cleat":
Va trebui, de asemenea, să creați un fișier "about.txt". Acesta este doar un fișier text de bază care explică ce se numește tema, cine este și despre orice informații de recomandare. Fișierul "citiți-mă" în esență. Aruncați o privire la exemplul de mai jos:
Nume Temă: Cleat Descriere: O temă ușoară și pură, care este simplă la inimă. Autor Numele: David Darnes Autor site: http://david.darn.es Licență: http://licence.visualidiot.com
Împreună cu fișierul about.txt, plasați și fișierele prototip în dosar. Cel mai bine este să vă păstrați activele, cum ar fi imaginile, într-un subfold separat. Pentru a construi tema, vom lua bucăți de cod HTML și le vom plasa în fișiere php prietenoase Anchor.
Cele mai multe site-uri sunt structurate cu un antet, un subsol și un pic în mijloc. Anchor CMS profită de această obișnuință, permițându-vă să vă rupeți tema în aceste secțiuni separate. Acest lucru ajută la organizare și, mai important, la coerență.
Creați un fișier nou în dosarul tematic numit "header.php". Deschideți acest fișier și fișierul HTML pentru prototip. Copiați codul HTML din partea de sus, în jos, chiar înainte ca partea principală a conținutului dvs. să înceapă. În cazul meu, este chiar după meniu. Am hotărât acest lucru, deoarece în design-ul meu totul din meniu în sus este identic pe fiecare pagină, așa că vreau să păstrez această consecvență pe întreaga temă.
Ceea ce vom face acum este să înlocuiți informațiile statice cu ajutorul php care sunt furnizate în Anchor. Mai jos este codul pe care l-am copiat din partea de sus a prototipului HTML, dar cu câteva modificări:
<?php echo page_title("Page can't be found"); ?> - <?php echo site_name(); ?> "title ="„>
Observați că HTML-ul este încă în vigoare, dar am înlocuit orice conținut sau informații relevante pentru site-uri cu fragmente de cod PHP. Aceste coduri PHP sunt numite funcții, ei se comportă ca niște substituenți pentru conținut. Atunci când tema este utilizată, aceste funcții vor fi înlocuite cu conținutul preluat de pe site. Iată o listă a funcțiilor pe care le-am folosit pentru a înlocui conținutul:
Accentsconagua
Dacă sunteți vreodată blocat cu ceea ce fac aceste funcții sau dacă aveți nevoie de ceva diferit de ceea ce am arătat mai sus, verificați documentele Anchor CMS.
Crearea unui meniu în tema dvs. este destul de simplă odată ce ați înțeles cum funcționează. Ancora generează meniul din toate paginile publicate pe care le-ați creat. Orice pagină care este setată să fie proiectată sau arhivată nu va apărea în meniu.
Pentru a utiliza aceste pagini publicate, avem nevoie de o modalitate de a le alege și de a le trece prin ele. Aruncați o privire la exemplul de mai jos:
Utilizând acest lucru, putem permite temei să creeze un meniu pentru site. Linia 1 este locul în care verificăm "dacă există elemente de meniu", pe linia 3 vă cerem "în timp ce le faceți acest lucru cu fiecare element de meniu". Pe linia 5 nu mai lucrăm cu acel element de meniu, ceea ce înseamnă că va începe același proces cu următorul element. Odată ce rulează din elementele de meniu va trece linia 5 și pe linia 7, unde se termină procesul de creare a întregului meniu.
De fiecare dată când un element de meniu este repetat, se procesează și un set de funcții:
Comparați-le cu meniul dvs. și înlocuiți conținutul și informațiile din meniul dvs. cu funcțiile de mai sus. Notați cum funcționează codul de meniu, știind că acest proces va deveni util pentru postările ulterioare din tutorial.
La fel ca fișierul header.php, veți dori să luați secțiunea de subsol a marcajului dvs. și să îl inserați într-un nou fișier numit "footer.php". În tema mea am o linie cheie și o linie de credit, acestea apar pe fiecare pagină, așa că voi plasa HTML-ul acestei părți în fișierul meu footer.php.
Clema pentru Anchor CMS, creat de David Darnes
Foaierul tău ar putea să nu aibă aceeași complexitate ca și antetul, dar este un loc minunat pentru a credita lucruri ca tine pentru că ai făcut tema.
Acum că ți-ai făurat pâinea, putem să ne mutăm pe partea gustoasă, umpluturile.
Pentru a satisface toate tipurile de conținut pe care le va aborda tema, trebuie să creați trei fișiere diferite. Aceste fișiere stau între antetul și subsolul dvs. și vă vor afișa postările, articolele și paginile dvs. individuale.
Așa cum am făcut pentru antetul și subsolul nostru, copiați zona principală a marcajului într-un nou fișier numit "posts.php". Marcajul ar trebui să continue din locul în care header.php a rămas și fișierul footer.php ar trebui să continue de la acesta. Fișierul dvs. posts.php este utilizat pentru a afișa toate postările publicate de pe un site Web. Cu alte cuvinte, pagina dvs. de blog.
Dacă ați făcut un prototip HTML pentru pagina dvs. de blog ca mine, asta este chiar mai bun. Acum le-am împărțit în fișiere separate pe care trebuie să le legăm înapoi împreună, aici intră funcția "theme_include". În partea de sus a fișierului dvs. posts.php adăugați următoarele:
Această funcție trage fișierul header.php în pagină și prin adăugarea acesteia în partea superioară unde se va plasa. Același lucru este valabil și pentru subsol, adăugați următoarele în partea de jos a posts.php:
Utilizarea acestei metode înseamnă că antetul și subsolul dvs. rămân consecvente în întreaga temă și fac ca gestionarea codului să fie o sarcină mult mai ușoară.
Amintiți-vă ce am spus despre menținerea metodei meniului? Aruncați o privire la acest lucru și vedeți dacă puteți observa orice asemănări:
"title ="„>
Există destul de puține asemănări, nu cu numele funcțiilor, ci cu modul în care funcționează. Pe linia 2 afirmăm că "dacă avem postări și în timp ce avem acele postări", se execută prin fiecare dintre postări. După terminarea postărilor, procesul se termină pe linia 12. Și, la fel ca și meniul, posturile merg, de asemenea, printr-un set de funcții. Iată câteva funcții în detaliu:
La fel cum ați făcut și cu meniul dvs., comparați aceste funcții cu marcajul dvs. și înlocuiți conținutul și informațiile cu funcțiile care se potrivesc.
Asta e super; avem antet, subsol și postări toate fiind trase in.
Aceasta este probabil prima dată când vă puteți verifica tema pentru a vedea dacă rulează. Conectați-vă la Anchor și selectați tema din opțiunea drop-down din Extend> Metadata site-ului.
Dacă ați respectat corect aceste instrucțiuni până acum, ar trebui să puteți vedea pagina postărilor dvs..
Dacă există erori atunci nu vă faceți griji, este, probabil, doar ceva puțin în loc. Utilizați acest lucru ca o oportunitate de a citi înapoi și verificați dacă ați luat totul.
Acum, unii dintre voi ar putea spune "Ce se întâmplă dacă am prea multe postări?". Ei bine, nu vă faceți griji, așa cum voi acoperi acum, într-un mod foarte ușor. Consultați acest fragment de cod:
Veți observa că paginarea este creată într-o manieră similară, dar mai simplă modului în care este creat meniul. Pe linia 1 ne întrebăm dacă suma depășește limita, apoi vom crea butoanele următoare și anterioare. Pe linia 6 terminăm procesul.
Notă: Cantitatea de mesaje pe pagină poate fi selectată sub Extindere> Metadatele site-ului.
Acest cod va trebui să meargă în fișierul dvs. posts.php, dar nu în interiorul niciuneia dintre celelalte bucle. În designul meu apare chiar înainte de subsolul meu, așa că l-am adăugat în partea de jos a fișierului meu posts.php.
În raport cu pagina posturilor, articolele sunt delicios simple. Încă o dată, veți avea nevoie de o copie a secțiunii principale a marcajului dvs. prototip sau o copie a codului HTML pe care doriți să îl utilizați pentru articole. La fel ca posts.php dvs., acest lucru ar trebui să se potrivească cu antetul și codul de subsol. În exemplul meu, articolul are un titlu, o dată și conținutul.
Creați un nou fișier numit "article.php" în dosarul tematic și lipiți marcajul înăuntru. De asemenea, va trebui să adăugați funcțiile antetului și subsolului, așa cum ați făcut pentru fișierul posts.php. Pentru tema mea, codul pentru articole este minim:
Încă o dată, în afară de funcțiile de includere, tot ce am făcut este înlocuirea informațiilor și conținutului static cu anumite funcții furnizate de Anchor. Iată o scurtă descriere a acestora:
Ca și înainte, treceți prin codul dvs. și înlocuiți conținutul static și informațiile cu funcțiile relevante. După ce ați terminat fișierul article.php, puteți vizualiza un articol în acțiune. Acest lucru vă oferă șansa de a verifica dacă totul este în stare de funcționare.
S-ar putea să nu credeți, dar paginile sunt chiar mai simple decât articolele. Copiați marcajul din nou, dar de data aceasta lipiți-l într-un fișier nou numit "page.php" și adăugați funcțiile de includere în partea de sus și de jos a fișierului. Paginile de pe site-urile web dețin în mod obișnuit conținut static și informații care nu se schimbă foarte des. Din acest motiv, paginile nu au nevoie de o dată. Uitați-vă la codul de mai jos:
Acest lucru este foarte asemănător cu articolul.php, dar folosim doar două funcții diferite:
După ce terminați plasarea în funcții, mergeți și încercați să vizualizați o pagină normală. Conținutul eșantionului care se găsește în Ancora (în prezent) nu vă oferă o pagină obișnuită, deci va trebui să creați unul și să adăugați conținut.
Dacă ați urmat corect tutorialul, ar trebui să aveți la dispoziție o temă simplă, dar solidă pentru Anchor CMS. Dacă întâmpinați probleme, nu uitați să verificați cu atenție codul. Este ușor să pierdeți un personaj sau să plasați lucrurile în ordine greșită.
Dacă lucrurile nu se întâmplă într-adevăr, există o comunitate înfloritoare de utilizatori de Anchor CMS care vă pot ajuta cu tema. Doar du-te la Forum Ancora CMS și fie căutați pe cineva cu o problemă similară, fie începeți o nouă discuție.
De asemenea, administrez Anchor Themes, unde puteți descărca teme, verificați site-urile care au fost construite cu Anchor și trimiteți propria dvs. lucrare. Sper că acest tutorial te-a ajutat să faci o temă pentru Anchor CMS și sunt foarte interesat să văd ce vii cu tine! se bucura.
