27. August 2017

Erstellung eines WordPress Themes

Um ein eigenes WordPress Theme zu erstellen benötigt es nicht viel. Eigentlich reichen HTML, CSS und PHP Kenntnisse aus. Was es sonst noch benötigt stelle ich in diesem Beitrag dar. Als Vorlage für unser Template nutzen wir Twitter Bootstrap 4, mit dem alle möglichen HTML5 Objekte vordefiniert werden.

Schritt 1: Theme Ordner und Basisdateien erstellen

Im Ordner der WordPress Installation befindet sich ein Unterordner “wp-content”, der wiederum einen Unterordner “themes” beinhaltet. Nachdem wir in diesen Ordner navigiert sind, erstellen wir einen Unterordner unserer Wahl, der unsere Dateien beinhalten soll. Also haben wir jetzt z.B. folgende Struktur: “/wp-content/themes/niklas”.

Nun legen wir zwei Dateien an, die das Minimum für ein WordPress Theme darstellen:

index.php
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>
style.css
/* 
Theme Name: Euer WordPress Theme 
Author: Euer Name 
Description: Bootstrap Blog template converted to WordPress 
Version: 0.0.1 Tags: bootstrap 
*/

Und schon sind wir eigentlich mit dem ersten Theme fertig. Wenn ihr nämlich nun im Adminbereich unter “Design”, “Themes” nachseht taucht euer neues Theme auf und es lässt sich dort aktivieren.

Schritt 2: Die WordPress Theme File Hierarchie

Natürlich lässt sich so weder Inhalt bearbeiten, noch von einem Blog bzw. einer Website reden. Die beiden vorhandenen Dateien sind einfach nur der letzte Fallback in der Seiten-Hierarchie von WordPress und müssen deshalb auf jeden Fall vorhanden sein.

Das Ganze kann relativ komplex werden, wie hier zu sehen ist: https://wphierarchy.com/

Eine etwas kürze Darstellung möglicher Files und deren Bedeutung gibt es hier: Link. Dort gibt es auch generell eine gute Beschreibung wie Templates in WordPress funktionieren.

Dateien

Für die die eine deutsche Variante bevorzugen oder die die keine Lust haben die WordPress Dokumentation zu lesen, die Liste hier:

style.css

Das Basis CSS Stylesheet des Themes. Wie zuvor eine Pflichtdatei ohne die das Theme nicht funktioniert. Zusätzlich kann man hier CSS Elemente für die Website verstauen und die Datei später in den Header einbauen.

rtl.css

Eine CSS Stylesheet für die Schreibweise “Rechts-Nach-Links”. Wird eher selten benötigt und ist rein optional.

index.php

Die Basis PHP Datei die unbedingt vorhanden sein muss und auf die bei Nichtvorhandensein anderer PHP-Files zurückgegriffen wird.

comments.php

Eine PHP template um Kommentare darzustellen.

front-page.php

PHP template für die Startseite.

home.php

Das Homepage Template, wenn eine Startseiten (front-page.php) Template vorhanden ist, wird allerdings dieses verwendet. Beim verwenden einer statischen Startseite (static front page) ist die home.php die Datei auf der die letzten Posts angezeigt werden.

single.php

Template für die Darstellung eines einzelnes Posts.

single-{post-type}.php

The single post template used when a single post from a custom post type is queried. For example, single-book.php would be used for displaying single posts from the custom post type named “book”. index.php is used if the query template for the custom post type is not present.

page.php

Ein Template für die Darstellung von Seiten (Page).

category.php

Wenn existent, wird diese Datei genutzt um Kategorien (category template) darzustellen.

tag.php

Das Tag Template welches zur Darstellung kommt, wenn Tags verwendet werden.

taxonomy.php

The term template. Used when a term in a custom taxonomy is queried.

author.php

The author template. Used when an author is queried.

date.php

The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.

archive.php

The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.phpauthor.php, and date.php for their respective query types.

search.php

The search results template. Used when a search is performed.

attachment.php

Attachment template. Used when viewing a single attachment.

image.php

Image attachment template. Used when viewing a single image attachment. If not present, attachment.php will be used.

404.php

The 404 Not Found template. Used when WordPress cannot find a post or page that matches the query.

Schritt 3: Eine Erweiterung unseres Template

Unser erweitertes Template besteht aus den Dateien “style.css”, “header.php”, “index.php”, “footer.php” und eine spezielle “functions.php” mit der wir die korrekte Darstellung eines Menüs von Twitter Bootstrap ermöglichen.

Die “style.css” können wir vorerst so belassen wie sie war:

/* 
Theme Name: Euer WordPress Theme 
Author: Euer Name 
Description: Bootstrap Blog template converted to WordPress 
Version: 0.0.1 
Tags: bootstrap 
*/

In die Datei “header.php” nehmen wir folgenden Inhalt auf:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title><?php echo get_bloginfo( 'name' ); ?></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <link rel="stylesheet" href="<?php echo get_bloginfo('template_directory'); ?>/style.css">
        <?php wp_head();?>
  </head>
  <body>  
  <nav class="navbar sticky-top fixed-top navbar-expand-lg navbar-dark header-navbar">
        <div class="container">
           <a class="navbar-brand" href="">
               <img src="" width="30" height="30" class="d-inline-block align-top">
               <?php echo get_bloginfo( 'name' ); ?>
           </a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
           </button>
           <?php create_bootstrap_menu("header-menu");?>
       </div>
     </nav>

Die Datei “index.php” verändern wir nun noch so, dass auch die Inhalte die wir in WordPress als Beiträge oder Seiten anlegen dargestellt werden:

<?php get_header(); ?>

<?php <?php  if ( have_posts() ) : while ( have_posts() ) : the_post();   get_template_part( 'content', get_post_format() );   endwhile; endif;  ?>

<?php get_footer(); ?>

Anschließend erstellen wir noch die Datei für den Footer die “footer.php”:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<?php wp_footer(); ?>
</body>
</html>

Abschließend noch die “functions.php”:

<?php
##Navigation
function create_bootstrap_menu( $theme_location ) {
if ( ($theme_location) && ($locations = get_nav_menu_locations()) && isset($locations[$theme_location]) ) {
$menu_list .= '<!-- Collect the nav links, forms, and other content for toggling -->';
$menu = get_term( $locations[$theme_location], 'nav_menu' );
$menu_items = wp_get_nav_menu_items($menu->term_id);
$menu_list .= '<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">' ."\n";
$menu_list .= '<ul class="navbar-nav">' ."\n";
foreach( $menu_items as $menu_item ) {
if( $menu_item->menu_item_parent == 0 ) {
$parent = $menu_item->ID;
$menu_array = array();
foreach( $menu_items as $submenu ) {
if( $submenu->menu_item_parent == $parent ) {
$bool = true;
$menu_array[] = '<li class="nav-item"><a class="nav-link" href="' . $submenu->url . '">' . $submenu->title . '</a></li>' ."\n";
}
}
if( $bool == true && count( $menu_array ) > 0 ) {
$menu_list .= '<li class="dropdown">' ."\n";
$menu_list .= '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' . $menu_item->title . ' <span class="caret"></span></a>' ."\n";
$menu_list .= '<ul class="dropdown-menu">' ."\n";
$menu_list .= implode( "\n", $menu_array );
$menu_list .= '</ul>' ."\n";

} else {
$menu_list .= '<li class="nav-item">' ."\n";
$menu_list .= '<a class="nav-link" href="' . $menu_item->url . '">' . $menu_item->title . '</a>' ."\n";
}

}
// end <li>
$menu_list .= '</li>' ."\n";
}
$menu_list .= '</ul>' ."\n";
$menu_list .= '</div>' ."\n";
} else {
$menu_list = '<!-- no menu defined in location "'.$theme_location.'" -->';
}
echo $menu_list;
}
?>

Fazit

Damit wäre unser einfaches Bootstrap Template fertiggestellt, welches nun Stück für Stück erweitert werden kann.

Titel

Erstellung eines WordPress Themes

Veröffentlicht am

27. August 2017

Teilen
facebook twitter xing linkedin email whatsapp
Kategorien / Tags
WCMS