You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In einem Tagesworkshop stellt SODI den de facto Standard für einfache bis komplexe Websites, WordPress, vor. Da verschiedene SODI-Seiten damit gestaltet werden, wird anhand praktischer Beispiele die Bedienung erprobt und wie es sich für Websites unterschiedlicher Größe optimal zur Veröffentlichung von bleibenden und veränderlichen Inhalten nutzen lässt.
Leser_inn_en dieser Ankündigung sind dazu eingeladen, sich an dem Workshop zu beteiligen. Es stehen noch 10 zusätzliche Plätze für Nicht-SODI-Teilnehmer bereit.
Gezeigt werden:
Anwendungsfelder (Workflows)
Verwalten, Bearbeiten und Veröffentlichen von Inhalten
Plugins (Systemerweiterungen)
Anpassung der Seitenfunktionalität an eigene Bedürfnisse
tiefergehende Konfiguration und Anpassung der Funktionalität
URL Formen
Der Workshop ist praktisch orientiert und wird nach dem Muster "Beispiel-Wiederholung" in Einzel- bzw. Gruppenarbeit durchgeführt. Kenntnisse in den Skriptsprachen HTML, CSS und PHP sind von Vorteil, aber keine Voraussetzung für die Teilnahme am Workshop. Unverzichtbar ist dagegen die Mitnahme eines eigenen Laptops und einer bereits vorhandenen Idee, die im Laufe des Workshops umgesetzt wird.
Ich arbeite im Forum Fairer Handel (Freiwilliges Ökologisches Jahr). Im Rahmen des Kurzfilmwettbewerbs Recafair wird Wordpress zur Erstellung der Website verwendet. Um daran mitarbeiten zu können möchte ich einen Einblick in die Funktionsweise von Wordpress erhalten.
Jon Richter
[ ] Installation von WordPress auf uberspace für rotesauce.de
[ ] Installation + Aktivierung von MailChimp für yala0003 auf uberspace
Agnes: Ich bin Grafikerin, entsprechend fit mit vielen Programmen, aber mit wp habe ich keine Erfahrungen. Beruflich arbeite ich mit Typo, mache die Administration einer sehr umfangreichen Seite.
Für mein privates Vorhaben, eine eigene Seite zu bauen, ist das aber zu umfangreich
Daniel
Die eigene Idee: Ich bin bei SODI für die Bildungsarbeit und in diesem Rahmen auch für die Website www.draufsicht.org verantwortlich. Ich würde dazu gerne lernen, wie ich auch kompliziertere Inhalte einstellen, verändern, bauen kann.
Gundlagen: Ich kenne Wordpress eher passiv, als Nutzer (nicht als Admin). Habe aber bereits Seiten erstellt etc.
Julia: ich bin beim Verein HUMANA, mache dort unsere homepage und unsere blogs und würde die blogs gerne schicker und interessanter gestalten.
Grundlagen
Was ist WordPress?
WordPress ist eine Open Source Webanwendung, welche es einem ermöglicht auf relativ einfache Weise im Internet Inhalte zu veröffentlichen.
Es entstand als einfaches Blogsystem und entwickelte sich im Laufe der Jahre zu einem fast vollständigen, flexibel erweiterbaren Content Management System.
WordPress besteht, wie die meisten Webanwendungen, aus einem Frontend und einem Backend.
Das Frontend ist schlicht die Seite, die Besucher zu sehen bekommen.
Das Backend heißt bei WordPress Dashboard und bietet Zugang zum Großteil der Funktionen und Anpassungsmöglichkeiten.
Aber auch dem Dashboard sind Grenzen gesetzt. Dazu später mehr.
Werkzeuge
Zur ernsthaften Entwicklung von Webanwendungen werden einige Werkzeuge benötigt, die nicht unbedingt auf jedem Rechner vorhanden sind.
Da wir außerdem einige Webdienste benutzen werden, sind allgemein verwendbare Zugangsdaten vorbereitet worden, falls sich jemensch nicht anmelden möchte.
Die Dokumentation ist die Grundlage, auf welcher die Gestaltung einer Webseite aufbaut. In ihr fließen alle notwendigen Informationen zusammen. Mit der Zeit bildet sich eine Wissenssammlung, die es möglich macht sich fließend durch das WordPress Universum zu bewegen, da Aufgabenstellungen häufig, wenn oft auch in anderen Kontexten, wiederkehren.
In ihr finden sich dann:
technische Details des Systems auf dem WordPress läuft
Zugangsdaten
Links zu Anleitungen, die einem geholfen haben
chronologische Beschreibungen von angewandten Abläufen
Anforderungen / Ideen
...
Wie legt man eine Dokumentation am klügsten an?
Die Dokumentation sollte digital, zugänglich und strukturiert erfolgen.
Digital, damit sie einfach zu manipulieren ist.
Zugänglich, damit die darin enthaltenen Informationen auch tatsächlich verfügbar sind, wenn man sie benötigt.
Strukturiert, damit sich Details schnell finden lassen.
Bewährte kollaborative Werkzeuge
Wiki - sehr flexibel. selbst hostbar. eigene Syntax.
Bevor es möglich ist WordPress zu verwenden, ist es notwendig eine neue Instanz einzurichten. Am bequemsten wäre wahrscheinlich die Registrierung eines kostenlosen Kontos auf wordpress.com, sodass man direkt loslegen kann zu schreiben. Aber dann wird sich an der Seite auch nicht alles anpassen lassen.
Im Grunde ist das Spektrum an Möglichkeiten recht fließend: Es gibt Cloudanbieter, die einem wie WordPress.com alles abnehmen. Dann gibt es auch sogenannte 'Managed Server'-Angebote, bei denen dafür bezahlt wird, dass die technische Grundlage immer Funktioniert. Und dann gibt es noch die Möglichkeit, da WordPress Open Source ist, das ganze auf einem selbst verwalteten Server zu installieren.
Installation auf einem Server
Diese soll kurz am Beispiel des Hostingdienstleisters uberspace dargestellt werden.
Es gibt natürlich auch kompliziertere, fortgeschrittenere Verfahren, die einem einen anderen Grad an Flexibilität bieten, aber uns genügt zunächst zu wissen, dass es geht.
Die Installation in einem Unterordner wird direkt im WordPress-Codex erklärt.
Installation auf dem eigenen Rechner
Manchmal ist es praktisch sich eine lokale WordPress-Installation einzurichten. Für unsere Zwecke soll der bitnami WordPress Installer reichen.
Das einfache daran ist, dass wir eine eigene Seite zum Entwickeln starten können, ohne dafür notgedrungen
mit dem Internet verbunden sein zu müssen. Das beschleunigt viele Abläufe sehr.
Außerdem liegen alle Dateien im eigenen Dateisystem, was die Handhabung vereinfacht. Es muss zunächst kein Versionskontrollsystem vorliegen oder eine andere Art von Dateiübertragung auf einen Server erfolgen.
Verwendung
typische Arbeitsabläufe
Veröffentlichungen eines Blogs organisieren
[X] Einen Artikel erstellen
[X] Eine Seite Erstellen und im Menü hinterlegen
[ ] Updates einspielen
[ ] Bilder auf das Internet vorbereiten
[ ] Kommentare moderieren
[ ] Ein Plugin zu einer Frage suchen und installieren
[ ] Kategorien verwalten
[ ] ...
graphische Gestaltung
Wireframing
Wenn eine Seite entstehen soll, ist es sehr empfehlenswert sich vorher darüber gedanken zu machen, wie sie später aussehen soll. Auch zu definieren welche Funktionen vorhanden sein sollen, hilft dabei den Arbeitsberg zu minimieren.
Die ersten Skizzen können natürlich auf Papier entstehen, aber schon wenn sich abzeichnet in welche Richtung sich das ganze Entwickelt, lohnt es sich, wenn auch nur kurz, einen Mockup Generator zu Hilfe zu nehmen.
Tools wie Mockingbird, Moqups oder Webflow unterstützen den Designprozess durch vorgefertigte Platzhalter für Seitenelemente und erlauben je nachdem auch die gleichzeitige Bearbeitung.
ein kleines Theming Einmaleins
WordPress ist sehr einfach an die eigenen Gestaltungswünsche anpassbar. Dies geschieht über die Verwendung von Themes. Nach dem Heraussuchen eines geeigneten Themes und Beziehen der Themedateien genügt ein Klick, und die Darstellung des öffentlichen Teils der Seite verändert sich komplett. Dabei weist jedes Theme noch einmal unterschiedliche Anpassungsoptionen auf.
Anbieter
Es gibt eine reichhaltige Auswahl von kostenlosen und kommerziellen Themes, welche von Entwicklern wie elmastudio hergestellt und auf Plattformen wie ThemeForest angeboten werden.
Beispiele
Free
Twenty Thirteen
Atahualpa
Organic Structure Free
Pinboard
Clean Home
Grid Focus - HTML5
Simple Organization
Suburbia
Premium
Thesis
AIR WordPress Theme
hover
WP Industry
Mit diesen stößt man jedoch schnell an die Grenzen, sodass es oft unvermeidlich ist, selbst Veränderungen in den Vorlagen durchzuführen.
Das kann man für kleinere, direkt zu lösende Probleme oder ohne anderen Zugang zum Server direkt im Backend machen. Muss man aber zum Glück nicht!
Durch eine Kombination von JS-, PHP-, HTML- und CSS-"Programmierung" lässt sich dann, mit viel Fingerspitzengefühl, Ausdauer und Google die eigene Idee umsetzen. Einmal mehr gilt das Learning-by-doing-Prinzip: Nur was man selbst anfässt, hat man wirklich begriffen.
Dann kreiert man aus einer Themevorlage eben sein eigenes Theme und unterstützt den textlichen Teil dieser Arbeit mit gezielt eingebrachten Bildern, wofür immer ein Bildbearbeitungsprogramm zur Hand sein sollte.
Mal schnell eine Graphik verkleinern, dieses Bild umkomprimieren und auf Internetgröße reduzieren, damit die Seite auch schnell lädt und schließlich noch ein Logo entwerfen: Hierbei Sorgfalt walten lassen kann später beim Lesen eine unglaubliche Ruhe produzieren.
Und wie so oft im Graphikdesign gilt : Whitespaces sind keine Sünde! Diesen und weitere Hinweise direkt aus der Webdesignindustrie findet man auf A List Apart.
zusätzliche Funktionalität
Öffentlichkeit
MailChimp
Wysija
einen Newsletter einbinden
wpShopGermany
von Deutschland aus Produkte verkaufen
Contact Form 7 + Really Simple CAPTCHA
Ein Kontaktformular annbieten
2 Click Social Media Buttons
Social Media Verknüpfungen
Podcasting Plugin by TSG
Gurken Subscribe to Comments
Sprachen
qTranslate (de facto Standard)
Mehrsprachigkeit
Germanix translate
Germanix URL / WP Permalauts
Deutsche Übersetzung verbessern
Widgets
Collapsing Archives
Collapsing Categories
Collapsing Pages
Authors Widget
Widget Logic
Widgets nur auf bestimmten Seiten anzeigen
Verwaltung
Short URL
Link to URL
Kurzlinks erzeugen
WP No Category Base
WP No Tag Base
angenehmere Pfade
WP Remote
WordPress-Installationen überwachen
Pods
Pods UI
eigene Beitragstypen entwickeln
WP BrowserUpdate
alte Browser freundlich abweisen
Adminer
WP-phpMyAdmin
Datenbank verwalten
Authenticator
die Seite unzugänglich oder nur einem bestimmten Personenkreis zugänglich machen
Jetpack
den eigenen Blog mit Funktionen von WordPress.com erweitern
Akismet
Kommentarspam vermeiden
Darstellung
Easy Fancybox
Bilder in Lightbox darstellen
Web Fonts
MP6
Admininterface zukunftsfähiger gestalten
Display Post Thumbnail
Beitragstitelbild in der Adminübersicht anzeigen
WP Coda Slider
WP UI
Tabs, Akkordions und Slider
Artikel und Seiten
Raw HTML
HTML im Post verwenden
Improved Include Page
Inline Posts
Seiten in anderen Seiten einbinden
Autolink URI
URIs werden automatisch als Links erkannt
Mediathek
Simple Image Sizes
Thumbnail- und Bildergrößen selbst definieren
Scalable Vector Graphics (SVG)
lässt zu, dass sich SVG Dateien hochladen lassen
PJW Mime Config
andere mime-Typen vom Uploader zulassen
Enable Media Replace
Bilder in der Media Library austauschen
Iced PDF Thumbnails
PDF Dateien mit Vorschau hinzufügen
SEO
AutoMeta
Google XML Sitemaps
Udinra All Image Sitemap
Google XML Sitemaps v3 for qTranslate
All-in-One SEO Pack
WP-Piwik
Besucherstatistiken
Caching
W3 Total Cache
Konfiguration und Best Practices
[ ] Permalinks
[X] Datums und Uhrzeitkonfiguration
Glossar
Backend
Die Administrationsoberfläche einer Webanwendung.
CSS
Cascading Style Sheets : Textdateien, die graphische Eigenschaften von HTML-Elementen einer Webseite definieren.
Freie Software
Software die mit einer wenig restriktiven Lizenz lizenziert wurde und umfangreiche Weiterverwendungsmöglichkeiten erlaubt.
Frontend
Die zum täglichen Gebrauch gedachte, öffentliche Variante einer Webseite.
HTML
HyperText Markup Language. Am Anfang war Xanadu. Und das Internet bestand aus abzählbar wenigen Knoten, die schon viele Dienste untereinander verbanden. Doch dann kam Tim Berners-Lee und wurde für die Erfindung des Webs nicht ohne Grund zum Ritter geschlagen:
Eine einfache Idee, revolutionär in ihrer Schlichtheit, machte aus gewöhnlichen, linear zu lesenden Texten, den HyperText. Wir sprechen vom Link. Und von da an breiteten sich Verknüpfungen im Web nur noch so aus. Das World Wide Web war geboren.
JS
JavaScript. Eigentlich ECMAScript. Hat nichts mit Java zu tun, heißt aber trotzdem so. Eine so genannte Scriptsprache, welche plattformunabhängig zur Laufzeit kompiliert und ausgeführt wird. Macht aus dem World Wide Web durch Interaktivität das Web 2.0.
Markdown
Wie HTML eine Markup Sprache. Dient der Ausdefinition von Textformatierungen und ähnlichen simplen Elementen wie Listen, Zitate, Überschriften und Links. Diese Elemente werden dann in HTML konvertiert. Unter Copyright von Daring Fireball.
Open Source
Das Gegenteil von Closed Source. Nicht zu verwechseln mit Freier Software. Heißt, dass man in den Source Code von einem Programm Einblick hat. Heißt aber nicht automatisch, dass man auch mitarbeiten darf oder den Code anderweitig verwenden kann.
PHP
"PHP Hypertext Preprocessor", ähnlich "GNU is Not UNIX" eine rekursive Abkürzung. Skriptsprache zur Erzeugung dynamischer Webseiten und Webanwendungen.
Plugin
Kleines Erweiterungsprogramm, das an ein übergeordnetes Programm mit Hilfe vordefinierter Schnittstellen andockt und in seiner Funktion verändern / erweitern kann.
SSH
Secure SHell. Dient zur Sicherung von Terminalverbindungen zu einem Server. Kommt im Hintergrund auch bei SFTP zum Einsatz - bei FTPS jedoch nicht. Ähnlich wie SSL oder GPG/PGP verschlüsselt es die Verbindung mit einem asymmetrischen Schlüssel.
Theme
Gestaltungsvorlage, welche das Aussehen einer Internetseite bestimmt. Gibt es in unterschiedlichen Qualitäten kostenfrei oder auch bezahlt an unzähligen Orten im Internet (eigentlich ja Web) herunterzuladen.
Widget
MiniProgrämmchen, dass sich oft an beliebigen, im Fall von WordPress in der Sidebar, Orten anbringen lässt, um meist genau eine Funktion bereit zu stellen.
