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.

<?php get_header(); ?>

<main> 
<!-- Schleife über alle Artikel -->
<?php if ( have_posts() ) :
        while ( have_posts() ) : the_post(); ?>
        
        <!-- Darstellung eines Artikels -->
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h2> <!-- Überschrift -->
           <a href="<?php the_permalink(); ?>">
              <?php the_title() ?>
           </a>
        </h2> 
        <p class="meta"> <!-- Metadaten -->
           <?php the_time('d.m.Y'); ?>,
           <?php the_category(', '); ?>, 
           <?php the_author_posts_link(); ?>,
           <?php comments_popup_link('Keine Kommentare', 'Ein Kommentar', '% Kommentare', '', 'Kommentare geschlossen'); ?>
        </p>
        <p> <!-- Der Text des Artikels -->
           <?php the_content('Weiterlesen...'); ?>
        </p>
        </article>
        <!-- Ende der Darstellung eines Artikels -->
        
<?php   endwhile; 
      else: ?>
      Es wurden keine Beiträge gefunden.
<?php endif; ?>

<!-- Navigationslinks in der Liste der Artikel -->
<?php posts_nav_link(' | ', 'Neuere Artikel &raquo;', '&laquo; Ältere Artikel'); ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php get_header(); ?>

<main>

<?php if ( have_posts() ) :

while ( have_posts() ) : the_post(); ?>

<?php the_title() ?>

</a>

</h2>

<?php the_time('d.m.Y'); ?>,

<?php the_category(', '); ?>,

<?php the_author_posts_link(); ?>,

<?php comments_popup_link('Keine Kommentare', 'Ein Kommentar', '% Kommentare', '', 'Kommentare geschlossen'); ?>

</p>

<?php the_content('Weiterlesen...'); ?>

</p>

</article>

<?php endwhile;

else: ?>

Es wurden keine Beiträge gefunden.

<?php endif; ?>

<?php posts_nav_link(' | ', 'Neuere Artikel »', '« Ältere Artikel'); ?>

</main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

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:

/* Anordnung mit Flexbox */
.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* Mobile first -> Das Folgende gilt für Displays kleiner 800px, für größere Displays wird weiteres eingemischt */
header, footer, main, aside {flex: 1 100%;}

/* Abstände zwischen den Boxen */
header {margin-bottom: 5px;}
footer {margin-top: 5px;}
main {margin-bottom: 5px;}
article {margin-bottom: 5px;}

/* Für Browserfenster größer als 800px wird folgendes hinzugemischt, was die Sidebar an die Seite schiebt.*/
@media all and (min-width: 800px) {
  main {flex: 4 0px;}
  aside {flex: 1 0px; min-width: 200px;}
  /* Neuen Abstand setzen und alten überschreiben*/
  main {margin-right: 5px; margin-bottom:0px;}
}

/* Farben */
header {background: deepskyblue;}
footer {background: Moccasin;}
main {background: lightgreen;}
aside {background: Plum;}
article {background-color: LightYellow;}
  
/* Runde Ecken*/
header, footer, main, aside, article {
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 15px;
}

/* Anordnung mit Flexbox */

.wrapper {

display: flex;

flex-flow: row wrap;

}

/* Mobile first -> Das Folgende gilt für Displays kleiner 800px, für größere Displays wird weiteres eingemischt */

header, footer, main, aside {flex: 1 100%;}

/* Abstände zwischen den Boxen */

header {margin-bottom: 5px;}

footer {margin-top: 5px;}

main {margin-bottom: 5px;}

article {margin-bottom: 5px;}

/* Für Browserfenster größer als 800px wird folgendes hinzugemischt, was die Sidebar an die Seite schiebt.*/

@media all and (min-width: 800px) {

main {flex: 4 0px;}

aside {flex: 1 0px; min-width: 200px;}

/* Neuen Abstand setzen und alten überschreiben*/

main {margin-right: 5px; margin-bottom:0px;}

}

/* Farben */

header {background: deepskyblue;}

footer {background: Moccasin;}

main {background: lightgreen;}

aside {background: Plum;}

article {background-color: LightYellow;}

/* Runde Ecken*/

header, footer, main, aside, article {

border-bottom-left-radius: 20px;

border-top-right-radius: 20px;

padding: 15px;

}

Die Startseite: index.php

Schreibe einen Kommentar Antworten abbrechen

Suche