Praxis-Workshop: Theme-Entwicklung

Aktivieren Sie die Beitragsbilder in der functions.php

add_theme_support( 'post-thumbnails' );

Das Beitragsbild in den Loop integrieren

<?php 
if ( have_posts() ) :
		while ( have_posts() ) : the_post(); ?>
				<?php the_post_thumbnail('thumbnail'); ?>
				<h2><?php the_title();?></h2>
				<?php the_content('Weiterlesen');
		endwhile;
endif; 
?>  

Den Loop in das Template integrieren

<?php 
	if ( have_posts() ) :
		while ( have_posts() ) : the_post(); ?>
			<h2><?php the_title();?></h2>
			<?php the_content('Weiterlesen');
		endwhile;
	endif; 
?>

Den Pfad zur Bild-Datei korrigieren

<img class="header-image" src="<?php  echo get_stylesheet_directory_uri(); ?>/img/header.jpg">

Den Pfad zur CSS-Datei korrigieren

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">

Den Seitentitel mit der Bloginfo-Funktion ausgeben

<title><?php bloginfo('name'); ?></title>

Den Titel ausgeben und mit der Startseite verlinken

<h1 class="title">
	<a href="<?php bloginfo('url'); ?>">
		<?php bloginfo('name') ?>
	</a>
</h1>	

Die Meta-Description mit der Bloginfo-Funktion ausgeben

<meta name="description" content="<?php bloginfo('description'); ?>">">

Die style.css erweitern

/**
 * Theme Name: Mein erstes WordPress-Theme
 * Theme URI: http://www.pixelbar.be
 * Description: Das Theme der Bäckerei Brigmann
 * Version: 1.0.0
 * Author: Pixelbar
 * Author URI: http://www.pixelbar.be
 * Tags: theme-options
 */

Neue Sidebars in WordPress registrieren

<?php
if ( function_exists('register_sidebar') ) { 
	register_sidebar(array(
		'name' => 'Kopfleiste',
		'description' => 'Diese Leiste wird oben auf der Website angezeigt',
 		'before_widget' => '<div class="kopf-item">',
 		'after_widget' => '</div>',
 		'before_title' => '<h3>', 
		'after_title' => '</h3>' 	
					)); 
	register_sidebar(array(
		'name' => 'Rechte Leiste',
		'description' => 'Diese Leiste wird rechts auf der Website angezeigt',
 		'before_widget' => '<div class="rechteleiste-item">',
 		'after_widget' => '</div>',
 		'before_title' => '<h3>', 
		'after_title' => '</h3>' 	
					)); 
	register_sidebar(array(
		'name' => 'Fusszeile',
		'description' => 'Diese Leiste bildet den Abschluss der Website',
 		'before_widget' => '<div class="footer-item">',
 		'after_widget' => '</div>',
 		'before_title' => '<h5>', 
		'after_title' => '</h5>' 	
					)); 
}

Platzierung der Sidebar "Fussleiste"

<?php dynamic_sidebar( 'Fusszeile' ); ?>

Platzierung der Sidebar "Kopfleiste"

<?php dynamic_sidebar( 'Kopfleiste' ); ?>

Platzierung der Sidebar "Rechte Leiste"

<?php dynamic_sidebar( 'Rechte Leiste' ); ?>

Schritt 1: Die Datei functions.php bearbeiten

$args = array(
	'width'         => 1026,
	'height'        => 400,
	'default-image' => get_stylesheet_directory_uri() . '/img/header.jpg',
);
add_theme_support( 'custom-header', $args );

Schritt 2: Die Ausgabe im Template bearbeiten

<img class="header-image" src="<?php header_image(); ?>" alt="Kopfbild" />