Programmieren lernen | Codebeispiele | Jobbörse | Webentwicklung

Vom Photoshop Design zum fertigen WordPress Template (Teil 1)

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.

Noch keine Kommentare vorhanden. Sei DU der erste!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.