EigeneThemes from Scratch
Stefan Fröhlich	
!
WordCamp Berlin 2015
Stefan Fröhlich
• 1984: Basic und 6510-Assembler mit C-64	
• seit 1995 freiberuflicher Entwickler	
• seit 2012:WordPress	
•...
Wozu ein eigenesTheme?
„Premium“-Themes und Frameworks
• unnötige Funktionalität und Code	
• wichtige Projektanforderungen fehlen	
• ergänzende P...
• aufgeblähter Code	
• viele CSS- und JS-Dateien
PageSpeed-Ergebnis
• Out of the box: eher unerfreulich	
• Abhilfe: 

entsprechendes Hosting (Kosten/ Administration) 

ode...
Günstiger Preis, aber zusätzliche Kosten
• unnötige Features entfernen	
• erforderliche Features implementieren	
• Anpassu...
Sicherheit
• beliebteThemes haben auch beliebte
Sicherheitslücken	
• Sicherheitslücken der in dasTheme
integrierten Plugin...
EigenesTheme
Individuelles Design - 

nicht von der Stange
• Genau die gewünschte Funktionalität - nicht zuviel, nicht zuwenig	
• Übersichtliches Backend, das ebenfalls den Kundenwü...
• Keine bekannten Sicherheitslücken	
• Schlanker Code	
• bessere Performance	
• weniger CSS- und JS-Dateien
Anatomie einesThemes
Theme-Verzeichnis
• Neues, leeresVerzeichnis:

…/wp-content/themes/from_scratch
style.css
/* LICENSE & DETAILS!
==================================================!
!
! Theme Name: Eigenes Theme from Scr...
index.php + screenshot.png
<!-- Gibt es mindestens einen Beitrag? -->!
<?php if ( have_posts() ) : ?>!
!
! <!-- Dann alle ...
Header und Footer einbinden
<?php get_header(); ?>!
!
!
!
<!-- Gibt es mindestens einen Beitrag? -->!
<?php if ( have_post...
header.php
<!DOCTYPE html>!
<html>!
<head>! !
! <meta charset="<?php bloginfo( 'charset' ); ?>">!
! <meta name="viewport" ...
footer.php
! ! <footer>!
! ! ! <strong>Footer:</strong> Unser eigenes Theme from Scratch!!
! ! </footer>!
!
! </div>!
! !
...
WeitereTemplate-Dateien
• sidebar.php: Darstellung der Seitenleiste(n)	
• functions.php: Festlegen globaler Einstellungen,...
Alternative Seiten-Templates
<?php !
!
/* !
* Template Name: Anderes Template!
*/!
!
get_header(); !
!
?>!
!
<?php while (...
Weitere Komponenten
• Erweiterung durch Custom PostTypes und

Taxonomien	
• Erweiterung durch Custom Fields	
• Wie gewohnt beliebige Plugins
Custom PostTypes /Taxonomien
• Code	
• bequemer mit

https://generatewp.com/post-type/	
• beliebtes Plugin: 

https://word...
Custom Fields
• Code	
• beliebtes Plugin: 

Advanced Custom Fields (Pro)

Tools für effizienten Workflow
Tools
• lokale Entwicklungsumgebung: Webserver + PHP + MySQL	
• Automatisierung mit grunt 	
• Versionsverwaltung und Deplo...
Lokale Entwicklungsumgebung
• Apache / nginx + PHP + MySQL (Mac / Unix / Linux)	
• MAMP: https://www.mamp.info (Windows / ...
Automatisierung mit grunt
Flaticons designed by Freepik
Versionierung mit git
• Versionskontrolle mit git dringendst zu empfehlen für jedes Projekt	
• öffentliche Projekte: https...
Deployment mit git
Fragen?
Vielen Dank und weiterhin viel Spaß auf dem WordCamp Berlin 2015 :-)	
!
Stefan Fröhlich	
stefan@froehlich.it
Eigene Themes from Scratch
Eigene Themes from Scratch
Nächste SlideShare
Wird geladen in …5
×

Eigene Themes from Scratch

378 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
378
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
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

×