Die Startseite: index.php

Zuletzt wird nun die Hauptseite des Themes vorgestellt. Ohne eine index.php kann kein Theme seine Arbeit aufnehmen. Innerhalb der index.php wird sowohl das HTML5-Tag <main> wie auch <article> genutzt, um den Hauptteil sowie die einzelnen Artikel semantisch zu kennzeichnen.

Zu Beginn wird mit get_header() der Header ausgegeben, welchen zuvor in der Datei header.php hinterlegt worden war. Gleiches geschieht mit get_sidebar() und get_footer() mit der Sidebar und dem Footer.

Es fällt auf, dass im Zentrum der Seite die If-Abfrage if(have_posts()) steht, die dann von einem while(have_posts()):the_post(); gefolgt wird. Hierbei handelt es sich um die Hauptschleife über alle Artikel der WordPress-Installation, die auch als ,,The Loop“ bezeichnet wird. Mit Hilfe von the_post() werden die Informationen des aktuellen Artikels zur Verfügung gestellt. Folgende Funktionen werden in diesem kleinen Demo-Theme genutzt:

  • the_ID() erzeugt die ID des Artikels, so dass das CSS ein Artikelbasiertes Layout enthalten kann,
  • post_class() fügt diverse Klassen hinzu, auf die wiederum ein CSS-Layout angewendet werden kann,
  • the_permalink() gibt den Link zu dem Artikel aus, so dass er auf einer separaten Seite angezeigt werden kann,
  • the_title() sorgt für das Einfügen des Titels,
  • the_time() gibt den Veröffentlichungszeitpunkt des Artikels aus,
  • the_category() erzeugt eine Liste von Kategorien, in denen der Artikel veröffentlicht worden ist, dabei wird das Trennzeichen, mit dem die Kategorien unterteilt werden sollen, mit übergeben,
  • the_author_post_link() sorgt für die Ausgabe des Autorennamens mit einem Link auf die Autorenunterseite,
  • comments_popup_link() mit seinen Parametern sorgt dafür, dass angezeigt wird, wieviele Kommentare der Beitrag schon erhalten hat und
  • the_content() gibt schließlich den Textteil des Artikels aus.

Mit Hilfe von posts_nav_link() wird ein Vorwärts- und Rückwärts-Blättern zwischen einzelnen Seiten, auf denen Artikel vorhanden sind, ermöglicht.

Bis jetzt ist noch kein Layout der Elemente erfolgt. Um der Webseite ein anschauliches Design zu geben, werden CSS-Designinformationen hinzugefügt. Es werden zwei Ziele verfolgt:

  • Unser Layout soll responsiv sein. Das bedeutet, dass sich die Webseite automatisch der Bildschirmgröße des Endgerätes anpasst. Wird die Webseite auf einem PC angeschaut, so ist ein großer Bildschirm vorhanden. Die Sidebar kann an die rechte Seite geschoben werden. Wird die Seite allerdings auf einem Smartphone betrachtet, so rutscht die Sidebar unter den Hauptteil. Erreicht wird dies mit Media-Queries und der Flexbox-Funktionalität von CSS.
  •  
    • Die einzelnen Bereiche sollen coloriert werden. Dafür enthält die style.css für jedes semantische Element eine Farbdefinition.
    • Diese Bereiche bekommen zur optischen Aufschönung runde Ecken. Auch diese Information ist in der Datei enthalten.

Folgender Teil wird der style.css-Datei für das Layout hinzugefügt:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert