WordPress Themes - pixolin...WordPress Meetup Bonn Bego Mario Garde @pixolin Neulich im WordPress...

WordPress Meetup Bonn

Bego Mario Garde@pixolin

WordPress ThemesWas ist das und wo bekomme ich die her?



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.

https://de.wordpress.org/support/topic/portal-theme/



Was sind Themes?



Themes sind Vorlagen für die Gestaltung deiner Beiträge und Seiten in unterschiedlichen Ausgabeformaten (als Einzelseite, Übersichtsseite, Archiv, …)



Ziel: Anwender konzentriert sich auf Inhalt seiner Seiten und Beiträge und kann auf ein professionelles Layout zurückgreifen.



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

https://unsplash.com



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.



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/

https://wordpress.org/plugins/jonradio-multiple-themes/



Wie ist ein Theme aufgebaut?



StylesheetJedes Theme muss ein Stylesheet mit dem Namen style.css enthalten.

Das Stylesheet enthält den Theme-Header (Kommentar mit Meta-Angaben zum Theme).


/*

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



index.phpJedes Theme muss ein allgemeines Template mit dem Namen index.php haben.


<?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; ?>


the Loop

<?php get_header(); ?>

<div id="primary" class="content-area">

<main id="main" class="site-main" role="main">

<?php




<?php

endwhile;

else :


endif; ?>

</main>

</div>

<?php get_sidebar(); ?>

<?php get_footer();


Header

Footer

Inhalt Beitrag

oder Seite Side

bar



HooksJedes Theme benötigt die Hooks wp_head(); und wp_footer();

Die Hooks liegen üblicherweise in den Templates header.php und footer.php



functions.phpZusätzliche Funktionen, z.B. zum Einbinden von JavaScript, werden in die functions.php gesetzt.



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.

<?php get_header(); ?>

<div id="primary" class="content-area">

<main id="main" class="site-main" role="main">

<?php




<?php

endwhile;

else :


endif; ?>

</main>

</div>

<?php get_sidebar(); ?>

<?php get_footer();


header.php

footer.php

index.php content-

post.php

sidebar.php



Grundausstattungstyle.css index.php header.php footer.phpsidebar.php functions.php



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.



https://developer.wordpress.org/themes/basics/template-hierarchy/

https://developer.wordpress.org/

http://www.apple.com/de/



Kompliziert?

BarrierefreiheitAnsprechende Gestaltung

Responsive Design

für jeden gängigen Browser

SEO-freundlich

Performance

Sicher

GestaltungsoptionenLokalisierbar



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 …



Starter-Themes: "1.000 Arbeitsstunden voraus"



Underscores

http://underscores.me

http://underscores.me



Underscores Components

http://components.underscores.me

http://components.underscores.me



JointsWP (mit Foundation 6)

http://jointswp.com

http://jointswp.com



Alternative: Child Themes



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.


/*

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

*/




Anleitung Child Themeshttps://die-netzialisten.de/wordpress/anleitung-childtheme-anlegen-update/



Wo bekomme ich einWordPress Theme her?



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/

https://wordpress.org/themes/



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/

https://de.wordpress.org/support/forum/themes/



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/



Alternative: Theme kaufen?



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)



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)



Breites AngebotTheme-Boutiquen

verlässliche Ansprechpartner, die ihrem guten Ruf gerecht werden möchten.

z.B. elmastudio.de, florianbrinkmann.com



Multipurpose Themesbesonders viele Gestaltungsoptionen

mehr Flexibilität ohne Programmierung, aber auch mehr Overhead (lange Stylesheets, viele Abfragen)



Page Builderbieten Anwendern eine komfortable Möglichkeit, ohne Programmierung mehrspaltige Layouts umzusetzen

Lock In-Effekt, schlechtere Performance



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!



Nach welchen Kriterien wähle ich ein geeignetes Theme aus?



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.

https://de.wikipedia.org/wiki/Form_follows_function



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?



Worauf sollte ich nicht achten?Fotos, Schriftarten und Farben der Theme-Demo werden durch eigene Inhalte, Optionen oder Stylesheets ersetzt



Immerhin: Demo-Content …… lindert den ersten Schock eines Themes ohne Inhalte

… macht den Seitenaufbau unter Umständen leichter nachvollziehbar.



Theme-Reviews

https://premium.wpmudev.org/blog/free-high-quality-wordpress-themes/

*





Was mache ich,nachdem ich mir ein Theme ausgesucht habe?



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



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.



Deutschsprachige ÜbersetzungAlle Themes liegen im Verzeichnis wp-content/themes.

Übersetzungen können in einem Unterverzeichnis oder wp-content/languages/themes liegen.



Eigene ÜbersetzungPolyglots1

Programm Poedit

Plugin Loco Translate2

1) https://translate.wordpress.org/locale/de/ 2) https://wordpress.org/plugins/loco-translate/

https://translate.wordpress.org/locale/de/

https://wordpress.org/plugins/loco-translate/



… und wie macht Ihr das?

WordPress Themes - pixolin...WordPress Meetup Bonn Bego Mario Garde @pixolin Neulich im WordPress...

Documents

Transcript of WordPress Themes - pixolin...WordPress Meetup Bonn Bego Mario Garde @pixolin Neulich im WordPress...