Inhaltsverzeichnis

Inhaltsverzeichnis
Stand: 16.03 2016
Aktuellste Version herunterladen auf: www.webspatz.ch/downloads
Sicherheit/Support
Seite 2
Anmeldung zum CMS, Login
Seite 4
Inhalte ändern
- Medien verwalten (Bilder, PDF, MP3, etc.)
- Seiten erstellen
- Texte bearbeiten
- Texte im Visual Editor ändern.
- Absätze und Zeilenumbrüche
- Dateien hinzufügen (Bilder, PDF, MP3, etc.)
- Inhalte speichern und veröffentlichen
- Verlinkungen erstellen
- Wie verlinke ich ein PDF
- Navigation bearbeiten
- Beiträge erfassen (für Blog oder Newsseiten)
- Bilder hinzufügen
- Bilder bearbeiten, skalieren oder zuschneiden
- Galerien und Medien bearbeiten
- NextGEN – Galerie erstellen und bearbeiten
- Tabellen bearbeiten
- Videos und MP-3 Dateien einfügen
- Videos manuell einbetten (Youtube, Vimeo, etc.)
- Musik- und Sprachaufnahmen manuell einbetten (MP3)
- Soundcloud - Widget manuell einbetten
Seite 5
Shopfunktionen
- Woocommerce
Seite 22
Mehrsprachige Website
Seite 27
Weiterer Support/Hilfe
Seite 29
Seite 6
Seite 7
Seite 8
Seite 9
Seite 10
Seite 11
Seite 12
Seite 13
Seite 13
Seite 14
Seite 17
Seite 18
Seite 19
Seite 20
Seite 21
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
1
Sicherheit / Support
Support:
Gerne bin ich auch in Zukunft Ihr direkter Ansprechpartner für den Support Ihrer Website. Ob per
Telefon, Mail oder in einer 1zu1 Schulung. Ich verrechne diese Arbeiten jeweils im Stundentarif.
Google/Links:
Damit Ihre Website über Google gut gefunden wird, empfehle ich Ihnen, wenn möglich von mindestens
fünf Websites auf Ihre eigene Website eine Verlinkung einzurichten oder einrichten zu lassen. Eine
garantierte Verlinkung auf Ihre Website wird auch auf Webspatz.ch erstellt.
Sicherheit:
Ihre Wordpress-Seite ist mit einer Firewall geschützt. Zudem wird von Webspatz ein wöchentliches
Backup auf Ihrem Serverkonto durchgeführt, welches jeweils die Daten der letzten 5 Wochen speichert.
Diese sind wiederum durch ein regelmässiges Backup Seitens des Servers bei Metanet oder Ihrem
Hostinganbieter gesichert. Im Notfall kann auf Seite des Servers ein Backup auf ein Datum der letzten
sieben Tage eingespielt werden.
Für Kontaktformulare sowie ausgeschriebene Mailadressen auf Ihrer Website ist ein Sicherheitstool
installiert, welche das Scannen nach Mailadressen verhindert und Ihnen damit unnötigen Spam erspart.
Zudem wurde die offizielle Login-Maske zum CMS von Wordpress umbenannt, womit Ihre Website
deutlich vor Brutforce-Attaken schützt.
Durch diese Vorkehrungen schliesst Webspatz sämtliche Haftung für Fälle der leichten Form von
Fahrlässigkeit aus.
HINWEIS – wenn Sie die Seite selber betreuen:
Updates:
Es ist wichtig, dass Sie installierte Plugins regelmässig aktualisieren (Empfehlung: Alle zwei Monate),
damit ihre Website auf aktuellem Stand und somit die Sicherheit gewährleistet ist.
1. Neue Updates werden im Reiter » Plugins « mit
einer Zahl angezeigt. Um ein Update durchzuführen
klicken Sie auf » Plugins «
2. Markieren Sie nun die orange eingefärbten Plugins
mit einem Haken.
3. Wählen Sie im Auswahlfeld » aktualisieren «
4. Klicken Sie auf » übernehmen «
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
2
5. Bevor das Update durchgeführt wird, ist es wichtig
ein Backup zu erstellen. Dies geschieht bei den
meisten Seiten automatisch. Setzen Sie in beiden
Auswahlfelder einen Haken und klicken Sie auf » mit
Aktualisierung weitermachen «
6. Es wird nun ein Backup erstellt sowie die Updates
der Plugins durchgeführt.
Um manuell ein Backup durchzuführen, lesen Sie
bitten den nächsten Abschnitt.
Zu UpdraftPlus (Backup)
Manuelles Backup erstellen:
Sie können auch jederzeit manuell ein Backup ihrer Website erstellen oder diese auf einen früheren
Stand zurücksetzen.. UpdraftPlus finden Sie unter „Einstellungen“ „UpdraftPlus Sicherungen“
Klicken Sie auf „Jetzt sichern“
Bestätigen Sie im nächsten Fenster nochmals mit „jetzt sichern“
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
3
Anmeldung im CMS
Die Open Source Lösung WordPress ist die am weitesten verbreiteste Software zur Verwaltung von
Webseiten und ermöglicht dank der einfachen Benutzung einen schnellen Einstieg.
Unter der Adresse
» www.ihrewebsite.ch/wp-login.php «
finden Sie das Anmeldeformular für die Administrationsoberfläche der
Website.
Geben Sie hier die Benutzerdaten von Ihrem Datenblatt ein.
Anmerkung: Je nach Hostinganbieter kann die Anmeldung auch über
folgenden Link erfolgen:
» www.ihrewebsite.ch/wordpress/wp-login.php «
Nachdem Sie auf Anmelden geklickt haben, erscheint die
Administrationsoberfläche Ihrer Webseite.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
4
Inhalte ändern
Medien verwalten:
Im Menupunkt » Medien « können Sie sämtliche Inhalte wie Bilder, MP3 oder PDF hochladen sowie
bearbeiten und verwalten.
Seiten erstellen:
Unter dem Menupunkt » Seiten « finden Sie eine Liste
aller bisher angelegten Seiten. Über » Erstellen «
können Sie neue Seiten hinzufügen.
Mit einem Klick auf den Seitentitel kommen Sie in die
Bearbeitungsansicht.
Texte im Editor bearbeiten:
Verwenden Sie den Editor und die Absatzvorlagen um den Inhalt zu bearbeiten und zu formatieren. Die
Symbole sind hier ähnlich aufzufinden wie z.B. im Textbearbeitungsprogramm Word. Klicken Sie auf das
Symbol » Werkzeugleiste umschalten «, um weitere Befehle zu sehen. Achten Sie dabei immer
darauf, das im Editor auf der rechten Seite „visuell“ angewählt ist. Im Modus „Text“ finden Sie den
programmierten Text in HTML.
In der oberen Reihe finden Sie einen praktischen Befehl » select shortcode «, mit welchem Sie die
Seite in verschieden breite unsichtbare Spalten teilen können. Setzen Sie hierzu Ihren Text oder Bilder
jeweils zwischen die Befehle: [one_half]Ihr Text[/one_half]
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
5
Texte im Visual Editor ändern.
Falls du unterhalb des Seitentitels einen blauen Button mit dem Text „Backend Editor“ findest, dann
kannst du deine Inhalte auch über diesen „Visual Composer“ bearbeiten.
Klicke hierzu auf den Blauen Button.
Jedes Textelement kann nun über den grünen Balken bearbeitet werden.
Um die Änderungen zu speichern, bestätigst du zuerst mit „Änderungen speichern“, um Änderungen zu
veröffentlichen, danach auf „Aktualisieren“.
TIP:
Hier findest du eine gut erklärte Videoanleitung zum Visual Composer (ab 3.50min):
https://www.youtube.com/watch?v=R9c-smeopZE
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
6
Absätze und Zeilenumbrüche:
Absätze und Zeilenumbrüche werden auf der publizierten Seite nicht immer richtig angezeigt, da diese
für die Programmierung als ungenaue Formatierung angesehen werden und teilweise wieder gelöscht
werden. Bei der Eingabe im Editor ist deshalb darauf zu achten das man diese richtig eingibt.
Absätze:
Im Editor erzeugt man einen Absatz durch das einmalige Betätigen der Enter-Taste (↵).
Zeilenumbruch:
Einen Zeilenumbruch, sprich einen erzwungenen Zeilenwechsel erreicht man im Editor über die
Tastenkombination Shift+Enter (⇑ + ↵).
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
7
Dateien hinzufügen:
Mit einem Klick auf » Dateien hinzufügen « haben Sie die Möglichkeit Bilder und andere Medien
einzubinden.
Inhalte speichern und veröffentlichen:
Wenn Sie Ihre Änderungen anschauen möchten, können Sie diese unter » Vorschau der
Änderungen « anschauen.
Haben Sie die Änderungen abgeschlossen, können Sie diese unter » Aktualisieren «
schlussendlich speichern. Die Änderungen erscheinen dann sofort auf Ihrer Webseite.
Haben Sie eine neue Seite erstellt, achten Sie bitte darauf, das unter » Attribute « dieselben
Einstellungen wie bei den restlichen Seiten ausgewählt ist.
Seite als Entwurf speichern:
Möchten Sie die Änderungen noch nicht veröffentlichen, dann haben Sie die Möglichkeit, die Seite unter
„Status““bearbeiten“ auf Entwurf zu setzen.
Bestätigen Sie die Aktion mit „OK“ sowie „Aktualisieren“
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
8
Verlinkungen erstellen:
Sie können markierten Text wie auch Bilder oder Grafiken mit Hilfe des „Link Icon“ auf externe
Webseiten sowohl aber auch auf interne Seiten ihrer Website verlinken. Markieren Sie dazu den Text
den Sie verlinken möchten und klicken Sie anschliessend auf das „Link Icon“
Es öffnet sich nun ein Fenster. Hier haben Sie unter URL die
Möglichkeit auf eine externe Seite zu verlinken. Unten finden
Sie dann eine Auflistung all der interen Seiten Ihrer Website
auf die Sie auch verlinken können.
Bei einem Bild oder einer Grafik klicken sie auf das Element
und fügen Sie bei URL einfach die Zieladresse ein.
Wie verlinke ich ein PDF?:
Jedes Bild oder Dokument das Sie über »
Medien « hochladen, hat eine eigene URL, auf
die Sie verlinken können. Bei einem PDF öffnen
Sie diesbezüglich einfach das Dokument über
den Reiter » Medien «.
Auf der rechten Seite kopieren Sie nun die URL
des Dokumentes.
Fügen Sie diese dann auf der gewünschten Seite als Linkzieladresse ein.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
9
Navigationsmenu bearbeiten:
Seiten in der Navigation anzeigen:
Die neu erstellte Seite können Sie anschliessend
unter
» Design«
» Menue «
auswählen und per Drag&Drop an die gewünschte
Stelle verschieben.
Kategorien als Seite in der Navigation anzeigen:
Sie haben auch die Möglichkeit, Beitragskategorien in der Navigation als Seite anzuzeigen. Hierzu
erstellen Sie unter » Beiträge « » Kategorien « eine neue Kategorie und speichern diese ab.
Wenn Sie nun über » Beiträge « » Erstellen «
einen Beitrag erstellen, haben sie auf der rechten Seite unter „Kategorie“
die Möglichkeit, den Beitrag diversen Kategorien zuzuordnen.
Unter » Design « » Menue « » Kategorien « werden sämtliche erstellte
Kategorien im Dropdownfenster angezeigt. Um eine Kategorie nun in der Navigation anzuzeigen,
markieren Sie die gewünschte Kategorie, klicken auf „zum Menu hinzufügen“ und schieben die Seite
dann an die gewünschte Stelle in der Navigation.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
10
Externe Verlinkungen in der Navigation anzeigen:
Sie haben ausserdem auch die Möglichkeit, über die Navigation auf eine externe Seite zu verlinken, wie
im Beispiel zum SBB-Fahrplan.
Klicken Sie dazu auf Das Dropdownfenster » Links « und fügen Sie unter „URL“ die Zieladresse und
unter „Link Text“ den Titel ein, welcher in der Navigation angezeigt werden soll. Klicken Sie
anschliessend auf „Zum Menü hinzufügen“ und schieben das Feld an die gewünschte Stelle in der
Navigation.
Beiträge erfassen (für Blog oder Newsseiten):
Benutzen Sie einen Blog oder eine Newsseite, in welcher immer die aktuellsten Beiträge zuoberst
angezeigt werden, finden Sie unter » Beiträge « ihre letzten Beiträge oder können neue Beiträge
erfassen. Beim Erfassen von Beiträgen lohnt es sich unten rechts noch ein Beitragsbild festzulegen,
damit dieses in Ihrem Blog auch als Vorschaubild angezeigt werden kann.
Klicken Sie auch hier zum veröffentlichen auf » Aktualisieren «.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
11
Bilder hinzufügen
Um auf Ihrer Seite oder Ihrem Beitrag Bilder einzufügen klicken Sie
auf » Dateien hinzufügen «.
Falls die Bilder schon hochgeladen sind, können Sie diese
gleich hier auswählen. Bei neuen Bildern klicken Sie auf »
Dateien hochladen «.
Dabei können Sie diese per Drag & Drop in das Feld ziehen oder
über » Dateien auswählen « importieren.
Wählen Sie nun die Bilder aus welche Sie verwenden möchten.
Aktivierte Bilder sind mit einem Haken versehen. Mit gedrückter
CMD – Taste können Sie gleich mehrer Bilder auswählen.
Rechts unten haben Sie nun die Möglichkeit das Bild zu positionieren »
Ausrichtung « sowie eine Grösse festzulegen » Grösse «. Klicken Sie
anschliessend auf » In die Seite einfügen «.
Nun wird das hochgeladene Bild in Ihrer Seite/Beitrag angezeigt.
Falls Sie das Bild später nochmals bearbeiten oder löschen möchten, klicken Sie auf
das Bild und wählen Sie das entsprechende Icon aus.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
12
Bilder bearbeiten, skalieren oder zuschneiden:
Um Bilder zu skalieren oder auf eine bestimmte Grösse zuzuschneiden, können Sie dies direkt im CMS
vornehmen. Hier die nötigen Schritte dazu:
1. 2. 3. 4. "Medien"
"Bild auswählen, welches Sie bearbeiten möchten"
klicken Sie auf "Weitere Details bearbeiten"
unterhalb des Bildes klicken Sie auf "Bild bearbeiten"
Zum Skalieren: Auf der rechten Seite finden Sie ein Feld, um die gewünschte Grösse einzugeben. –
klicken Sie auf „speichern“
Bild zuschneiden:
1. klicken Sie auf das kleine feld oben links "Ausschnitt auswählen" und wählen Sie den Bereich
aus, welchen Sie gerne ausschneiden möchten. Im Feld "Bildausschnitt" auf der rechten Seite
wird dann die Grösse des Ausschnitts angezeigt.
2. klicken Sie auf "Speichern"
Falls Sie das bearbeitete Bild auch im Original noch einsetzen möchtest, müsstest Sie es einfach ein
zweites Mal hochladen.
Galerien und Medien bearbeiten:
Wenn Sie auf einer Seite eine Galerie von Wordpress haben, können Sie diese durch „Klick“ aktivieren
und anschliessend bearbeiten.
Wenn Sie eine neue Galerie erstellen möchten, können Sie diese über » Dateien hinzufügen « »
Galerie erstellen « importieren.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
13
NextGEN - Galerie
Falls Sie in der Seitenleiste folgendes Galerielogo finden, dann wurde auf Ihrem CMS das Plugin
„NextGEN-Gallery“ installiert. Hier können Sie selber Alben erstellen sowie die Galerien bearbeiten.
Galerie / Bilder hinzufügen
Über diesen Befehl können sie eine neue Galerie erstellen, oder eine bestehende
Galerie bearbeiten.
Neue Galerie erstellen:
1. Wählen Sie „Ein neue Galerie erstellen“
2. Geben Sie der Galerie einen Namen
3. Laden Sie die gewünschten Bilder von Ihrem Computer hoch. (Optimal sind 2560px Bildbreite,
max. 500kb Bildgrösse)
4. Upload beginnen
Die Galerie befindet sich nun im unter „Galerien verwalten“
Bilder zu einer bestehenden Galerie hochladen:
1. Wählen Sie die bestehende Galerie aus.
2. Laden Sie die gewünschten Bilder von Ihrem Computer hoch. (Optimal sind 2560px Bildbreite,
max. 500kb Bildgrösse)
3. Upload beginnen
Die Galerie befindet sich nun im unter „Galerien verwalten“
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
14
Galerien verwalten
Über diesen Befehl können Sie die Bilder in einer bestehenden Galerie verwalten.
1. Geben Sie hier den Bildtitel ein.
2. Über diesen Befehl können Sie die Bilder neu sortieren.
3. Markieren Sie die gewünschten Bilder, welche Sie z.B löschen möchten und
wählen Sie anschliessend „Aktion Wählen“ „löschen“ und klicken dann auf
„Übernehmen“
4. Nachdem Sie die Änderungen abgeschlossen haben, klicken Sie auf
i. „Änderungen speichern.
Um die erstellten Galerien nun auf einer Seite einzufügen oder zu bearbeiten, können Sie dies direkt in
der geöffneten Seite mit Klick auf die Galerie oder das grüne Logo vornehmen.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
15
Galerieeinstellugen
1. Wählen Sie zuerst unter „Layout auswählen“ das gewünschte Layout aus
2. Wählen Sie dann unter „Was möchtest Du gerne zeigen“ Ihre erstellte Galerie aus und bestätigen Sie
anschliessend mit „Save“
Auch in dieser Darstellung haben Sie die Möglichkeit unter den weiteren „Reiter* Bilder hinzuzufügen
oder eine bestehende Galerie zu verwalten.
3. Sobald Sie mit den Änderungen zufrieden sind, können Sie diese unter „Vorschau der Änderungen“
anschauen und mit „Aktualisieren“ auf der Website veröffentlichen.
NextGEN ist ein sehr komplexes Galerieplugin mit diversen Darstellungsmöglichkeiten. Detaillierte
Informationen dazu finden Sie hier:
http://www.nextgen-gallery.com/help/
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
16
Tabellen:
Falls Sie auf Ihrer Website Tabellen benutzen, finden Sie diese im Dashboard unter » TablePress «. Dies
ist ein Plugin, mit deren Hilfe Sie ganz einfach Tabelleninhalte aktualisieren können.
TablePress gibt pro Tabelle einen „Shortcode“ z.B. [table id=1 /] frei,
welchen Sie dann in einer beliebigen Seite einfügen können.
8! Tabellen können nicht in einer Seite, sondern nur über TablePress
aktualisiert werden.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
17
Video und MP-3 Dateien einfügen
Sie haben im Texteditor über den Button » Add Media « die Möglichkeit, von Ihnen hochgeladene
Videos sowie MP-3 Dateien einzufügen.
Wählen Sie dazu für MP3-Dateien » Create Audio Playlist « oder für Videos » Create Video Playlist «
und fügen Sie die gewünschten Dateien dazu. Klicken Sie anschliessend auf den Button » Create a new
playlist «
Anschliessend haben Sie die Möglichkeit unter » Playlist Setting « die Anzeigeoptionen auszuwählen.
Mit einem Klick auf die Datei, können Sie hier die nötigen Angaben zu „Titel“, „Artist“ etc. ergänzen.
Über den Button » Insert audio playlist « wird die Datei dann an markierter Stelle eingefügt.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
18
Videos manuell einbetten (Youtube, Vimeo, etc.)
Um Speicherplatz zu sparen, ist es ratsam, Ihr Video zuerst auf eine Videoplattform (Youtube, Vimeo,
etc.) hochzuladen und dieses dann in die Website einzubetten. Selbstverständlich kann man dort die
das Video auch als „privat“ markieren, so das es über die Suchfunktion nicht gefunden werden kann.
Mithilfe des Plugin » Advanced Responsive Video Embedder « lassen sich Videos mit wenigen
Schritten in die Website einbetten. (Falls das Plugin noch nicht vorinstalliert ist, kann dieses im
Dashboard unter » Plugin « über die Suchfunktion heruntergeladen werden. Nach erfolgreicher
Installation erscheint oberhalb des Texteditior ein Button mit der Überschrift » Embed Video «.
Darauf öffnet sich folgendes Feld, in welchem danach der Link zum Video (Youtube, Vimeo, etc.)
eingegeben werden kann. Das Video kann jedoch auch über » Medien « hochgeladen und
anschliessend der interne Link zum Video eingetragen werden. Damit sich die Grösse des Videos auch
der Bildschirm grösse anpasst und responsive bleibt, empfehle ich Ihnen unter 2. „zentriert“ zu wählen
und unter 3. „920“ einzugeben. Durch drücken des Buttons » Insert Shortcode « wird das Video an
markierter Stelle als Shortcode eingebetten.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
19
Musik- und Sprachaufnahmen manuell einbetten (MP3)
Mithilfe des Plugin » Compact Audio Player « lassen sich MP3-Aufnahmen mit wenigen Schritten in die
Website einbetten. (Falls das Plugin noch nicht vorinstalliert ist, kann dieses im Dashboard unter »
Plugin « über die Suchfunktion heruntergeladen werden.
Um die MP3-Datei einbetten zu können, kopieren Sie bitte folgenden „Shortcode“ und setzen Sie diesen
an gewünschter Stelle im Texteditor ein.
SHORTCODE:
[sc_embed_player_template1fileurl="http://deinedomain.ch/wordpress/wpcontent/uploads/2014/09/01-Am-Fluss.mp3"]
Laden Sie anschliessend die gewünschte Aufnahme über » Medien « hoch, öffnen Sie die Datei,
kopieren Sie die URL der Datei und ersetzen Sie diese mit der gelb markierten URL im Shortcode.
Klicken Sie anschliessend auf den Button „Update“ um die Änderungen zu speichern.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
20
Soundcloud - Widget manuell als „iframe“ - Element einbetten
Um eine Aufnahme von Soundcloud im Texteditor einzubetten, braucht man dazu den „iframe“ – Code
des Titels von Soundcloud. Diesen findet man unterhalb des Titels über den Button » share «.
Klicken Sie dann auf » Embed « und kopieren dann den Link unterhalb des Titels » Code & preview «.
Fügen Sie diesen Code dann im Texteditor unter dem Reiter » Text « an der gewünschten Stelle ein.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
21
Shopfunktionen
Ihr Shop wird mit einem Plugin von Woocommerce für Wordpress betrieben. Weitere Infos dazu auf:
»http://www.woothemes.com/woocommerce«
Im CMS finden Sie für die Bearbeitung des Shops den Reiter »Woocommerce« und für die Bearbeitung
der Produkte den Reiter »Produkte«.
»Woocommerce« »Bestellungen«:
Hier können Sie Ihre Bestellungen bearbeiten, die Abwicklung aktivieren sowie schlussendlich
abschliessen.
»Woocommerce« »Berichte«:
Hier finden Sie Informationen über die Umsätze, die Daten der Kunden sowie die Lagerbestände.
»Woocommerce« »Einstellungen«:
Hier befinden sich sämtliche Einstellungen des Shops von der Anzeige der Produkte bis über den
gesamten Bestellvorgang.
8! Bitte verändern Sie hier nur etwas, wenn Sie sich mit Woocommerce schon besser auskennen.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
22
»Produkte«:
Hier können Sie sämtliche Produkte im Shop bearbeiten (Klick auf den Produkttitel) sowie neue
Produkte hochladen.
»Produkte bearbeiten«:
In folgenden 11. Schritten können Sie ein Produkt optimal platzieren. (Siehe Bild auf der nächsten Seite)
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Produkttitel bestimmen
Beschreibung des Produkts
Allgemein: Art.- Nr. sowie Preis/Aktionspreis bestimmen, Bestand: Lagerstatus aktualisieren,
Versand: Gewicht, Grösse des Produkts, Über Eigenschaften können Auswahlfelder (z.b über
die Grösse: S,L,XL oder die Farbe: grün, blau, gelb) ausgewählt werden, welche im Reiter
»Produkte« »Eigenschaften« festgelegt werden.
Beitragsbild hochladen
Zusätzliche Produktbilder hochladen
Schlagwörter bestimmen (falls Schlagworte verwendet werden)
Produktkategorie bestimmen ( falls Produkte verwendet werden)
Keyword bestimmen (Oberbegriff für die Google-Suche)
Meta Description (1-2 Sätze über das Produkt für die Googlesuche, bestenfalls mit weiteren
Suchbegriffen versehen.
Hier können Sie sich die Vorschau der Produktseite ansehen.
Veröffentlichen des Produktes
Zur Info:
Woocommerce ist ein Basis-Shop-Plugin welches mit vielen weiteren teils kostenpflichtigen Plugins
ergänzt werden kann. Von einfachen Effekten (Lupefunktion, etc.) bis hin zu einem weiterführenden
Managementtool.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
23
»Produkte« »Kategorien«:
Hier können Sie weitere Kategorien festlegen.
»Produkte« »Schlagwörter«:
Hier können Sie weitere Schlagwörter festlegen.
»Produkte« »Eigenschaften«:
Hier können Sie als Auswahlfenster oder Textfeld erstellen.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
24
Für Woocommerce Produktbilder formatieren
Dies ist eine Anleitung, wie Sie mit Photoshop Produktbilder einheitlich formatieren können.
Woocommerce arbeitet bei den Produktbilder mit den Formaten 500px638px, um scharfe Bilder für
Retinabildschirme zu erhalten, empfiehlt es sich jedoch mit der doppelten Bildgrösse 1000x1276px zu
arbeiten. Beide Formate können als Vorlage von Webspatz angefordert werden.
Öffnen Sie nun mit Photoshop die Dateivorlage „Shopvorlage - 1000x1276.psd“
Ziehen Sie anschliessend das gewünschte Produkt in das weisse Feld und passen Sie die Grösse mit
Hilfe der Prozentanzeige an. Beachten Sie, das das Icon „Seitenverhältnisse erhalten“ aktiviert ist. Sobald
Sie mit der Grösse zufrieden sind, bestätigen Sie mit der „Enter-Taste“
Das Bild wurde nun fixiert.
Um das Bild nun in kleiner Auflösung zu speichern, wählen Sie unter „Datei“ „Für Web und Geräte
speichern...“
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
25
Achten Sie vor dem Speichern jeweils, das das Bildformat JPEG ausgewählt ist, sowie die Bildgrösse
stimmt. Falls Sie das Bild in einem anderen Grössenverhältnis speichern möchten, können Sie dieses
hier noch auswählen.
Schliessen Sie schlussendlich mit „speichern“ ab.
Das Bild kann nun in Ihren Shop importiert werden.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
26
Mehrsprachige Website
Falls Sie eine mehrsprachige Website besitzen, können Sie die Inhalte zu allen Sprachen einerseits
direkt im Reiter »Seiten« über die Symbole in der zweiten Spalte anpassen. Das schöne daran ist, das
Sie nicht für jede Sprache eine neue Seite erstellen müssen, sondern innerhalb einer Seite einfach pro
Sprache die Inhalte anpassen können. Inhalte können vom Plugin selber oder von Ihnen direkt übersetzt
werden.
eine Übersetzung hinzufügen
eine Übersetzung editieren
eine vorhandene Übersetzung
aktualisieren
Dieselben Befehle können Sie auch in einer geöffneten Seite jeweils ganz rechts vornehmen.
Wenn Sie eine neue Seite erstellen und diese zur Navigation hinzufügen »Design« »Menüs« (Anleitung
siehe oben), dann müssen Sie jeweils die Navigation für die zweite Sprache neu synchronieren.
Befehl: „Menüs zwischen Sprachen synchronisieren“
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
27
Damit die Navigation der zweiten Sprache auch angepasst wird, müssen Sie auf der nun angezeigten
Seite ganz unten auf den Button „Synchr“ klicken und anschliessend die zu Menüpunkte auswählen,
welche synchronisiert werden sollen.
Falls Sie daran interessiert sind, noch mehr Einstellungen an
Ihrer mehrsprachigen Seite selber vorzunehmen, finden Sie
hier weitere Erklärungen zum installierten Plugin „WPML“:
http://wpml.org/de/
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
28
Externer Support / Hilfe
Zusätzlicher Support:
Wordpress ist ein weit abgestütztes CMS, welches stehts weiterentwickelt wird. Diesbezüglich finden
Sie im Internet auch viele Supportforen sowie Anleitungen für diverse Probleme. Google hilft :-)
Ausserdem empfehle ich Ihnen folgende Seiten:
Wordpress Deutschland
http://de.support.wordpress.com/
Wordpress Österreich (Videos)
http://wpaustria.org/wordpress-video-anleitung/
Woocommerce Shop
http://www.woothemes.com/woocommerce
Bei diesem Videotutorial beginnt der Autor nach der Installation und erläutert die ersten Schritte in
Wordpress wie Artikel gestaltet werden. Diese Videos sind gut für eine erste Orientierung.
Youtube
Viele Wordpress-Tutorials finden Sie auf auch auf Youtube.
Rufen Sie hierzu einfach youtube.com auf und suchen Sie nach "wordpress tutorial deutsch". Als
Ergebnis erhalten Sie eine Fülle an Videos. Das Problem ist hierbei jedoch, dass Sie so viele Videos zu
Wordpress angeboten bekommen, dass es schwierig ist gute von schlechten zu unterscheiden. Es lohnt
sich auch auf das Erstellungsjahr der Videos zu achten.
WEBSPATZ WEBDESIGN
Gregor Altenburger l Am Wasser 159 l 8049 Zürich l 0787167267 l www.webspatz.ch l [email protected]
29