Drupal: Inhalte anlegen Teil 1

Bislang wurden eher im Hintergrund gearbeitet. Dabei wurde Drupal installiert, Benutzer wurden angelegt usw. Was nun noch fehlt, sind die eigentlichen Inhalte. Genau darum geht es in diesem Tutorial. Ihr erfahrt, wie ihr die ersten eigenen Inhalte auf der Webseite veröffentlichen könnt. Außerdem wird gezeigt, wie sich mit TinyMCE ein WYSWYG-Editor verfügbar machen lässt.

Wir empfehlen:
Drupal-Training

Wenn ihr eine Drupal-Standardinstallation im Frontend erstmalig aufruft, wird dort noch nicht allzu viel zu sehen sein.

Und in der Tat weist Drupal ausdrücklich darauf hin, dass momentan noch keine Inhalte hinterlegt wurden. Um Inhalt in die Webseite einzufügen, klickt man auf den Link Neuen Inhalt hinzufügen.

 

Daraufhin landet man auf der Seite Inhalt hinzufügen, auf der die momentan vorhandenen Inhaltstypen zu sehen sind.

 

Durch die verschiedenen Inhaltstypen lassen sich Inhalte viel effizienter anlegen. Denn für jeden Inhaltstyp können andere Eingabemasken, Zugriffsrechte usw. definiert werden. Von Hause aus bringt Drupal zwei Inhaltstypen mit.

Artikel(Article) – ein Artikel sollte immer dann verwendet werden, wenn vom Benutzer ein Kommentar bzw. eine Interaktion erwartet wird.
Seite(Basic page) – dieser Typ wird für Inhalte verwendet, die sich nur selten ändern und nicht allzu wichtig sind. Zudem wird er immer dort eingesetzt, wo die Besucher nicht zu einer Interaktion aufgefordert werden. Typische Seiten könnten also einfache Mitteilungen oder das Impressum sein.

Wer mit früheren Drupal-Versionen gearbeitet hat, dem wird auffallen, dass die altbekannten Inhaltstypen Blog entry und Book fehlen. Das liegt u.a. daran, welche Module aktiviert sind. Tatsächlich sind diese Module auch bei Drupal 7 mit an Bord, sie sind standardmäßig allerdings nicht aktiviert. Mehr zum Thema Module dann aber später.

Für das erste Beispiel soll ein neuer Artikel angelegt werden. Klickt dazu auf Article.

 

Auf der sich öffnenden Seite wird zunächst einmal eine Überschrift für den Artikel angegeben. Das ist dann auch tatsächlich die im Frontend sichtbare Überschrift. In das Feld Tags könnt ihr Begriffe eintragen, die für den Artikel relevant sind. Diese Tags sind später im Frontend verlinkt sichtbar. In das Feld Body kann der eigentliche Text eingetragen werden.

Momentan kommt das Eingabefeld noch recht schlicht daher. Für Formatierungen muss man derzeit noch auf HTML-Elemente wie strong, em usw. zugreifen. Es besteht allerdings auch die Möglichkeit, einen WYSIWYG-Editor einzubinden. Dazu dann später mehr.

Hinter Body seht ihr den Hyperlink Zusammenfassung bearbeiten. (Wurde er angeklickt, steht da Zusammenfassung verbergen.)

 

Wird der angeklickt, gibt es für den eigentlichen Artikel zwei Textfelder. Der in das Feld Zusammenfassung eingetragene Text dient dabei auf der Webseite als Teaser. Man kann seinen Besuchern hier also eine kurze Zusammenfassung des eigentlichen Textes liefern. Der Gesamttext wird dann in das Feld Body eingetragen. Was bewirkt diese Zweiteilung aber eigentlich? Ruft ein Besucher die Seite auf, wird ihm zunächst die Zusammenfassung angezeigt.

 

Erst wenn er auf die Überschrift oder den Weiterlesen-Link klickt, ist der Gesamttext zu sehen.

 

Für die Formatierung der Texte greift man standardmäßig auf HTML-Elemente zurück. Über das Feld Textformat kann man explizit festlegen, in welcher Form der Text eingegeben werden soll. Drupal stellt dafür drei Varianten zur Verfügung:

Filtered HTML
Full HTML
Plain text

Bei Filtered HTML wird der HTML-Code beim Speichern der Seite untersucht. Verbotene HTML-Elemente werden dabei automatisch entfernt. Standardmäßig sind die folgenden Elemente in diesem Modus erlaubt:

<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>

Weitaus mehr Spielraum hat man bei Full HTML. Dort sind nämlich alle HTML-Elemente erlaubt. Das klingt zunächst einmal verlockend. Einen Nachteil hat die ganze Sache aber: Wenn sich ein Redakteur nicht mit HTML auskennt und beispielsweise den etwas "schrägen" HTML-Code aus Word kopiert, hat man diesen Code-Salat auf seiner Webseite. Daher sollte diese Variante nur dann gewählt werden, wenn man sicher sein kann, dass diejenigen, die die Texte erstellen, mit HTML umgehen können.

Wählt man Plain text, sind überhaupt keine HTML-Elemente erlaubt.

Speichert den angelegten Artikel jetzt zunächst einmal ab. Denn nun soll – um ein komfortableres Arbeiten zu ermöglichen – ein WYSIWYG-Editor installiert werden.

WYSIWYG-Editoren installieren

Die Eingabe der Inhalte über das Textfeld funktioniert natürlich, wirklich komfortabel ist das allerdings nicht. Daher taucht oftmals eine berechtigte Frage auf: Gibt es denn in Drupal keine WYSIWYG-Editoren? Doch, die gibt es, sie sind allerdings nicht in der Standardinstallation enthalten. Die zwei populärsten (und übrigens auch noch besten) WYSIWYG-Editoren für Drupal sind TinyMCE und der FCK-Editor. Welchen dieser beiden Editoren ihr verwendet, bleibt natürlich euch überlassen.

Ich zeige hier die Installation von TinyMCE. Die dafür notwendigen Schritte funktionieren dann so aber auch beim FCK-Editor und allen anderen Drupal-Editoren. Wer sich den TinyMCE installiert, bekommt alle Möglichkeiten an die Hand, um Artikel und Seiten formatieren zu können. Die Installation ist allerdings etwas aufwendiger als die anderer Drupal-Module. Zunächst einmal ladet ihr euch das Modul Wysiwyg von der Seite http://drupal.org/project/wysiwyg herunter.

Installiert wird es über Module>Neues Modul installieren. Wählt das heruntergeladene Archiv aus und bestätigt die Auswahl mit Installieren. Nach erfolgreicher Installation muss das Modul aktiviert werden. Das geschieht über Module. Aktiviert dort das vor Wysiwyg stehende Kontrollkästchen und bestätigt das mit Konfiguration speichern.

Ruft nun Konfiguration>Wysiwyg profiles auf.

 

In dieser Übersicht sind alle unterstützten Editoren aufgeführt. Zu erkennen ist aber auch, dass noch keiner davon installiert ist. Das wird jetzt nachgeholt. Folgt dabei bei TinyMCE dem Download-Link. Das heruntergeladene Archiv wird entpackt und muss anschließend in das Verzeichnis sites/all/libraries eingefügt werden. Die Verzeichnisstruktur sollte folgendermaßen aussehen:

 

Wenn ihr jetzt die Seite aktualisiert, kann der installierte Editor für die jeweiligen Formate ausgewählt werden. In der Spalte Editor wird jeweils TinyMCE eingestellt. Nachdem das mit Speichern übernommen wurde, kann der Editor verwendet werden. Testen könnt ihr den neuen Editor jetzt an dem zuvor gespeicherten Artikel. Ruft dazu Inhalt auf und klickt in der Spalte Bearbeiten auf den Namen des Artikels. Das Textfeld erscheint wenig spektakulär, auch wenn der Editor eigentlich bereits verfügbar ist. Um dessen Potenzial aber ausschöpfen zu können, muss man ihn konfigurieren. Ruft dazu Konfiguration>Wysiwyg profiles auf und klickt bei dem gewünschten Format auf Bearbeiten.

 

Im Folgenden wird davon ausgegangen, dass als Format Filtered HTML gewählt wird. Über die angezeigten Bereiche lässt sich der Editor konfigurieren. Ruft BUTTONS AND PLUGINS auf und aktiviert die Schaltflächen, die angezeigt werden sollen. Nachdem die Änderungen gespeichert und der Artikel erneut zum Bearbeiten geöffnet wurde, steht der WYSIWYG-Editor zur Verfügung.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Bootstrap für modernes Webdesign

Bootstrap für modernes Webdesign

Ob Smartphone, Tablet oder PC – Größe spielt keine Rolle mehr! Mit Bootstrap schmiegen sich Content und Design wie von Geisterhand an jedes Format. Lerne in 12 Lektionen und 2,5 Stunden Video-Training, wie dir das beliebte Framework Bootstrap den Weg zur responsiven Website erleichtert.

  • Funktionen, Komponenten, Möglichkeiten: Bootstrap kennenlernen und bedienen
  • In der Praxis: Am Live-Beispiel von der Basis bis zur responsiven Website
  • Zum Mitmachen und Nachvollziehen inklusive der Arbeitsdateien

Zum Training