Kategorien
Content Management Systeme Infrastruktur Shared Hosting Webdesign Wunschthema

Wie erstelle ich eine Website?

Für das Blog freue ich mich immer über Wunschthemen. In letzter Zeit, wohl auch durch die Ausgangssperren, erreichten mich mehrere Anfragen von Lesern, die eine Website erstellen wollen und unsicher waren, wie das geht. Sinngemäß lautete die Frage etwa so:

“Meine Tochter [Sohn, Frau, Schwager, Freund, Kollege, ich] möchte eine Website erstellen. Ich kenne ein wenig WordPress [Joomla, Drupal, Typo3] weil XY das auch verwendet. Wo fängt man da am Besten an? Was ist langfristig sinnvoll?“

In diesem Blog Post versuche ich eine Antwort zu geben.

Kategorien
Server Shared Hosting Site Builder Webdesign Webserver Wunschthema

Eine einfache Website mit Kontaktformular

Manchmal benötigt man eine einfache Website mit etwas Text, ein paar Bildern und einem Formular.
Also so Dinge,  wie:

  • Ich verschenke Dinge, willst du die haben?
  • Ich mag etwas, magst du das auch?
  • Weisst du auf meine Frage eine Antwort?
  • Ich verkaufe mein Haus, willst du es haben?

Ich meine so ganz klar private, einfache Vorgänge, die nicht darauf abzielen, Daten zu sammeln oder andere fiese Sachen zu tun. Im Zeitalter von Datenschutz-Grundverordnungen, SPAM Bots und Fake News weiss man ja nie. Seht diesen Blogeintrag daher bitte als persönliche Erfahrung, wie einfach es ist, im World Wide Web eine Website selbst zu erstellen.

Die Website

Auch wenn es nur eine einfache Seite ist, soll sie doch etwas „hermachen“ und auf allen denkbaren Endgeräten gut aussehen. Ich möchte natürlich einen Bild-Slider und auch das eine oder andere schicke Element. Weil das doch alles recht mühselig zu erstellen ist nutze ich das Bootstrap Framework. Mit Bootstrap lassen sich recht einfach anspruchsvolle Layouts erstellen, hier ein paar Beispiele:

Bootstrap Beispiele
Bootstrap Beispiele

Ich will aber nichts herunterladen und installieren, sondern nur meine index.html Seite bauen. Am besten mit einem Tablet oder einem Telefon. Ich brauche also zunächst ein HTML Gerüst und eine Seite. Das kann ich auf meinem PC machen und dann per FTP auf meinen Webspace laden oder auch direkt im Webhosting in der cPanel Dateiverwaltung.

index.html Datei

Für mein Beispiel habe ich mir eine Subdomain angelegt (bootstrap.seafolly.ch) und dort erzeuge ich nun eine index.html Datei. Wenn ich die Datei index.html nenne, wird sie direkt als erstes aufgerufen, wenn ich die URL im Browser aufrufe.

index.html erstellen
index.html erstellen

Starter Template

In diese Datei kopiere ich mir den Beispiel Startcode von der Bootstrap-Seite https://getbootstrap.com/docs/4.1/getting-started/introduction/.

Starter-Template im cPanel Editor
Starter-Template im cPanel Editor

Das sieht auf den ersten Blick etwas unübersichtlich aus, ist aber gar nicht so schlimm. Im Starter-Template werden alle benötigten Dateien zur Laufzeit geladen (Bootstrap CSS und JavaScript, sowie jQuery).

In diesem Bereich des Codes werden wir arbeiten

... <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1> ...

Jumbotron

Der Text oben auf der Seite ist in einem „Jumbotron“. Es ist ein Text mit einem Button und einem Link dahinter.

Jumbotron mit Button und Link
Jumbotron mit Button und Link

Ich kann das notwendige HTML Markup aus den Bootstrap Beispiele übernehmen (https://getbootstrap.com/docs/4.1/components/jumbotron/) und den Text anpassen.

  <title>Citroën Typ H</title>
</head>
<body>
<div class="jumbotron">
  <h1 class="display-4">Citroën Typ H</h1>
  <p class="lead">Der Citroën Typ H war ein Kleintransporter des französischen Automobilherstellers Citroën.</p>
  <hr class="my-4">
  <p>Der Typ H war einer der am weitesten verbreiteten Kleintransporter in Frankreich und wurde von Juni 1948 bis Dezember 1981 gebaut. </p>
  <a class="btn btn-primary btn-lg" href="https://de.wikipedia.org/wiki/Citroën_Typ_H" role="button">Mehr lesen in der Wikipedia</a>
</div>

Slider

Ein Slider heisst bei Bootstrap Carousel (https://getbootstrap.com/docs/4.1/components/carousel/). Es ist eine Slideshow, der man nur die gewünschte Links zu den Bilder hinzufügen muss. Die Bilder für meine Slideshow kommen aus diesem Flickr Album (Ja, diesen Platz mit den Autos gab es wirklich 🙂 ). Auch hier muss der Quellcode einfach kopiert und angepasst werden. Ich habe mir für die Variante mit Navigationspfeilen und einer Bildlegende entschieden. Die HTML Struktur ist eine ordered list (<ol></ol>) mit so vielen list items (<li></li>) wie Bilder angezeigt werden sollen. Innerhalb des list items wird die Bild-URL in ein image Tag (<img>)eingebunden. Die beiden Pfeile zum blättern sind einfach Links (<a href …></a>). Alles notwendige CSS und JavaScript ist in den vorher eingebundenen Dateien bereits fertig definiert.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://c2.staticflickr.com/4/3096/3123098936_1f45028957_b.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://c2.staticflickr.com/4/3123/3123102792_25e8b8049d_b.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://c2.staticflickr.com/4/3094/3122251861_b89f8e5469_b.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Nächstes</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Vorheriges</span>
  </a>
</div>

Auf der Seite funktioniert es einfach, die einzelnen Slides werden nach einer gewissen Zeit ausgetauscht. Alle Einstellungen sind natürlich auch änderbar. ich nutze den Standard.

Slider - Bootstrap Carousel
Slider – Bootstrap Carousel

Kontaktformular

Nun benötigen wir noch ein Formular. Auch hier gibt es alles vordefiniert zum kopieren unter https://getbootstrap.com/docs/4.1/components/forms/. Ich biete ein Feld für einen Namen, die E-Mail Adresse und eine Nachricht an. Damit das Formular mittig auf allen Bildschirmgrössen angezeigt wird, umschliessen ich es mit den nötigen Layout Klassen (https://getbootstrap.com/docs/4.1/layout/grid/).

<div class="row">
  <div class="col-1 col-sm-1 col-md-2 col-lg-2 col-xl-2"></div>
  <div class="col-10 col-sm-10 col-md-8 col-lg-8 col-xl-8">
  <form id="contact-form" method="post" action="contact.php" role="form">
  <p class="lead">Schreibe mir, wenn dir der Citroën Typ H auch gut gefällt :)</p>
  <div class="form-group">
    <label for="name">Dein Name oder dein Spitzname</label>
    <input class="form-control" name="name" type="text" id="name" placeholder="trage hier deinen Namen ein">
  </div>
  <div class="form-group">
    <label for="email">E-Mail Adresse (optional)</label>
    <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com">
   </div>
   <div class="form-group">
     <label for="message">Nachricht (optional)</label>
     <textarea class="form-control" name="message" id="message" rows="3"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Senden</button>
   </form>
</div>
<div class="col-1 col-sm-1 col-md-2 col-lg-2 col-xl-2"></div>
</div>

Die einzelnen Felder befinden sich innerhalb eines form-Tags (<form id=“contact-form“ method=“post“ action=“contact.php“ role=“form“>). Die Methode zum verschicken ist POST und die Datei, in der die Daten verschickt werden sollen heisst contact.php.

So sieht das Formular auf der Website aus.

Formular
Formular

Daten verschicken

Nun kommen wir zum „komplizierten“ Teil. Die Daten, die der Benutzer eingibt, werden an eine andere Datei (contact.php) übertragen und von dort per E-Mail verschickt. Dieser Prozess ist technisch nicht besonders kompliziert aber rechtlich hängt da eine Menge dran. Je nachdem, ob der Absender seine E-Mail Adresse angegeben hat oder nicht handelt es sich um sensible persönliche Daten, die beispielsweise manchmal nur verschlüsselt übertragen werden dürfen. Wenn sie dann auf dem Webhosting Server angekommen sind, verschickt dort ein E-Mail Server des Provider die entsprechende E-Mail, das heisst die Daten werden von einem Dritten verarbeitet und ich als der Anbieter der Seite im Netz brauche unter Umständen einem Auftragsdatenverarbeitungsvertrag (siehe auch Auftragsdatenverarbeitungsverträge und Verordnungen). Aber zurück zur Technik. Ich erstelle mir auf die gleiche Weise wie eben eine Datei mit dem Namen contact.php und benutze hier im Beispiel „einfache“ PHP-Befehle um die E-Mail zu verschicken. Im weiteren Verlauf beschreibe ich eine von zahlreichen Methoden eine E-Mail mittels PHP zu verschicken und es wichtig zu wissen was passieren könnte.

Zunächst erstelle ich mir Variablen $from, $sendTo, $subject, $fields, $okMessage und$errorMessage.

<?php
// Die Absender E-Mail Adresse
$from = 'Citroen H Fan <hagen@novatrend.ch>';
// Die Emfänger E-Mail Adresse
$sendTo = 'Citroen H Fan <hagen@novatrend.ch>';
// E-Mail Betreff
$subject = 'Eine neue Nachricht von einem Citroen H Fan';
// Feldernamen und ihre Übersetzungen
// Ein Array bestehend aus dem Variablennamen => Tect der in der Email erscheint
$fields = array('name' => 'Name', 'email' => 'E-Mail', 'message' => 'Nachricht'); 
// Nachricht, wenn die E-Mail verschicht wurde
$okMessage = 'Deine Nachricht wurde verschickt. Vielen Dank. Wenn du deine E-Mail angegeben hast, melde ich mich vielleicht bei dir!';
// Nachricht, wenn die E-Mail nicht verschicht wurde
$errorMessage = 'Irgendwas ging schief bei der Übermittlung der Daten. Versuche es einfach später nochmal.';

Dann versuche ich die E-Mail zu verschicken (try catch). Wenn sie verschickt wird, zeige ich den Inhalt der $okMessage Variablen an, wenn sie nicht verschickt wird den Inhalt der $errorMessage Variablen. Wenn die Formularfelder nicht gefüllt sind, wird nichts verschickt.

try{
  if(count($_POST) == 0) throw new \Exception('Formular ist leer');
  $emailText = "Neue Nachricht aus dem Citroen H Formular \n=============================\n";
  foreach ($_POST as $key => $value) {
    // Wenn ein Feld da ist, schreibe es in die E-Mail 
    if (isset($fields[$key])) {
      $emailText .= "$fields[$key]: $value\n";
    }
  }
  // E-Mail Header
  $headers = array('Content-Type: text/plain; charset="UTF-8";',
    'From: ' . $from,
    'Reply-To: ' . $from,
    'Return-Path: ' . $from,
    );

  // E-Mail verschicken
  mail($sendTo, $subject, $emailText, implode("\n", $headers));
  $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e){
  $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

Ich gehe hier nicht näher auf den Code ein, das es wie gesagt, sehr viele Möglichkeiten gibt, E-Mails zu verschicken.
Mein Code hat den Nachteil, das

  • SPAM Bots die Datei contact.php nach dem erstmaligen Verschicken neu laden können und dann immer wieder eine neue E-Mail verschickt wird.  Die E-Mail geht allerdings nur an mich und von daher ist das nicht so schlimm.
  • SPAM Bots das Formular automatisiert ausfüllen und versenden können. Ich benutze momentan kein Captcha.
  • Hacker „gefährlichen“ Code in die Felder eintragen können, der dann auf den Novatrend übertragen wird und evtl. den Server „hackt“. Solange die benutzte PHP Version keine Sicherheitslücken hat, ist das Risiko allerdings gering.

Der Code hat aber auch einen Vorteil:

  • er ist extrem einfach und ich, als Ersteller der Site, kann bei Bedarf reagieren.

Die E-Mail

Die E-Mail sieht in meinem Mailprogramme so aus:

E-Mail
E-Mail

Fazit

Ich wollte zeigen, wie einfach die technischen Zusammenhänge sind, um Informationen im WWW anzuzeigen und zu verschicken. Es ist ausdrücklich keine „Raketentechnik“ sondern ganz im Gegenteil sehr bodenständiges „Handwerk“. Wie im Handwerk auch gibt es daher auch manchmal Situationen, in denen es einfach mal „schnell“ gehen muss. Für solch eine Situation ist dieses Beispiel gedacht.


tl;dr: Eine Website mit einem Slider und einem Formular ist schnell erstellt.

Kategorien
Content Management Systeme

WordPress Anpassungen – Beitragsbild, Startseite und Quellcode-Anzeige

Nachdem wir das Blog auf WordPress umgestellt haben, stellen sich einige Fragen wie bestimmte Dinge erledigt werden und es bedarf doch einiger Anpassungen.

Hier drei Beispiele:

Beitragsbild

Ein Beitragsbild oder Featured Image ist in WordPress getrennt vom eigentlichen Inhalt. Jeder Artikel kann ein Beitragsbild enthalten, dem dann, wie allen Bilderm, ein Titel, eine Bildunterschrift, ein Alternativtext und eine Beschreibung zugeordnet werden kann.

WordPress - Beitragsbild
WordPress – Beitragsbild

Das Beitragsbild wird dann prominent auf der Website angezeigt. Dummerweise aber ohne die Bildunterschrift. Ich benutze manchmal Creative Commons Fotos im Beitragsbild. Beim ersten WordPress Artikel habe ich so ein Foto genommen und prompt erhielt ich auf Facebook die Rückmeldung:

das Bild kommt mir irgendwie bekannt vor … 🙂

Facebook - Kommentar
Facebook – Kommentar

Ich habe das Bild verwendet, aber keine Lizenzinformationen angezeigt. Beim Kollegen Kriegel war das nun kein Problem aber bei den anderen Artikeln gibt es ja auch solche Bilder und so forschte ich, wie ich das Verhalten ändern kann.

Die „provisorische“ Lösung war dann, in der Theme-Datei content-single.php unter der Zeile mit der twentysixteen_post_thumbnail() Funktion, den folgenden Code einzutragen.

<?php if ( $caption = get_post( get_post_thumbnail_id() )->post_excerpt ) : ?>
    <p class="caption"><small><em><?php echo $caption; ?></em></small></p>
<?php endif; ?>

Die zwei Zeilen sind insofern interessant, weil sie die Vorgehensweise in WordPress gut widerspiegeln.

Hier die Erklärung:

  • get_post(parameter) liefert ein Array der Werte eines Artikel zurück. get_post(10) macht das für die Artikel-ID 10.
  • Das Beitragsbild heisst intern thumbnail. Die Funktion get_post_thumbnail_id() liefert die Artikel-ID zurück.
  • Wenn man beides kombiniert, erhält man die Werte des Beitragsbildes
    get_post(get_post_thumbnail_id()). Mich interessiert nur die Bildunterschrift (Caption), die intern post_excerpt heisst
  • Kombiniert sieht es dann so aus
    $caption = get_post( get_post_thumbnail_id() )->post_excerpt )
  • Das if/endif drumherum stellt sicher, dass die nächste Zeile nur ausgeführt wird, wenn in der Variable $caption ein Wert steht.
  • Die nächste Zeile enthält das Markup und die Art der Darstellung. Da es schnell gehen sollte, habe ich die HTML Tags <small> und <em> verwendet, damit der Text kleiner als der folgende Text dargestellt wird.

Nun kann man darüber meckern und die Lösung in der Abteilung quick&dirty einordnen, aber ich hatte das Problem in 5 Minuten gelöst und in diesem Fall zählte Schnelligkeit.

Mittlerweile habe ich gesehen, das abhängig vom Screen, die Zeile manchmal nicht so gut aussieht, aber sie ist da und ich kann mich mit der Lösung des Problems in Ruhe beschäftigen 🙂

Startseite

Im TwentySixteen Theme werden auf der Startseite alle Artikel in voller Länge angezeigt. Das ist auf der einen gut, weil man sie dann nacheinander lesen kann, aber bei sehr langen Artikeln ist es doch unübersichtlich.

Es gibt in WordPress in Einstellungen > Lesen, die Möglichkeit eine Kurzfassung anzuzeigen, die Einstellung gilt aber nur für das Newsfeed. Auf die Startseite hat es leider keinen Einfluss.

Wordpress Einstellungen - Lesen
WordPress Einstellungen > Lesen

Auch hier ein kleiner „Hack“. Diesmal müssen wir das in der content.php machen. Ersetze einfach diesen Programmcode

<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s', 'twentysixteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );
 
			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
		?>
	</div><!-- .entry-content -->

durch diesen

<div class="entry-content">
		<?php
		if ( is_single() ) :
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s', 'twentysixteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
			else :

			/* translators: %s: Name of current post */
			the_excerpt( sprintf(
				__( 'Continue reading %s', 'twentysixteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
			endif;
		?>
	</div><!-- .entry-content -->

Im neuen Code, wird unterschieden, ob wir es mit einem einzelnen oder vielen Artikeln zu tun haben.
if ( is_single() ) :
...
else :
...
endif;

Im if Fall wird the_content() aufgrufen, also der gesamte Artikel, im else Fall dagegen die Kurzfassung the_excerpt(). Als Ergebnis erscheint auf der Startseite nun die Kurfassung und ein Link mit der Beschriftung Weiterlesen.

Damit der Quellcode oben übrigens so schön farbig formatiert wird, habe ich noch das Plugin SyntaxHightlighter Evolved installiert.

Fazit

Es ist wirklich einfach in WordPress Anpassungen vorzunehmen. Welche Auswirkungen solche Anpassungen aber beispielsweise auf die Performance der Site haben, ist eine ganz andere Frage.

Fragen

  1. Gibt es eine bessere/elegantere Lösung als die beschriebenen Wege?
  2. Habt ihr eine Idee, wie die Ausgabe der Bildunterschrift verbessert werden kann, am besten bereits in der Thumbnail Funktion?
  3. Welche Plugins nutzt ihr um Quellcode darzustellen?

Tl;dr: Wir passen unser WordPress Blog an

Kategorien
Content Management Systeme Webdesign

Themes basierend auf Bootstrap in Drupal

Wie sie sicher schon bemerkt haben, steckt hinter dem NovaTrend Blog das Content Management System Drupal. Das Theme basiert auf dem HTML, CSS und JavaScript Framework Bootstrap. Die Struktur einer solchen Site lässt sich erstaunlich einfach erstellen und bietet grosse Flexibilität beim Design.

In diesem Artikel möchte ich Ihnen zeigen, wie Sie eine Drupal Website mit Bootstrap aufsetzen können.

Bezüglich der Software Versionen ist eigentlich nie die richtige Zeit einen Artikel darüber zu schreiben, steht doch immer schon die neue Version vor der Tür.
Die Veröffentlichung von Drupal 8 findet seit gefühlten 2 Jahren statt und Bootstrap brachte gerade eine Version 4 Alpha heraus.

Hier im Blog benutzen wir Drupal 7.x und Bootstrap 3.x und vermutlich ist diese Kombination recht gebräuchlich.
Bei drupal.org werden mehr als 70.000 aktive Websites angegeben, die Bootstrap einsetzen (Quelle).

Drupal - Bootstrap - Installationen - 2012 - 2015
Drupal – Bootstrap – Installationen – 2012 – 2015

Aber der Reihe nach.
Zunächst stellt sich die Frage, warum ich das benutzen soll.

Die Nutzung eines Content Management Systems ist ab einer gewissen Komplexität Ihrer Website zwingend. Ob es nun unbedingt Drupal sein muss, sei dahingestellt. Drupal eignet sich für diesen Artikel, weil wir unser Blog damit betreiben. Sie können Bootstrap ebenfalls in Joomla, Typo3, WordPress und vermutlich den meisten anderen CMS nutzen, teilweise ist es bereits enthalten.

Was ist Bootstrap?

Bootstrap ist ein freies und sehr häufig verwendetes CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente, sowie zusätzliche, optionale JavaScript-Erweiterungen.

Bootstrap - Komponenten (Auswahl)
Bootstrap – Komponenten (Auswahl)

Sie können mit Hilfe dieser Elemente eine Website entwickeln und später dann bei Bedarf ein CMS „darunterlegen“.

Wenn ich das so schreibe, dann höre ich den Webdesigner protestieren und sehe den Programmierer zusammenzucken. In der harten Realität läuft es aber ziemlich oft genau so ab. Der grosse Vorteil bei dieser Vorgehensweise ist die Flexibilität und die unglaubliche Verbreitung von Bootstrap. Sie müssen sich nicht sofort festlegen, mit welchen Tools die Site letztlich realisiert wird. Es wird „einfach“ möglich Prototypen der Website in unterschiedlichen CMS zu realisieren und Workflows zu optimieren.

Es gibt Dateien mit Konfigurationsanweisungen für Bootstrap, die das komplette Design der Website beschreiben und einfach austausch- und veränderbar sind. Bekanntestes Beispiel dafür ist der Service bootstrap.com. Jedes der angebotenen Themes lässt sich „per Mausklick“ integrieren. Hier der Screenshot eines Beispielthemes im Flatdesign:

Bootswatch - Flatly
Bootswatch – Flatly

Installation

Installieren Sie sich das aktuelle Drupal 7 (Installation der 5 meistverbreiteten Content Management Systeme). Um mit Bootstrap arbeiten zu können, benötigen eine aktuellere jQuery Version als der Standard in Drupal 7. Glücklicherweise gibt es dafür natürlich ein Modul 🙂

Installieren und aktivieren Sie die Module bootstrap und jquery_update

Sie können die Installation per Konsole mit Drush erledigen

drush dl bootstrap jquery_update
drush en bootstrap jquery_update

oder über den Browser in /admin/modules/install

Drupal - Modul installieren
Drupal – Modul installieren

Konfiguration

Das jQuery Modul kann zunächst ohne Konfiguration genutzt werden, bei Bedarf können Sie in /admin/config/development/jquery_update unterschiedliche jQuery Versionen und ein CDN konfigurieren.

Das Bootstrap Theme kommt mit einem Starterkit für ein eigenes Subtheme, Sie können es am Anfang aber auch „einfach so“ nutzen und mit einem Bootswatch Design kombinieren. Nehmen wir das Bootstrap Flatly Beispiel.

Zunächst müssen Sie das neu installierte Bootstrap Theme aktivieren und als Standard festlegen (/admin/appearance).

Drupal - Theme aktivieren
Drupal – Theme aktivieren

Ihre Website hat dann das responsive Bootstrap Design.
Wenn Sie die Grösse des Browserfensters verkleinern, sehen Sie, was ich meine.

Drupal - Startseite
Drupal – Startseite

Um nun das Boostrap Flatly Design zu erhalten, müssen Sie in den Theme-Einstellungen Flatly auswählen (/admin/appearance/settings/bootstrap). Sie können sich alle Boostrap Themes hier in einer Vorschau ansehen.

Bootstrap - Flatly wählen
Bootstrap – Flatly wählen

Wenn Sie im Tab Components die Navigationsleiste (NAVBAR) nun noch auf „Static Top“ setzen …

Bootstrap - Navigation
Bootstrap – Navigation

sieht Ihre Drupalsite so aus:

Drupal - Bootstrap - Flatly
Drupal – Bootstrap – Flatly

Flatdesign … ganz einfach!
Wenn die Farben für Ihr Projekt passen, ist Ihre Arbeit hier beendet.

Ein eigenes Sub-Theme

Wenn Sie einen Kunden haben, soll die Site natürlich in den Farben, Schriften und Einstellungen der Corporate Identity sein. Um das zu realisieren, müssen Sie sich ein Sub-Theme erstellen. Das ist nicht schwer und wird hier (Bootstrap sub-theming „how to“) detailliert beschrieben. Grundsätzlich erstellen Sie sich einen eigenen Theme-Ordner, kopieren die Bootstrap Quelldateien dort hinein und ändern die theme.info Datei ab. Ausserdem benötigen Sie einen LESS Compiler. Ich nutze dafür die node.js Umgebung unter Mac OS und kann dort einfach einen LESS Compiler installieren (npm install -g less).
Hier ist eine detailierte Beschreibung (How to Use Bootswatch Themes in Drupal 7).

Je nachdem, ob Sie unter Windows, Linux oder Mac OS arbeiten sind die Schritte ein wenig anders, daher möchte ich es beim Link auf die Erklärungen belassen.

Wenn Sie sich Ihre Entwicklungsumgebung eingerichtet haben, müssen Sie für einfache Anpassungen nur die Datei variable.less bearbeiten und danach mit lessc kompilieren. In der variable.less stehen alle Parameter eines Bootswatch Themes und Sie können diese Datei downloaden (http://bootswatch.com/flatly/).

Bootstrap - Flatly - variable.less
Bootstrap – Flatly – variable.less

Nach kurzer Zeit sieht Ihr Drupal dann so aus:

Drupal - NovaTrend Design
Drupal – NovaTrend Design

In diesem Fall musste noch eine Drupal Template Datei überschrieben werden, aber die wesentlichen Änderungen waren tatsächlich nur in der Datei variable.less vorzunehmen!

Fazit

Mit dem Bootsstrap Framework können Sie Standardsites in sehr kurzer Zeit erstellen. Für individualisierte Sites benötigen Sie etwas mehr Aufwand und Know-How, sind allerdings extrem flexibel im Design. In Kombination mit den Template-Systemen der CMS können Sie wirklich jeden Bootstrap basierten Entwurf „in endlicher“ Zeit realisieren 🙂

Links


tl;dr: Die Nutzung des Bootstrap Framework wird immer beliebter – hier ein Beispiel in Kombination mit Drupal.