Share
We gaan een aangepast thema maken voor het "up and coming" open source CMS, Anchor. Anchor is een supereenvoudig, lichtgewicht en bullet-snel contentbeheersysteem. Je kunt een exemplaar van Anchor ophalen van de Anchor CMS-website, en je kunt ook een aantal van de beschikbare thema's voor Anchor on Anchor-thema's bekijken..
Misschien ben je een webontwerper of frontend-ontwikkelaar en ben je op zoek naar een manier om een stap verder te gaan? Misschien hebt u een statisch HTML-prototype van een website, wilt u snel pagina's en artikelen kunnen maken, maar wilt u niet elke keer weer het gedoe om code te schrijven. Anchor CMS geeft je die controle zonder jezelf een ontwikkelingshoofdpijn te bezorgen.
Dit artikel veronderstelt op zijn minst een basiskennis van webontwerp- en ontwikkelingsconcepten, zoals het hosten van een website en het coderen van HTML. U hebt een werkende installatie van Anchor CMS nodig, die lokaal of op afstand kan worden geïnstalleerd. Om Anchor (lokaal of op afstand) te installeren, downloadt u gewoon een kopie en volgt u hun installatie-instructies.
Naast je installatie heb je een prototype van je thema nodig. Het prototype moet een overzichtelijk HTML-visueel zijn, met een stylesheet en alle items die u hebt gebruikt, zoals afbeeldingen en JavaScript. Om dit hele proces te demonstreren, ga ik ook een thema maken. Je kunt mijn thema hieronder bekijken en je kunt de prototype-HTML downloaden van de link bovenaan de pagina:
Ik vind het leuk om te denken dat het voor Anchor is om een boterham te maken, en ik weet dat veel mensen parten spelen voor een goede boterham. Dus ik hoop dat mijn referenties u helpen bij het begrijpen van de stappen die ik doorloop. Ik geef er ook de voorkeur aan op te sommen wat sommige functies in Anchor feitelijk doen, omdat dit een meer directe manier lijkt om hen uit te leggen.
Hongerig? Laten we eten dan ...
Net als andere content management systemen, heeft Anchor een directory voor slechts thema's. Als je naar de root van je installatie gaat, zal er een map zijn met de naam "themes". Maak hier een nieuwe map en noem die, hoe je thema ook wordt genoemd, in mijn geval ga ik mijn thema "Cleat" noemen:
U moet ook een "about.txt" -bestand maken. Dit is slechts een basistekstbestand waarin wordt uitgelegd hoe het thema wordt genoemd, door wie het wordt bezocht en eventuele verwijzingsinformatie. Het "lees mij" -bestand in wezen. Bekijk mijn voorbeeld hieronder:
Naam van het thema: Cleat Beschrijving: Een licht en zuiver thema dat eenvoudig van hart is. Naam auteur: David Darnes Auteur site: http://david.darn.es Licentie: http://licence.visualidiot.com
Voeg, samen met je about.txt-bestand, je prototypebestanden ook in de map. Het is het beste om uw items, zoals afbeeldingen, in een aparte submap te bewaren. Om het thema te construeren, nemen we stukjes van je HTML en plaatsen deze in Anchor-vriendelijke php-bestanden.
De meeste websites zijn gestructureerd met een koptekst, een voettekst en een beetje in het midden. Anchor CMS maakt gebruik van deze overeenkomst door u toe te staan uw thema in deze afzonderlijke secties op te splitsen. Dit helpt bij de organisatie en, belangrijker nog, consistentie.
Maak een nieuw bestand in uw themamap met de naam "header.php". Open dit bestand en uw HTML-bestand voor het prototype. Kopieer de HTML van boven naar beneden, net voordat het hoofdgedeelte van uw inhoud begint. In mijn geval is dat net na het menu. Ik besloot dit omdat in mijn ontwerp alles vanaf het menu naar boven identiek is op elke pagina, dus ik wil dit consistent houden in mijn thema.
Wat we nu gaan doen is de statische informatie vervangen door php-helpers die in Anchor worden aangeboden. Hieronder staat de code die ik heb gekopieerd vanaf de bovenkant van mijn HTML-prototype, maar met enkele wijzigingen:
<?php echo page_title("Page can't be found"); ?> - <?php echo site_name(); ?> "title ="">
Merk op dat de HTML nog steeds aanwezig is, maar ik heb alle inhoud of relevante informatie over de site vervangen door fragmenten van PHP-code. Deze stukjes PHP-code worden genoemd functies, ze fungeren als tijdelijke aanduidingen voor inhoud. Wanneer het thema wordt gebruikt, worden deze functies vervangen door de inhoud van de website. Hier is een lijst met de functies die ik heb gebruikt om de inhoud te vervangen:
Accentsconagua
Als je ooit vast komt te zitten met wat deze functies doen, of als je iets anders nodig hebt dan wat ik hierboven heb getoond, bekijk dan de Anchor CMS Docs.
Een menu maken in uw thema is vrij eenvoudig als u begrijpt hoe het werkt. Anchor genereert het menu van alle gepubliceerde pagina's die u hebt gemaakt. Elke pagina die is ingesteld op concept of gearchiveerd, wordt niet weergegeven in het menu.
Om deze gepubliceerde pagina's te kunnen gebruiken, hebben we een manier nodig om ze te selecteren en door te nemen. Bekijk mijn voorbeeld hieronder:
Hiermee kunnen we het thema toestaan een menu voor de website te maken. In regel 1 controleren we "of er menu-items zijn", op regel 3 vragen we "terwijl je dit doet met elk menu-item". Op regel 5 stoppen we met werken met dat menu-item, wat betekent dat het hetzelfde proces met het volgende item zal starten. Zodra het menu-items op is, gaat het over regel 5 en naar regel 7, waar het het hele proces van het maken van het menu beëindigt.
Telkens wanneer een menu-item geïtereerd wordt, wordt ook een reeks functies verwerkt:
Vergelijk deze met uw menu en vervang de inhoud en informatie in uw menu met de bovenstaande functies. Noteer hoe de menukode werkt, omdat het kennen van dit proces nuttig zal zijn voor berichten later in de tutorial.
Net als je header.php bestand, wil je het footer gedeelte van je markup nemen en het in een nieuw bestand "footer.php" plakken. In mijn thema heb ik een hoofdregel en een kredietregel, deze verschijnen op elke pagina, dus ik zal de HTML van dit onderdeel in mijn footer.php bestand plaatsen.
Cleat voor anker CMS, gemaakt door David Darnes
Uw voettekst heeft misschien niet dezelfde complexiteit als de koptekst, maar het is een geweldige plek om dingen als uzelf toe te schrijven voor het maken van het thema.
Nu je je brood hebt beboterd, kunnen we ons verplaatsen naar het smakelijke deel, de vullingen.
Om te zorgen voor alle soorten inhoud waar uw thema mee te maken heeft, moeten we drie verschillende bestanden maken. Deze bestanden bevinden zich tussen uw kop- en voettekst en geven uw berichten, uw afzonderlijke artikelen en pagina's weer.
Net als bij onze kop- en voettekst, kopieer het belangrijkste gedeelte van uw markup naar een nieuw bestand met de naam "posts.php". De markup moet doorgaan vanaf het punt waar uw header.php is gebleven en uw footer.php-bestand moet worden voortgezet. Uw posts.php-bestand wordt gebruikt om alle gepubliceerde berichten van een website weer te geven. Met andere woorden, uw blogpagina.
Als je een HTML-prototype hebt gemaakt voor je blogpagina zoals ik, is dat nog beter. Nu hebben we ze opgesplitst in afzonderlijke bestanden die we nodig hebben om ze weer aan elkaar te koppelen, hier komt de functie "theme_include" uit. Voeg bovenaan het posts.php-bestand het volgende toe:
Deze functie haalt het header.php-bestand naar de pagina en door het toe te voegen helemaal bovenin waar het zal worden geplaatst. Hetzelfde geldt voor de voettekst, voeg het volgende toe aan de onderkant van posts.php:
Als u deze methode gebruikt, blijven uw kop- en voettekst consistent in het hele thema en wordt het beheren van code een veel eenvoudigere taak.
Weet je nog wat ik zei over het onthouden van de menu-methode? Bekijk dit eens en kijk of je gelijkenissen kunt ontdekken:
"title ="">
Er zijn nogal wat overeenkomsten, niet met de namen van de functies, maar met de manier waarop het werkt. Op regel 2 zeggen we "als we berichten hebben en terwijl we die berichten hebben" door elk bericht lopen. Zodra het geen berichten meer heeft, eindigt het proces op regel 12. En net als het menu gaan de berichten ook door een aantal functies. Hier zijn de functies in meer detail:
Net zoals je deed met je menu, vergelijk deze functies met je opmaak en vervang de inhoud en informatie door de overeenkomende functies.
Dit is geweldig; we hebben onze koptekst, voettekst en berichten waarin alle wordt ingetrokken.
Dit is waarschijnlijk de eerste keer dat u uw thema kunt controleren om te zien of het wordt uitgevoerd. Login in Anchor en selecteer uw thema uit de vervolgkeuzelijst in Extend> Site Metadata.
Als je deze instructies tot nu toe correct hebt gevolgd, zou je je berichtenpagina moeten kunnen zien.
Als er fouten zijn, maak je dan geen zorgen, het is waarschijnlijk iets dat een beetje misplaatst is. Gebruik dit als een kans om terug te lezen en controleer of je alles hebt ingepakt.
Nu zeggen sommigen van jullie misschien: "Wat als ik te veel berichten heb?". Maak je geen zorgen, zoals ik dat nu ga bespreken, op een zeer eenvoudige manier. Bekijk dit codefragment:
U zult merken dat de paginering op een vergelijkbare, maar eenvoudigere manier wordt gemaakt als hoe het menu wordt gemaakt. Op regel 1 vragen we of het bedrag de limiet overschrijdt, dan maken we de volgende en vorige knoppen. Op regel 6 beëindigen we het proces.
Notitie: Het aantal berichten per pagina kan worden geselecteerd onder Extend> Site Metadata.
Deze code moet in je posts.php-bestand staan, maar niet in een van de andere loops. In mijn ontwerp verschijnt het vlak voor mijn voet, dus ik heb het helemaal onderaan mijn posts.php-bestand toegevoegd.
Ten opzichte van de berichtenpagina zijn de artikelen heerlijk eenvoudig. Nogmaals, je hebt een kopie nodig van het hoofdgedeelte van je prototype-opmaak, of een kopie van de HTML die je wilt gebruiken voor artikelen. Net als uw posts.php moet dit overeenkomen met uw header- en footer-code. In mijn voorbeeld heeft het artikel een titel, een datum en de inhoud.
Maak een nieuw bestand met de naam "article.php" in je themamap en plak de opmaak erin. U moet ook uw kop- en voettekst toevoegen inclusief functies, net zoals u deed voor het bestand posts.php. Voor mijn thema is de code voor artikelen minimaal:
Nogmaals, afgezien van de include-functies, heb ik alleen de statische informatie en inhoud vervangen door bepaalde functies van Anchor. Hier is een overzicht van:
Ga zoals voorheen door uw code en vervang de statische inhoud en informatie door de relevante functies. Nadat u het artikel.php-bestand hebt voltooid, kunt u een artikel in actie bekijken. Dit geeft u de kans om te controleren of alles in goede staat is.
Je gelooft het misschien niet, maar pagina's zijn zelfs eenvoudiger dan artikelen. Kopieer uw markup opnieuw, maar plak deze keer in een nieuw bestand met de naam "page.php" en voeg uw include-functies toe aan de boven- en onderkant van het bestand. Pagina's op websites bevatten normaal gesproken statische inhoud en informatie die niet vaak verandert. Om deze reden hebben pagina's geen datum nodig. Bekijk de onderstaande code:
Dit is vrijwel hetzelfde als article.php, maar we gebruiken slechts twee verschillende functies:
Nadat je klaar bent met het plaatsen van de functies, ga je en probeer je een normale pagina te bekijken. De voorbeeldinhoud die in Anchor (momenteel) wordt weergegeven, geeft u geen normale pagina, dus u moet er een maken en inhoud toevoegen.
Als je de tutorial goed hebt gevolgd, zou je een eenvoudig, maar solide thema moeten hebben voor Anchor CMS. Als u problemen ondervindt, vergeet dan niet om uw code zorgvuldig te controleren. Het is gemakkelijk om een personage te missen of dingen in de verkeerde volgorde te plaatsen.
Als de dingen echt niet op je pad komen, is er een bloeiende community van Anchor CMS-gebruikers die je kunnen helpen met je thema. Ga gewoon naar het Anchor CMS Forum en zoek naar iemand met een soortgelijk probleem, of start een nieuwe discussie.
Ik beheer ook ankerthema's, waar je thema's kunt downloaden, websites kunt bekijken die met Anchor zijn gebouwd en je eigen werk kunt indienen. Ik hoop dat deze tutorial je heeft geholpen met het maken van een thema voor Anchor CMS, en ik ben echt benieuwd wat je gaat doen! Genieten.
