LB-Projects Theme Dokumentation

6

Das neue Theme ist online und damit Sie als Leser mehr als nur einen optischen Eindruck davon bekommen, möchte ich an dieser Stelle den Aufbau des Themes und Teile des Quellcodes vorstellen. Dabei beschränke ich mich allerdings auf einen kleinen Teil der Funktionen, um den Rahmen dieses Artikels nicht zu sprengen. Hier können alle Theme-Dateien heruntergeladen werden.

Gliederung

  1. Einleitung
  2. Welche Dateien werden benötigt?
    1. index.php
    2. header.php
    3. navigation.php
    4. content.php
    5. footer.php
    6. sidebar.php
    7. search.php / searchform.php
    8. coments.php
    9. functions.php
    10. style.css

1) Einleitung

LB-Projects basiert auf dem Content Managment System WordPress, welches sogenannte Themes unterstützt. Themes ermöglichen eine individuelle Anpassung des Aussehens und der Funktionen einer WordPress-basiert Webseite. Zwar gibt es hier im Internet zahllose fertige Themes zum Download, doch meistens sind diese nicht optimal auf die eigenen Bedürfnisse angepasst.
Vor dem Design eines solchen Themes sollten auch Anfänger in Sachen Webprogrammierung nicht zurückschrecken, denn es ist gar nicht so schwer (siehe Projektlog des neuen Webdesigns).
Programmiert wird ein solches Theme in verschiedenen Programmiersprachen, einmal HTML für das Grundgerüst (Markup), PHP für sämtliche Theme-Funktionen und Interaktionen mit dem WordPress-”Kernel” und schließlich CSS für die Gestaltung einzelner Elemente. Optional kommt noch Javascript für Animationen von Elementen hinzu (bei mir z.B. bei der Slideshow auf der Startseite).

2) Welche Dateien werden benötigt?

Im Wesentlichen sind das gerade einmal zwei Dateien, die PHP-Datei index.php und das Stylesheet style.css. In der index.php befindet sich das HTML-Grundgerüst der Seite, sowie sämtliche Funktionen zum Auslesen von Artikeln und Kommentaren, der Header, die Sidebar, der Footer, die Suchfunktion und sämtliche auf der Seite vorhandene Elemente. Natürlich werden Teile dieses Codes in eigene Dateien ausgelagert, um die Übersichtlichkeit des Theme-Codes zu verbessern.
Schließlich ergeben sich für mein Theme folgende Dateien:

  • index.php
  • header.php
  • navigation.php
  • content.php
  • footer.php
  • sidebar.php
  • search.php
  • searchform.php
  • comments.php
  • functions.php
  • style.css

2.1) index.php

Beginnen wir mit der idex.php. Hier wird auf die ausgelagerten Dateien referenziert, sodass der Interpreter sich aus diesen Angaben seinen kompletten Code “zusammenbasteln” kann. Tatsächlich hätte man auch einfach alle Funktionen in diese Datei schreiben können, darunter würde allerdings die Übersichtlichkeit des Codes leiden. Die index.php sieht wie folgt aus. Mittels des Befehls ‘include()’ werden die Datein eingebunden und die WordPress-eigene Funktionen ‘get_header()’ und ‘get_sidebar()’ machen ebenfalls nichts anderes als auf die Dateien header.php und sidebar.php zu verweisen.

<?php get_header(); ?>

	<div id="main">

		<?php get_template_part('navigation'); ?>

		<?php get_template_part('content'); ?>
                                
		<?php get_sidebar(); ?> 
                               
	</div><!-- main -->

</div><!-- wrapper -->

<?php wp_footer(); ?>

</body>
</html>

2.2) header.php

Weiter geht es mit der header.php, die folgendermaßen aufgebaut ist. Hier öffnen wir das HTML-Dokument, füllen den head-Bereich mit dem title-Element, das später im Browsertab angezeigt wird, verweisen auf das spätere, ebenfalls ausgealgerte Stylesheet und öffnen das body-Element. In diesem werden einige Container (div) erstellt und das Suchformular, das sich in der Datei searchform.php befindet, angezeigt. Zu beachten ist, dass der Code-Ausschnitt vereinfacht wurde, im richtigen Theme sind noch verschiedenen Scripts für z.B. Google Analytics oder die Slideshow eingefügt.

<!DOCTYPE html>
<html <?php language_attributes(); ?>
    
    <head>

	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

        <?php wp_head(); ?>
        
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

	<title>
		<?php if (is_front_page() ) {
    			bloginfo('name');
		} elseif ( is_category() ) {
			wp_title('');
		} elseif ( is_single() ) {
			wp_title('');
		} elseif ( is_page() ) {
			wp_title('');
		} elseif ( is_archive() ) {
			wp_title('');
		} else {
			wp_title('');
		} ?>
	</title>

        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    </head>

    <body <?php body_class(); ?>>     
  
        <a href="<?php bloginfo('url'); ?>"><img id="logo" src="<?php echo get_stylesheet_directory_uri()?>/images/logo.png" /></a>

        <div id="wrapper">

            <div id="header">
                
                <div id="search">
                    <?php get_search_form(); ?>
                </div>
                
                <div class="clear"></div>
            
            </div>

2.3) navigation.php

Anschließend folgt im Dokument die Datei navigation.php. In dieses wird dir Seitennavigation, also das Menü, erstellt. Diese ist im Wesentlichen eine Kombination von sogenannten ungeordneten Listen, die eine Liste verschiedener Links enthalten. Des Weiteren ist noch der Container ‘open-nav’ definiert. Das ist der gelbe Bereich im Header, über den das Menü geöffnet werden kann. Er enthält zudem ein Bild, das mit dem HTML-Elemt img eingefügt wird.

<div id="open-nav">

<img id="menu-arrow" src="<?php echo get_stylesheet_directory_uri()?>/images/menu-arrow.png" />

<div id="navigation">

   <span>

	<div id="navbar-content">

	<ul class="toplevel">
		<li>
			<a href="http://projects.lb-home.de/">Home</a>
		</li>
		
	    <li>
			<a href="#">Allgemein</a>
			<ul class="submenu">
				<li>
					<a href="http://projects.lb-home.de/category/informationen/">Informationen</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/category/news/">Science News</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/archiv/">Archiv</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/sitemap/">Sitemap</a>
				</li>                         
			</ul>
		</li>

		<li>
			<a href="http://projects.lb-home.de/category/projekte/">Projekte</a>
			<ul class="submenu">
				<li>
					<a href="http://projects.lb-home.de/category/projekte/elektrotechnik/">Elektrotechnik</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/category/projekte/holz-und-metallbau/">Holz und Metall</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/category/projekte/pc-hardware/">PC Hardware</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/category/projekte/software-und-programmierung/">Software</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/category/projekte/modellbau/">Modellbau</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/category/projekte/thomas/">THOMAS</a>
				</li>
			</ul>
		</li>

		<li>
			<a href="#">Kontakt</a>
		    <ul class="submenu">
				<li>
					<a href="http://projects.lb-home.de/gastebuch-3/">G&auml;stebuch</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/kontakt/">Kontaktformular</a>
				</li>                              
			</ul>
		</li>

		<li>
			<a href="#">&Uuml;ber</a>
		    <ul class="submenu">
				<li>
					<a href="http://projects.lb-home.de/der-autor/">Der Autor</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/impressum/">Impressum</a>
				</li>                              
			</ul>
		</li>
		
		<li>
			<a href="#">Mehr</a>
			<ul class="submenu">
				<li>
					<a href="http://projects.lb-home.de/links/">Weblinks</a>
				</li>
				<li>
					<a href="http://www.youtube.com/user/LBHomeprojects" target="blank">YouTube-Kanal</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/rss" target="blank">Newsfeed</a>
				</li>
				<li>
					<a href="http://projects.lb-home.de/buch/">Bonusmaterial</a>
				</li>                              
			</ul>
		</li>
	</ul>

	</div>

    </span>

    <div class="clear"></div>		            

</div><!-- navigation --> 

</div><!-- open-nav -->

2.4) content.php

Auf die Navigation folgt in der index.php die Datei content.php. Diese ist für die Ausgabe der Artikelinhalte und -informationen (Autor, Datum) und Kommentare verantwortlich. Hier kommt zum ersten Mal die sogenannte WordPress-Loop zum Einsatz. Diese ist für das Auslesen des Contents aus der Datenbank verantwortlich. Mit der funktion ‘have_posts()’ kann so abgefragt werden, ob Artikel vorhanden sind und anschließend kann der Inhalt der Artikel über ‘the_content()’ ausgelesen und angezeigt werden. Am Ende der Datei werden die Kommentar-Funktion aufgerufen und der Footer, der in der Datei footer.php liegt, angezeigt.

<div id="content"> 
	
	<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('announcements')) {} ?>
                
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    
        <div class="article">

		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        
			<?php LB_article_title(); ?>
                        
			<div class="clear"></div>
                        
			<div class="entry">

				<?php the_content('weiterlesen'); ?>

			</div>

			<?php wp_link_pages(); ?>

			<?php LB_article_info(); ?>		
                         
		</div><!-- post -->

	</div><!-- article -->
                    
	<?php endwhile; endif; ?>
	
	<?php LB_pagination(); ?>	

	<?php comments_template(); ?>

	<?php get_footer(); ?>  

</div><!-- content -->

2.5) footer.php

Die Datei footer.php enthält Informationen zum Copyright und in meinem Fall Buttons für den Newsfeed und meinen YouTube-Channel. Der Footer folgt (unüblicherweise) direkt dem Content und ist nicht am unteren Ende der Seite befestigt (falls ein solches Verhaltne erwünscht ist, empfehle ich die Methode “Footer Stick Alt”).

<?php if ( function_exists('dynamic_sidebar') && ( is_active_sidebar('footer-widget1') || is_active_sidebar('footer-widget2') ) ) { ?>	

	<div id="left-footer-widget">
		<?php dynamic_sidebar('footer-widget1'); ?>
	</div>

	<div id="right-footer-widget">
		<?php dynamic_sidebar('footer-widget2'); ?>
	</div>

	<div class="clear"></div>

<?php } ?>

<div id="footer">
	
	<div id="footer-icons">
		<a href="<?php bloginfo('rss2_url'); ?>" target="blank" title="Newsfeed abonnieren"><img src="<?php echo get_stylesheet_directory_uri()?>/images/rss_button.png" class="footer-icon" /></a>
		<a href="http://www.youtube.com/user/LBHomeprojects" target="blank" title="LB-Projects auf YouTube"><img src="<?php echo get_stylesheet_directory_uri()?>/images/youtube_button.png" class="footer-icon" /></a>
	</div>
	
	<div id="footer-text">
		<span><a href="http://projects.lb-home.de/">Theme Design by LB-Projects</a></span>
		Copyright &copy; Lukas Bommes <?php echo date("Y"); ?><br />
		<a href="http://projects.lb-home.de/impressum/">Impressum</a> | <a href="http://projects.lb-home.de/kontakt/">Kontakt</a> | <a href="http://projects.lb-home.de/wp-admin" target="blank">Administration</a>
	</div>
	<div class="clear"></div>

	<div id="top-page"><a href="#header">Zum Seitenanfang</a></div>
	
</div><!-- footer -->

2.6) sidebar.php

Nach dem Footer kommt die Sidebar (wie gesagt, meine Vorgehensweise ist hier etwas unüblich, normalerweise ist der Footer das letzte Element im Dokument). Umfasst wird die Sidebar duch das Element mit der id ‘sidebar’. In diesem Elemtn sind sogenannte Widgets angeordnet. Beim LB-Projects Theme werden hier zunächst die letzten 10 Artikel in einem Listenelement ausgegeben, woraufhin eine Schlagwort-Wolke mit der Funktion ‘wp_tag_cloud()’ folgt, in der die 45 am höchsten gewichteten Schlagwörter angezeigt werden. Zu guter Letzt kommt das Statistiken-Widget, das zusammen mit dem Plugin “Count Per Day” die Seitenaufrufe anzeigt.

<div id="sidebar">

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) : ?>

	<!-- Recent Posts -->

	<div id="recent-posts">

		<?php 
		$args = array(
    		'numberposts' => 10,
    		'offset' => 0,
    		'category' => 0,
    		'orderby' => 'post_date',
    		'order' => 'DESC',
    		'include' => NULL,
    		'exclude' => NULL,
    		'meta_key' => NULL,
    		'meta_value' => NULL,
    		'post_type' => 'post',
    		'post_status' => 'publish',
    		'suppress_filters' => true ); 

		$last_posts = wp_get_recent_posts($args);
		?> 

		<h2 id="news-title">Neue Artikel</h2>

		<ul>

			<?php foreach($last_posts as $cur_post) { ?>                        

				<a href="<?php echo bloginfo('siteurl')?>/?p=<?php echo $cur_post['ID']?>" title="<?php echo $cur_post['post_title']?>">
				<li>
					<small class="recent-post-date">(<?php echo get_the_time('d. M', $cur_post['ID']); ?>)</small>
					<div class="recentpost-content"><?php echo $cur_post['post_title']?></div>					
				</li>
				</a>

			<?php } ?> 

		</ul>

	</div>


	<!-- Tagcloud -->

	<div id="tagcloud">

		<?php 
		$args = array(
   	 	'smallest' => 8,                
   	 	'largest' => 22,                
    		'unit' => 'pt',                 
    		'number' => 45,                 
    		'format' => 'flat',             
    		'separator' => "\n",            
    		'orderby' => 'name',           
    		'order' => 'ASC',               
    		'exclude' => '',                
   	 	'include' => '',                
   	 	'topic_count_text_callback' => 'default_topic_count_text', 
   	 	'link' => 'view',               
   	 	'taxonomy' => 'post_tag',       
   	 	'echo' => true               
		);
		?> 

	<h2 id="tagcloud-title">Schlagw&ouml;rter</h2>

	<?php wp_tag_cloud($args); ?>

	</div>


	<!-- Statistics -->

	<div id="statistics">

	<h2 id="statistics-title">Statistiken</h2>

	<p>
		Besucher:
		<span>
			<?php
			global $count_per_day;
			if(method_exists($count_per_day,"show")) echo $count_per_day->getReadsAll(true);
			?>
		</span>
	<p>

	</div>

<?php endif; ?>

</div><!-- sidebar -->


<!-- clear -->

<div class="clear"></div>

2.7) search.php / searchform.php

Nun möchte ich noch auf die beiden Datein searchform.php und search.php eingehen. Diese ermöglichen die Suche auf der Webseite und die Anzeige der Suchergebnisse bzw. einer Fehlermeldung sofern keine Suchergebnisse vorhanden sind. Die Datei searchform.php enthält lediglich ein form-Element, das Suchformular und sieht wie folgt aus.

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">		
	<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Suche...' ); ?>" />
	<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( '' ); ?>" />
</form>

Die Datei search.php ist ein Seiten-Template, welches die Anzeige einer statischen Seite ermöglicht. Da wir eine komplette Seite ausgeben, müssen zunächst sämtliche andere Dateien ähnlich wie in der index.php ausgelesen werden. Darauf folgt dann die Anzeige der Suchergebnisse in einer ähnlichen Form wie die Artikel in der Datei content.php ausgelesen werden.

<?php get_header(); ?>

	<div id="main"> 

		<?php get_template_part('navigation'); ?> 

			<div id="content">

				<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('announcements')) {} ?>
				
				<?php if (have_posts()) : ?>
					
					<div id="search-result">
						<p>Ihre Suche nach "<?php echo $s ?>" erzielte <?php echo $wp_query->found_posts; ?> Treffer.</p>
					</div>
			 
				<?php while (have_posts()) : the_post(); ?>
					
				<div class="article">

					<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					 
						<?php LB_article_title(); ?>
						
						<div class="clear"></div>
						
						<div class="entry">

							<?php the_content('weiterlesen'); ?>
						</div>

						<?php LB_article_info(); ?>

					</div><!-- article -->							
						
				</div><!-- article -->
						
				<?php endwhile; ?>
					 
				<?php else : ?>
					
					<div class="article">
                        
						<div class="title">
							<h2>Keine Treffer</h2>
						</div>
							
						<div class="entry">			
                            				<p>Ihre Suche nach "<?php echo $s ?>" erzielte leider keine Treffer. Wiederholen Sie die Suche doch mit einem anderen Stichwort oder durchsuchen Sie das Archiv.</p>
						</div>
							
						<div class="clear"></div>
							
					</div>
			 
				<?php endif; ?>

			<?php LB_pagination(); ?>
	 
			<?php get_footer(); ?> 
                    
			</div><!-- content --> 

			<?php get_sidebar(); ?>            
                
		</div><!-- main -->

	</div><!-- wrapper -->

      <?php wp_footer(); ?>

    </body>
</html>

2.8) comments.php

Die Datei comments.php ist auf den ersten Blick verhältnismäßig komplex, aber klar strukturiert. Zuerst kommen die Formular-Elemente , in die Name, Email, Webseite und der Kommentar eingetragen werden. Anschließend folgt die Ausgabe der Kommentare, ähnlich wie die Ausgabe der Artikel-Inhalte in der content.php. Außerdem enthält die Datei comments.php einige zusätzliche Funktionen, z.B. wird überprüft, ob ein User angemeldet ist oder nicht. Ist dies der Fall, werden die Formulare nicht angezeigt, sodass nur der Kommentar eingetragen werden muss.

<?php if ( comments_open() ) : ?>

	<div id="kommentar-formular">
 
	<h2 id="respond">Kommentar schreiben</h2>
 
	<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

    <?php if ( is_user_logged_in() ) : ?> 

	<p>
	    Angemeldet als <a href="<?php get_option('siteurl'); ?>/wp-admin/profile.php">
	    <?php global $current_user; get_currentuserinfo(); echo $current_user->user_login; ?></a>.
	    <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Abmelden?</a>
	</p> 

    <?php else : ?> 

	<p>
    	    <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
   	    <label for="author">Name</label>
	</p>
 
	<p>
  	    <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
  	    <label for="email">Email <small>(wird nicht ver&ouml;ffentlicht)</small></label>
	</p>
 
	<p>
  	    <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
  	    <label for="url">Webseite</label>
	</p>
 
    <?php endif; ?>

	<p>
  	    Kommentar
  	    <textarea name="comment" id="comment" rows="10" tabindex="4"></textarea>
	</p>
 
	<p>
   	    <input name="submit" type="submit" id="submit" tabindex="5" value="Kommentar absenden" />
   	    <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
	</p>
 
 	    <?php do_action('comment_form', $post->ID); ?>
 
	</form>
 
	</div> <!-- kommentar-formular -->


<!-- Anzeige der Kommentare bzw. Ausgabe einer Meldung bei 0 Kommentaren -->
 
<div id="kommentare">

	<?php if (get_comments_number() == '0') : ?>

		<p class="null-comments">Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.</p>

	<?php endif; ?>

	<?php if (get_comments_number() == '1') : ?>

   		<h3 id="comment-count">1 Antwort zu "<?php the_title(); ?>"</h3> 

	<?php endif; ?>

	<?php if (get_comments_number() > '1') : ?>

   		<h3 id="comment-count"><?php echo get_comments_number(); ?> Antworten zu "<?php the_title(); ?>"</h3> 

	<?php endif; ?>
	
	<?php wp_list_comments(array('type' => 'comment', 'callback' => 'LB_comments')); ?>

	<?php wp_list_comments(array('type' => 'pingback', 'callback' => 'LB_comments')); ?>

</div><!-- kommentare -->

<?php LB_comment_pagination(); ?> 

<?php else : ?> 

	<div id="nocomments">
		<?php echo 'Die Kommentarfunktion ist deaktiviert.' ?>
	</div>

<?php endif; ?>

2.9) functions.php

In der functions.php befinden sich ausgelagerte Funktionen, die in verschiedenen Templates des Themes verwendet werden. Darunter zum Beispiel Funktionen für die Anzeige von Artikel-Informationen wie Autor, Erstellungsdatum und Schlagwörter, aber auch für die Anzeige der Kommentare oder Seitennavigation.

<?php

//Fallback für die Breite des Contents
if ( ! isset( $content_width ) ) $content_width = 698;


//Unterstützung für spezielle Theme-Funktionen hinzufügen
add_theme_support('automatic-feed-links');
add_theme_support('post-thumbnails');


//Sidebar registrieren und widget-fähig machen
if (function_exists('register_sidebar')) {
	register_sidebar(array('name' => 'Sidebar', 'id' => 'sidebar'));
	register_sidebar(array('name' => 'Announcements', 'id' => 'announcements', 'before_widget' => '<div class="announcement-widget">', 'after_widget' => '</div>', 'before_title' => '<span>', 'after_title' => '</span>'));
	register_sidebar(array('name' => 'Footer 1', 'id' => 'footer-widget1', 'before_widget' => '<div class="footer-widget1">', 'after_widget' => '</div>'));
	register_sidebar(array('name' => 'Footer 2', 'id' => 'footer-widget2', 'before_widget' => '<div class="footer-widget2">', 'after_widget' => '</div>'));
}


//zeigt Artikel-Informationen an
function LB_article_info() {
?>
<div class="info">
<?php
	$arc_year = get_the_time('Y'); 
	$arc_month = get_the_time('m'); 
	$arc_day = get_the_time('d');
?>
	<span><a href="<?php echo get_day_link($arc_year, $arc_month, $arc_day); ?>">
	<?php echo get_the_date('d. F Y'); ?></a>
	<?php if( get_post_type() != 'page' ) { ?><strong> | </strong><?php the_category(', '); } ?></span>
	<?php if(current_user_can('edit_posts')) echo '<strong> | </strong><a href="'.get_edit_post_link().'">Bearbeiten</a>'; ?>
	
	<div class="article-tags"><?php the_tags('<span>Tags:</span> '); ?></div>
</div>
<?php
}


//zeigt Artikel-Titel an
function LB_article_title() {
?>
<div class="title">
	<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a> 
	<span class="article-data">
		<span class="author"><a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID' )); ?>"><?php the_author_meta('display_name'); ?></a></span>
		<span class="article-comments">
		<?php if ( comments_open() ) { echo get_comments_number(); } else { echo "off"; } ?></span>
	</span>
</div>
<?php
}


//Seiten aus der Suche ausschließen
add_filter(
 'posts_where',
 create_function(
  '$where',
  'return (!empty($GLOBALS["wp_query"]->query_vars["s"]) ? "AND " .$GLOBALS["wpdb"]->posts. ".post_type != \'page\'" : "") . $where;'
  )
);


//zeigt Seitennavigation an
function LB_pagination() { ?>
<div class="pagination">
	<?php global $wp_query;
	if($wp_query->max_num_pages > 1) { ?>
<div class="page-count">
	<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; ?>
	<?php echo 'Page ' . $paged . ' of ' . $wp_query->max_num_pages; ?>
</div>
	<?php }
	$big = 999999999; // need an unlikely integer
	echo paginate_links( array(
		'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => '?paged=%#%',
		'current' => max( 1, get_query_var('paged') ),
		'total' => $wp_query->max_num_pages, 
		'prev_text' => '<',
    		'next_text' => '>',
		'end_size' => 2,
		'mid_size' => 1
	)); ?>
</div>
<?php }


//zeigt Kommentarnavigation an
function LB_comment_pagination() { ?>
<div class="pagination">
<?php global $wp_query;
echo paginate_comments_links( array(
	'prev_text' => '<',
    	'next_text' => '>',
	'end_size' => 2,
	'mid_size' => 1
)); ?>
</div>
<?php }


//benutzerdefinierte Kommentare anzeigen
function LB_comments($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>

   <?php if (get_comment_type() == "comment") : ?>

   <li <?php comment_class(); ?> id="div-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">

	<?php if(get_comment_author_url()) : ?>
  		<a href="<?php echo get_comment_author_url() ?>" rel="external nofollow" target="blank">
  		<?php echo get_avatar( $comment, 48 ); ?>
  		</a>
	<?php else : 
  		echo get_avatar( $comment, 48 ); 
	endif;?>

    	<small class="commentmetadata">
		<span><a href="<?php echo get_comment_author_url(); ?>" target="blank"><?php comment_author(); ?></a></span> 
		<strong>|</strong> am <?php comment_date('j. F Y') ?> um <?php comment_time('H:i') ?> Uhr  
		<?php if ( current_user_can('edit_post', $comment->comment_post_ID) ) {
		$url = esc_url(wp_nonce_url( "/wp-admin/comment.php?action=deletecomment&p=$comment->comment_post_ID&c=$comment->comment_ID", "delete-comment_$comment->comment_ID" ));
		echo "<strong>|</strong> <a href='$url' class='delete:the-comment-list:comment-$comment->comment_ID delete'>" . 'L&ouml;schen' . "</a> <strong>|</strong> "; } ?>		
		<?php edit_comment_link('Bearbeiten'); ?>  
  	</small>

      	<?php if ($comment->comment_approved == '0') : ?>

 		<p id="comment-warning">Ihr Kommentar wird erst nach einer administrativen &Uuml;berpr&uuml;fung freigegeben.</p>

    	<?php endif; ?>

      <?php comment_text() ?>

     </div>

<?php endif; ?>

   <?php if (get_comment_type() != "comment") : ?>

	<div class="pingback">

	<small class="commentmetadata">
		<span>Trackback von: </span>
		<span><?php comment_author(); ?></span>  
		<?php if ( current_user_can('edit_post', $comment->comment_post_ID) ) {
		$url = esc_url(wp_nonce_url( "/wp-admin/comment.php?action=deletecomment&p=$comment->comment_post_ID&c=$comment->comment_ID", "delete-comment_$comment->comment_ID" ));
		echo "<strong>|</strong> <a href='$url' class='delete:the-comment-list:comment-$comment->comment_ID delete'>" . 'L&ouml;schen' . "</a> <strong>|</strong> "; } ?>		
		<?php edit_comment_link('Bearbeiten'); ?>  
   	 </small>
 
	<a href="<?php echo get_comment_author_url(); ?>" target="blank"><?php comment_text(); ?></a>

	</div>

<?php endif;

} ?>

2.10) style.css

Im Stylesheet werden den Elementen, die im HTML-Dokument erstellt wurden, via CSS sogenannte Attribute zugeordnet. Dadurch lassen sich Position, Ausshehen und Verhalten von Elementen anpassen, sodass sich schließlich das Gesamtdesign ergibt. Auf eine nähere Erläuterung des Stylesheets möchte ich an dieser Stelle verzichten, da es zu CSS im Internet unzählige gute Tutorials gibt, in denen die Funktion der einzelnen Attribute genau erklärt werden.
Einzig die Bedeutung des ersten Kommentars sei hier kurz erläutert. Durch diesen Kommentar registrieren wir das Theme in WordPress. Erst durch diesen HEader wird es möglich, das Theme im Backend von WordPress zu akivieren und dort Informationen über das Theme zu erhalten. Ohne diesen Komentar wird das Theme nicht funktionieren!

/*
Theme Name: LB-Projects
Theme URI: http://projects.lb-home.de
Description: Das ultimative und professionelle LB-Projects Theme vereint ein H&ouml;chstma&szlig; an Funktionalit&auml;t mit schlichtem und aussagekr&auml;ftigem Design.     
Author: Lukas Bommes
Author URI: http://projects.lb-home.de/der-autor/
Tags: black, white, two-columns, right-sidebar, fixed-width
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* Container */

hmtl, body {
	min-height: 100%;    
	padding: 0;
	margin: 0;    
	background: #efefef url('images/background.png') repeat-x;
	font-size: 12px;
	font-family: Verdana,Arial,sans-serif;
	text-rendering: optimizelegibility;
	overflow-y: scroll;
}

img {
	border: none;
}

input,
textarea {
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
	padding: 2px;
	outline: none; 
}


/* Containers */

#header {
	height: 41px;
}

#search {
	width: 260px;
	padding-top: 30px;
	float: right;
}
 
#wrapper {    
	position: relative;
	min-height: 100%;
	width: 1000px;
	background: none;
	margin: 0 auto;
	padding: 0 15px 0 110px;
}

#main {
	min-height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

#content {    
	padding-top: 40px;  
	width: 720px;
	min-height: 100%;
	font-size: 12px;
	float: left;
}

#sidebar {  
	padding: 40px 0 50px 0;   
	width: 260px; 
	position: absolute;
	right: 15px;    
}

#footer-icons {    
	float: left;
	margin-right: 10px;
	height: 32px;    
}

#footer-text {
	margin-bottom: 25px;
	padding: 4px 0;
	float: none;
	height: 32px;
	line-height: 12px;
	font-size: 11px;    
}

#footer-text span a,
#footer-text span a:active,
#footer-text span a:visited { 
	color: #888;  
	float: right; 
	font-size: 9px; 
	padding-right: 10px;
	margin-top: -10px;
}

#footer-text span a:hover {
	text-decoration: none;
	color: #666;  
}

.footer-icon {
	margin-right: 5px;
}

#footer {
	clear: both; 
	border-top: 1px solid #ccc;   
	margin-top: 30px;
	padding: 10px 0 30px 0;    
}


/* Article */

.entry p img { 
	max-width: 650px;
	height: auto;
}

.article {    
	padding: 10px;
 	border: 1px solid #ddd;
	background-color: #fff;    
	margin-bottom: 15px;  
	text-align: justify;
	line-height: 150%; 
}

.article .title h2 {
	display: inline-block;
	margin-bottom: 0;
	padding-bottom: 6px;
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap; 
	max-width: 550px;
}

.article .title {
	width: 100%;
	border-bottom: 1px solid #ddd;
}

.article .title a,
.article .title a:active,
.article .title a:visited {    
	display: inline-block;
	color: #000;
	transition: color .1s linear;
	-moz-transition: color .1s linear;
	-webkit-transition: color .1s linear; 
	-o-transition: color .1s linear;    
}

.article .title a:hover {    
	text-decoration: none;
	color: #777;    
}

.article .author {
	margin-right: 5px;
}

.article .author a,
.article .author a:active,
.article .author a:visited {
	color: #888;
}

.article .author a:hover {
	text-decoration: none;
	color: #666;
}

.article .info {
	clear: both;
	padding-top: 5px;
	font-size: 0.8em;
	color: #aaa;    
}

.article .article-data {
	float: right;
	padding-top: 2px;
}

.article .article-comments {
	padding: 2px 5px 2px 5px;
	background-color: #888;
	color: #fff;
}

.article .article-tags {
	float: right;
	color: #aaa;
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap; 
	max-width: 380px;
}

.article .article-tags span {
	font-weight: bold; 
}

.article .info span a,
.article .info span a:active,
.article .info span a:visited,
.article .article-tags a,
.article .article-tags a:active,
.article .article-tags a:visited {
	color: #aaa; 
}

.article .info span a:hover,
.article .article-tags a:hover {
	text-decoration: none;
	color: #888;
}

.sticky {
	border-left: 5px solid #ffb33c; 
	padding-left: 15px;
}


/* Navigation */

div#navigation span {
	text-align: center;
	font-size: 12px;
	background-color: #3f3f3f; 
	overflow: hidden;
	float: left;
	width: 720px;
	height: 0px;
	transition: height 1s;
	-moz-transition: height 1s;
	-webkit-transition: height 1s; 
	-o-transition: height 1s;
}

div#open-nav:hover div#navigation span{
	/*height: 171px;*/
	height: 156px;
}

div#open-nav {
	width: 90px;
	height: 35px;
	background-color: #ffb33c;
	transition: background-color .15s linear;
	-moz-transition: background-color .15s linear;
	-webkit-transition: background-color .15s linear; 
	-o-transition: background-color .15s linear; 	
	border-radius: 2px 2px 0 0;
	-moz-border-radius: 2px 2px 0 0;
	-webkit-border-radius: 2px 2px 0 0;
	-o-border-radius: 2px 2px 0 0;
}

div#open-nav:hover {
	background-color: #c1872d;
}

div#navbar-content {
	margin: 0 auto;
	display: inline-block;
}

ul.toplevel {
	padding: 0;
	list-style: none;
	text-align: left;
}

ul.submenu {
	padding: 10px 0 10px 0;
	list-style: none;
	width: 120px;
}

ul.toplevel  li {
	padding: 0 5px 0 5px;
	float: left;
	font-weight: bold;
}

ul.submenu  li {
	padding: 3px 0 0 0;
	float: none; 
	font-weight: normal;
	border-bottom: 1px solid #777; 
}

ul.toplevel  li a, 
ul.toplevel  li a:active, 
ul.toplevel  li a:visited {
	text-decoration: none;
	color: #fff;
	padding-right: 10px;
}

ul.toplevel  li a:hover {
	color: #ffb33c;
}

ul.submenu  li  a, 
ul.submenu  li  a:active, 
ul.submenu  li  a:visited {
	text-decoration: none;
	color: #fff;
	padding: 0;
}

ul.submenu  li  a:hover {
	color: #ffb33c;
}

img#menu-arrow {
	padding: 10px;
	float: right;
}


/* Pagination */

.pagination {
	margin-bottom: 15px;
}

.page-count {
	display: inline;
	padding: 3px 7px 3px 7px;
	border: 1px solid #ddd;
	color: #666;
	background-color: #fff;	
}

a.page-numbers,
a.page-numbers:active,
a.page-numbers:visited {
	padding: 3px 7px 3px 7px;
	border: 1px solid #ddd;
	color: #666;
	background-color: #fff;
	transition: background-color .1s linear;
	-moz-transition: background-color .1s linear;
	-webkit-transition: background-color .1s linear; 
	-o-transition: background-color .1s linear; 	
}

a.page-numbers:hover {
	text-decoration: none; 
	background-color: #ddd;
}

span.page-numbers.current {
	padding: 3px 7px 3px 7px;
	border: 1px solid #ddd;
	background-color: #444;
	color: #fff;
}


/* Misc */

.clear {
	clear: both;
	height: 0px;
	overflow: hidden;
}

img#logo { 
	position: relative;    
	top: 86px;
	left: 10px;   
	float: left; 
	z-index: 1;   
}

a.more-link, 
a.more-link:active, 
a.more-link:visited {
	display: inline-block;
	margin-top: 5px;
	padding: 5px 10px 5px 10px;
	color: #777;
	background-color: #eee;
	border: 1px solid #aaa;
	transition: background-color .1s linear, border-color .1s linear, color .1s linear;
	-moz-transition: background-color .1s linear, border-color .1s linear, color .1s linear;
	-webkit-transition: background-color .1s linear, border-color .1s linear, color .1s linear; 
	-o-transition: background-color .1s linear, border-color .1s linear, color .1s linear; 
}

a.more-link:hover {
	text-decoration: none;
	color: #fff;
	background-color: #888;
	border: 1px solid #444; 
}

#top-page {
	text-align: center;
}

#top-page a,
#top-page a:active,
#top-page a:visited {
	color: #888;
}

#top-page a:hover {
	text-decoration: none;
	color: #666;
}


/* 404 Fehler */

img#img404 {
	display: block;
	margin: 25px auto;
}

div#admin404-text {
	font-style: italic;
}


/* Text-Styles */

pre {
	text-align: center;
}

/* Headers */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}


/* Links */

a, 
a:active, 
a:visited {
	color: #188aeb;
	text-decoration: none;
	outline: none;
}

a:hover {
	text-decoration: underline;
}


/* Searchform */

form#searchform {    
	background-color: #ffffff;
	border: 1px solid #ddd;
	width: 258px;
	height: 28px;    
}

input#s {
	background: none;
	border: none;
	font-size: 14px;
	height: 22px;
	padding: 3px;
	width: 220px;
	position: relative;	
}

input#searchsubmit {
	border: none;
	height: 28px;
	width: 28px;
	margin: 0 auto;
	position: relative; 
	float: right;	
	background: #ffffff url(images/search.png) no-repeat;
	transition: background-color .15s linear;
	-moz-transition: background-color .15s linear;
	-webkit-transition: background-color .15s linear; 
	-o-transition: background-color .15s linear;
}

input#searchsubmit:hover {
	background: #8c8c8c url(images/search.png) no-repeat;	
}

#search-result {
	padding-left: 10px;
	border: 1px solid #ddd;
	background-color: #fff;    
	margin-bottom: 15px;
}


/* Featured Blocks */

#featured {
	width: 100%;
	height: 202px;
	margin: 30px 0 15px 0;
}

.featured-box-1,
.featured-box-2 {
 	border: 1px solid #ddd;
	background-color: #fff;
	width: 230px;
	height: 200px;
	overflow: hidden;
	position: relative;
	float: left;
	margin-right: 12px;
}

.featured-box-3 {
	border: 1px solid #ddd;
	background-color: #fff;
	width: 230px;
	height: 200px;
	overflow: hidden;
	position: relative;
	float: left;
}

.featured-box-1 img {
	position: absolute;
	top: 70px;
	left: -15px;
}

.featured-box-2 img {
	position: absolute;
	top: 47px;
	left: -15px;
}

.featured-box-3 img {
	position: absolute;
	top: 53px;
	left: -10px;
}

#featured p {
	margin: 10px;
	color: #000;
	font-weight: bold;
	font-size: 16px;
}

.featured-box-1:hover,
.featured-box-2:hover,
.featured-box-3:hover {
	border-color: #aaa;
	text-decoration: underline;
	color: #000;
	box-shadow: 2px 2px 5px #ccc;
	-moz-box-shadow: 2px 2px 5px #ccc;
	-webkit-box-shadow: 2px 2px 5px #ccc;
	-o-box-shadow: 2px 2px 5px #ccc;
}


/* Widgets: Sidebar */

li.widget {
	padding: 10px;
	margin-bottom: 15px;
	list-style-type: none;
	border: 1px solid #ddd;
	background-color: #fff;
}

li.widget:last-child {
	margin-bottom: 0;
}

h2.widgettitle {
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

.widget ul {
	padding-left: 15px;
}

.widget ul li a,
.widget ul li a:active,
.widget ul li a:visited {
	color: #000;
}


/* Widgets: Announcements */

.announcement-widget {
	padding: 10px;
	margin-bottom: 15px;
	list-style-type: none;
	border: 1px solid #ddd;
	background-color: #ff8;
}

.announcement-widget span {
	font-weight: bold;
}

.announcement-widget .textwidget {
	display: inline;
	font-style: italic;
}


/* Widgets: Footer */

#left-footer-widget {
	width: 354px;
	float: left;
}

#right-footer-widget {
	width: 354px;
	float: right;
}

.footer-widget1,
.footer-widget2 {
	padding: 10px;
	margin-top: 15px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.footer-widget1 ul ,
.footer-widget2 ul{
	padding-left: 15px;
	line-height: 150%;
}

.footer-widget1 ul li a,
.footer-widget1 ul li a:active,
.footer-widget1 ul li a:visited,
.footer-widget2 ul li a,
.footer-widget2 ul li a:active,
.footer-widget2 ul li a:visited  {
	color: #000;
}


/* Sidebar: Recent posts */

#recent-posts {    
	padding: 10px;
	border: 1px solid #ddd;
	background-color: #fff;
}

h2#news-title {
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

.recent-post-date {
	float: right;
}

div#recent-posts ul{
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 25px;	
}

div#recent-posts ul li {
	margin-top: 5px;
	padding: 0 10px 0 10px;
	border: 1px solid #ddd;	
	transition: background-color .15s linear, border-color .15s linear;
	-moz-transition: background-color .15s linear, border-color .15s linear;
	-webkit-transition: background-color .15s linear, border-color .15s linear; 
	-o-transition: background-color .15s linear, border-color .15s linear;
}

div#recent-posts ul li:hover {
	border-color: #aaa;
	background-color: #ccc;
}

div#recent-posts ul a,
div#recent-posts ul a:active,
div#recent-posts ul a:visited {
	color: #000;
}

div#recent-posts ul a:hover {
	text-decoration: none;
}

.recentpost-content {
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap; 
	width: 155px;
}


/* Sidebar: Statistics */

#statistics {    
	margin-top: 15px;         
	padding: 10px 10px 0 10px;
	border: 1px solid #ddd;
	background-color: #fff;
}

h2#statistics-title {
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

#statistics p span {
	float: right;
}


/* Sidebar: Tagcloud */

#tagcloud {    
	margin-top: 15px;         
	padding: 10px;
	border: 1px solid #ddd;
	background-color: #fff;
	line-height: 22px;
}

h2#tagcloud-title {
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

#tagcloud a, 
#tagcloud a:active, 
#tagcloud a:visited {    
	color: #888;
}

#tagcloud a:hover {
	text-decoration: none;
	color: #ffb33c;
}


/* Comments-Style: Formular */

div#kommentar-formular {    
	padding: 10px;
	border: 1px solid #ddd;
	background-color: #fff;    
	margin: 60px 0 15px 0; 
}

h2#respond {   
	padding: 0 0 5px 0;
	border-bottom: 1px solid #ddd;
}

input#author, 
input#email, 
input#url {
	border: 1px solid #aaa;
	width: 220px;   
}

input#author:focus, 
input#email:focus, 
input#url:focus {
	border-color: #555;
}

textarea#comment {
	border: 1px solid #aaa;
	resize: vertical;
	width: 692px;
	min-height: 190px;
}

textarea#comment:focus {
	border-color: #555;
}

input#submit {
	cursor: pointer;
	border: 1px solid #aaa;
	height: 30px;
	width: 180px;
	padding-bottom: 4px;
	background-color: #eee;
	transition: background-color .15s linear;
	-moz-transition: background-color .15s linear;
	-webkit-transition: background-color .15s linear; 
	-o-transition: background-color .15s linear;
}

input#submit:hover {
	background-color: #ccc;
}

#commentform p {
	margin-bottom: 0;
}


/* Comments-Style: Ausgabe */

div#kommentare {
	padding: 10px;
	border: 1px solid #ddd;
	background-color: #fff;    
	margin-bottom: 15px; 
}

.comment {
	list-style-type: none; 
	border: 1px solid #ddd;
	padding: 5px 10px 10px 10px;
	margin-top: 15px;
	min-height: 53px; 
	transition: border-color .15s linear;
	-moz-transition: border-color .15s linear;
	-webkit-transition: border-color .15s linear; 
	-o-transition: border-color .15s linear;
}

.pingback,
.trackback {
	list-style-type: none; 
	border: 1px solid #ddd;
	padding: 5px 10px 10px 10px;
	margin-top: 15px;
	transition: border-color .15s linear;
	-moz-transition: border-color .15s linear;
	-webkit-transition: border-color .15s linear; 
	-o-transition: border-color .15s linear; 
}

ul.children {
	margin: 0;
	padding: 0;
}

.comment:hover,
.pingback:hover,
.trackback:hover {
	border-color: #aaa;
}

.comment p {    
	margin: 5px 0 0 0;
	padding-left: 58px;
	line-height: 150%;
}

.pingback a p,
.trackback a p {    
	margin: 5px 0 0 0; 
	font-style: italic;
	color: #000;
}

.pingback a p:hover,
.trackback a p:hover { 
	text-decoration: underline;
}

p.null-comments {
	margin: 0;
}

div#nocomments {
	padding: 10px;
	border: 1px solid #ddd;
	background-color: #fff;  
	margin-bottom: 15px;  	
}

p#comment-warning { 
	margin-left: 58px;
	padding: 2px 5px 2px 5px; 
	border: 1px solid #ff0;
	background-color: #ffffb4;
}

.commentmetadata {
	color: #888;
}

.commentmetadata span a,
.commentmetadata span a:active,
.commentmetadata span a:visited {
	color: #888;
}

.commentmetadata span a:hover {
	text-decoration: none;
	color: #444;
}

h3#comment-count {
	margin-bottom: 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

img.avatar {
	float: left;
	margin: 5px 10px 0 0;
}

.bypostauthor {

}


/* Alignments */

.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 15px;
	margin-top: 4px;
}

.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 15px;
	margin-top: 4px;
}

.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft,
.alignright,
.aligncenter,
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 6px;
}

img.alignnone,
.alignnone {
	display: inline;
	float: left;
	margin-right: 15px;
	margin-top: 4px;
	margin-bottom: 12px;
}


/* Captions */

.wp-caption {
	background: #f1f1f1;
	color: #888;
	text-align: center;
	margin-top: 10px;
	padding: 5px;
}

.wp-caption img {
	margin: 5px;
}

.wp-caption p.wp-caption-text {
	margin: 0 0 4px;
}

.gallery-caption {
	color: #888;
	text-align: center;
}


/** Templates **/

/* Archive */

#archive-list {
	padding-left: 15px;
}

#archive-list a,
#archive-list a:active,
#archive-list a:visited {
	color: #000;
}

#archive-list ul {
	list-style-image: url(images/weblink.png);
	margin: 0 0 10px 0;
} 


/* Book-Page */ 

#book-wrapper {
	padding-left: 15px;
}

#book-wrapper a.
#book-wrapper a:active,
#book-wrapper a:visited {
	color: #000;
}

#book-wrapper li.last {
	padding-top: 10px;
}

#book-wrapper ul li a,
#book-wrapper ul li a:active,
#book-wrapper ul li a:visited {
	color: #000;
}

#book-files ul,
#book-projectfolder ul {
	list-style-image: url(images/folder.png);
	margin: 0 0 25px 0;
}

#book-weblinks ul {
	list-style-image: url(images/weblink.png);
	margin: 0 0 10px 0;
}


/* Sitemap */

#sitemap-wrapper {
	padding-left: 15px;
}

#sitemap-wrapper a,
#sitemap-wrapper a:active,
#sitemap-wrapper a:visited {
	color: #000;
}

#sitemap-wrapper ul {
	list-style-image: url(images/weblink.png);
	margin: 0 0 25px 0;
}

#sitemap-wrapper ul.last {
	list-style-image: url(images/weblink.png);
	margin: 0 0 10px 0;
}


/* Weblinks */

#links-wrapper {
	padding-left: 15px;
}

#links-wrapper a,
#links-wrapper a:active,
#links-wrapper a:visited {
	color: #000;
}

#links-wissen ul,
#links-youtube ul {
	list-style-image: url(images/weblink.png);
	margin: 0 0 25px 0;
}

#links-projektseiten ul {
	list-style-image: url(images/weblink.png);
	margin: 0 0 10px 0;
}


/* Guestbook */

#gb-formular {
	padding: 10px;
	border: 1px solid #ddd;
	background-color: #fff;    
	margin-bottom: 15px;
}

.gb-entry {    
	border: 1px solid #ddd;
	padding: 5px 10px 10px 10px;
	margin-top: 15px; 
	background-color: #fff;
	transition: border-color .15s linear;
	-moz-transition: border-color .15s linear;
	-webkit-transition: border-color .15s linear; 
	-o-transition: border-color .15s linear;
}

.gb-entry:hover {
	border-color: #aaa;
}

.gb-entry p {    
	margin: 5px 0 0 0;
	line-height: 150%;
}

Zum Schluss möchte ich noch anmerken, dass in diesem Artikel nur die Grundfunktionen des LB-Projects Themes erläutert wurden. Auf die Beschreibung spezieller Funktionen, wie z.B. der Slideshow, Template-Dateien, etc. habe ich verzichtet.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

6 Kommentare zu "LB-Projects Theme Dokumentation"

  • [...] Soeben habe ich eine Dokumentation über das neue Theme geschrieben, in der die Funktionen des Themes anhand des Quellcodes erklärt [...]

  • [...] Hier kann Version 1.3 des LB-Projects Themes heruntergeladen werden. 29. Mai 2012 | Software und Programmierung [...]

  • [...] LB-Projects Theme Download 06. Juni 2012 | Software und Programmierung Tags: Theme, WordPress [...]

  • [...] den letzten Tagen habe ich mein WordPress-Theme, das hier heruntergeladen werden kann, um einige Funktionen erweitert. Diese betreffen hauptsächlich neue [...]

  • [...] dieses Feature sehr einfach durch unten stehende Funktion, die in dieser Form auch im aktuellen LB-Projects Theme zum Einsatz kommt. Um die Funktion in Ihr aktuelles WordPress-Theme zu implementieren, fügen Sie [...]

  • [...] der kommenden Version 2.9 wird das LB-Projects Theme Optionen für die Einstellung der Hintergrundfarben von Header und Footer bieten. Farbige Akzente [...]