Eigene Themes from Scratch

424 Aufrufe

Veröffentlicht am

Für viele Projekte braucht es lediglich einen Bruchteil der Funktionalität und des Codes sogenannter “Premium”-Themes oder Frameworks – denen dafür andere, wichtige Features oft fehlen. Um die Projektanforderungen und das gewünschte Design entsprechend umzusetzen, ist es dann deutlich sinnvoller, ein individuelles Theme zu entwickeln. Die Anwender erhalten so ein intuitives und übersichtliches System mit den Optionen, die sie wirklich brauchen. Und der Browser schlankeren Code ohne unnötigen Ballast. In diesem Talk geht es um folgende Themen:

Wozu überhaupt ein Theme selbst entwickeln? Performance, Sicherheit, Benutzerfreundlichkeit, Design
Anatomie eines Themes: Welche Dateien brauchen wir? Von einem leeren Verzeichnis ausgehend arbeiten wir uns bis zu einem Theme vor, das WP als solches akzeptiert.
Erweiterung durch Custom Post Types und Custom Fields
Tools, die den Workflow bei der Entwicklung erleichtern: grunt, git…

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
424
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Eigene Themes from Scratch

  1. 1. EigeneThemes from Scratch Stefan Fröhlich ! WordCamp Berlin 2015
  2. 2. Stefan Fröhlich • 1984: Basic und 6510-Assembler mit C-64 • seit 1995 freiberuflicher Entwickler • seit 2012:WordPress • anfangs Anpassung vonThemes und Plugins • nach kurzer Zeit ausschließlich Entwicklung kundenspezifischerThemes • Administrator etlicher WP-Installationen
 
 stefan@froehlich.it
  3. 3. Wozu ein eigenesTheme?
  4. 4. „Premium“-Themes und Frameworks • unnötige Funktionalität und Code • wichtige Projektanforderungen fehlen • ergänzende Plugins haben häufig dieselben Probleme:
 viele Optionen, aber nicht die erforderlichen
  5. 5. • aufgeblähter Code • viele CSS- und JS-Dateien
  6. 6. PageSpeed-Ergebnis • Out of the box: eher unerfreulich • Abhilfe: 
 entsprechendes Hosting (Kosten/ Administration) 
 oder 
 Plugins (funktioniert oft nicht) 
 oder 
 Aufwand für Optimierung
  7. 7. Günstiger Preis, aber zusätzliche Kosten • unnötige Features entfernen • erforderliche Features implementieren • Anpassungen an Design oder Corporate Identity des Kunden • Bugfixing • zusätzlicherTestaufwand durch Bugfixing und CSS-Anpassung
  8. 8. Sicherheit • beliebteThemes haben auch beliebte Sicherheitslücken • Sicherheitslücken der in dasTheme integrierten Plugins • Kein Problem, wenn regelmäßig alles aktualisiert wird, aber die Praxis sieht oft anders aus.
  9. 9. EigenesTheme
  10. 10. Individuelles Design - 
 nicht von der Stange
  11. 11. • Genau die gewünschte Funktionalität - nicht zuviel, nicht zuwenig • Übersichtliches Backend, das ebenfalls den Kundenwünschen entsprechend aufgebaut ist
  12. 12. • Keine bekannten Sicherheitslücken • Schlanker Code • bessere Performance • weniger CSS- und JS-Dateien
  13. 13. Anatomie einesThemes
  14. 14. Theme-Verzeichnis • Neues, leeresVerzeichnis:
 …/wp-content/themes/from_scratch
  15. 15. style.css /* LICENSE & DETAILS! ==================================================! ! ! Theme Name: Eigenes Theme from Scratch! ! Theme URI: http://www.froehlich.it! ! Description: Demo-Theme für WordCamp Berlin 2015! ! Version: 0.1! ! Author: Stefan Fröhlich! ! Author URI: http://www.froehlich.it! ! License: GNU General Public License v2 or later! ! License URI: http://www.gnu.org/licenses/gpl-2.0.html! ! Tags: bla, blub! ! Text Domain: from_scratch! ==================================================! */!
  16. 16. index.php + screenshot.png <!-- Gibt es mindestens einen Beitrag? -->! <?php if ( have_posts() ) : ?>! ! ! <!-- Dann alle Beiträge ausgeben: —>! ! ! /* DER LOOP */! ! <?php while ( have_posts() ) : the_post(); ?>! ! ! ! <article>! ! ! ! <header>! ! ! ! ! ! ! ! ! <!-- Überschrift -->! ! ! ! ! <h1>! ! ! ! ! ! <a href="<?php the_permalink(); ?>">! ! ! ! ! ! ! <?php the_title(); ?>! ! ! ! ! ! </a>! ! ! ! ! </h1>! ! ! ! ! ! ! ! </header>! ! ! ! ! ! ! ! <!-- Inhalt -->! ! ! ! <?php the_content(); ?>! ! ! ! </article>! ! ! <?php endwhile; ?>! ! <!-- Falls es keine Inhalte gibt -->! ! <?php else : ?>! ! ! ! <p><?php _e( 'Nothing Found', ’from_scratch' ); ?></p>! ! <?php endif; ?>
  17. 17. Header und Footer einbinden <?php get_header(); ?>! ! ! ! <!-- Gibt es mindestens einen Beitrag? -->! <?php if ( have_posts() ) : ?>! ! ! ...! ! <?php else : ?>! ! ! ! <p><?php _e( 'Nothing Found', ’from_scratch' ); ?></p>! ! <?php endif; ?>! ! ! ! ! <?php get_footer(); ?>! • Header:Alles, was vor dem Loop kommt, inklusive HTML-Header und Navigation • Footer:Alles, was nach dem Loop kommt. Inklusive Footer und schließendes </body>-Tag usw.
  18. 18. header.php <!DOCTYPE html>! <html>! <head>! ! ! <meta charset="<?php bloginfo( 'charset' ); ?>">! ! <meta name="viewport" content="width=device-width">! ! ! ! <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />! ! ! <?php wp_head(); ?>! ! </head>! <body>! ! ! <nav class="navigation" role="navigation">!! ! ! <?php wp_nav_menu( array( 'theme_location' => 'mainmenu' ) );!?>! ! ! </nav>!
  19. 19. footer.php ! ! <footer>! ! ! ! <strong>Footer:</strong> Unser eigenes Theme from Scratch!! ! ! </footer>! ! ! </div>! ! ! ! <?php ! ! ! ! wp_footer(); ! ! ! ! ! ?>! ! ! </body>! </html>
  20. 20. WeitereTemplate-Dateien • sidebar.php: Darstellung der Seitenleiste(n) • functions.php: Festlegen globaler Einstellungen, z.B. Skripts und Styles einbinden oder ausschließen • front-page.php: Startseite für „letzte Beiträge“ oder „statische Seite“ • home.php: Startseite für „letzte Beiträge“ • page.php:Template für die Darstellung von Seiten • single.php:Template für einzelner Beiträge • category.php, archive.php: Darstellung von Kategorieren / Archiven
 
 Weiterführende Links:
 https://developer.wordpress.org/themes/basics/template-hierarchy/
 https://codex.wordpress.org/Theme_Development#Template_Files

  21. 21. Alternative Seiten-Templates <?php ! ! /* ! * Template Name: Anderes Template! */! ! get_header(); ! ! ?>! ! <?php while ( have_posts() ) : the_post(); ?>! ! <article>! ! ! <header>!
  22. 22. Weitere Komponenten
  23. 23. • Erweiterung durch Custom PostTypes und
 Taxonomien • Erweiterung durch Custom Fields • Wie gewohnt beliebige Plugins
  24. 24. Custom PostTypes /Taxonomien • Code • bequemer mit
 https://generatewp.com/post-type/ • beliebtes Plugin: 
 https://wordpress.org/plugins/types/
  25. 25. Custom Fields • Code • beliebtes Plugin: 
 Advanced Custom Fields (Pro)

  26. 26. Tools für effizienten Workflow
  27. 27. Tools • lokale Entwicklungsumgebung: Webserver + PHP + MySQL • Automatisierung mit grunt • Versionsverwaltung und Deployment mit git
  28. 28. Lokale Entwicklungsumgebung • Apache / nginx + PHP + MySQL (Mac / Unix / Linux) • MAMP: https://www.mamp.info (Windows / Mac)
  29. 29. Automatisierung mit grunt
  30. 30. Flaticons designed by Freepik
  31. 31. Versionierung mit git • Versionskontrolle mit git dringendst zu empfehlen für jedes Projekt • öffentliche Projekte: https://github.com • vertrauliche Projekte: privates Repository, z.B. auf https://bitbucket.org
  32. 32. Deployment mit git
  33. 33. Fragen? Vielen Dank und weiterhin viel Spaß auf dem WordCamp Berlin 2015 :-) ! Stefan Fröhlich stefan@froehlich.it

×