WordPress - Themes
Inhaltsverzeichnis
Grundgerüst
style.css:
/* Theme Name: Twenty Fifteen Theme URI: https://wordpress.org/themes/twentyfifteen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer. Version: 1.9 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready Text Domain: twentyfifteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
index.php:
<?php the_post(); the_title();
Template Tags
Conditional Tags
Schlagwörter
Schlagwörter aktivieren
Dieser Code wird in die functions.php des Themes eingefügt (wp-content/themes/<themename>/functions.php).[1]
// add tag support to pages
function tags_support_all() {
register_taxonomy_for_object_type('post_tag', 'page');
}
// ensure all tags are included in queries
function tags_support_query($wp_query) {
if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');
}
// tag hooks
add_action('init', 'tags_support_all');
add_action('pre_get_posts', 'tags_support_query');
Kommentare
-> You will need to define your custom callback function in your theme's functions.php file.
Hier kann man folgende Vorlage entnehmen:
function mytheme_comment($comment, $args, $depth) {
if ( 'div' === $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}?>
<<?php echo $tag; comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>"><?php
if ( 'div' != $args['style'] ) { ?>
<div id="div-comment-<?php comment_ID() ?>" class="comment-body"><?php
} ?>
<div class="comment-author vcard"><?php
if ( $args['avatar_size'] != 0 ) {
echo get_avatar( $comment, $args['avatar_size'] );
}
printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>' ), get_comment_author_link() ); ?>
</div><?php
if ( $comment->comment_approved == '0' ) { ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em><br/><?php
} ?>
<div class="comment-meta commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"><?php
/* translators: 1: date, 2: time */
printf(
__('%1$s at %2$s'),
get_comment_date(),
get_comment_time()
); ?>
</a><?php
edit_comment_link( __( '(Edit)' ), ' ', '' ); ?>
</div>
<?php comment_text(); ?>
<div class="reply"><?php
comment_reply_link(
array_merge(
$args,
array(
'add_below' => $add_below,
'depth' => $depth,
'max_depth' => $args['max_depth']
)
)
); ?>
</div><?php
if ( 'div' != $args['style'] ) : ?>
</div><?php
endif;
}
Child Themes
Es muss im folgende Verzeichnisse angelegt werden:
- Im Ordner themesas Child-Theme-Verzeichnis (meintheme-child), darin die Dateien
- style.css und
- functions.php
Hier der Dateikopf für style.css: Wichtig ist der Eintrag Template. Beispiel: twentyfifteen-child:
/*
Theme Name: Twenty Fifteen Child
Description: Twenty Fifteen Child Theme
Author: Heinrich Flink
Template: twentyfifteen
Version: 1.0.0
*/
@import url("../twentyfifteen/style.css");
Hier das Grundgerüst für functions.php: Wichtig ist der Eintrag $parent_style = 'twentyfifteen-style';. Beispiel für twentyfifteen-child:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
Dies ist ein Beispiel für ein manuell erstelltes Fußzeilen-Menü. Idealerweise wird es in einem Child-Theme realisiert. Wenn man kein Child anlegen kann (weil das zugrunde liegende Theme schon ein Child ist), muss man die Eintragungen in die Dateien des "Basis"-Themes vornehmen. Nach einem Update des Themes müssen diese dann von Neuem manuell vorgenommen werden.
- style.css: Dieser Eintrag wird am Ende des Dokuments hinzugefügt.
.myfooter{
text-align: center;
margin-left: 40px;
padding:20px 0
}
.myfooter a{
color: #5858FA;
}
- footer.php: Dieser Eintrag muss am Beginn der Codierung stehen.
<footer><div class="myfooter"><a href="http://example.com/ueber-mich/">Über mich</a> <a href="http://example.com/impressum/">Impressum & Datenschutz</a> <a href="http://example.com/kontakt/">Kontakt</a></div></footer>
Bilder
Thumbnail: 880x660 Pixel
Troubleshooting
System Status
- PHP Time Limit
zu niedrig eingestellt.
>> In wp-config.php über der Zeile mit "Happy blogging" z. B. folgende Zeile einfügen:
set_time_limit(180);
- PHP Max Input Vars
zu niedrig.
>> Im Document root eine Datei .user.ini anlegen. Hier z. B. folgenden Eintrag hinterlegen:
max_input_vars = 5000; [3]
Notizen
Mindestens notwendig:
index.php
style.css: wichtig Theme Name:
single.php: > einzelne Beiträge
Beispiel für die Erstellung eines Themes
Download der Vorlage von http://www.initializr.com/
index.html aufteilen auf
- header.php
- index.php
- sidebar.php
- footer.php
<?php echo get_stylesheet_directory_uri(); ?>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js"></script>
<title> <?php bloginfo('name'); ?> </title>
<h1 class="title"> <?php bloginfo('name'); ?></h1>
Website-Namen als Link für die Startseite einrichten:
<h1 class="title">
<a href="<?php bloginfo('url'); ?>"</<> <?php bloginfo('name'); ?>
</h1>
do_action
the_excerpt
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );
Links
Links und Quellen
|