Einige Grundlagen zu HTML

HTML5-Dateien
werden mit einer doctype-Deklaration gekennzeichnet an der Browser wie Google erkennen,
dass es sich um eine HTML-Datei handelt. Diese Deklaration befindet sich immer in der ersten Zeile einer HTML-Datei.  Ausführliche Informationen erhalten Sie unter selfhtml.org und selfhatml.org Ueberschriften. 

<!DOCTYPE HTML>

Seiteninhalt
Der gesamte Seiteninhalt befindet sich innerhalb von <html>-Tags

<html>
.... Seiteninhalt ...
</html>

header und body-Bereich
Innerhalb der <html>-Tag werden ein Kopfteil <head> und ein body-Element <body> generiert,
die die Webseite in diese Bereiche unterteilen.

HTML-Elemente im <body>-Bereich
Hier werden sichtbare Inhalte erstellt, wie z.B. Überschriften, Absätze, Links, Bilder usw.

<h1> ... </h1>
beinhalt den Bereich einer Überschrift der 1. Ordnung. Es gibt Überschriften bis zur 5. Ordnung
<h2> ... </h2> bis  <h5> ... </h5>

<p> ... </p>
Bereich für einen Absatz

<br>
Zeilenumbruch (Ausnahmsweise kein </br> erforderlich.)

<img src="/bild.png" alt="Bildbeschreibung" >
Einbindung eines Bildes an dieser Stelle
src = Attribut für den Namen der Bild-Datei
alt = alternativer Text, wenn das Bild nicht angezeigt werden kann.

 

Zugriffe: 2769

PHP-Funktionen

Neben den HTML-Tags gibt es noch Befehle in der Programmiersprache PHP.
Die einzelnen Befehle werden später mit passenden Begriffen bzw. Informationen durch WordPress ersetzt.

Dokumente, die HTML-Tags und PHP-Befehle beinhalten, erhalten als Dateieindung .php.
Die Informationen in den Klammern bezeichnet man als Parameter.

Nähere Informationen zu bloginfo erfahren Sie unter WP-Referenz, bloginfo-Parameter

Beispiele

Titel der Website anzeigen
Das sind die Eingaben unter Einstellungen / Allgemein.

<?php bloginfo( 'name' ); ?>
wird im Beispiel ersetzt durch Theaterportal.

<?php
Es folgt ein PHP-Befehl

bloginfo
Funktion für eine bestimmte Aktion, Info aus einem BLOG ermitteln

( 'name' );
Was soll bloginfo ermitteln? Den Namen des Blogs

?>
beendet den PHP-Befehl

Untertitel anzeigen
<?php bloginfo( 'description' ); ?>
ergibt des Text "Eine weitere WordPress-Seite"


Weitere Beispiele

Überschrift eines Beitrages
<?php wp_title( '|', true ); ?>

URL Ihrer Website
<?php home_url(); ?>

Mehrere Funktionen in einem PHP-Befehl
<?php bloginfo( 'name' ); bloginfo( 'description' ); ?>

Andere Schreibweise
<?php
    bloginfo( 'name' );
    bloginfo( 'description' );
?>

URL Ihrer Website mit Prüfung, ob eine gültige Internetadresse
<?php esc_url( home_url() ); ?>

 

Zugriffe: 4776

Theme-Verzeichnis

Jedes Theme besitzt in WordPress einen eigenen Ordner mit allen Dateien, die zum Theme gehören.
Wenn Sie ein neues Theme erstellen wollen, müssen Sie dafür einen neuen Ordner erstellen.

Name des Ordners
theaterportal
Der Name darf nur aus Kleinbuchstaben bestehen, keine Leer- oder Sonderzeichen.

Speicherort des Ordners
Zum Üben und Testen verwenden Sie wenn möglich die lokale Umgebung auf Ihrem Computer,
C:\xampp\htdocs\wordpress\wp-content\themes\theaterportal

 

 

 

 

Zugriffe: 2653

PHP-Funktionen echo

Innerhalb eines php-Bereiches sind keine HTML-Tags und kein Text erlaubt.
Dies Ausgabe von Text ist daher hier nur über die Funktion echo möglich.

Weitere Informationen zu echo finden Sie in der WordPress Dokumentation zu echo.

Titel der Website anzeigen

<?php
   echo '<h1> Titel der Website:';
   bloginfo( 'name' );
   echo '</h1>';
?>

Zugriffe: 2846

Einen Entwurf für das Theme erstellen

Zu Beginn sollten Sie sich Gedanken über den Aufbau der Website machen.
Für das neue Theme sind das folgende Elemente,

  • Seitentitel Theaterportal / Untertitel: Theaterkritiken, Veranstaltungstipps und mehr
  • header-Foto / Mainmenu für die Navigation
  • Suche (Eingabebereich)
  • Widgets
  • Fußleiste mit Impressum
  • größerer Bereich für die Beiträge und Seiteninhalte

Für jedes Element zeichnen Sie in Ihrem Entwurf eine Box (Rechteck)

Weitere Webseiten-Entwürfe

  • Startseite
  • Ausgabe der Suchergebnisse
  • Anhang-Seiten
  • Darstellung und Ausgabe der Beiträge

Dateien für die einzelnen Bereiche

  • header.php Datei für den <head>-Bereich (Titel, Untertitel, Header-Bild, Main-Menu)
  • sidebar.php Datei für die sidebar
  • footer.php  Datei für die Fußzeile

 

 

 

 

 

Zugriffe: 2713