Templating 3 ein einfaches Layout für das CMS GetSimple anlegen

Teil 3 - Ein GetSimple Template erstellen. In Verbindung mit dem freien und beliebten CSS-Framework Bootstrap eine leichte Sache auf dem Weg zum eigenen Blog.

CMS Workbench Bludit Pico WordPress Smarty Twig Automad PHP
SEO

SEO - Die Suchmaschinen-Optimierung ist eine der wichtigsten Disziplinen im Online-Marketing. Wenn es Ihnen darum geht, für Ihre Webseite oder Ihren Webshop ein Top-Ranking in den SERPs zu erzielen, müssen Sie wissen, wie Suchmaschinen ticken und welche Stellschrauben Sie wie einstellen. Sebastian Erlhofers SEO-Handbuch ist für Ihre SEO-Ausbildung ein wichtiger Begleiter und ein Quell an Wissen, aus dem Sie Praxiswissen und Profitipps schöpfen. (*

kaufen...
Inhaltsverzeichnis

    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.


    Template Theme Layout Design Style
    01.12.2021
    Oliver Lohse

    Es wurden noch keine Kommentare verfasst, sei der erste!

    Weitere passende Artikel

    _____

    Zufällige Affiliate-Links auch ohne externe Plugins mit Hilfe von YAML und der Templatesprache Twig in Pico CMS realisieren, das ist sogar wirklich sehr einfach.
    Sie können das Standard CSS des Bludit Theme mit eigenen Definitionen überschreiben. Dazu sollten Sie das Plugin HTML-Code aktivieren und Styles eintragen.
    So können Sie das freie Feld TEMPLATE in den Beitragseinstellungen verwenden. Fragen Sie es mit dem folgenden Coding des Beitrags ab und steuern das Templating
    So steuern Sie die Templatevorgabe in Beiträgen mit dem CMS Bludit. Sie können den Tamplatenamen bei der Erstellung von Beiträgen im Backend angeben.
    Brandings der Entwickler sind natürlich eine gute Sache, jedoch dürfen sie auch abgestellt werden. Wie das für das Bludit Theme DEVTHEME geht, lesen Sie hier
    Im Bludit Theme DEVTHEME wird das Label "latest Post" angezeigt. Manchmal kann das störend sein. Entfernen Sie das Label doch einfach in der home.php
    Mit diesem Coding können Sie verschiedene Templates starten, jenachdem ob der Leser eine Seite, Kategorie, home oder Tag wählt. Bludit kennt vier Seiten-Typen
    Wenn Sie Bludit-Themes und Templates entwickeln dann können Sie dem Leser die Möglichket geben das Theme live umzuschalten für den ersten Eindruck.
    Das Bludit Theme TYPERITE ist vielversprechend, da es ein Optimum an Customizing ermöglicht. Entfernen Sie das Branding aus dem Footer - das ist erlaubt.
    Mit diesem Design Pattern schreiben Sie gute Themes die Sie auch noch in vielen Jahren weiter Ausbauen können. Erzeugen Sie einfache modulare Komponenten.

    Download - Plugins -

    Download • kostenlos • Plugin • Template • Theme
    Kostenlose Plugins und Templates für Bludit, Pico CMS, WonderCMS, GetSimple, WordPress und co, zum kostenlosen Download
    Teil 1 - Der Einstieg in das Templating mit dem freien CMS GetSimple - der Name ist Programm, denn dieses CMS ist klar und leicht beherrschbar strukturiert.
    Dieser Beitrag zeigt ein einfaches Demo Template für die JavaScript basierte Template Engine Handlebars. Dieses Template ist sogar offline funktionsfähig.
    Dieser Beitrag zeigt einen Heredoc Template Parser und mini CMS, erstellt in PHP, unter Nutzung der Heredoc-Syntax. Content, Template und Parser in einer Datei.
    Das ist die kleinste PHP Template-Engine, bzw. das kleinste PHP-CMS der Welt, erstellt mit der Programmiersprache PHP und 7 Zeilen Code.
    Erarbeiten Sie als Prototypen ein reines HTML-Template das Ihnen zusagt. HTML-Templates sind schneller entwickelt und müssen weniger Restriktionen einhalten.
    Die Formularverarbeitung durch PHP ist der beliebteste Standard im Web. Nutzen Sie ein intelligentes Design, können Sie sich viel Arbeit und Stress ersparen.
    Das ist die kleinste PHP-Template-Engine bzw der kleinste Template-Parser in PHP, der mit Heredoc Syntax arbeitet. Die Heredoc Syntax ist ideal für kleine Prototypen.
    Möchten Sie in Smarty Templates Bedingungen abfragen, dann können Sie den IF Befehl des Smarty Parsers nutzen, um die Ausgabe des Templates zu steuern.
    Möchten Sie Themes, Layouts und Designs erstellen die auf hohe Akzeptanz beim Besucher stoßen, dann sollten Sie sich zuvor diesen Styleguide durchlesen.
    In welcher Schreibweise sollten Sie CMS Templates erstellen? Gemischt HTML und PHP oder doch lieber waschechtes PHP? Dieser Beitrag erleichtert den Einstieg.
    Werden Sie zum Template-Entwickler und beginnen mit leichten Arbeiten, portieren Sie Ihre Templates später in die großen CMS wie WordPress, Bludit oder Joomla
    Laden Sie Themengebundene Logos und Bilder mit Hilfe der Helper Klasse Theme oder der Konstante DOMAIN_THEME des CMS Bludits. Das ist die bevorzugte Variante.
    Mit diesem Trick legen Sie neue Datenbank-Felder in der JSON-Datenbank des WonderCMS vollkommen automatisiert an - mit nur einer Codezeile im WonderCMS Theme.
    WordPress Easy - Redaktion

    About me

    Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und Markup-Dialekten, z.B. Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.