Share
Vi skal lage et tilpasset tema for "opp og kommer" åpen kildekode CMS, Anchor. Anker er et super enkelt, lett og kule raske innholdshåndteringssystem. Du kan hente en kopi av Anker fra Anchor CMS nettsiden, pluss at du også kan sjekke ut noen av temaene som er tilgjengelige for Anchor on Anchor Themes.
Kanskje du er en webdesigner eller frontend-utvikler, og du leter etter en måte å ta ting et skritt videre? Kanskje du har en statisk HTML-prototype av et nettsted, du vil være i stand til å lage sider og artikler raskt, men du vil ikke ha problemer med å skrive kode hver gang. Anker CMS vil gi deg den kontrollen uten å gi deg en utvikling hodepine.
Denne artikkelen antar minst en grunnleggende kunnskap om webdesign og utviklingskonsepter, for eksempel hosting av et nettsted og koding av HTML. Du trenger en fungerende installasjon av Anchor CMS, som kan være lokalt eller eksternt installert. For å installere Anker (lokalt eller eksternt) bare last ned en kopi og følg installeringsinstruksjonene.
Sammen med installasjonen trenger du en prototype av temaet ditt. Prototypen skal være et rent merket HTML-visuelt, med et stilark og eventuelle eiendeler du har brukt, for eksempel bilder og JavaScript. For å demonstrere hele denne prosessen skal jeg også lage et tema. Du kan se temaet mitt under, og du kan laste ned prototypen HTML fra koblingen øverst på siden:
Jeg liker å tenke temaer for Anker er som å lage en sandwich, og jeg vet at mange mennesker er partielle til en god sandwich. Så jeg håper mine referanser hjelper deg med å prøve å forstå trinnene jeg går gjennom. Også, jeg foretrekker å liste ut hva noen av funksjonene i Anchor faktisk gjør, da dette virker som en mer enkel måte å forklare dem på.
Sulten? La oss spise da ...
I likhet med andre innholdsstyringssystemer har Anker en katalog for bare temaer. Hvis du går til roten av installasjonen din, blir det en mappe som heter "temaer". Opprett en ny mappe her og nev det hva ditt tema skal bli kalt, i mitt tilfelle skal jeg ringe mitt tema "Cleat":
Du må også opprette en "about.txt" -fil. Dette er bare en grunnleggende tekstfil som forklarer hva temaet heter, hvem det er og eventuelle henvisningsinformasjon. "Les meg" -filen i hovedsak. Ta en titt på mitt eksempel nedenfor:
Tema navn: Cleat Beskrivelse: Et lett og rent tema som er enkelt i hjertet. Forfatternavn: David Darnes Forfatterens nettsted: http://david.darn.es Lisens: http://licence.visualidiot.com
Sammen med filen about.txt, plasser du prototypefiler i mappen også. Det er best å beholde dine eiendeler, for eksempel bilder, i en egen undermappe. For å konstruere temaet tar vi biter av HTML-en din og plasserer dem i Anchor-vennlige php-filer.
De fleste nettsteder er strukturert med en header, en bunntekst og litt i midten. Anker CMS utnytter denne commonality ved å la deg bryte temaet ditt inn i disse separate seksjonene. Dette hjelper med organisasjonen og enda viktigere konsistens.
Opprett en ny fil i temamappen din, kalt "header.php". Åpne denne filen og HTML-filen din for prototypen. Kopier HTML-koden fra aller toppen, ned til like før hoveddelen av innholdet ditt starter. I mitt tilfelle er det bare etter menyen. Jeg bestemte meg for dette fordi i mitt design er alt fra menyen oppover identisk på hver side, så jeg vil holde dette konsekvent gjennom hele mitt tema.
Det vi nå skal gjøre, er å erstatte den statiske informasjonen med php-hjelpere som tilbys i Anker. Nedenfor er koden jeg har kopiert fra toppen av min HTML-prototype, men med noen endringer:
<?php echo page_title("Page can't be found"); ?> - <?php echo site_name(); ?> "title ="">
Legg merke til at HTML-en fortsatt er på plass, men jeg har erstattet innhold eller nettstedrelevant informasjon med utdrag av PHP-kode. Disse delene av PHP-koden kalles funksjoner, de fungerer som plassholdere for innhold. Når temaet blir brukt, vil disse funksjonene bli erstattet med innholdet tatt fra nettstedet. Her er en liste over funksjonene som jeg har brukt til å erstatte innholdet:
Accentsconagua
Hvis du noen gang sitter fast i hva disse funksjonene gjør, eller hvis du trenger noe annet enn det jeg har vist ovenfor, må du sjekke anker-CMS-dokumentene.
Å lage en meny i temaet ditt er ganske greit når du forstår hvordan det fungerer. Anker genererer menyen fra alle publiserte sider du har opprettet. Enhver side som er satt til utkast, eller arkivert, vises ikke i menyen.
For å kunne utnytte disse publiserte sidene trenger vi en måte å plukke dem ut og løpe gjennom dem. Ta en titt på mitt eksempel nedenfor:
Ved hjelp av dette kan vi tillate temaet å lage en meny for nettstedet. Linje 1 er hvor vi sjekker "hvis det er menyelementer", på linje 3 spør vi "mens du har dem, gjør dette med hvert menyelement". På linje 5 stopper vi med å arbeide med det menyelementet, noe som betyr at det starter samme prosess med neste gjenstand. Når det løper ut av menyelementer, går det forbi linje 5 og på linje 7, hvor det avsluttes hele menyopprettingsprosessen.
Hver gang et menypunkt er iterert, behandles også et sett med funksjoner:
Sammenlign disse på menyen din og erstatt innholdet og informasjonen i menyen med funksjonene ovenfor. Legg merke til hvordan menykoden fungerer, da å vite at denne prosessen blir nyttig for innlegg senere i opplæringen.
Akkurat som din header.php-fil, vil du ta sidelinjen av oppslaget ditt og lime det inn i en ny fil kalt "footer.php". I mitt tema har jeg en nøkkellinje og en kredittlinje, disse vises på hver side, så jeg legger HTML-en til denne delen i min footer.php-fil.
Cleat for Anchor CMS, laget av David Darnes
Din footer kan ikke ha samme kompleksitet som overskriften, men det er et flott sted for å kreditere ting som deg selv for å lage temaet.
Nå som du har smurt brødet, kan vi bevege oss på den velsmakende delen, fyllingene.
For å imøtekomme alle typer innhold som temaet ditt skal håndtere, må vi opprette tre forskjellige filer. Disse filene sitter mellom topptekst og bunntekst og viser dine innlegg, dine individuelle artikler og sider.
Akkurat som vi gjorde for vår topptekst og bunntekst, kopierer du hovedområdet av oppslaget til en ny fil som heter "posts.php". Markeringen skal fortsette fra hvor header.php din sluttet og din footer.php-fil skal fortsette fra den. Din posts.php-fil brukes til å vise alle publiserte innlegg fra et nettsted. Med andre ord, din bloggside.
Hvis du har laget en HTML-prototype for bloggensiden din som meg, er det enda bedre. Nå har vi delt dem i separate filer vi trenger å koble dem sammen igjen, det er her "theme_include" -funksjonen kommer inn. Øverst på din posts.php-fil legger du til følgende:
Denne funksjonen trekker header.php-filen inn på siden, og ved å legge den helt øverst, er den der den skal plasseres. Det samme gjelder for bunnteksten, legg til følgende helt nederst på posts.php:
Bruk av denne metoden betyr at toppteksten og bunnteksten forblir konsistent gjennom hele temaet og gjør styringskoden en mye lettere oppgave.
Husk hva jeg sa om å holde menymetoden i tankene? Ta en titt på dette og se om du kan se noen likheter:
"title ="">
Det er ganske mange likheter, ikke med navnene på funksjonene, men i hvordan det går. På linje 2 sier vi "hvis vi har noen innlegg og mens vi har disse innleggene" løp gjennom hvert innlegg. Når det går tom for innlegg, slutter prosessen på linje 12. Og akkurat som menyen går innleggene også gjennom et sett med funksjoner. Her er funksjonene i noe mer detaljert:
På samme måte som du gjorde med menyen, sammenligner du disse funksjonene med oppslaget ditt og erstatter innholdet og informasjonen med de funksjonene som passer.
Dette er flott; Vi har vår overskrift, bunntekst og innlegg som alle blir trukket inn.
Dette er trolig første gang du kan sjekke temaet ditt for å se om det kjører. Logg inn på Anker og velg temaet ditt fra rullegardinmenyen i Utvid> Nettstedsmetadata.
Hvis du har fulgt disse instruksjonene riktig så langt, bør du kunne se innleggssiden din.
Hvis det er feil, ikke bekymre deg, det er nok bare noe litt ute av sted. Bruk dette som en mulighet til å lese tilbake og sjekke om du har tatt alt inn.
Nå kan noen av dere si "Hva om jeg har for mange innlegg?". Vel ikke bekymre deg, siden jeg skal dekke det nå, på en veldig enkel måte. Sjekk ut dette kodestykket:
Du vil legge merke til at paginasjonen er opprettet på en lignende, men enklere måte for hvordan menyen er opprettet. På linje 1 spør vi om beløpet overstiger grensen, så lager vi neste og forrige knapper. På linje 6 slutter vi prosessen.
Merk: Antall innlegg per side kan velges under Utvid> Nettstedsmetadata.
Denne koden må gå i din posts.php-fil, men ikke i noen av de andre løkkene. I mitt design vises det like før jeg har skrevet meg, så jeg har lagt den helt til bunnen av min posts.php-fil.
I forhold til innleggssiden er artiklene deilig enkelt. Nok en gang skal du ha en kopi av hoveddelen av prototypen din, eller en kopi av HTML-en du vil bruke for artikler. Akkurat som dine posts.php, dette bør samsvare med topptekst og bunntekstkode. I mitt eksempel har artikkelen en tittel, en dato og innholdet.
Opprett en ny fil kalt "article.php" i temamappen din, og lim inn markeringen inni. Du må også legge til topptekst og bunntekst med funksjoner, akkurat som du gjorde for posts.php-filen. For mitt tema er koden for artikler minimal:
Igjen, bortsett fra inkluderingsfunksjonene, er alt jeg har gjort erstattet av statisk informasjon og innhold med visse funksjoner fra Anker. Her er en oversikt over dem:
Som før, gå gjennom koden din og erstatt det statiske innholdet og informasjonen med de aktuelle funksjonene. Når du har ferdig artikkelen.php-filen, kan du se en artikkel i aksjon. Dette gir deg sjansen til å sjekke om alt er i orden.
Du tror kanskje ikke på det, men sidene er enda enklere enn artikler. Kopier oppmerkningen din igjen, men denne gangen limer den inn i en ny fil kalt "page.php" og legger til dine inkludere funksjoner øverst og nederst på filen. Sider på nettsteder holder normalt statisk innhold og informasjon som ikke endres veldig ofte. Av denne grunn trenger ikke sider på en dato. Ta en titt på koden nedenfor:
Dette er veldig mye det samme som artikkel.php, men vi bruker bare to forskjellige funksjoner:
Når du er ferdig med å plassere funksjonene, gå og prøv å se en vanlig side. Prøveinnholdet som kommer inn i Anker (for tiden) gir deg ikke en vanlig side, så du må opprette en og legge til innhold.
Hvis du har fulgt opplæringen på riktig måte, bør du stå med et enkelt, men solidt tema for Anchor CMS. Hvis du opplever problemer, husk å sjekke over koden din nøye. Det er lett å savne et tegn, eller plassere ting i feil rekkefølge.
Hvis ting virkelig ikke går, er det et blomstrende samfunn av Anchor CMS-brukere som kan hjelpe deg med temaet ditt. Bare gå over til Anchor CMS Forum og se etter noen med et lignende problem, eller start en ny diskusjon.
Jeg styrer også Anchor Themes, hvor du kan laste ned temaer, sjekke ut nettsteder som er bygget med Anker og sende inn eget arbeid. Jeg håper at denne opplæringen har hjulpet deg med å lage et tema for Anchor CMS, og jeg er veldig interessert i å se hva du følger med! Nyt.
