Vom Photoshop Design zum fertigen WordPress Template (Teil 1)

Teil 1 auf Youtube

Teil 2 auf Youtube

Ich hab mir gedacht, ich erstelle mal eine Anleitung wie jeder schnell und effektiv zu seinem eigenen WordPress Template kommen kann. Ich bin selbst nicht der WordPress Pro, deswegen würde ich mich über Verbesserungsvorschläge, sollte es welche geben, in den Kommentaren sehr freuen. Das Theme stelle ich zum Schluß kostenlos zur Verfügung.

In dieser Anleitung gehe ich davon aus das jeder weiß wie WordPress installiert wird. Eventuell steht auch ein Webhoster zur Verfügung der WordPress über eine One-Click-Installation bereitstellt.

Werkzeuge die benötigt werden:

  • Eine leere WordPress Installation
  • Ein Design
  • Ein HTML-Editor

Das Beitragsbild zeigt das fertige WordPress Template. Ich habe mein Theme „customize“ genannt.

WordPress Template Grundstruktur.

Als erstes legen wir den Ordner unseres Themes an und zwar im Theme Verzeichnis der WordPress Umgebung. In unserem Fall nennen wir den Ordner pt-customize.

  • wp-content -> themes -> pt-customize

Als nächstes erstellen wir alle von WordPress benötigten Ordner und Dateien in diesem Verzeichnis:

  • css (Ordner)
  • images (Ordner)
  • js (Ordner)
  • template-parts (Ordner)
  • 404.php (Datei)
  • comments.php (Datei)
  • footer.php (Datei)
  • functions.php (Datei)
  • header.php (Datei)
  • index.php (Datei)
  • page.php (Datei)
  • screenshot.png (Bilddatei – Eine Vorschau eures Designs)
  • sidebar.php (Datei)
  • single.php (Datei)
  • style.css (Datei)

In den css Ordner kopieren wir die aktuelle Bootstrap CSS-Datei (bootstrap.min.css) und erstellen eine media.css Datei.
Herunterladen kann man sich das ganze Bootstrap Paket hier.
Im Anschluss kopieren wir die Javascript Datei von Bootstrap (bootstrap.min.js) in den js Ordner unseres Themes.

Damit das Theme von WordPress erkannt werden kann, öffnen wir als erstes die style.css in unserem Editor und schreiben folgende Zeilen hinein:

/*
Theme Name: customize
Theme URI: https://www.programmier-tipps.de/downloads/customize
Description: customize is a free responsive wordpress theme
Author: Programmier Tipps
Author URI: https://www.programmier-tipps.de/
Version: 1.0.0
*/

Nach dem speichern der style.css steht unser Theme im WordPress Backend unter Design -> Themes zur Verfügung. Es muss nur noch aktiviert werden. Im Frontend wird natürlich noch nicht’s ausgegeben, da wir anfangs nur leere Dateien erstellt haben. Das ändern wir aber jetzt.

Inhalt header.php

In unsere header.php schreiben wir folgende Zeilen:

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="stylesheet" href=" <?php echo get_stylesheet_directory_uri();?>/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href=" <?php echo get_stylesheet_directory_uri();?>/css/media.css" type="text/css" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>

Inhalt footer.php

  <?php wp_footer(); ?>
  </body>
</html>

Inhalt index.php

<?php get_header(); ?>
<div class="container">
  <div class="row">
    <div id="blog-wrapper" class="content-area col-md-8 col-xs-12">
      <?php if ( have_posts() ) : ?>
        <?php if ( is_home() && ! is_front_page() ) : ?>
          <header>
            <h1 class="page-title"><?php single_post_title(); ?></h1>
          </header>
        <?php endif; ?>
        <?php 
          while ( have_posts() ) : the_post();
          get_template_part( 'template-parts/content', get_post_format() );
          endwhile;
          the_posts_pagination( array(
            'prev_text'          => __( 'zurück', 'pt-customize' ),
            'next_text'          => __( 'vor', 'pt-customize' ),
          )); else :
            get_template_part( 'template-parts/content', 'none' );
          endif; ?>
    </div>
    <?php get_sidebar(); ?>
  </div>
</div>
<?php get_footer(); ?>

Inhalt single.php

<?php get_header(); ?>
<div class="container">
  <div class="row">
    <div id="blog-wrapper" class="content-area col-md-8 col-xs-12">
      <?php 
        while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
        if ( comments_open() || get_comments_number() ) {
          comments_template();
        }
        if ( is_singular( 'attachment' ) ) {
          the_post_navigation( array(
            'prev_text' => _x( '<span class="meta-nav">Veröffentlicht in </span><span class="post-title">%title</span>', 'Beitrag davor', 'programmiertipps' ),
          ));
          } elseif ( is_singular( 'post' ) ) {
            the_post_navigation( array(
              'prev_text'          => __( 'zurück', 'pt-customize' ),
              'next_text'          => __( 'vor', 'pt-customize' ),
              'screen_reader_text' => __( 'Mehr lesen' ),
            ));
          }
       endwhile;
     ?>
    </div>
    <?php get_sidebar(); ?>
  </div>
</div>
<?php get_footer(); ?>

Inhalte page.php

<?php get_header(); ?>
<div class="container">
  <div class="row">
    <div id="blog-wrapper" class="col-md-8 col-xs-12">
      <?php while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'page' );
        if ( comments_open() || get_comments_number() ) :
          comments_template();
        endif;
      endwhile; ?>	
    </div>    
    <?php get_sidebar(); ?>  
  </div>
</div>
<?php get_footer(); ?>

Inhalte sidebar.php

<?php if ( is_active_sidebar( 'custom-sidebar' ) ) : ?>
  <div id="sidebar" class="sidebar col-md-4 col-xs-12">
    <div id="sidebar-content">
      <div class="sidebar-inner-content">
        <?php dynamic_sidebar( 'custom-sidebar' ); ?>
      </div>
    </div>
  </div>
<?php endif; ?>

Inhalt functions.php

<?php
function pt_customize_setup() {
  add_theme_support( 'automatic-feed-links' );
  add_theme_support( 'title-tag' );
  add_theme_support( 'post-thumbnails' );
  add_theme_support( 'html5', array(
    'search-form',
    'comment-form',
    'comment-list',
    'caption',
  ));
  register_nav_menus( array(
    'primary' => __( 'Primary Menu','pt-customize' ),
    'meta' => __( 'Meta Menu','pt-customize' ),
  ));
}
add_action( 'after_setup_theme', 'pt_customize_setup' );

function pt_customize_widgets_init() {
  register_sidebar( array(
    'name'          => __( 'Sidebar', 'pt-customize' ),
    'id'            => 'custom-sidebar',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
    'before_content'  => '<div class="widget-content">',
    'after_content'   => '</div>',
  ));	
}
add_action( 'widgets_init', 'pt_customize_widgets_init' );
?>

Content Templates erstellen

In dem Verzeichnis

  • wp-content -> themes -> pt-customize -> template-parts

erstellen wir folgende Dateien:

  • content.php
  • content-none.php
  • content-page.php
  • content-single.php

Inhalt content.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( has_post_thumbnail() ) : ?>
    <div class="image-wrapper">
      <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?></a>
    </div>
  <?php endif; ?> 
  <div class="post-wrapper">
    <header class="entry-header">  
      <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
        <span class="sticky-post"><?php _e( 'Featured', 'pt-customize' ); ?></span>
      <?php endif; ?>
      <?php the_title( sprintf( '<h2 class="post-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
    </header>
    <div class="post-content">
      <?php if( is_single() || 'full-post' === $post_content ){
        the_content( sprintf(
          wp_kses( __( 'Mehr lesen', 'pt-customize' ), array( 'span' => array( 'class' => array() ) ) ),
          the_title( '<span class="screen-reader-text">"', '"</span>', false )
	));
        wp_link_pages( array(
          'before' => '<div class="page-links">' . esc_html__( 'Seiten:', 'pt-customize' ),
          'after'  => '</div>',
	));
      } else{
        the_excerpt(); ?>
        <a href="<?php the_permalink(); ?>" class="btn btn-primary"><?php echo esc_html__( 'Mehr lesen', 'pt-customize' ); ?></a>
        <?php
          }
        ?>
    </div>
  </div>
</article>

Inhalt content-page.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( has_post_thumbnail() ) : ?>
    <div class="image-wrapper">
      <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
    </div>
  <?php endif; ?>  
  <div class="page-wrapper">
    <header class="page-head">
      <?php the_title( sprintf( '<h2 class="page-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
    </header>
    <div class="page-content">
      <?php the_content(); ?>
    </div>
  </div>
</article>

Inhalt content-single.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( has_post_thumbnail() ) : ?>
    <div class="image-wrapper">
      <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
    </div>
  <?php endif; ?>    
  <div id="post-<?php the_ID(); ?>" class="post-single-wrapper">
    <header class="post-header">
      <?php the_title( '<h2 class="post-single-title">', '</h2>' ); ?>
    </header>
    <div class="entry-content">
      <?php the_content();
        wp_link_pages( array(
          'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'pt-customize' ) . '</span>',
          'after'       => '</div>',
          'link_before' => '<span>',
          'link_after'  => '</span>',
          'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'pt-customize' ) . ' </span>%',
          'separator'   => '<span class="screen-reader-text">, </span>',
        ));
      ?>
    </div>
  </div>
</article>

Inhalt content-none.php

<section class="not-found">
  <header class="page-header">
    <h1 class="page-title">Ups, wir konnten nicht's finden.</h1>
  </header>
</section>

Die Basis haben wir somit geschaffen. Wenn wir jetzt die Webseite mit aktiviertem Theme erneut aufruft, kann man die Inhalte schon sehen.

Um das ganze ein wenig übersichtlicher zu gestalten, werde ich alle weiteren Schritte im nächsten Teil behandeln. Fragen und Anregungen wie gesagt in die Kommentare. Ich würde mich freuen.

* Werbung/Affiliate Link
Kostenlose CallYa Karte

Kommentare

  • Photoshop per
    03.06.2021 - 10:34 Uhr

    Hi, endlich Mal eine gute und brauchbare Anleitung, ganz tolle Arbeit, aber so ist der erwähnte nächste Teil? Danke
    LG

    Antworten
    • Markus
      04.06.2021 - 21:25 Uhr

      Hallo, ich bin ehrlich gesagt noch nicht dazu gekommen. Ich werde mein bestes geben die restlichen Teile bald nachzureichen.

      Antworten
  • Häfu
    21.03.2022 - 19:18 Uhr

    NACH 5 JAHREN ein Kommentar, wo der zweite Teil ist – und das geile, 5 Jahre später, kommt als Antwort, dass du dein bestes gibst =D (SOLL kein auslachen sein – es war einfach zu perfekt gerade ;)) Aber im ernst, kommt da noch was ?

    EDIT// Konnte den Kommentar nicht editieren, hier nochmals Fehlerfrei ^^

    Antworten
    • Markus
      04.04.2022 - 21:05 Uhr

      Hallo Häfu, kein Ding. Ich weiß dass ich das Thema ein wenig vernachlässigt habe. Ich plane das ganze Thema in einem, evtl. auch mehreren, Livestreams umzusetzen. Das Video werde ich dann später hier verlinken.

      Antworten
  • Markus
    31.05.2022 - 16:29 Uhr

    Teil 1 und 2 jetzt auf Youtube. Links sind im Artikel ergänzt.

    Antworten

Schreibe einen Kommentar

Erforderliche Felder sind entsprechend markiert.

Wird nicht veröffentlicht.

Weitere Beiträge

Wordpress REST-API nutzen

REST-API von Wordpress - So kannst du sie verwenden.
Online Geld verdienen

Wie du online Geld verdienen kannst!

Das HTML5 Grundgerüst.

TYPO3 sys-category in Flexform auf ID beschränken