Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Wie kann man Ihre erste Joomla-Vorlage erstellen

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

In diesem Tutorial lernen Sie die Grundlagen einer Joomla-Vorlage kennen und erstellen eine von Grund auf neu. Wir werden schnell einen lokalen Server und Joomla selbst installieren und dann eine grundlegende funktionierende Vorlage erstellen.


1. Vorbereitung

Bevor wir mit unserer Vorlage beginnen, müssen Sie einige Dinge vorbereiten.
Wie die meisten CMS benötigt Joomla einen Server mit PHP und MySQL. Die manuelle Installation kann ziemlich ärgerlich und, um ehrlich zu sein, Zeitverschwendung sein (es sei denn, Sie möchten genau wissen, wie es gemacht wird).
Was wir tun werden, ist das Herunterladen eines einzigen Installationsprogramms für alle oben genannten Funktionen, das einen lokalen Server auf Ihrem System festhält und Ihnen auch ein wirklich nützliches Control Panel bietet.

Gehen Sie also zu WAMP und laden Sie die neueste Version herunter. (MAMP für Mac)

Führen Sie das heruntergeladene Installationsprogramm aus und installieren Sie WAMP an einem leicht zu merkenden Ort. Wenn alles nach Plan läuft, sollten Sie sich einen Ordner mit dem Namen : wamp ansehen

Sie sollten jetzt auch ein Symbol in Ihrer Benachrichtigungsleiste (wo sich die Uhr befindet) haben, mit dem Sie auf das Bedienfeld von WAMP zugreifen können. Sie können dies für eine Reihe von Dingen verwenden, einschließlich des Neustarts des Servers.


2. Herunterladen und Installieren von Joomla

Nachdem wir einen Server installiert haben, können wir Joomla herunterladen und einrichten. Gehen Sie zu Joomla und laden Sie die neueste Version herunter.

Bevor wir fortfahren, werfen wir noch einmal einen Blick auf unseren Wamp-Ordner. Im Inneren finden Sie eine Reihe von Ordnern, aber der, an dem wir interessiert sind, ist der WWW-Ordner.
Dies ist das Stammverzeichnis Ihres Server-Setups. Hier installieren wir Joomla. (Hinweis: Sie können hier so viele Kopien von Joomla installieren, wie Sie möchten, oder sonst etwas)

Entpacken Sie also Ihren Joomla-Download in den Ordner www. Normalerweise benenne ich es an dieser Stelle in den Namen meiner Site um oder kürze es einfach in Joomla.

Joomla ist jetzt auf unserem Server. Es gibt jedoch noch eine letzte Sache, die wir vor der Installation tun müssen, nämlich eine Datenbank zu erstellen. Öffnen Sie Ihren Browser und gehen Sie zu http://localhost.
Hier finden Sie den Administrationsbereich Ihres Servers. Hier erstellen wir unsere Datenbank.

Um die Datenbank zu erstellen, klicken Sie im Abschnitt Ihre Aliase auf phpmyadmin.

Für dieses Tutorial rufen wir unsere Datenbank joomla auf. Se erstellen hier keinen Benutzer mit Kennwort, sondern verwenden die Root-Benutzerdetails. Es wird dringend empfohlen, in Live-Situationen einen Benutzer mit einem sicheren Kennwort zu erstellen.

Nachdem wir eine Datenbank haben, können wir mit der Installation von Joomla beginnen. Starten Sie Ihren Browser und gehen Sie zu http://localhost/joomla (oder wie auch immer Sie Ihre Site beim Entpacken genannt haben).

Der erste Bildschirm spricht so ziemlich für sich. Wählen Sie eine Sprache und klicken Sie auf Weiter.

Der nächste Bildschirm, den Sie sehen, ist die Checkliste vor der Installation. Dies ist eine Liste der erforderlichen Elemente und Einstellungen, die Joomla für eine erfolgreiche Installation benötigt. Stellen Sie sicher, dass Sie die erforderliche Konfiguration haben, und klicken Sie auf Weiter.

Lesen Sie auf der nächsten Seite die Lizenz sorgfältig durch. Klicken Sie anschließend auf Weiter und geben Sie die erforderlichen Details ein (Hostname: localhost, Benutzername: root, no password und joomla als Datenbankname). Klicken Sie dann auf Weiter.

Überspringen Sie den Bildschirm für die FTP-Konfiguration, indem Sie auf Weiter klicken und auf der nächsten Seite Ihren Site-Namen, eine E-Mail-Adresse und ein Kennwort eingeben. Dies ist das Passwort, mit dem Sie sich zusammen mit dem Benutzernamen: admin im Admin-Bereich von joomla anmelden.
Wir werden momentan keine Beispieldaten installieren, da wir die Module einzeln hinzufügen möchten, um zu sehen, wie unsere Vorlage später im Tut kommt. Weiter klicken.

Glückwunsch! Joomla ist in Betrieb, aber bevor wir hineingehen und herumspielen können, müssen wir den Installationsordner löschen. Gehen Sie also zu Ihrem WWW-Ordner in Wamp und dann in den Joomla-Ordner und löschen Sie den Installationsordner


3. Schauen Sie sich Joomla genauer an

Es ist heutzutage ziemlich schwierig, in eine Open Source CMS-Diskussion einzusteigen, ohne dass der Name Joomla verloren geht.
Die Installation zusammen mit dem intuitiven Admin-Panel macht es sehr beliebt bei Benutzern, die ein einfaches CMS suchen und gleichzeitig über zahlreiche Funktionen verfügen
Tausende von Entwicklern sind damit beschäftigt, Anwendungen und Module zu rollen. Machen Sie sich bei Bedarf mit dem Backend vertraut (ich empfehle diesen kurzen Joomla 101-Artikel im Themeforest-Blog, um ein schnelles Gefühl zu bekommen.)

Um Ihre Site zu besuchen, klicken Sie oben rechts im Admin-Bereich auf Vorschau. Sie erhalten die Standardvorlage ohne Inhalt und die grundlegendsten geladenen Module.


4. Die Vorlage

Um die Vorlagenstruktur zu verstehen, schauen wir uns die Standardstruktur an. Gehen Sie zu Ihrem WWW-Ordner, und im Joomla-Ordner sollte sich ein Vorlagenordner befinden.
(wamp/www/joomla/templates). Hier gehen all die verschiedenen Vorlagen hin. Sie können im Admin-Bereich zwischen Vorlagen wechseln.

Im Vorlagenordner wird für jede installierte Vorlage ein Ordner angezeigt. Joomla wird mit drei Vorlagen geliefert: beez, rhuk_milkyway und ja_purity. Denken Sie an diesen Speicherort, da Sie hier in Zukunft Ihre neuen Vorlagen installieren werden.

Obwohl die meisten Vorlagen aus mehreren Dateien bestehen, werden nur zwei benötigt, um eine funktionierende Vorlage zu erstellen. Diese sind:

  • index.php
  • templateDetails.xml

Die erste - index.php - ist, wo alle Markups gehen, in die Sie die Joomla enthalten. Diese können als kleine Haken angesehen werden, an denen Joomla Informationen auflegt, wie zum Beispiel Module

Die zweite Datei ist templateDetails.xml. Sie können dies als eine Liste von Anweisungen für Joomla sehen. Diese Liste muss den Namen der Vorlage, die Namen der in der Vorlage verwendeten Dateien (Bilder usw.) und die Positionen enthalten, die Sie verwenden möchten (die oben genannten Includes).

Das Obige ist ein Beispiel für eine templateDetails.xml-Datei. Wie Sie sehen können, ist dies eine spezielle Liste, die Joomla über die Vorlage informiert, wie Name, Autor, Erstellungsdatum usw.
Beachten Sie den Positionsabschnitt im obigen Code. Dies sind die Positionen, von denen wir zuvor gesprochen haben, einschließlich.
Einige sind selbsterklärend, wie Fußzeile.
Wenn Sie das Joomla-Fußzeilen-Include in den Fußzeilenbereich Ihres Designs einfügen, können Sie einige Aspekte der Fußzeile mithilfe des Joomla-Backends steuern. Versuchen wir, eine einfache Vorlage zusammenzustellen.


5. Beginnen Sie mit der Vorlage

Lassen Sie uns etwas vorbereiten, damit wir etwas haben, mit dem wir arbeiten können. Gehen Sie zu Ihrem Vorlagenordner und erstellen Sie einen neuen Ordner. Nennen wir es template_tut.

Erstellen Sie in Ihrem neuen Ordner eine Datei mit dem Namen index.php und eine andere mit dem Namen templateDetails.xml (kopieren Sie den Code im obigen Beispiel und fügen Sie ihn ein).

Öffnen Sie Ihre index.php-Datei im Editor oder in einem anderen Element, das Sie zum Bearbeiten von Code verwenden, und kopieren Sie Folgendes in:

Wir haben einen DOCTYPE, einen PHP-Code für die Sprache, und im Kopfbereich unser erstes Joomla-Include. Dies ist nicht in der XML-Liste enthalten, da es sich nicht um eine Position handelt.

Dazu gehören der Joomla-Header-Code (der den Seitentitel enthält) und eine Reihe anderer Dinge, die wahrscheinlich ein halbes Tutorial alleine füllen können.

Beenden Sie das Markup auf der Seite, indem Sie die Body-Tags hinzufügen und das HTML-Tag schließen.


6. Verwenden der Vorlage

Nachdem wir die Basisdateien eingerichtet haben, fügen wir ein weiteres Include hinzu, um diesmal den Hauptinhalt einer bestimmten Seite anzuzeigen, die angezeigt wird.

Sie sollten dies jetzt in Ihrer index.php haben

Bevor wir unsere Vorlage testen, fügen wir einen Artikel hinzu, damit wir einige Inhalte haben. Stellen Sie sicher, dass WAMP ausgeführt wird, und rufen Sie Ihren Administratorbereich in Joomla mit http://localhost/joomla/administrator auf

Geben Sie nun Ihre Anmeldedaten ein

Gehen Sie im Menü zu Inhalt und dann in der Dropdown-Liste zum Artikel-Manager

Klicken Sie auf Neu, um einen Artikel hinzuzufügen

Geben Sie Ihrem Artikel einen Titel, geben Sie einen Alias ein, stellen Sie sicher, dass er auf der Startseite veröffentlicht ist, und klicken Sie auf Speichern

Mal sehen, wie unser Artikel auf der Titelseite aussieht. Klicken Sie nach dem Speichern in der oberen rechten Ecke auf Vorschau. Sie sollten die Startseite Ihrer Website mit Ihrem Text sehen.

Nachdem wir den Inhalt veröffentlicht haben, wollen wir sehen, ob die von uns erstellte Vorlage tatsächlich funktioniert. Gehen Sie zurück zu Ihrem Administrationsbereich und klicken Sie auf Erweiterungen und dann auf Vorlagen-Manager

Sie sollten template_tut in der Liste sehen, wählen Sie es also aus und legen Sie es als Standard fest.

Klicken Sie auf Vorschau und sehen Sie sich Ihre herrliche neue Vorlage an. Na ja, vielleicht nicht so herrlich, aber deine erste Joomla-Vorlage. YAY!


7. Fügen Sie unserer Vorlage etwas Fleisch hinzu

Wir haben unsere Vorlage zum Laufen gebracht. Sie ruft die Header-Informationen einschließlich des Titels ab und zeigt den Inhalt an, den wir im Joomla-Backend erstellt haben. Bevor wir weitere Includes hinzufügen, schauen wir uns die Includes der Modulposition genauer an. diejenigen, die wir in unserer XML-Datei genannt haben.

Sie sind folgendermaßen enthalten:

Um zum Beispiel die linke Position hinzuzufügen, sieht unsere index.php folgendermaßen aus:

Während wir gerade dabei sind, fügen wir die Fußzeilenposition hinzu

Wenn Sie zu Ihrem Administrationsbereich zurückkehren und zum Modul-Manager wechseln, werden Sie feststellen, dass bereits ein Modul vorhanden ist, das Hauptmenü-Modul. Dieses Modul wird installiert, auch wenn wir die einfache Version von Joomla installieren.

Das Menü ist bereits an der linken Position angeschlossen (die wir gerade in unsere Vorlage aufgenommen haben). Lassen Sie uns also sehen, wie es aussieht. Hit Vorschau

Wie Sie sehen können, haben wir jetzt ein Menü mit einem Link zu Home. Sie können über den Menü-Manager weitere Menüelemente hinzufügen und Links zu verschiedenen Inhalten erstellen.

Lassen Sie uns eine Fußzeile zum Laufen bringen. Gehen Sie zum Modul-Manager, klicken Sie auf Neu und wählen Sie Fußzeile. Drücken Sie dann Weiter.

Geben Sie dem neuen Modul auf der folgenden Seite den Titel: Fußzeile, und wählen Sie in der Dropdown-Liste Position die Option Fußzeile aus.

Klicken Sie auf Speichern und zeigen Sie eine Vorschau der Seite an.
Sie sollten jetzt auch Fußzeileninformationen in Ihrer Vorlage sehen.


8. Hinzufügen weiterer Positionen und Module

Gestalten wir unsere Seite ein wenig, damit wir sehen können, was wir tun. Erstellen Sie in Ihrem Ordner template_tut einen neuen Ordner, nennen Sie ihn "CSS" und erstellen Sie eine Datei mit dem Namen "template.css".

Kleben Sie die Includes in index.php in einige Divs und verpacken Sie alles in ein container div. Verknüpfen Sie dann Ihr Stylesheet wie im Beispiel. Fühlen Sie sich frei, mein unordentliches Layout zu kopieren, wenn Sie noch keines Ihrer eigenen verwenden. Ich habe meine für dieses Tutorial sehr schnell gemacht.

und das CSS

Lassen Sie uns unsere rechte Seitenleiste einhaken und die Positionen mit Kopfzeilen versehen. Fügen Sie die obere Position zur Kopfzeile und die rechte Position zur rechten Seitenleiste hinzu.

Nun erstellen wir die Module für diese beiden Positionen. Gehen Sie zum Admin-Bereich von Joomla, melden Sie sich bei Bedarf an und gehen Sie zum Modul-Manager im Dropdown-Menü Erweiterungen. Sie sollten das Hauptmenü und die Fußzeile sehen, die wir zuvor erstellt haben. Befolgen Sie die gleichen Schritte, um zwei weitere Module zu erstellen. Ein Suchmodul, das Sie an der obersten Position platzieren, und ein Anmeldemodul, das Sie an der richtigen Position platzieren.

Vorschau Ihrer Seite, Sie sollten jetzt eine Suchleiste in Ihrer Kopfzeile und ein Anmeldeformular in Ihrer rechten Seitenleiste haben. Dies sind so ziemlich die Grundlagen einer Joomla-Vorlage. Sie erstellen Positionen in Ihrem Design, wie kleine Haken, an die Joomla Informationen senden kann, die Sie in den meisten Fällen im Backend erstellen. Sie können dies auf fast jedes Design anwenden, indem Sie die vielen Positionen verwenden, die Joomla anbietet. Ich hoffe, das war für euch nützlich. Denken Sie daran, dass dies die Grundlagen sind. Joomla-Vorlagen können so komplex und leistungsfähig gemacht werden, wie Sie möchten.

  • Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.