HOME  |   WEBDESIGN  |   PHOTOGRAPHIE  |   LAYOUT  |   KONTAKT

Kleines CMS-Wordpress Tutorial:

Anleitung zur Bearbeitung von Webseiten im Backend.

Einleitung:
Wenn Sie jederzeit einfach auf den Inhalt (Content) Ihrer Webseite zugreifen möchten und kurzfristig Texte, Bilder und Daten ändern wollen,
ermöglicht dies die Programmierung Ihrer Webseite mit einem Content-Management-System (CMS) wie Wordpress.
www.wordpress-deutschland.org oder wordpress.org (Hintergründe bei wikipedia.org/wiki/WordPress )

Wordpress ist eine kostenlose und lizenzfreie "Open Source" Software die von einer großen Nutzergemeinschaft stetig weiter entwickelt wird.
Ursprünglich zum Erstellen und Führen von Weblogs (Web-Tagebüchern) entwickelt, ermöglicht es die Einbindung eines individuellen
Designs ("Themes" genannt) und den einfachen Zugriff auf den Content über ein Nutzer-Interface (auch "Backend" genannt).

Login:
Das Backend erreichen Sie über die Einwahl auf der Login-Seite z.B. http://www.Meine-Domain.de/wp-login.php? bzw. http://www.Meine-Domain.de/wp-admin.
Hier tragen Sie Ihren Benutzernamen, meist "admin" und Ihr Passwort ein.
Ein Häkchen im Feld "Erinnere dich an mich" und Ihr Computer merkt sich die Daten für das nächste Mal.

Backend:
Als erstes erscheint die Startseite, "Dashbord" genannt, eher für Blogger interessant. Sie nutzen vor allem das Navigations-Menü links.
Wordpress unterscheidet in die Hauptseite Ihrer Webseite und Unterseiten.
Ihre Hauptseite meist "Home" befindet sich unter > Artikel, alle weiteren Seiten unter >Seiten. Alle erstellten Seiten werden in einer Liste anzeigt.
Beim Anklicken des Seitentitels (oder >Bearbeiten) z.B. "Aktuelles" oder "Angebot" öffnet sich die Seite "Seite bearbeiten".
Hier stehen Ihnen nun alle notwendigen Funktionen zur Verfügung.

Seite bearbeiten:
In dem ersten Feld wird der Titel der Seite eingetragen. So erscheint er auch im Navigations-Menü Ihrer Webseite (Front-End), falls nicht eine
abweichende Programmierung des Designs vorliegt. Daher müssen hier auch ggf. Trennstriche also "AKTUELLES | " eingetragen werden.
In der nächsten Zeile steht das Permalink. Dies ist die Adresse der Unterseite wie sie in der Adresszeile des Browser erscheint.
Wollen Sie diese Unterseite an anderer Stelle verlinken kopieren Sie dazu dies Permalink z.B. http://www.Meine-Domain.de/aktuelles.

Als nächstes befindet sich unter einigen Symbolen, das eigentliche Bearbeitungsfeld für den Inhalt (Content).
Hier tragen Sie den gewünschten Text Ihrer Webseite ein.
Achten Sie darauf, dass der Reiter (Tab) rechts auf "Visuell" steht, dann können Sie hier direkt hineinschreiben.
Schreiben Sie die Textzeilen immer bis zum Ende des Feldes ohne Umbrüche zu machen, da diese durch die festgelegte Gestaltung Ihrer
Webseite (z.B. Breite 800 pxl) automatisch gemacht werden.
Falls Sie Texte hinein kopieren, verwenden Sie unformatierte Texte (Word-Pad unter Windows; TextEdit unter Mac OS), da sonst unsichtbare
Vorformatierungen aus einem Word-Dokument mit übertragen werden und zu Konflikten mit der Design-Programmierung Ihrer Webseite führen können.

Mit den Symbolen über dem Textfeld können Sie alle notwendigen Formatierungen vornehmen. Die Symbole sind bei Mouse-over selbsterklärend.
Markieren Sie Textteile mit der Maus und drücken Sie z.B. fettes "B" für Fett-Schrift oder kursives "I" für Kursiv-Schrift.
Bei Text rechtsbündig, linksbündig oder zentrieren sollten Sie sich an die Designvorgaben halten.
Markieren Sie einzelne Worte und verlinken Sie diese mit dem Kettensymbol. Dazu verwenden Sie das gespeicherte Permalink der Zielseite oder
ein externes Link einer anderen Webseite. Es öffnet sich ein kleines Pop-up-Fenster und Sie tragen bei URL das Link z.B. http://www.google.de ein.
Bei externen Seiten empfiehlt sich unter Target (Ziel) "Link in neuem Fenster öffnen". Sie können unter Titel eine Kurzinformation hinzufügen.
Diese erscheint bei Mouse-over über dem Link. Mit "Einfügen" ist der Link erstellt.

Über den Symbolen steht "Hochladen/Einfügen": Bild einfügen, Video einfügen,... Dateien (wie PDF) einfügen.
Markieren Sie zuvor die Stelle mit dem Cursor (Einfügemarke) an der z.B. ein Bild im Text eingebunden werden soll. Ähnlich wie bei einer E-Mail laden
Sie nun das Foto von Ihrem Rechner hoch. Die Bilder oder Dateien werden in der "Mediathek" gespeichert.
Sie können auch zuvor in die Mediathek geladene Bilder einfügen.

Wenn Sie mit Ihren Inhalten zufrieden sind, laden Sie diese ins Internet über den Button "Aktualisieren" ganz rechts.

Seiten erstellen:
Wenn Sie neue Seiten hinzufügen wollen, wählen Sie Seiten erstellen, dann erscheint eine Seite mit leerem Textfeld. Gehen Sie wie oben vor.
Zusätzlich legen Sie ganz rechts fest, welche Reihenfolge die neue Seite im Menü einnimmt.
Hier können Sie auch Unterseiten zu bereits bestehenden Seiten (Eltern) im Drop-down festlegen.
Falls Ihre Seite nicht mit einem Multi-Level-Dropdownmenü (Plugin) programmiert ist, bleiben Unterseiten in der Navigation (Level 1) unsichtbar.
Sie können diese dann z.B. im Text verlinken, ein eigenes Untermenü auf einer Seite erstellen oder Artikel mit Überschrift und Teaser (Anleser) für Webblogs erstellen.

Falls Ihre Webseite für wechselnde Header-Bilder mit einem Dynamic-Header-Plugin programmiert ist, können Sie ganz unten der Webseite das gewünschte Header-Bild zuordnen.

Die fertige Seite veröffentlichen Sie mit dem Button "Publizieren" oben rechts. Änderungen mit "Aktualisieren"

HTML-Code:
Zuweilen kollidiert die Vorformatierung von Wordpress mir der Programmierung des Themes oder Sie wollen besondere Veränderungen vornehmen, dann
können Sie oben neben dem Reiter Visuell auch direkt auf den HTML-Text zugreifen. Hier gelten andere Regeln.
Textformatierungen werden mit sog. Tags ausgewiesen. Das sind Befehle, die in spitzen Klammern stehen.
Das formatierte Element steht zwischen einem Anfangs- und einem End-Tag.

Für Fettschrift sieht das so aus: <strong>Fette Überschrift</strong>.

Weitere hilfreiche Tags sind:

ein erzwungenes Leerzeichen: &nbsp;
drei Leerzeichen: &nbsp;&nbsp;&nbsp;
<br> für Zeilenumbruch
<br></br> Leerzeile (sinnvoll auch mehrere am Ende einer Seite)
auch so entsteht eine Leerzeile: <p style="text-align: center;">&nbsp;</p>
oder nur mit den Tags für "Text" ohne Inhalt </p></p>

Schriftarten und -größen:
Meist werden Schriftarten und -Größen von der Programmierung des Design-Themes vorgegeben. Man ist also nur begrenzt frei Änderungen vorzunehmen. Einfache Änderungen wie Fettschrifft oder Kursivschrift können im visuellen Editor gemacht werden. Sie erscheinen dann im HTMl-Code so:
<em>dieser Teil in Kursivschrift</em> oder
<h1>Vorformatierte Überschrift</h1> h1 bis h4 je nachdem wie die Gestaltung der Webseite vorprogrammiert wurde.

Im Stylesheet (style.css) gibt es z.B folgende Programierung:
h1, h2 { font-size: 14px; font-weight: bold; font-family: Verdana; color: #950F00; line-height: 22px; }
Das bedeutet die mit "h1" und "h2" definierten Überschriften sind 14 Punkt groß (Pixel), sind fett geschrieben, in der Schrift Verdana, mit der Farbe Rot und haben einen Zeilenabstand von 22 Punkten.

Vorformatierte Schriften werden im HTML-Editior (Reiter "Text") bearbeitet. Dazu wird der entsprechende Textteil mit dem Tag eingefasst:
<h1>Vorformatierte Überschrift</h1>
Man kann es sich etwas einfacher machen, wenn man den Textteil mit dem Kursor markiert und dann oben z.B. den Button Fettschrift drückt. Dann setzt der Editor den entspechenden Text bereits in die Tags <strong>Fette Überschrift</strong>. Das "strong" tauscht man nun gegen h1, h2... h4 usw. aus.

Eine hilfreiche Webseite um die Hexafarbcodes (z.B. #950F00) gibt es hier: www.html-color-codes.info/webfarben_hexcodes/

Links und Menü:
Um auf Ihren Seiten ein Untermenü zu schaffen, benötigen Sie die Permalinks der zu verlinkenden Unterseiten.
Dann schreiben Sie an entsprechender Stelle den Menütext etwa so:
Unterseite 1 | Unterseite 2 | Unterseite 3. Dann markieren Sie jeweils ein Link und verlinken unter "Visuell" mit dem Kettensymbol oder im HTML-Code mit den Tags:

<a href="http://www.Meine-Domain.de/unterseite1" >Unterseite 1</a> | <a href="http://www.Meine-Domain.de/unterseite2" >Unterseite 2</a> | <a href="http://www.Meine-Domain.de/unterseite3" >Unterseite 3</a>

<a></a> umfasst den Link, href ist die Referenz zum Permalink oder auch dem externen Link.

Auf einer Blog-Seite kann ein "...weiterlesen"-Link zur Unterseite führen:
<a href="http://www.Meine-Domain.de/blog/artikel1" class="more-link">(...weiterlesen)</a>

Achten Sie darauf keine zusätzliche Leerzeichen oder andere versehentliche Zeichen einzufügen, dann funktioniert der Link nicht.

Diashow oder Bildergallerie:

Gerne verwende ich auf Wordpress-Webseiten das Plugin für die Diashow "Slideshow Gallery Pro"

Für die Diashow die Bilder hinzufügen in der Mediathek unter "Datei hinzufügen" > "Neue Dateien hochladen" > "Datei auswählen" > " – Alle Änderungen speichern".

Dateien einzeln aufrufen mit > "Anzeigen" oder aus der Medienübersicht mit > "Bearbeiten". Die Reihenfolge der Bilder in der Slideshow wird entsprechend dem Hochladen in die Mediathek festgelegt (letztes wird zuerst angezeigt).

Dann unter "Bearbeiten" die Titel eingeben und Beschreibung im unteren großen Feld. Hier kann auch noch das Bild nachbearbeitet werden, d.h. Ausschnitte und Ähnliches machen.

Als nächstes dann in der Medienübersicht das Bild der entsprechenden Diashow bzw. Seite zuordnen mit > "Verwendet in" > "verknüpfen". Anfangsbuchstaben der Seite eingeben und auf Seiten "suchen", dann Seite anklicken und mit > "wähle" bestätigen. So alle zusammen gehörigen Bilder der Seite bzw. Diashow zuordnen. Fertig


Eine andere einfache bebilderte Anleitung gibt es bei:
www.almstudio.at/design/wordpress-kurzanleitung/wordpress-263-kurzanleitung/
www.almstudio.at/wp-content/uploads/2008/11/wordpresskurzanleitung263.pdf

Wer wordpress selber installieren will findet hier mein Tutorial WP-Installation oder die einfache offizielle Anleitung bei: www.wordpress-deutschland.org/installation

Wenn Ihnen mein Angebot gefällt, sagen Sie es auf facebook weiter:

Bitte lesen Sie ggf. auch meine Allgemeinen Geschäftsbedingungen

.: AGB

.: Impressum