GetSimple Template erstellen (3)

Dezember 7, 2019 - Lesezeit: 5 Minuten

Im dritten Teil der Beitragsserie geben Sie Ihrem neuen Template ein Layout, keine Sorge, es ist einfacher als Sie denken. Ich selbst nutze sehr gerne das beliebte CSS-Framework BOOSTRAP (getbootstrap.com). Auf der gleichnamigen Webseite des Projektes erhalten Sie einen Link (getbootstrap.com/.../introduction) den Sie in Ihre template.php einhängen können. Ihre Template-Datei müsste dann wie folgt angepasst werden:

001 <!DOCTYPE html>
002 <html lang=de>
003
004 <head>
005 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
006 </head>
007
008 <body>
009
010 <p><?php get_page_content(); ?></p>
011
012 </body>
013 </html>

Die Zeilen 4 bis 6 binden das CSS-Framework BOOTSTRAP in Ihre Webseite ein. Ab sofort können Sie alle Styleklassen des Frameworkes nutzen. Die Webseite des Projektes ist excellent dokumentiert und die vielen Codebeispiele (z.B. Cards) können Sie 1:1 herauskopieren und in das body-Segment des Templates einbauen, wie der folgende Code zeigt.

001 <!DOCTYPE html>
002 <html lang=de>
003
004 <head>
005 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
006 </head>
007
008 <body>
009
010 <div class="container">
011
012 <div class="card" style="width: 18rem;">
013 <img src="..." class="card-img-top" alt="...">
014 <div class="card-body">
015 <h5 class="card-title">Card</h5>
016 <p class="card-text"> <?php get_page_content(); ?> </p>
017 <a href="#" class="btn btn-primary">Go somewhere</a>
018 </div>
019 </div>
020
021 </div>

022
023 </body>
024 </html>

In Zeile 16 habe ich das bereits bekannte get_page_content() eingefügt, sodass der Inhalt der ersten GetSimple Seite in Form einer Card angezeigt wird. Das Codesegmet von Zeile 12 bis 19 stammt 1:1 von der Webseite des BOOTSTRAP Projektes (siehe weiter oben "Cards"). Zusätzlich habe ich auch die Class container in Zeile 10 eingefügt, um dem Layout einen optischen Rahmen zu geben. In Zeile 13 müssten Sie noch eine Bildsource angeben wenn die Card ein Bild im Kopf zeigen soll.

Anmerkung - Als Resultat der Anpassungen wird Ihnen der Inhalt im so genannten Card-Layout angezeigt. Prinzipiell funktioniert dies auch alleine auf einer Webseite, sieht jedoch etwas eigenartig aus, da ein sinnvoller Rahmen (Menü, Navigation, Seiten-Name usw.) fehlt. Die Doku über die Class container (getbootstrap.com/docs/4.4/layout/overview) sollten Sie nachschlagen. Experimentieren Sie etwas mit den verschiedenen Klassen des BOOTSTRAP herum, Sie können nichts "kaputt" machen.

Oliver Lohse - » Ich bin ausgebildeter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Sprachen bzw. Markup-Dialekten wie: Java, JEE, COBOL, PHP, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 22 Jahren arbeite ich in einem großen Softwareunternehmen in Niedersachsen.

Tipps. Tricks, Snippets, Hacks und Codings zum CMS Bludit, Automad, WordPress, Joomla, GetSimple, Typesetter, Nibbleblog oder den angesagten Template Engines wie Smarty.

Leser heute

330


Passende Beiträge über Schlagwörter finden:

3.10.0 3.8.1 3.9.0 Admin Alternative Angriff Anpassungen Automad Autor Avatar Back Backend Bild Bilder Bildgröße Blog X Bludit Blättern Branding Categorie Characters CMS Content Copyright CSS Custom Dashboard Dateiextensionen Dateityp Datum Devtheme Editor eMail Empfehlung Engine Ergonomie Escape Expression Extensionen Filetype Flatfile Footer footer.php FTP Gesperrt GetSimple Größe Hochladen home.php HTML IF Images Info JavaScript Kategorie Key Keyword Keywords Kopf Kopfzeile Kopieren Layouting Leser Meta Metadaten Metainfo Nachname Name Navigation Nibbleblog OCTOBER Oliver Lohse page.php Paginator PHP Pictures RegExp Regular RegularExpression Remote Rolle Schlagwörter Script Secure Sicherheit Sichern Size Smarty Sortieren Special Spezial Statistik Tag Tags Template Templates Text Themes Tools TYPERITE Umlaute Update Upload URL user variables.php Verbergen Vor Vorname Werkzeug WordPress xmlrpc Zurück