Post on 30-Jun-2020
WordPress Meetup Bonn
Bego Mario Garde@pixolin
WordPress ThemesWas ist das und wo bekomme ich die her?
WordPress Meetup Bonn
Bego Mario Garde@pixolin
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Neulich im WordPress Support-Forum Themes …
Hallo,
ich möchte mit WordPress ein Hafen Portal erstellen. Dies soll zunächst folgendes können:
Katergorien im Menü: Vereine, Gastronomie, Wassersport, Liegeplatzvermietung, Gastliegeplätze, Forum, News, Veranstaltungskalender
Im Header oben sollen Fotos vom Hafen erscheinen.
Vereine: hier sollen sich Vereine präsentieren oder einen Link zu Webseite mit Kontaktdaten einstellen können
https://de.wordpress.org/support/topic/portal-theme/
Gastrononmie: hier sollen Infos zu den ansässigen Restaurants und Kneipen stehen
Habt Ihr einen Tipp?
Da ich noch nicht so gut bin und jetzt mehrere Stunden nach passenden Themes gesucht habe, wäre es super wenn ihr mir für den Zweck etwas empfehlen könnt oder Lust habt mir zu helfen.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Was sind Themes?
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Themes sind Vorlagen für die Gestaltung deiner Beiträge und Seiten in unterschiedlichen Ausgabeformaten (als Einzelseite, Übersichtsseite, Archiv, …)
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Ziel: Anwender konzentriert sich auf Inhalt seiner Seiten und Beiträge und kann auf ein professionelles Layout zurückgreifen.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Foto: Ashim D'Silva, unsplash.com
I don't know why people hire architects and then tell them what to do.
Frank Gehry
Decisions, not Options
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Ein bisschen mehr Flexibilität?Anwender können im Editor keine Schriftart auswählen. Das ist so gewollt.
Wer trotzdem nicht auf Comic Sans verzichten möchte, findet bei vielen Themes Einstellungs-möglichkeiten im Customizer.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Nur ein Theme pro WebsiteOhne zusätzliche Plugins* können mehrere Themes installiert, aber nur eines davon aktiviert werden.
Über die CSS-Klasse des <body>-Tag sind aber viele Anpassungen möglich. (z.B. .page-id-42)
*https://wordpress.org/plugins/jonradio-multiple-themes/
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Wie ist ein Theme aufgebaut?
WordPress Meetup Bonn
Bego Mario Garde@pixolin
StylesheetJedes Theme muss ein Stylesheet mit dem Namen style.css enthalten.
Das Stylesheet enthält den Theme-Header (Kommentar mit Meta-Angaben zum Theme).
Bego Mario Garde@pixolin
/*
Theme Name: Twenty Seventeen Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life …
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready,
custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-
images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-
options, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
WordCamp Meetup Bonn
WordPress Meetup Bonn
Bego Mario Garde@pixolin
index.phpJedes Theme muss ein allgemeines Template mit dem Namen index.php haben.
Bego Mario Garde@pixolin
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="entry"><?php the_content(); ?></div>
<?php
endwhile;
else :
_e ( 'Nothing found', 'twentyseventeen' );
endif; ?>
WordCamp Meetup Bonn
the Loop
Bego Mario Garde@pixolin
<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="entry"><?php the_content(); ?></div>
<?php
endwhile;
else :
_e ( 'Nothing found', 'twentyseventeen' );
endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer();
WordCamp Meetup Bonn
Header
Footer
Inhalt Beitrag
oder Seite Side
bar
WordPress Meetup Bonn
Bego Mario Garde@pixolin
HooksJedes Theme benötigt die Hooks wp_head(); und wp_footer();
Die Hooks liegen üblicherweise in den Templates header.php und footer.php
WordPress Meetup Bonn
Bego Mario Garde@pixolin
functions.phpZusätzliche Funktionen, z.B. zum Einbinden von JavaScript, werden in die functions.php gesetzt.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
functions.phpDie functions.php sollte keine Funktionen enthalten, die sich auf den Inhalt auswirken (z.B. Definition eines Custom Post Type).
Grund: Lock In-Effekt.
Bego Mario Garde@pixolin
<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="entry"><?php the_content(); ?></div>
<?php
endwhile;
else :
_e ( 'Nothing found', 'twentyseventeen' );
endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer();
WordCamp Meetup Bonn
header.php
footer.php
index.php content-
post.php
sidebar.php
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Grundausstattungstyle.css index.php header.php footer.phpsidebar.php functions.php
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Template HierarchieWordPress sucht für bestimmte Inhalte (z.B. Darstellung Kategorie) nach einem besonders geeigneten Template (category.php). Existiert das nicht, greift WordPress auf allgemeinere Templates zurück, zuletzt auf index.php.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
https://developer.wordpress.org/themes/basics/template-hierarchy/
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Kompliziert?
BarrierefreiheitAnsprechende Gestaltung
Responsive Design
für jeden gängigen Browser
SEO-freundlich
Performance
Sicher
GestaltungsoptionenLokalisierbar
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Richtig gemacht, ist die Herstellung eines individuellen Themes recht aufwändig: "Basis Theme: 10 Tage Aufwand, + je Template 1,5 Tage"
Beispiele für "Pfusch am Bau": Templates weglassen, keine Kommentar-Funktion, nicht responsive, fehlendes <body>-Tag, nicht barrierefrei …
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Starter-Themes: "1.000 Arbeitsstunden voraus"
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Underscores
http://underscores.me
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Underscores Components
http://components.underscores.me
WordPress Meetup Bonn
Bego Mario Garde@pixolin
JointsWP (mit Foundation 6)
http://jointswp.com
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Alternative: Child Themes
WordPress Meetup Bonn
Bego Mario Garde@pixolin
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Was sind Child ThemesChild Themes sind Ergänzungen zu einem vorhandenen (Parent-)Theme.
Sie enthalten nur die Templates, die in Gestaltung oder Funktionalität abweichen.
Bego Mario Garde@pixolin
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar
Text Domain: twenty-fifteen-child
*/
WordCamp Meetup Bonn
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Anleitung Child Themeshttps://die-netzialisten.de/wordpress/anleitung-childtheme-anlegen-update/
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Wo bekomme ich einWordPress Theme her?
WordPress Meetup Bonn
Bego Mario Garde@pixolin
WordPress Theme Repositoryca. 4.700 Themes und Child Themes
alle frei erhältlich (100% GPL) und nach Bedarf an eigene Wünsche anpassbar (ggf. Child Theme erstellen!)
alle sorgfältig vom Theme Review Team geprüft
https://wordpress.org/themes/
WordPress Meetup Bonn
Bego Mario Garde@pixolin
WordPress Theme RepositoryQualität der angebotenen Themes hat sich deutlich gebessert.
Eigenes Support-Forum für jedes Theme.
Hilfe durch WordPress-Support-Team* möglich, weil die Themes für jeden frei zugänglich sind.
*https://de.wordpress.org/support/forum/themes/
WordPress Meetup Bonn
Bego Mario Garde@pixolin
WordPress Theme ReviewPlugin Theme Check https://wordpress.org/plugins/theme-check/
Theme Review Team Handbook https://make.wordpress.org/themes/handbook/get-involved/ become-a-reviewer/
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Alternative: Theme kaufen?
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Breites AngebotGrößter Anbieter ist themeforest.net (rund 9.000 Themes)
Die Qualität des Codes ist leider oft fragwürdig und vor dem Kauf kaum zu beurteilen (Tipp: Validator auf Theme-Demo anwenden)
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Breites AngebotViele Nischenanbieter mit Branchenlösungen
auf Lock In-Effekt achten, wenn Funktionalität Bestandteil des Themes ist
z.B. mhthemes.com (Premium Magazin Themes mit deutschem Support)
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Breites AngebotTheme-Boutiquen
verlässliche Ansprechpartner, die ihrem guten Ruf gerecht werden möchten.
z.B. elmastudio.de, florianbrinkmann.com
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Multipurpose Themesbesonders viele Gestaltungsoptionen
mehr Flexibilität ohne Programmierung, aber auch mehr Overhead (lange Stylesheets, viele Abfragen)
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Page Builderbieten Anwendern eine komfortable Möglichkeit, ohne Programmierung mehrspaltige Layouts umzusetzen
Lock In-Effekt, schlechtere Performance
WordPress Meetup Bonn
Bego Mario Garde@pixolin
LizenzWordPress ist OpenSource, lizensiert unter der GPL.
Themes verwenden WordPress-Funktionen.Deshalb fallen Themes automatisch ebenfalls unter die GPL.
Bei gekauften Themes häufig Split-License: Wegen Verwendung von WordPress-Funktionen GPL, aber Layout andere Lizenz!
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Nach welchen Kriterien wähle ich ein geeignetes Theme aus?
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Form follows Function
https://de.wikipedia.org/wiki/Form_follows_function
Die Gestalt (äußere Form) von Gegenständen soll sich dabei aus Ihrer Funktion oder ggf. ihrem Zweck ableiten: im Gegenzug kann man nach Abschluss der Formgebung aus der Form des designten Gegenstands gegebenenfalls auf dessen Funktion bzw. Zweck zurückschließen.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Voraussetzung: Kunden-BriefingWorum geht es bei der Website?
Wer ist die Zielgruppe? ("Jeder" ist keine Zielgruppe!)
Welche Inhalte sind tatsächlich vorhanden?
Welche Funktionalität soll das Theme abdecken?
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Worauf sollte ich nicht achten?Fotos, Schriftarten und Farben der Theme-Demo werden durch eigene Inhalte, Optionen oder Stylesheets ersetzt
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Immerhin: Demo-Content …… lindert den ersten Schock eines Themes ohne Inhalte
… macht den Seitenaufbau unter Umständen leichter nachvollziehbar.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Theme-Reviews
https://premium.wpmudev.org/blog/free-high-quality-wordpress-themes/
*
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Was mache ich,nachdem ich mir ein Theme ausgesucht habe?
WordPress Meetup Bonn
Bego Mario Garde@pixolin
InstallationTheme herunterladen,.zip-Datei entpacken und sichtenGibt es Readme-, Photoshop-, Bild-Dateien?Häufig weitere .zip-Datei mit eigentlichem Theme.
Design → Theme installieren → (richtige!).zip-Datei hochladen
Dokumentation abarbeiten, ggf. Demo-Content installieren
WordPress Meetup Bonn
Bego Mario Garde@pixolin
TroubleshootingFunktioniert ein aktuell verwendetes Theme nicht, kannst du das Verzeichnis per (Web-)FTP umbenennen.
WordPress greift dann automatisch auf ein vorhandenes Standard-Theme (Twenty …) zurück.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Deutschsprachige ÜbersetzungAlle Themes liegen im Verzeichnis wp-content/themes.
Übersetzungen können in einem Unterverzeichnis oder wp-content/languages/themes liegen.
WordPress Meetup Bonn
Bego Mario Garde@pixolin
Eigene ÜbersetzungPolyglots1
Programm Poedit
Plugin Loco Translate2
1) https://translate.wordpress.org/locale/de/ 2) https://wordpress.org/plugins/loco-translate/
WordPress Meetup Bonn
Bego Mario Garde@pixolin
… und wie macht Ihr das?