Download - Eigene Themes from Scratch
![Page 1: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/1.jpg)
Eigene Themes from ScratchStefan Fröhlich
!WordCamp Berlin 2015
![Page 2: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/2.jpg)
Stefan Fröhlich• 1984: Basic und 6510-Assembler mit C-64
• seit 1995 freiberuflicher Entwickler
• seit 2012: WordPress
• anfangs Anpassung von Themes und Plugins
• nach kurzer Zeit ausschließlich Entwicklung kundenspezifischer Themes
• Administrator etlicher [email protected]
![Page 3: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/3.jpg)
Wozu ein eigenes Theme?
![Page 4: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/4.jpg)
„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
![Page 5: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/5.jpg)
• aufgeblähter Code
• viele CSS- und JS-Dateien
![Page 6: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/6.jpg)
PageSpeed-Ergebnis
• Out of the box: eher unerfreulich
• Abhilfe: entsprechendes Hosting (Kosten/ Administration) oder Plugins (funktioniert oft nicht) oder Aufwand für Optimierung
![Page 7: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/7.jpg)
Günstiger Preis, aber zusätzliche Kosten• unnötige Features entfernen
• erforderliche Features implementieren
• Anpassungen an Design oder Corporate Identity des Kunden
• Bugfixing
• zusätzlicher Testaufwand durch Bugfixing und CSS-Anpassung
![Page 8: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/8.jpg)
Sicherheit
• beliebte Themes haben auch beliebte Sicherheitslücken
• Sicherheitslücken der in das Theme integrierten Plugins
• Kein Problem, wenn regelmäßig alles aktualisiert wird, aber die Praxis sieht oft anders aus.
![Page 9: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/9.jpg)
Eigenes Theme
![Page 10: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/10.jpg)
Individuelles Design - nicht von der Stange
![Page 11: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/11.jpg)
• Genau die gewünschte Funktionalität - nicht zuviel, nicht zuwenig
• Übersichtliches Backend, das ebenfalls den Kundenwünschen entsprechend aufgebaut ist
![Page 12: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/12.jpg)
• Keine bekannten Sicherheitslücken
• Schlanker Code
• bessere Performance
• weniger CSS- und JS-Dateien
![Page 13: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/13.jpg)
Anatomie eines Themes
![Page 14: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/14.jpg)
Theme-Verzeichnis
• Neues, leeres Verzeichnis:…/wp-content/themes/from_scratch
![Page 15: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/15.jpg)
![Page 16: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/16.jpg)
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! ==================================================!*/!
![Page 17: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/17.jpg)
![Page 18: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/18.jpg)
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; ?>
![Page 19: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/19.jpg)
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.
![Page 20: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/20.jpg)
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>!
![Page 21: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/21.jpg)
footer.php! ! <footer>!! ! ! <strong>Footer:</strong> Unser eigenes Theme from Scratch!!! ! </footer>!!! </div>!! !! <?php !!! ! wp_footer(); !! ! !! ?>!! !</body>!</html>
![Page 22: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/22.jpg)
Weitere Template-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
![Page 23: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/23.jpg)
Alternative Seiten-Templates<?php !!/* !* Template Name: Anderes Template!*/!!get_header(); !!?>!!<?php while ( have_posts() ) : the_post(); ?>!! <article>!! ! <header>!
![Page 24: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/24.jpg)
Weitere Komponenten
![Page 25: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/25.jpg)
• Erweiterung durch Custom Post Types und Taxonomien
• Erweiterung durch Custom Fields
• Wie gewohnt beliebige Plugins
![Page 26: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/26.jpg)
Custom Post Types / Taxonomien• Code
• bequemer mithttps://generatewp.com/post-type/
• beliebtes Plugin: https://wordpress.org/plugins/types/
![Page 27: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/27.jpg)
Custom Fields
• Code
• beliebtes Plugin: Advanced Custom Fields (Pro)
![Page 28: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/28.jpg)
Tools für effizienten Workflow
![Page 29: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/29.jpg)
Tools
• lokale Entwicklungsumgebung: Webserver + PHP + MySQL
• Automatisierung mit grunt
• Versionsverwaltung und Deployment mit git
![Page 30: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/30.jpg)
Lokale Entwicklungsumgebung
• Apache / nginx + PHP + MySQL (Mac / Unix / Linux)
• MAMP: https://www.mamp.info (Windows / Mac)
![Page 31: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/31.jpg)
Automatisierung mit grunt
![Page 32: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/32.jpg)
Flaticons designed by Freepik
![Page 33: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/33.jpg)
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
![Page 34: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/34.jpg)
Deployment mit git
![Page 35: Eigene Themes from Scratch](https://reader035.vdocuments.site/reader035/viewer/2022062413/58ed53181a28ab7d0d8b4673/html5/thumbnails/35.jpg)
Fragen?Vielen Dank und weiterhin viel Spaß auf dem WordCamp Berlin 2015 :-)
!Stefan Fröhlich