Erstellen eines Themas für Anchor CMS

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wir werden ein benutzerdefiniertes Theme für das aufstrebende Open-Source-CMS Anchor erstellen. Anchor ist ein super einfaches, leichtes und bullet schnelles Content Management System. Sie können eine Kopie von Anchor von der Anchor CMS-Website herunterladen. Außerdem können Sie einige der für Anchor on Anchor Themes verfügbaren Designs auschecken.

Warum sollte ich das tun wollen?

Vielleicht sind Sie ein Webdesigner oder Frontend-Entwickler und suchen nach einer Möglichkeit, die Dinge noch einen Schritt weiter zu bringen? Vielleicht haben Sie einen statischen HTML-Prototyp einer Website, Sie möchten schnell Seiten und Artikel erstellen können, aber Sie möchten nicht jedes Mal den Code schreiben. Anchor CMS wird Ihnen diese Kontrolle geben, ohne sich selbst Entwicklungskummer zu geben.

Was brauche ich?

Dieser Artikel setzt mindestens Grundkenntnisse in Webdesign und Entwicklungskonzepten voraus, wie zum Beispiel das Hosting einer Website und die Programmierung von HTML. Sie benötigen eine funktionierende Installation von Anchor CMS, das lokal oder remote installiert sein kann. Um Anchor (lokal oder remote) zu installieren, laden Sie einfach eine Kopie herunter und folgen Sie deren Installationsanweisungen.

Zusammen mit Ihrer Installation benötigen Sie einen Prototyp Ihres Themas. Der Prototyp sollte ein sauber markierter HTML-Visual mit einem Stylesheet und allen von Ihnen verwendeten Assets wie Bildern und JavaScript sein. Um diesen ganzen Prozess zu demonstrieren, werde ich auch ein Thema machen. Sie können mein Design unten sehen, und Sie können den Prototyp HTML von dem Link oben auf der Seite herunterladen:

Ich denke gerne, dass das Thema für Anchor wie ein Sandwich ist, und ich weiß, dass viele Leute ein gutes Sandwich essen. Ich hoffe also, dass meine Referenzen Ihnen helfen, die Schritte zu verstehen, die ich durchmache. Außerdem möchte ich aufzeigen, was einige der Funktionen in Anchor eigentlich tun, da dies eine einfachere Art ist, sie zu erklären.

Anfangen

Hungrig? Lass uns dann essen ..

Holen Sie sich Ihr Breadboard & Zutaten

Ähnlich wie andere Content-Management-Systeme verfügt Anchor über ein Verzeichnis für nur Themen. Wenn Sie zu der Wurzel Ihrer Installation gehen, wird es einen Ordner namens "themes" geben. Erstellen Sie hier einen neuen Ordner und benennen Sie ihn, wie auch immer Ihr Thema heißen mag. In meinem Fall werde ich mein Thema "Cleat" nennen:

Sie müssen auch eine "about.txt" erstellen Datei. Dies ist nur eine grundlegende Textdatei, die erklärt, wie das Thema heißt, wer es ist und welche Informationen über die Empfehlung. Die "lese mich" -Datei im Wesentlichen. Schau dir mein Beispiel unten an:


Theme name:  	Cleat
Description:	A light and pure theme thats simple at heart.
Author name:	David Darnes
Author site:	http://david.darn.es
License:		http://licence.visualidiot.com

Platzieren Sie Ihre Prototyp-Dateien zusammen mit Ihrer about.txt-Datei in den Ordner. Am besten bewahren Sie Ihre Assets wie Bilder in einem separaten Unterordner auf. Um das Theme zu konstruieren, nehmen wir Teile Ihres HTML und platzieren diese in Anchor-freundliche PHP-Dateien.

Butter dein Brot

Die meisten Websites sind mit einer Kopfzeile, einer Fußzeile und etwas in der Mitte strukturiert. Anchor CMS nutzt diese Gemeinsamkeit, indem es Ihnen ermöglicht, Ihr Thema in diese separaten Abschnitte aufzuteilen. Dies hilft bei der Organisation und, was noch wichtiger ist, Konsistenz.

Erstellen Sie eine neue Datei in Ihrem Themenordner namens "header.php". Öffnen Sie diese Datei und Ihre HTML-Datei für den Prototyp. Kopieren Sie den HTML-Code von ganz oben bis kurz vor dem Start des Hauptteils Ihres Inhalts. In meinem Fall ist das direkt nach dem Menü. Ich habe das entschieden, weil in meinem Design alles von der Speisekarte auf jeder Seite identisch ist, also möchte ich das konsequent in meinem Thema halten.

Was wir jetzt tun werden, ist, die statischen Informationen durch php-Helfer zu ersetzen, die in Anchor bereitgestellt werden. Unten ist der Code, den ich von der Spitze meines HTML-Prototyps kopiert habe, aber mit einigen Änderungen:


<!DOCTYPE html>
<html>
	<head>
		<title>
			<?php echo page_title("Page can't be found"); ?> - <?php echo site_name(); ?>
		</title>
		<!-- Asset links -->
		<link href="<?php echo theme_url('assets/style.css'); ?>" media="screen" rel="stylesheet" type="text/css" />
		<link rel="shortcut icon" href="<?php echo theme_url('assets/favicon.ico'); ?>" type="image/x-icon">
		<!-- Meta -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="generator" content="Anchor CMS">
	</head>
	<body>
		<section>
			<header>
				<a class="logo" href="<?php echo base_url(); ?>" title="<?php site_description(); ?>"><?php echo site_name(); ?></a>
				<!-- Main Menu -->
				<hr/>
			</header>

Beachten Sie, dass der HTML-Code immer noch vorhanden ist, aber ich habe alle Inhalte oder seitenrelevanten Informationen durch PHP-Codefragmente ersetzt. Diese Teile von PHP-Code heißen Funktionen, sie fungieren als Platzhalter für Inhalte. Wenn das Thema verwendet wird, werden diese Funktionen durch den Inhalt der Website ersetzt. Hier ist eine Liste der Funktionen, die ich verwendet habe, um den Inhalt zu ersetzen:

<?php echo page_title(); ?>- Erzeugt den Seitentitel, einfach so.
<?php echo theme_url('assets/image.png'); ?> Verwenden Sie diese URL für Ihre Stylesheets und alle von Ihnen verwendeten Bilder, um die URL der Assets in Ihrem Designordner zu erhalten.
<?echo site_description(); ?> Die Website-Beschreibung im Metadaten-Abschnitt von Anchor.
<?php echo site_name(); ?> - Der Name der Site, ebenfalls in Anchor
<?php echo base_url(); ?> - Die Root-URL der Installation, die auch die Hauptadresse der Website sein sollte.

Wenn Sie mit den Funktionen dieser Funktionen nicht weiterkommen oder etwas anderes benötigen, als ich oben gezeigt habe, überprüfen Sie die Anchor CMS Docs.

Fügen Sie ein leckeres Menü hinzu

Das Erstellen eines Menüs in Ihrem Thema ist ziemlich einfach, wenn Sie erst einmal verstanden haben, wie es funktioniert. Anchor generiert das Menü aus allen veröffentlichten Seiten, die Sie erstellt haben. Jede Seite, die auf Entwurf festgelegt oder archiviert ist, wird nicht im Menü angezeigt.

Um diese veröffentlichten Seiten nutzen zu können, müssen wir sie herausgreifen und durchlaufen. Schau dir mein Beispiel unten an:


<?php if(has_menu_items()) : ?>
	<nav role="main">
		<?php while(menu_items()) : ?>
			<a href="<?php echo menu_url(); ?>" title="<?php echo menu_title(); ?>"><?php echo menu_name(); ?></a>
		<?php endwhile; ?>
	</nav>
<?php endif; ?>

Auf diese Weise können wir dem Thema ermöglichen, ein Menü für die Website zu erstellen. Zeile 1 ist, wo wir prüfen "ob es Menüpunkte gibt", in Zeile 3 fragen wir, "während Sie sie dies mit jedem Menüpunkt machen". In Zeile 5 hören wir auf, mit diesem Menüpunkt zu arbeiten, was bedeutet, dass er den gleichen Prozess mit dem nächsten Punkt startet. Sobald es keine Menüpunkte mehr hat, geht es über die Linie 5 und in die Linie 7, wo es den gesamten Menüerstellungsprozess beendet.

Jedes Mal, wenn ein Menüelement iteriert wird, wird auch eine Gruppe von Funktionen verarbeitet:

<?php echo menu_url(); ?> - Ruft den Link des Menüelements ab.
<?php echo menu_title(); ?> - Der Titel des Artikels, aka der Titel der Seite.
<?php echo menu_name(); ?> - Der tatsächliche Name des Menüelements, der in den Seitenoptionen hinzugefügt wurde.

Vergleichen Sie diese mit Ihrem Menü und ersetzen Sie die Inhalte und Informationen in Ihrem Menü durch die oben genannten Funktionen. Notieren Sie sich, wie der Menücode funktioniert, da Sie wissen, dass dieser Prozess für Posts später im Lernprogramm hilfreich ist.

Butter deine andere Scheibe

Wie in der Datei "header.php" möchten Sie den Fußzeilenabschnitt Ihres Markups verwenden und in eine neue Datei namens "footer.php" einfügen. In meinem Thema habe ich eine Schlüsselzeile und eine Kreditlinie, diese erscheinen auf jeder Seite, also werde ich den HTML-Code dieses Teils in meine footer.php-Datei einfügen.


				<hr/>
				<small class="credit"><a href="https://github.com/daviddarnes/cleat" title="Cleat: GitHub">Cleat</a> for <a href="http://anchorcms.com" title="Anchor CMS Homepage">Anchor CMS</a>, Created by <a href="http://david.darn.es" title="David Darnes: Designer">David Darnes</a></small>
			</footer>
		</section>
	</body>
</html>

Ihre Fußzeile hat vielleicht nicht die gleiche Komplexität wie die Kopfzeile, aber es ist ein großartiger Ort, um Dinge wie Sie für das Erstellen des Themas gut anzuerkennen.

Jetzt wo du dein Brot gebuttert hast, können wir uns auf den leckeren Teil, die Füllungen, begeben.

Ihre drei Hauptfüllungen

In order to cater for all the types of content your theme will deal with, we need to create three different files. Diese Dateien befinden sich zwischen Kopf- und Fußzeile und zeigen Ihre Posts, Ihre einzelnen Artikel und Seiten an.

Beiträge füllen

Just as we did for our header and footer, copy the main area of your markup into a new file called "posts.php". Das Markup sollte an der Stelle fortgesetzt werden, an der Ihre header.php gelöscht wurde und Ihre footer.php-Datei sollte von dort fortgesetzt werden. Ihre posts.php-Datei wird verwendet, um alle veröffentlichten Posts von einer Website anzuzeigen. Mit anderen Worten, deine Blog-Seite.

Wenn Sie einen HTML-Prototyp für Ihre Blogseite wie mich gemacht haben, ist das sogar noch besser. Jetzt haben wir sie in separate Dateien aufgeteilt, die wir wieder miteinander verknüpfen müssen. Hier kommt die Funktion "theme_include" ins Spiel. Ganz oben in Ihrer posts.php-Datei fügen Sie Folgendes hinzu:

1
2	<?php theme_include('header'); ?>

Diese Funktion zieht die Datei header.php in die Seite und fügt sie ganz oben hinzu, wo sie platziert wird. Das gleiche gilt für die Fußzeile, fügen Sie das Folgende ganz unten in der Datei posts.php hinzu:

1
2	<?php theme_include('footer'); ?>

Wenn Sie diese Methode verwenden, bleibt Ihre Kopf- und Fußzeile im gesamten Thema konsistent und macht die Verwaltung von Code zu einer viel einfacheren Aufgabe.

Bilden einer Post Loop Relish

Erinnerst du dich daran, was ich über die Menü-Methode gesagt habe? Sieh dir das an und sieh nach, ob du Ähnlichkeiten entdecken kannst:


<?php theme_include('header'); ?>
<?php if(has_posts()) : while(posts()) : ?>
	<article>
		<header>
			<h1>
				<a href="<?php echo article_url(); ?>" title="<?php echo article_title(); ?>"><?php echo article_title(); ?></a>
			</h1>
			<small><?php echo article_date(); ?></small>
		</header>
		<p><?php echo article_description(); ?></p>
	</article>
<?php endwhile; endif; ?>
<!-- Pagination -->
<?php theme_include('footer'); ?>

Es gibt einige Ähnlichkeiten, nicht mit den Namen der Funktionen, sondern wie sie laufen. In Zeile 2 geben wir an, "ob wir irgendwelche Posts haben und während wir diese Posts haben" durch jeden der Posts laufen. Sobald die Anzahl der Posts abgelaufen ist, endet der Prozess in Zeile 12. Und genau wie das Menü durchlaufen die Beiträge auch eine Reihe von Funktionen. Hier sind die Funktionen im Detail:

<?php echo article_url(); ?> - Ruft den Link des Posts ab.
<?php echo article_title(); ?> - Der Titel des Posts.
<?php echo article_date(); ?> - Wenn der Beitrag erstellt wurde, im Format Tag Monat Jahr.
<?php echo article_description(); ?> - Die Beschreibung des Posts, ein optionales Feld innerhalb des Posts.

Wie bei Ihrem Menü vergleichen Sie diese Funktionen mit Ihrem Markup und ersetzen den Inhalt und die Informationen durch die entsprechenden Funktionen.

Das ist toll; Wir haben unsere Header, Footer und Posts alle eingezogen.

Ein Vorgeschmack auf deine bisherige Arbeit

Dies ist wahrscheinlich das erste Mal, dass Sie Ihr Design überprüfen können, um festzustellen, ob es ausgeführt wird. Melden Sie sich bei Anchor an und wählen Sie Ihr Thema aus der Dropdown-Liste unter Erweitern > Site-Metadaten.

Wenn Sie diese Anweisungen bisher korrekt befolgt haben, sollten Sie Ihre Beitragsseite sehen können.

Wenn es Fehler gibt, dann mach dir keine Sorgen, es ist wahrscheinlich nur etwas fehl am Platz. Verwenden Sie dies als eine Gelegenheit, um zurückzulesen und zu überprüfen, ob Sie alles aufgenommen haben.

Jahreszeit mit Paginierung

Nun könnten einige von Ihnen sagen: "Was ist, wenn ich zu viele Posts habe?". Nun mach dir keine Sorgen, ich werde das jetzt auf sehr einfache Weise behandeln. Sehen Sie sich diesen Codeschnipsel an:


<?php if(has_pagination()) : ?>
	<nav class="pagination">
		<?php echo posts_prev(); ?>
		<?php echo posts_next(); ?>
	</nav>
<?php endif; ?>

Sie werden feststellen, dass die Paginierung auf ähnliche, aber einfachere Weise erstellt wird, wie das Menü erstellt wird. In Zeile 1 fragen wir, ob der Betrag das Limit überschreitet, dann erstellen wir die nächsten und vorherigen Buttons. In Zeile 6 beenden wir den Vorgang.

Hinweis: Die Anzahl der Posts pro Seite kann unter Erweitern> Site-Metadaten ausgewählt werden.

Dieser Code muss in Ihre posts.php-Datei gehen, aber nicht in die anderen Loops. In meinem Design erscheint es direkt vor meiner Fußzeile, also habe ich es ganz unten in meiner posts.php Datei hinzugefügt.

Artikel füllen

Relativ zur Post-Seite sind die Artikel köstlich einfach. Noch einmal benötigen Sie eine Kopie des Hauptabschnitts Ihres Prototyp-Markups oder eine Kopie des HTML-Codes, den Sie für Artikel verwenden möchten. Genau wie Ihre posts.php sollte dies mit Ihrem Kopf- und Fußzeilencode übereinstimmen. In meinem Beispiel hat der Artikel einen Titel, ein Datum und den Inhalt.

Erstellen Sie eine neue Datei namens "article.php" in Ihrem Themenordner und fügen Sie das Markup darin ein. Sie müssen auch Ihre Header- und Footer-Include-Funktionen hinzufügen, genau wie Sie es für die Datei posts.php getan haben. Für mein Thema ist der Code für Artikel minimal:


<?php theme_include('header'); ?>
<article>
	<header>
		<h1><?php echo article_title(); ?></h1>
		<small><?php echo article_date(); ?></small>
	</header>
	<?php echo article_markdown(); ?>
</article>
<?php theme_include('footer'); ?>

Noch einmal, abgesehen von den Include-Funktionen, habe ich nur die statischen Informationen und Inhalte durch bestimmte Funktionen von Anchor ersetzt. Hier ist eine Zusammenfassung von ihnen:

<?php echo article_title(); ?> - Der Titel des Posts.

<?php echo article_markdown(); ?> - Der Inhalt der Post, die Körperkopie.

<?php echo article_date(); ?> - Wenn der Beitrag erstellt wurde, im Format Tag Monat Jahr.

As before, go through your code and replace the static content and information with the relevant functions. Nachdem Sie die Datei article.php fertiggestellt haben, können Sie einen Artikel in Aktion sehen. Dies gibt Ihnen die Möglichkeit zu überprüfen, ob alles in Ordnung ist.

Seitenfüllung

Sie glauben es vielleicht nicht, aber Seiten sind noch einfacher als Artikel. Kopieren Sie Ihr Markup erneut, aber fügen Sie es diesmal in eine neue Datei namens "page.php" ein und fügen Sie Ihre Include-Funktionen am oberen und unteren Rand der Datei hinzu. Seiten auf Websites enthalten normalerweise statische Inhalte und Informationen, die sich nicht sehr oft ändern. Aus diesem Grund benötigen Seiten kein Datum. Sehen Sie sich den folgenden Code an:


<?php theme_include('header'); ?>
<article>
	<header>
		<h1><?php echo page_title(); ?></h1>
	</header>
	<?php echo page_content(); ?>
</article>
<?php theme_include('footer'); ?>

Das ist sehr ähnlich wie article.php, aber wir verwenden nur zwei verschiedene Funktionen:

<?php echo page_title(); ?> - Der Titel der Seite.

<?php echo page_content(); ?> - Der Inhalt der Seite, die Körperkopie.

Wenn Sie mit den Funktionen fertig sind, können Sie eine normale Seite anzeigen. Der Beispielinhalt, der in Anchor (derzeit) enthalten ist, gibt Ihnen keine reguläre Seite, daher müssen Sie eine erstellen und Inhalte hinzufügen.

Schneiden und servieren

Wenn Sie das Tutorial richtig befolgt haben, sollten Sie ein einfaches, aber dennoch solides Theme für Anchor CMS erhalten. Wenn Sie Probleme haben, denken Sie daran, Ihren Code sorgfältig zu überprüfen. Es ist leicht, einen Charakter zu verpassen oder Dinge in der falschen Reihenfolge zu platzieren.

Wenn die Dinge nicht so laufen, wie Sie es sich wünschen, gibt es eine blühende Gemeinschaft von Anchor CMS-Benutzern, die Ihnen bei Ihrem Thema helfen können. Gehen Sie einfach zum Anchor CMS Forum und suchen Sie nach jemandem mit einem ähnlichen Problem oder beginnen Sie eine neue Diskussion.

Ich verwalte auch Anchor Themes, wo Sie Themen herunterladen können, überprüfen Sie Websites, die mit Anchor erstellt wurden und reichen Sie Ihre eigenen Arbeiten ein. Ich hoffe, dass dieses Tutorial Ihnen geholfen hat, ein Thema für Anchor CMS zu erstellen, und ich bin wirklich interessiert zu sehen, was Sie mitkommen! Genießen.