Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Software & Infrastruktur

WordPress auf dem Seziertisch: Welche Funktionen du kennen musst, um ein eigenes WordPress-Theme zu erstellen

WordPress-Theme Funktionen. (Screenshot: Brackets)

Für WordPress – das beliebteste CMS weltweit – gibt es tausende Themes. Wenn ihr aber etwas Individuelles haben und selbst ein WordPress-Theme erstellen wollt, müsst ihr euch mit den WordPress-Funktionen für Themes auseinandersetzen. Wir tun das in diesem Artikel für euch – am Beispiel von „Twenty Fourteen“.

Ein WordPress-Theme erstellen: HTML, CSS und ein bisschen PHP

Keine Frage: Es gibt für fast jeden Anwendungsfall ein eigenes WordPress-Theme erstellen zu wollen. Und das ist gar nicht so schwer, wenn ihr HTML, CSS und ein bisschen PHP beherrscht.

Das einzige Hindernis sind dann noch die WordPress-Funktionen – und die schauen wir uns jetzt mal an.

Neu bei WordPress 3.8 dabei: Twenty Fourteen

Die Theme-Funktionen von WordPress ändern sich immer mal wieder geringfügig. Einige kommen hinzu, andere sollen nicht mehr genutzt werden. Überhaupt liegt es nahe, sich die Funktionen anhand eines aktuellen Themes anzuschauen. Die Wahl fällt auf Twenty Fourteen, das neueste Theme der WordPress-Entwickler. Auf die Funktionen, die Twenty-Fourteen-spezifisch sind, werde ich hier ebenfalls eingehen – ihr erkennt sie immer an dem Präfix twentyfourteen_. Wenn ihr noch weitere Informationen zu bestimmten Funktionen haben wollt, werdet ihr höchstwahrscheinlich in der Funktions-Referenz von WordPress.org fündig.

Schauen wir uns zuerst mal die Dateistruktur des Themes an. Auf den ersten Blick wirkt das jetzt sehr viel, aber einige Dateien sind sich vom Inhalt ziemlich ähnlich – andere wiederum haben kaum welchen. Wir werden die Dateien ungefähr so durchlaufen, wie sie im Blog genutzt oder angezeigt werden – wir beginnen also mit der header.php und enden mit der functions.php.

Die Ordnerstruktur des WordPress-Themes Twenty Fourteen. (Screenshot: eigene Installation)
Wer ein WordPress-Theme erstellen will, sollte die Ordnerstruktur von WordPress kennen. Hier am Beispiel von Twenty Fourteen. (Screenshot: eigene Installation)

Die header.php: Der Kopf des WordPress-Themes

Schauen wir uns also zuerst die header.php an.

<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
</div>
<?php endif; ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<div class="search-toggle">
<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">

Die WordPress-eigenen Funktionen sind hier:

bloginfo( 'charset' )
bloginfo( 'pingback_url' )
bloginfo( 'name' )
wp_title( '|', true, 'right' )
get_template_directory_uri()
wp_head()
body_class()
get_header_image()
header_image()
get_custom_header()->width
get_custom_header()->height
esc_url()
home_url( '/' )
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' )
get_search_form()

Die Funktion bloginfo() liefert hier je nach übergebenem Parameter den Zeichensatz, die Pingback-URL oder den Namen des Blogs zurück. wp_title('|', true, 'right' ) gibt eigentlich zurück, was in der general-template.php steht. In diesem Fall ist aber in der functions.php eine Funktion twentyfourteen_wp_title() definiert, die die Funktion erweitert. Zurückgegeben wird der Name des Blogs, auf der Startseite zusätzlich die Beschreibung und auf anderen Seiten der Titel der jeweiligen Seite. Die Parameter sind (von links nach rechts) der Seperator, ob und wo der Titel angezeigt werden soll. Weitere Informationen zu dieser etwas komplexeren Funktion findet ihr im WordPress-Codex.

Die Funktion get_template_directory_uri() macht genau das, was sie sagt: Zurückgegeben wird der Pfad zum Theme. Mit wp_head() werden Plugin-Stylesheets, Javascript-Funktionen und anderes eingebunden, was für eure WordPress-Site wichtig ist. body_class() gibt – je nach aufgerufener Site – passende Klassen aus, mit denen ihr die verschiedenen Seitenarten stylen könnt. Auf der Startseite wird beispielsweise home ausgegeben, auf der Blog-Übersicht blog, im Single-View single und so fort. Praktischerweise wird auch – falls JavaScript aktiviert ist – die Klasse js ausgegeben.

get_header_image() gibt true oder false zurück, je nachdem, ob ein Header-Bild im Backend gewählt wurde oder nicht – mit header_imge wird dieses dann ausgegeben. Die Funktionen get_custom_header()->width und get_custom_header()->height sollten selbsterklärend sein. Mit esc_url() werden potenziell gefährliche Zeichen aus einer URL gefiltert, home_url() gibt den Link zur Homepage der Website zurück.

wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ist mit all seinen Parametern nochmal eine etwas kompliziert wirkende Funktion. Grob gesagt wird – wie sich erahnen lässt – ein Menü ausgegeben. Um die Funktion genauer zu verstehen, werfen wir einen Blick in die functions.php. Hier stehen die folgenden Zeilen:

register_nav_menus( array(
'primary' => __( 'Top primary menu', 'twentyfourteen' ),
'secondary' => __( 'Secondary menu in left sidebar', 'twentyfourteen' ),
) );

Hier werden zwei Menüs angelegt, die dann im Backend unter „Design > Menüs“ zu erreichen sind. Vergeben wird mit primary beziehungsweise secondary die theme_location, die wir oben in dem Code-Schnipsel von wp_nav_menu() wiederfinden. Darüber hinaus wird der Name des Menüs vergeben, der im Backend angezeigt werden soll. Mit dem Parameter menu_class wird dem Menü eine Klasse zugewiesen. Weitere Informationen zu dieser Funktion und zu ihren weiteren Parametern gibt es hier.

Die Funktion get_search_form() gibt ein Suchformular zurück. Wenn keine search.php im Theme enthalten ist, wird das Standard-Formular zurückgegeben.

Ein WordPress-Theme erstellen: Die index.php

Widmen wir uns nun der index.php, die im Vergleich zur header.php etwas übersichtlicher ist:

<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme and one
* of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query,
* e.g., it puts together the home page when no home.php file exists.
*
* @link http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
if ( have_posts() ) :
// Start the Loop.
while ( have_posts() ) : the_post();
/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
endwhile;
// Previous/next post navigation.
twentyfourteen_paging_nav();
else :
// If no content, include the "No posts found" template.
get_template_part( 'content', 'none' );
endif;
?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();

Hier alle neuen Funktionen im Überblick:

get_header()
is_front_page()
twentyfourteen_has_featured_posts()
get_template_part( 'featured-content' )
get_template_part( 'content', get_post_format() )
get_template_part( 'content', 'none' )
have_posts()
while ( have_posts() ) : the_post()
twentyfourteen_paging_nav()
get_sidebar( 'content' )
get_sidebar()
get_footer()

Die index.php ist nur ein Gerüst für die Inhalte, die mit Funktionen je nach Situation geladen werden. Mit der Funktion get_header() wird die header.php eingebunden. is_front_page() prüft, ob man sich gerade auf der Übersichtsseite des Blogs befindet. Die Funktion twentyfourteen_has_featured_posts() ist wieder eine Funktion aus der functions.php (immer gut zu erkennen an dem Namen des Themes als Präfix). Geprüft wird, ob es Featured Posts gibt. Jetzt werden verschiedene Teile des Templates eingelesen. get_template_part( 'featured-content' ) gibt den Inhalt der Datei featured-content.php zurück. Mit der Funktion get_template_part( 'content', get_post_format() ) wird – je nach Typ des Beitrags, also beispielsweise bei einer Galerie „gallery“ – die entsprechende content-[...].php zurückgegeben. get_post_format() gibt dementsprechend das Format des Artikels zurück. get_template_part( 'content', 'none' ) gibt dann – ihr habt es sicher schon geahnt – den Inhalt von content-none.php zurück.

Mit der Funktion have_posts() wird einfach geprüft, ob Artikel zum Anzeigen vorhanden sind. while ( have_posts() ) : the_post(); startet die Schleife, die nacheinander alle Beiträge durchläuft. Was ihr innerhalb dieser Schleife ausführt, wird bei jedem Post neu durchgeführt. Durch twentyfourteen_paging_nav() wird eine Navigation für ältere/neuere Posts angezeigt, get_sidebar( 'content' ) funktioniert ganz ähnlich wie get_template_part() und gibt den Inhalt der sidebar-content.php zurück. Äquivalent dazu wird mit get_sidebar() die sidebar.php zurückgegeben, mit get_footer() die footer.php.

Die content-Dateien bei WordPress

Da wir jetzt schon mit den content-Dateien zu tun hatten, gehen wir diese als nächstes durch. Sie ähneln sich zum Teil stark, da sie ja immer den Inhalt eines Beitrags ausgeben, nur für unterschiedliche Beitragstypen. Die Funktionen sind also bei allen content-Dateien nahezu die selben. Wenn der Artikel keinem bestimmten Post-Format zugeordnet wurde, wird die content.php aufgerufen, um den Inhalt darzustellen:

<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>
<div class="entry-meta">
<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
</div>
<?php
endif;
if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' );
endif;
?>
<div class="entry-meta">
<?php
if ( 'post' == get_post_type() )
twentyfourteen_posted_on();
if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) :
?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span>
<?php
endif;
edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<?php if ( is_search() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php
the_content( __( 'Continue reading <span class="meta-nav">?</span>', 'twentyfourteen' ) );
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) );
?>
</div><!-- .entry-content -->
<?php endif; ?>
<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?>
</article><!-- #post-## -->

Neu sind die folgenden Funktionen:

the_ID()
post_class()
twentyfourteen_post_thumbnail()
get_object_taxonomies()
get_post_type()
twentyfourteen_categorized_blog()
get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) )
is_single()
the_title( '<h1 class="entry-title">', '</h1>' )
get_permalink()
twentyfourteen_posted_on()
post_password_required()
comments_open()
get_comments_number()
comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) )
edit_post_link( __( 'Edit', 'twentyfourteen' ), '', '' )
is_search()
the_excerpt()
the_content( __( 'Continue reading <span class="meta-nav">?</span>', 'twentyfourteen' ) )
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) )
the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' )

Mit the_ID() wird die ID des Beitrags zurückgegeben. post_class() gibt Klassen zurück, die zu dem Beitrag passen, beispielsweise die Klasse post, wenn es eine Galerie ist format-gallery und so weiter. twentyfourteen_post_thumbnail() gibt das Featured-Image des Beitrags zurück, durch get_object_taxonomies() werden alle Taxonomien eines Posts zurückgegeben. get_post_type gibt den Typ des Posts zurück. Die Funktion twentyfourteen_categorized_blog() prüft, ob das Blog mehr als eine Kategorie hat. Die Funktion get_the_category_list() sieht wegen der Parameter auf den ersten Blick schlimmer aus als sie ist: Der erste Parameter ist das Trennzeichen zwischen den Kategorien. Anschließend kommen Hinweise für Übersetzer und am Ende der Name des Themes. Auch das ist für die Übersetzung relevant.

Mit is_single() wird geprüft, ob wir uns im Single-View befinden, the_title gibt den Titel des Beitrags aus, als Parameter kann angegeben werde, was direkt davor und dahinter ausgegeben werden soll. get_permalink() gibt den Link zu dem Beitrag zurück, mit twentyfourteen_posted_on() werden Meta-Informationen wie etwa der Autor zurückgegeben. Wenn der Beitrag mit einem Passwort geschützt ist, gibt post_password_required() true zurück. comments_open() prüft, ob Kommentare erlaubt sind und get_comments_number() gibt true zurück, falls Kommentare hinterlassen wurden. Mit comments_popup_link() wird der Link zu den Kommentaren zurückgegeben, drei Parameter sind möglich: Das erste ist der Text, der ausgegeben wird, wenn kein Kommentar vorhanden ist. Zweiterer wird bei einem Kommentar angezeigt, letzterer bei mehr als einem Kommentar. edit_post_link() gibt den Link zum Bearbeiten des Beitrags aus, mit is_search() wird geprüft, ob es sich um eine Suchergebnis-Seite handelt. the_excerpt() gibt eine bestimmte Anzahl Zeichen als Teaser aus, anschließend wird der Text abgeschnitten.

Die Funktion the_content() gibt den Inhalt des Beitrags zurück. Wenn es sich um eine Übersichtsseite handelt, wird der Inhalt bis zum more-Tag (falls gesetzt) angezeigt, gefolgt von einem Link mit dem Text in runden Klammern. Mit wp_link_pages() werden Seitenzahlen für Beiträge mit mehr als einer Seite ausgegeben. Die Parameter sollten selbst erklärend sein. Mit the_tags() wird eine Liste der Tags ausgegeben, die Parameter bestimmen den Teil vor der Ausgabe, den Seperator zwischen den Tags und die Ausgabe danach.

Damit hätten wir die meisten Funktionen aus den content-Dateien abgearbeitet. Die Dateien content-aside.php, content-audio.php, content-gallery.php, content-image.php, content-link.php, content-quote.php und content-video.php sind sehr ähnlich aufgebaut. Im Vergleich zur content.php kommen nur zwei Funktionen dazu, mit entsprechenden Parametern:

get_post_format_link('audio')
get_post_format_string('audio')

Diese beiden Funktionen machen genau das, wonach sie klingen: Einmal wird der Link zu einer Archiv-Seite des in Klammern stehenden Post-Formats zurückgegeben, mit get_post_format_string() wird der Slug/die Bezeichnung zurückgegeben. In der content-featured-post.php, der content-none.php und der featured-content.php gibt es noch ein paar weitere Funktionen:

/* content-featured-post.php */
has_post_thumbnail()
get_theme_mod( 'featured_content_layout' )
the_post_thumbnail( 'twentyfourteen-full-width' )
/* content-none.php */
current_user_can( 'publish_posts' )
admin_url( 'post-new.php' )
/* featured-content.php */
twentyfourteen_get_featured_posts()
setup_postdata()
wp_reset_postdata()

Mit has_post_thumbnail() wird geprüft, ob ein Artikelbild festgelegt ist. Mit get_theme_mod() wird geprüft, welches Layout im Theme-Customizer gewählt wurde. current_user_can() gibt zurück, was für Rechte der Besucher gerade hat, mit admin_url() wird eine URL für das Backend erzeugt, hier für einen neuen Beitrag. twentyfourteen_get_featured_posts() liefert die Featured-Posts zurück, mit Hilfe von setup_postdata() werden globale Variablen gefüllt – wp_reset_postdata()setzt diese Variablen wieder zurück.

Weitere Übersichtsseiten: archive.php und author.php

Mit den content-[...].php-Dateien sind wir mit den Übersichtsseiten jetzt fast fertig. Es fehlen noch die archive.php und author.php – schauen wir uns zuerst den interessanten Teil der archive.php an:

<?php
/**
* The template for displaying Archive pages
*
* Used to display archive-type pages if nothing more specific matches a query.
* For example, puts together date-based pages if no date.php file exists.
*
* If you'd like to further customize these archive views, you may create a
* new template file for each specific one. For example, Twenty Fourteen
* already has tag.php for Tag archives, category.php for Category archives,
* and author.php for Author archives.
*
* @link http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header(); ?>
<section id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h1 class="page-title">
<?php
if ( is_day() ) :
printf( __( 'Daily Archives: %s', 'twentyfourteen' ), get_the_date() );
elseif ( is_month() ) :
printf( __( 'Monthly Archives: %s', 'twentyfourteen' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'twentyfourteen' ) ) );
elseif ( is_year() ) :
printf( __( 'Yearly Archives: %s', 'twentyfourteen' ), get_the_date( _x( 'Y', 'yearly archives date format', 'twentyfourteen' ) ) );
else :
_e( 'Archives', 'twentyfourteen' );
endif;
?>
</h1>
</header><!-- .page-header -->

Besonders viele neue Funktionen gibt es nicht, aber doch ein paar:

is_day()
is_month()
is_year()
get_the_date()

Eigentlich sollten die alle selbsterklärend sein. Die ersten drei prüfen, ob gerade ein Tagesarchiv, ein Monats- oder ein Jahresarchiv angezeigt wird. get_the_date() gibt die jeweilige Zeitangabe zurück.

Auch bei der author.php können wir uns auf den Anfang beschränken:

<?php
/**
* The template for displaying Author archive pages
*
* @link http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header(); ?>
<section id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php if ( have_posts() ) : ?>
<header class="archive-header">
<h1 class="archive-title">
<?php
/*
* Queue the first post, that way we know what author
* we're dealing with (if that is the case).
*
* We reset this later so we can run the loop properly
* with a call to rewind_posts().
*/
the_post();
printf( __( 'All posts by %s', 'twentyfourteen' ), get_the_author() );
?>
</h1>
<?php if ( get_the_author_meta( 'description' ) ) : ?>
<div class="author-description"><?php the_author_meta( 'description' ); ?></div>
<?php endif; ?>
</header><!-- .archive-header -->
<?php
/*
* Since we called the_post() above, we need to rewind
* the loop back to the beginning that way we can run
* the loop properly, in full.
*/
rewind_posts();

Neue Funktionen sind:

get_the_author()
get_the_author_meta( 'description' )
the_author_meta( 'description' )
rewind_posts()

get_the_author() gibt den Namen des Autors zurück. Mit get_the_author_meta() kann geprüft werden, ob ein Autorenfeld ausgefüllt ist – hier die Autoren-Beschreibung. Zurückgegeben wird sie mittels the_author_meta().Mit rewind_posts wird wieder an die erste Position der Schleife gesprungen.

Machen wir weiter mit dem für uns interessanten Abschnitt der single.php:

if ( comments_open() || get_comments_number() ) {
comments_template();
}

Neu ist hier nur die Funktion comments_template(), mit der die comments.php zurückgegeben wird. Und in eben dieser comments.php gibt es wieder ein paar mehr neue Funktionen:

<?php
/**
* The template for displaying Comments
*
* The area of the page that contains comments and the comment form.
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
/*
* If the current post is protected by a password and the visitor has not yet
* entered the password we will return early without loading the comments.
*/
if ( post_password_required() ) {
return;
}
?>
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentyfourteen' ),
number_format_i18n( get_comments_number() ), get_the_title() );
?>
</h2>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'twentyfourteen' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '? Older Comments', 'twentyfourteen' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments ?', 'twentyfourteen' ) ); ?></div>
</nav><!-- #comment-nav-above -->
<?php endif; // Check for comment navigation. ?>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size'=> 34,
) );
?>
</ol><!-- .comment-list -->
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'twentyfourteen' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '? Older Comments', 'twentyfourteen' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments ?', 'twentyfourteen' ) ); ?></div>
</nav><!-- #comment-nav-below -->
<?php endif; // Check for comment navigation. ?>
<?php if ( ! comments_open() ) : ?>
<p class="no-comments"><?php _e( 'Comments are closed.', 'twentyfourteen' ); ?></p>
<?php endif; ?>
<?php endif; // have_comments() ?>
<?php comment_form(); ?>
</div><!-- #comments -->

Hier sind die neuen Funktionen auf einen Blick:

have_comments()
get_comments_number()
get_comment_pages_count()
get_option( 'page_comments' )
previous_comments_link( __( '? Older Comments', 'twentyfourteen' ) )
next_comments_link( __( 'Newer Comments ?', 'twentyfourteen' ) )
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size'=> 34,) )
comment_form()

Mit have_comments() wird zurückgegeben, ob Kommentare vorhanden sind oder nicht. get_comments_number() liefert die Anzahl der Kommentare zurück, get_comment_pages_count() die Anzahl der Kommentar-Seiten. get_option( 'page_comments' ) prüft, ob im Backend die Option aktiviert ist, dass Kommentare ab einer bestimmten Anzahl auf mehrere Seiten aufgeteilt werden sollen. previous_comments_link() und next_comments_links() ist wieder selbsterklärend. Mit wp_list_comments() gebt ihr die Kommentare aus. Der Parameter style kan ol, ul oder div sein – short_ping gibt die Möglichkeit zu entscheiden, ob Ping- und Trackbacks kurz dargestellt werden sollen. Genauere Informationen und mehr Parameter findet ihr wieder im Codex.

WordPress-Funktionen: Die category.php

Wenden wir uns nun der category.php zu, von der wieder nur der erste Teil spannend ist:

<?php
/**
* The template for displaying Category pages
*
* @link http://codex.wordpress.org/Template_Hierarchy
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header(); ?>
<section id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php if ( have_posts() ) : ?>
<header class="archive-header">
<h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentyfourteen' ), single_cat_title( '', false ) ); ?></h1>
<?php
// Show an optional term description.
$term_description = term_description();
if ( ! empty( $term_description ) ) :
printf( '<div class="taxonomy-description">%s</div>', $term_description );
endif;
?>
</header><!-- .archive-header -->

Noch nicht behandelt haben wir die folgenden Funktionen:

single_cat_title( '', false )
term_description()

single_cat_title() liefert den Titel der Kategorie, term_description() die optionale Beschreibung. Für die tag-Seite gibt es äquivalent die Funktion single_tag_title(). Jetzt schauen wir uns die image.php an:

<?php
/**
* The template for displaying image attachments
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
// Retrieve attachment metadata.
$metadata = wp_get_attachment_metadata();
get_header();
?>
<section id="primary" class="content-area image-attachment">
<div id="content" class="site-content" role="main">
<?php
// Start the Loop.
while ( have_posts() ) : the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
<span class="entry-date"><time class="entry-date" datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time></span>
<span class="full-size-link"><a href="<?php echo wp_get_attachment_url(); ?>"><?php echo $metadata['width']; ?> × <?php echo $metadata['height']; ?></a></span>
<span class="parent-post-link"><a href="<?php echo get_permalink( $post->post_parent ); ?>" rel="gallery"><?php echo get_the_title( $post->post_parent ); ?></a></span>
<?php edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<div class="entry-attachment">
<div class="attachment">
<?php twentyfourteen_the_attached_image(); ?>
</div><!-- .attachment -->

Neu ist hier folgendes:

wp_get_attachment_metadata()
wp_get_attachment_url()
$metadata['width']
$metadata['height']
twentyfourteen_the_attached_image()

Mit wp_get_attachment_metadata() werden die Metadaten der Datei zurückgegeben. $metadata['width'] und $metadata['height'] sind selbsterklärend, twentyfourteen_the_attached_image() gibt das Bild zurück.

In der search.php ist nur eine Funktion vorhanden, die wir noch nicht hatten:

get_search_query()

Diese Funktion gibt einfach die Such-Anfrage zurück. In der sidebar.php gibt es noch weitere neue Funktionen:

<?php
/**
* The Sidebar containing the main widget area
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
?>
<div id="secondary">
<?php
$description = get_bloginfo( 'description', 'display' );
if ( ! empty ( $description ) ) :
?>
<h2 class="site-description"><?php echo esc_html( $description ); ?></h2>
<?php endif; ?>
<?php if ( has_nav_menu( 'secondary' ) ) : ?>
<nav role="navigation" class="navigation site-navigation secondary-navigation">
<?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>
</nav>
<?php endif; ?>
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
</div><!-- #secondary -->

Neu ist:

has_nav_menu( 'secondary' )
is_active_sidebar( 'sidebar-1' )
dynamic_sidebar( 'sidebar-1' )

has_nav_menu() prüft, ob das Menü einen Eintrag hat, oder nicht. is_active_sidebar() macht ähnliches für Sidebars, dynamic_sidebar() gibt eine Sidebar, oder besser einen Widget-Bereich, aus. Die verschiedenen Widget-Bereiche werden wieder in der functions.php definiert, das sieht für die primäre Sidebar so aus:

register_sidebar( array(
'name' => __( 'Primary Sidebar', 'twentyfourteen' ),
'id' => 'sidebar-1',
'description' => __( 'Main sidebar that appears on the left.', 'twentyfourteen' ),
'before_widget' => '

', 'after_widget' => '', 'before_title' => '

', 'after_title' => '

', ) );

Hier wird eine Sidebar mit dem Namen „Primary Sidebar“ angelegt, bekommt die id „sidebar-1“, eine Beschreibung, wird von einem aside-Tag umschlossen und der Titel wird als h1-Überschrift ausgezeichnet. In der taxonomy-post_format.php gibt es nur eine neue Funktion: is_tax. Widmen wir uns nun vor der funcions.php noch kurz der footer.php:

<?php
/**
* The template for displaying the footer
*
* Contains footer content and the closing of the #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php get_sidebar( 'footer' ); ?>
<div class="site-info">
<?php do_action( 'twentyfourteen_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyfourteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

Neu ist hier nur die Funktion wp_footer(), die ähnlich wie wp_header() arbeitet und Dinge einbindet, die für das Funktionieren einer Seite wichtig sind. Jetzt wird es noch mal spannend: Die functions.php – sie werde ich abschnittweise, also Funktion für Funktion, durchlaufen, aber auch die Inhalte der Funktionen erläutern. Funktionen, die nur eine Relevanz für Twenty Fourteen haben, werde ich gegebenenfalls auslassen.

<?php
/**
* Twenty Fourteen functions and definitions
*
* Set up the theme and provides some helper functions, which are used in the
* theme as custom template tags. Others are attached to action and filter
* hooks in WordPress to change core functionality.
*
* When using a child theme you can override certain functions (those wrapped
* in a function_exists() call) by defining them first in your child theme's
* functions.php file. The child theme's functions.php file is included before
* the parent theme's file, so the child theme functions would be used.
*
* @link http://codex.wordpress.org/Theme_Development
* @link http://codex.wordpress.org/Child_Themes
*
* Functions that are not pluggable (not wrapped in function_exists()) are
* instead attached to a filter or action hook.
*
* For more information on hooks, actions, and filters,
* @link http://codex.wordpress.org/Plugin_API
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
/**
* Set up the content width value based on the theme's design.
*
* @see twentyfourteen_content_width()
*
* @since Twenty Fourteen 1.0
*/
if ( ! isset( $content_width ) ) {
$content_width = 474;
}
/**
* Twenty Fourteen only works in WordPress 3.6 or later.
*/
if ( version_compare( $GLOBALS['wp_version'], '3.6', '<' ) ) {
require get_template_directory() . '/inc/back-compat.php';
}
if ( ! function_exists( 'twentyfourteen_setup' ) ) :
/**
* Twenty Fourteen setup.
*
* Set up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which
* runs before the init hook. The init hook is too late for some features, such
* as indicating support post thumbnails.
*
* @since Twenty Fourteen 1.0
*/
function twentyfourteen_setup() {
/*
* Make Twenty Fourteen available for translation.
*
* Translations can be added to the /languages/ directory.
* If you're building a theme based on Twenty Fourteen, use a find and
* replace to change 'twentyfourteen' to the name of your theme in all
* template files.
*/
load_theme_textdomain( 'twentyfourteen', get_template_directory() . '/languages' );
// This theme styles the visual editor to resemble the theme style.
add_editor_style( array( 'css/editor-style.css', twentyfourteen_font_url() ) );
// Add RSS feed links to <head> for posts and comments.
add_theme_support( 'automatic-feed-links' );
// Enable support for Post Thumbnails, and declare two sizes.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 672, 372, true );
add_image_size( 'twentyfourteen-full-width', 1038, 576, true );
// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
'primary' => __( 'Top primary menu', 'twentyfourteen' ),
'secondary' => __( 'Secondary menu in left sidebar', 'twentyfourteen' ),
) );
/*
* Switch default core markup for search form, comment form, and comments
* to output valid HTML5.
*/
add_theme_support( 'html5', array(
'search-form', 'comment-form', 'comment-list',
) );
/*
* Enable support for Post Formats.
* See http://codex.wordpress.org/Post_Formats
*/
add_theme_support( 'post-formats', array(
'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',
) );
// This theme allows users to set a custom background.
add_theme_support( 'custom-background', apply_filters( 'twentyfourteen_custom_background_args', array(
'default-color' => 'f5f5f5',
) ) );
// Add support for featured content.
add_theme_support( 'featured-content', array(
'featured_content_filter' => 'twentyfourteen_get_featured_posts',
'max_posts' => 6,
) );
// This theme uses its own gallery styles.
add_filter( 'use_default_gallery_style', '__return_false' );
}
endif; // twentyfourteen_setup
add_action( 'after_setup_theme', 'twentyfourteen_setup' );
/**
* Adjust content_width value for image attachment template.
*
* @since Twenty Fourteen 1.0
*
* @return void
*/
function twentyfourteen_content_width() {
if ( is_attachment() && wp_attachment_is_image() ) {
$GLOBALS['content_width'] = 810;
}
}
add_action( 'template_redirect', 'twentyfourteen_content_width' );
/**
* Getter function for Featured Content Plugin.
*
* @since Twenty Fourteen 1.0
*
* @return array An array of WP_Post objects.
*/
function twentyfourteen_get_featured_posts() {
/**
* Filter the featured posts to return in Twenty Fourteen.
*
* @since Twenty Fourteen 1.0
*
* @param array|bool $posts Array of featured posts, otherwise false.
*/
return apply_filters( 'twentyfourteen_get_featured_posts', array() );
}
/**
* A helper conditional function that returns a boolean value.
*
* @since Twenty Fourteen 1.0
*
* @return bool Whether there are featured posts.
*/
function twentyfourteen_has_featured_posts() {
return ! is_paged() && (bool) twentyfourteen_get_featured_posts();
}
/**
* Register three Twenty Fourteen widget areas.
*
* @since Twenty Fourteen 1.0
*
* @return void
*/
function twentyfourteen_widgets_init() {
require get_template_directory() . '/inc/widgets.php';
register_widget( 'Twenty_Fourteen_Ephemera_Widget' );
register_sidebar( array(
'name' => __( 'Primary Sidebar', 'twentyfourteen' ),
'id' => 'sidebar-1',
'description' => __( 'Main sidebar that appears on the left.', 'twentyfourteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
register_sidebar( array(
'name' => __( 'Content Sidebar', 'twentyfourteen' ),
'id' => 'sidebar-2',
'description' => __( 'Additional sidebar that appears on the right.', 'twentyfourteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Area', 'twentyfourteen' ),
'id' => 'sidebar-3',
'description' => __( 'Appears in the footer section of the site.', 'twentyfourteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
}
add_action( 'widgets_init', 'twentyfourteen_widgets_init' );
/**
* Register Lato Google font for Twenty Fourteen.
*
* @since Twenty Fourteen 1.0
*
* @return string
*/
function twentyfourteen_font_url() {
$font_url = '';
/*
* Translators: If there are characters in your language that are not supported
* by Lato, translate this to 'off'. Do not translate into your own language.
*/
if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) ) {
$font_url = add_query_arg( 'family', urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ), "//fonts.googleapis.com/css" );
}
return $font_url;
}
/**
* Enqueue scripts and styles for the front end.
*
* @since Twenty Fourteen 1.0
*
* @return void
*/
function twentyfourteen_scripts() {
// Add Lato font, used in the main stylesheet.
wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );
// Load our main stylesheet.
wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );
// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style', 'genericons' ), '20131205' );
wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'twentyfourteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20130402' );
}
if ( is_active_sidebar( 'sidebar-3' ) ) {
wp_enqueue_script( 'jquery-masonry' );
}
if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) ) {
wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20131205', true );
wp_localize_script( 'twentyfourteen-slider', 'featuredSliderDefaults', array(
'prevText' => __( 'Previous', 'twentyfourteen' ),
'nextText' => __( 'Next', 'twentyfourteen' )
) );
}
wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131209', true );
}
add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
/**
* Enqueue Google fonts style to admin screen for custom header display.
*
* @since Twenty Fourteen 1.0
*
* @return void
*/
function twentyfourteen_admin_fonts() {
wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );
}
add_action( 'admin_print_scripts-appearance_page_custom-header', 'twentyfourteen_admin_fonts' );
if ( ! function_exists( 'twentyfourteen_the_attached_image' ) ) :
/**
* Print the attached image with a link to the next attached image.
*
* @since Twenty Fourteen 1.0
*
* @return void
*/
function twentyfourteen_the_attached_image() {
$post = get_post();
/**
* Filter the default Twenty Fourteen attachment size.
*
* @since Twenty Fourteen 1.0
*
* @param array $dimensions {
* An array of height and width dimensions.
*
* @type int $height Height of the image in pixels. Default 810.
* @type int $width Width of the image in pixels. Default 810.
* }
*/
$attachment_size = apply_filters( 'twentyfourteen_attachment_size', array( 810, 810 ) );
$next_attachment_url = wp_get_attachment_url();
/*
* Grab the IDs of all the image attachments in a gallery so we can get the URL
* of the next adjacent image in a gallery, or the first image (if we're
* looking at the last image in a gallery), or, in a gallery of one, just the
* link to that image file.
*/
$attachment_ids = get_posts( array(
'post_parent' => $post->post_parent,
'fields' => 'ids',
'numberposts' => -1,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order ID',
) );
// If there is more than 1 attachment in a gallery...
if ( count( $attachment_ids ) > 1 ) {
foreach ( $attachment_ids as $attachment_id ) {
if ( $attachment_id == $post->ID ) {
$next_id = current( $attachment_ids );
break;
}
}
// get the URL of the next image attachment...
if ( $next_id ) {
$next_attachment_url = get_attachment_link( $next_id );
}
// or get the URL of the first image attachment.
else {
$next_attachment_url = get_attachment_link( array_shift( $attachment_ids ) );
}
}
printf( '<a href="%1$s" rel="attachment">%2$s</a>',
esc_url( $next_attachment_url ),
wp_get_attachment_image( $post->ID, $attachment_size )
);
}
endif;
if ( ! function_exists( 'twentyfourteen_list_authors' ) ) :
/**
* Print a list of all site contributors who published at least one post.
*
* @since Twenty Fourteen 1.0
*
* @return void
*/
function twentyfourteen_list_authors() {
$contributor_ids = get_users( array(
'fields' => 'ID',
'orderby' => 'post_count',
'order' => 'DESC',
'who' => 'authors',
) );
foreach ( $contributor_ids as $contributor_id ) :
$post_count = count_user_posts( $contributor_id );
// Move on if user has not published a post (yet).
if ( ! $post_count ) {
continue;
}
?>
<div class="contributor">
<div class="contributor-info">
<div class="contributor-avatar"><?php echo get_avatar( $contributor_id, 132 ); ?></div>
<div class="contributor-summary">
<h2 class="contributor-name"><?php echo get_the_author_meta( 'display_name', $contributor_id ); ?></h2>
<p class="contributor-bio">
<?php echo get_the_author_meta( 'description', $contributor_id ); ?>
</p>
<a class="contributor-posts-link" href="<?php echo esc_url( get_author_posts_url( $contributor_id ) ); ?>">
<?php printf( _n( '%d Article', '%d Articles', $post_count, 'twentyfourteen' ), $post_count ); ?>
</a>
</div><!-- .contributor-summary -->
</div><!-- .contributor-info -->
</div><!-- .contributor -->
<?php
endforeach;
}
endif;
/**
* Extend the default WordPress body classes.
*
* Adds body classes to denote:
* 1. Single or multiple authors.
* 2. Presence of header image.
* 3. Index views.
* 4. Full-width content layout.
* 5. Presence of footer widgets.
* 6. Single views.
* 7. Featured content layout.
*
* @since Twenty Fourteen 1.0
*
* @param array $classes A list of existing body class values.
* @return array The filtered body class list.
*/
function twentyfourteen_body_classes( $classes ) {
if ( is_multi_author() ) {
$classes[] = 'group-blog';
}
if ( get_header_image() ) {
$classes[] = 'header-image';
} else {
$classes[] = 'masthead-fixed';
}
if ( is_archive() || is_search() || is_home() ) {
$classes[] = 'list-view';
}
if ( ( ! is_active_sidebar( 'sidebar-2' ) )
|| is_page_template( 'page-templates/full-width.php' )
|| is_page_template( 'page-templates/contributors.php' )
|| is_attachment() ) {
$classes[] = 'full-width';
}
if ( is_active_sidebar( 'sidebar-3' ) ) {
$classes[] = 'footer-widgets';
}
if ( is_singular() && ! is_front_page() ) {
$classes[] = 'singular';
}
if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) ) {
$classes[] = 'slider';
} elseif ( is_front_page() ) {
$classes[] = 'grid';
}
return $classes;
}
add_filter( 'body_class', 'twentyfourteen_body_classes' );
/**
* Extend the default WordPress post classes.
*
* Adds a post class to denote:
* Non-password protected page with a post thumbnail.
*
* @since Twenty Fourteen 1.0
*
* @param array $classes A list of existing post class values.
* @return array The filtered post class list.
*/
function twentyfourteen_post_classes( $classes ) {
if ( ! post_password_required() && has_post_thumbnail() ) {
$classes[] = 'has-post-thumbnail';
}
return $classes;
}
add_filter( 'post_class', 'twentyfourteen_post_classes' );
/**
* Create a nicely formatted and more specific title element text for output
* in head of document, based on current view.
*
* @since Twenty Fourteen 1.0
*
* @param string $title Default title text for current view.
* @param string $sep Optional separator.
* @return string The filtered title.
*/
function twentyfourteen_wp_title( $title, $sep ) {
global $paged, $page;
if ( is_feed() ) {
return $title;
}
// Add the site name.
$title .= get_bloginfo( 'name' );
// Add the site description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) ) {
$title = "$title $sep $site_description";
}
// Add a page number if necessary.
if ( $paged >= 2 || $page >= 2 ) {
$title = "$title $sep " . sprintf( __( 'Page %s', 'twentyfourteen' ), max( $paged, $page ) );
}
return $title;
}
add_filter( 'wp_title', 'twentyfourteen_wp_title', 10, 2 );
// Implement Custom Header features.
require get_template_directory() . '/inc/custom-header.php';
// Custom template tags for this theme.
require get_template_directory() . '/inc/template-tags.php';
// Add Theme Customizer functionality.
require get_template_directory() . '/inc/customizer.php';
/*
* Add Featured Content functionality.
*
* To overwrite in a plugin, define your own Featured_Content class on or
* before the 'setup_theme' hook.
*/
if ( ! class_exists( 'Featured_Content' ) && 'plugins.php' !== $GLOBALS['pagenow'] ) {
require get_template_directory() . '/inc/featured-content.php';
}

Die erste Funktion beschäftigt sich mit Setzen der maximalen Inhaltsbreite:

if ( ! isset( $content_width ) ) {
$content_width = 474;
}

Das bedeutet: Falls $content_width nicht gesetzt ist, wird es hier auf 474 Pixel gesetzt. Bilder, Videos und andere Inhalte dürfen dann maximal diese Breite haben, wenn sie in einem Beitrag eingebunden sind. Als nächstes wird festgelegt, dass Twenty Fourteen erst ab WordPress 3.6 funktioniert. Nun kommen wir zu einer ausführlicheren Funktion, dem _setup():

function twentyfourteen_setup() {
/*
* Make Twenty Fourteen available for translation.
*
* Translations can be added to the /languages/ directory.
* If you're building a theme based on Twenty Fourteen, use a find and
* replace to change 'twentyfourteen' to the name of your theme in all
* template files.
*/
load_theme_textdomain( 'twentyfourteen', get_template_directory() . '/languages' );
// This theme styles the visual editor to resemble the theme style.
add_editor_style( array( 'css/editor-style.css', twentyfourteen_font_url() ) );
// Add RSS feed links tofor posts and comments. add_theme_support( 'automatic-feed-links' ); // Enable support for Post Thumbnails, and declare two sizes. add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 672, 372, true ); add_image_size( 'twentyfourteen-full-width', 1038, 576, true ); // This theme uses wp_nav_menu() in two locations. register_nav_menus( array( 'primary' => __( 'Top primary menu', 'twentyfourteen' ), 'secondary' => __( 'Secondary menu in left sidebar', 'twentyfourteen' ), ) ); /* * Switch default core markup for search form, comment form, and comments * to output valid HTML5. */ add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', ) ); /* * Enable support for Post Formats. * See http://codex.wordpress.org/Post_Formats */ add_theme_support( 'post-formats', array( 'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery', ) ); // This theme allows users to set a custom background. add_theme_support( 'custom-background', apply_filters( 'twentyfourteen_custom_background_args', array( 'default-color' => 'f5f5f5', ) ) ); // Add support for featured content. add_theme_support( 'featured-content', array( 'featured_content_filter' => 'twentyfourteen_get_featured_posts', 'max_posts' => 6, ) ); // This theme uses its own gallery styles. add_filter( 'use_default_gallery_style', '__return_false' ); } endif; // twentyfourteen_setup add_action( 'after_setup_theme', 'twentyfourteen_setup' );

In diesem Bereich wird unter anderem festgelegt, welche Funktionen das Theme unterstützen soll. Mit load_theme_textdomain() wird die Übersetzbarkeit des Themes ermöglicht. In den vorherigen Code-Abschnitten sind euch vielleicht schon die Strings aufgefallen, hinter denen dann noch twentyfourteen steht. Mit add_editor_style() könnt ihr das Design des Backend-Editors verändern – als Parameter übergebt ihr einfach den Pfad zur entsprechenden CSS-Datei.

Mit add_theme_support() wird hier die Unterstützung des Themes für RSS-Links und Post-Thumbnails eingerichtet. Des weiteren unterstützt das Theme beim Suchformular, Kommentarformular und der Kommentarliste HTML5, die verschiedenen Post-Formats, es gibt die Möglichkeit einen eigenen Hintergrund zu definieren und – Theme-spezifisch – wird Featured-Content unterstützt. Weitere Möglichkeiten findet ihr in der Funktionsreferenz. Außerdem werden hier die Menüs definiert, die Größe der Post-Thumbnails wird festgelegt (Breite und Höhe, der dritte Parameter bestimmt, ob die Bilder beschnitten werden sollen – bei false wird proportional skaliert, bei true wird auf die eingestellte Größe zugeschnitten) – zusätzlich wird eine spezielle Bildgröße festgelegt, die twentyfourteen-full-width, bei der die Parameter gleich sind, wie bei den Post-Thumbnails. Diese Angabe kann dann einfach ausgewählt werden, wenn die Größe des auszugebenden Bildes angegeben wird, beispielsweise so:

the_post_thumbnail( 'twentyfourteen-full-width' );

Diese Funktion twentyfourteen_setup wird nun an den Hook after_setup_theme mittels add_action() angehängt. Mit der Funktion twentyfourteen_content_width() wird die oben schon besprochene Content-Breite für die Anhang-Seiten von Bildern verändert. Die nächsten Funktionen sind erstmal nur Theme-spezifisch, deshalb werde ich sie hier kurz überspringen. Der nächste große und wichtige Block ist twentyfourteen_widgets_init(), in dem die Widgets und Sidebars registriert werden – wie oben anhand der primären Sidebar schon besprochen.

Schriftarten, besondere Stylesheets und Skripte

Nun werden Schriftarten und besondere Stylesheets und Skripte eingebunden. Das wäre natürlich auch einfach direkt in der header.php möglich, ist so aber schöner. In der Funktion twentyfourteen_font_url() wird einfach die URL zu einer Google-Font festgelegt. In der Funtion twentyfourteen_scripts() werden nun die verschiedenen Ressourcen eingebunden:

function twentyfourteen_scripts() {
// Add Lato font, used in the main stylesheet.
wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );
// Load our main stylesheet.
wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri(), array( 'genericons' ) );
// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style', 'genericons' ), '20131205' );
wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'twentyfourteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20130402' );
}
if ( is_active_sidebar( 'sidebar-3' ) ) {
wp_enqueue_script( 'jquery-masonry' );
}
if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) ) {
wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20131205', true );
wp_localize_script( 'twentyfourteen-slider', 'featuredSliderDefaults', array(
'prevText' => __( 'Previous', 'twentyfourteen' ),
'nextText' => __( 'Next', 'twentyfourteen' )
) );
}
wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131209', true );
}
add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );

Mit der Funktion wp_enqueue_style() können Stylesheets eingebunden werden – oder auch Schriften. Die Parameter sind folgende: Zuerst ein Bezeichner, dann der Pfad zur Datei (im Fall der Schriftart ist das der Aufruf der Funktion twentyfourteen_font_url()), als drittes kann ein Stylesheet eingetragen werde, von dem das aktuelle abhängig ist – also nach dem es erst geladen werden soll. Die letzten zwei möglichen Parameter sind optional: Die Versionsnummer und eine CSS-Media-Angabe, also zum Beispiel screen. Mehr Informationen zu dieser Funktion gibt es in der Referenz.

Mit wp_style_add_data() könnt ihr ein Stylesheet von einem Conditional-Tag umschließen lassen. wp_enqueue_script() funktioniert – wer hätte das gedacht – ganz ähnlich wie wp_enqueue_style() und ist für das Einbinden von JavaScrips zuständig. Mit wp_localize_script() könnt ihr ein Skript lokalisieren. Anschließend wird die Funktion wieder mittels add_action() eingebunden, und zwar nach den Skripts und Stylesheets die WordPress einbindet.

Die nächste Funktion, die ihr vielleicht auch für euer eigenes Theme nutzen könntet, ist die twentyfourteen_the_attached_image(). Hiermit wird bei der Anhang-Seite eines Bildes dieses ausgebenen und – falls es aus einer Galerie ist – der Link zum nächsten Bild. Die Funktion twentyfourteen_list_authors() macht, was erwartet wird, und gibt eine Liste der Autoren mit mindestens einem Beitrag aus.

Mit der Funktion twentyfourteen_body_classes() werden die WordPress-Klassen des body-Tags erweitert – je nachdem, welche Eigenschaften auf die aktuelle Ansicht zutreffen. Die Funktion twentyfourteen_wp_title( $title, $sep ) hatten wir am Anfang schon kurz angerissen: Hier wird definiert, wie der Inhalt des

title
-Tags aussehen soll. Zum Schluss werden noch ein paar Dateien eingebunden, die ebenfalls Funktionen für das Theme bereitstellen.

Euer WordPress-Theme: Die style.css

Am Schluss noch ein kleiner Hinweis: Angaben zu eurem Theme, wie Version, Name und so weiter, müsst ihr in der style.css machen, das sieht dann beispielhaft so aus:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
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.
*/

Falls ihr euer Theme anderen zur Verfügung stellen wollt, schaut euch mal den Beitrag über das WordPress-Theme-Directory an.

Ein kompletter Neustart muss nicht sein: Bedient euch bei anderen Themes

Es ist keine gute Idee, immer wieder bei Null anzufangen. Oft ist es hilfreich, wenn man sich in anderen Themes Schnipsel zusammensucht und sie einfach übernimmt – oder das ganze Theme auf einem anderen aufsetzt und bei dem Basis-Theme nur weitere Funktionen hinzufügt oder überflüssige entfernt. Bei der style.css kann man ja bequem von vorne anfangen. Ebenfalls eine gute Idee ist es, sich ein Blank-Theme zu erstellen, wo wirklich nur die wichtigsten Funktionen implementiert sind. Auf dem könnt ihr dann eure zukünftigen Themes aufbauen.

Wenn ihr noch Fragen zu WordPress-Theme-Funktionen oder generell zu WordPress-Themes habt, schreibt einfach einen Kommentar unter diesen Artikel!

Bitte beachte unsere Community-Richtlinien

44 Reaktionen
Delefant

--- max-width: 815px; --- Das ist dann die Größe des jetzt noch weißen Textfeldes? Gibt es nicht auch eine Edition bei der der Wert variabel eingestellt werden kann, sodass sich immer automatisch die möglichst größte Größe ausgesucht wird? ----- Bei paddin-right oder bei padding left im Site-Content entry-summary oder footer.entry-meta muss dann nichts verändert werden?

Antworten
Florian Brinkmann

Genau. Du kannst statt der 815px auch einfach 100% nehmen.

Antworten
Delefant

Ich habe gestern gerade meine Blog-Seite zerschossen. Augenblicklich sieht der Blog etwas merkwǘrdig aus. - Dennoch, ich meine die Größe des Schreibfeldes in dem der Artikel "Kalkum: Jäger schoss auf Gänse und Tauben" steht. Da füllt das weiße Feld nur einen geringen Teil des möglichen Raumes aus, wobei große Ränder bleiben. Dieses Feld hätte ich gerne möglichst groß und würde es gerne auch farblich verändern. Da es "Fourteen Extended" nicht mehr gibt, muss das irgendwie anders funktionieren. ----- http://anti-jagd-blog.de/kalkum-jaeger-schoss-gaense-tauben-20679292

Antworten
Florian Brinkmann

Versuche es mal mit diesen CSS-Zeilen: https://gist.github.com/FlorianBrinkmann/9bd18e00edecde947b7c
Du kannst das entweder in einem Child-Theme machen oder dir ein Plugin installieren, such dafür mal nach „WordPress Custom CSS Plugin“. Den Farbwert #fff musst du dann in deine gewünschte Farbe ändern. Du kannst auch „transparent“ angeben.

Antworten
Delefant

Wie nur bekomme ich es hin, bei "Twenty Fourteen" das Textfeld für Artikel zu vergrößern? Ich habe eine Menüleiste mit Witgets links und möchte die volle Größe des Textfeldes nutzen. Welche Einträge muss ich dazu, wo ändern? (Zeilennummer) Gibt es da nicht eine Option für eine flexible Größe?

Daneben frage ich mich wie und wo ich das weiß des Textfeldes verändern kann. Ein paar Farbeditierungen oben und unten im Artikel-Textfeld wären natürlich auch noch gut. Vorrangig muss aber der weiße Hintergrund erst mal verändert werden.

Antworten
Florian Brinkmann

Hi Delefant,

was genau meinst du mit „Textfeld“ und „Artikel-Textfeld“? Ein Link zu der Seite wäre auch hilfreich.

Viele Grüße,
Florian

Antworten
kather

Hi Florian,

das ging ja schnell. :)

Ich kann dir das kaum beschreiben ohne das du den Code siehst was ich meine. Kann ich dir das mal irgendwo hochladen oder zuschicken und dann erkläre ich das Problem? Es geht um die Titelausgabe (Form und Farbe) für meine erstellten Seiten. Diese sollen sich abheben von den vom System erstellten Seiten wie 404, Archiv, etc.

Leider ist das in der custom-functions.php blöd geregelt da dort alles unter einer Abfrage steht und ich keine Klassen vergeben kann um diese verschiedenen Anzeigen zu trennen. ich denke es ist logisch leicht zu lösen, aber ohne php-Wissen bin ich aufgeschmissen.

Kann ich dir das irgendwie verständlich zeigen?

LG
Katharina

Antworten
kather

Florian,

ich freu mich auch riesig, ich sage ja, tagelang habe ich gesucht und recherchiert, endlich hat es geklappt dank deiner hilfe. ich habe jetzt auch verstanden wie die scripte eingebunden werden müssen etc. Wäre Schade für alles ein PlugIn nutzen zu müssen oder alle Formulare neu machen zu müssen, das wäre ein Horror. :)

Vielen lieben Dank nochmals. ich lösche dann deinen Benutzeraccount wieder, in Ordnung?

Liebe Grüße aus der Nähe von Berlin,
wir lesen uns bestimmt noch :)
Katharina

Antworten
Florian Brinkmann

Hi Katharina,

klar, den Account kannst du wieder löschen! :)

LG,
Florian

Antworten
kather

Hallo Florian,

ich habe da mal wieder ein Problem mit meinem Thema und komme seit Tagen nicht weiter. Kann ich dich noch einmal um Hilfe bitten?

LG
Katharina

Florian Brinkmann

Hi Katharina,

worum geht’s denn?

Viele Grüße,
Florian

kather

Wahnsinn Florian,

ich habe seit Tagen mich mit lesen und recherchieren beschäftigt um diese Kleinigkeiten zu lösen und keine Chance. Und nun alles wie gewünscht, du bist ein Künstler am PC. :)

Ich weiß nur nicht warum is_home in is_front_page umbenannt werden musste weil auf is_home keine Reaktion erfolgte, aber ist jetzt auch nicht so wichtig. Einfach genial und im Prinzip einfach wenn man es weiß. :)

Florian, ich danke dir sehr, jetzt kann ich mich weiter mit dem einrichten beschäftigen, ich muss auch noch alle Texte und Seiten übernehmen aus den alten .php´s, das ist aber weniger ein Problem...

Vielen lieben Dank Florian,
LG
katharina

Antworten
Florian Brinkmann

Das mit is_home war mein Fehler, das prüft ob die Blog-Startseite gezeigt wird, nicht die Startseite der Website ... :)
Schön, dass es jetzt funktioniert.

Viele Grüße,
Florian

Antworten
kather

Hallo Florian,

hat nur beding funktioniert. "is_home" heißt anscheinend hier "is_front_page" laut Themenersteller, der Ticker selbst ist jetzt ausgeblendet, die Leiste und das Suchfeld bleiben jedoch.

Geht es mit so einem befehl nicht die ganze leiste mit der klasse "header-sub" auszublenden? Das wäre des Rätsles Lösung.

LG
Katharina

LG
Katharina

Antworten
Florian Brinkmann

Ah, das hatte ich falsch verstanden. Habe das Gist mal aktualisiert.

Antworten
kather

Florian,

ich habe dir ein Benutzeraccount gesendet, da kannst du mal direkt im Backend nachsehen.

LG
Katharina

Antworten
Florian Brinkmann

Das Problem liegt in der header.php. Kopier dir diese also einmal in dein Child-Theme und verändere die Stelle, die wie Zeile 1 in dem Gist aussieht so, dass sie wie Zeile 3 aussieht (https://gist.github.com/FlorianBrinkmann/56a3505030ace3322377).

Das sollte es theoretisch sein.

Viele Grüße,
Florian

Antworten
kather

Noch ein Nachtrag....

hatte vergessen zu erwähnen das der Ticker (und andere Features) in dem kostenlosen "download"-Theme nicht vorhanden ist, der ist eine Premiumfunktion.

LG
Katharina

Antworten
Florian Brinkmann

Wo genau ist das im Backend aktiviert? Ist das ein Widget?

Schau mal in die header.php (oder danach in den anderen Dateien), ob du da irgendwo etwas findest mit der Klasse „news-ticker“.

Falls es ein Widget ist, könnte es in der functions.php stehen.

Ist etwas schwierig so ohne Zugriff auf die Theme-Dateien :D

Antworten
kather

Nachtrag...

die Tickerleiste ist auf allen Seiten per Themen-Backend auf aktiv gesetzt, ich will ihn nur nicht auf der Startseite. :)

LG

Antworten
kather

Hallo Florian,

ist themebasiert integriert. Wenn ich im Firebugs nachsehe habe ich eine Klassenangabe für die Leiste in der das Suchfeld und der Ticker sind. Die ganze Leiste soll ja weg auf der Startseite. Der Klassenname ist: header-sub

Du kannst den Ticker und das Suchfeld (nur auf der Startseite soll die Leiste weg weil unter dem Menü ein manueller Slider eingesetzt wurde und der Newsticker, besser die Leiste stört das Gleichgewicht) in der live-demo vom Themenabieter sehen. Hier nochmal ein Link. (http://www.mhthemes.com/demo/?theme=newsdesk)

Gleich unter der Menüleiste ist eine graue leiste mit Ticker links "NewsTopic" und das Suchfeld rechts. So weit ich sehen konnte werden die über die Klasse "header-sub" eingeblendet, ich denke also die könnte man so auch ausblenden durch den Schnipsel "endif" etc.

Ich sag ja, ich bin voll Laienahft, muss noch so viel lernen. :)

LG
Katharina

Antworten
kather

Hallo Florian,

es hat wunderbar funktioniert. Danke, ich habe mir den Code-Schnipsel gleich abgelegt.

Kann ich dich noch etwas anderes fragen was nicht zu dem Thema hier passt? Ich möchte nähmlich auf der Startseite noch eine Themen integrierte Funktion ausblenden lassen. Alles was ich habe ist dieser Schnipsel

**if *is_front_page(** :

(Betrifft den Newsticker auf der Startseite in dem verwendeten Theme)
**endif;**

und das Problem ist das gleiche. Was ist der Code? Wie wird der geschrieben?

Nochmals Danke und einen schönen Rest Sonntag
LG
Katharina

Antworten
Florian Brinkmann

Hi Katharina,

weißt du, in welcher Datei der Newsticker eingebunden wird? Oder ist das ein Plugin?

LG,
Florian

Antworten
kather

Hi Flo..(ich darf doch Flo sagen oder würde es dich stören) :),

ich probiere das gleich mals aus, ich muss nur noch schnell was zu essen machen und dann habe ich zeit dafür.

Zu dem Theme (ohne Reklame machen zu wollen) es ist das MH-Theme "Newsdesk", siehe Link (http://www.mhthemes.com/de/mh/newsdesk/), als Premium Version. Ja, ich habe ein Child-Theme davon was ich nutze. Ich bin zwar Laie aber ich versuche wenigstens einiges zu verstehen und deren Bedeutung zu erkennen. :) Wordpress mit einem schönen Theme ist günstiger als jedesmal aufwendig zu einem Programmierer gehen zu müssen bei Änderungen an der webseite, das frißt mich quasi auf und als privates Projekt ist es einfach zu teuer. deswegen habe ich mir WP genauer angeschaut und es als tauglich und benutzerfreundlich empfunden, wie gesagt, die Schweirigkeit lag bisher bei der linksetzung im Menü.

Ich gebe nachher Bescheid und sage ob es so funktioniert hat wie du beschrieben hast, erst einmal ein Danke von mir an dieser Stelle, es ist immerhin Sonntag und ein freier Tag. :)

Bis nachher, LG
Katharina

Antworten
kather

Florian, oh, so schnell geantwortet. :)

Passieren soll ein java Aufruf. Ich versuche es mal zu schreiben, mal sehen ob es durch den Filter kommt.

*a h*ref=*javascript*displaylightbox*(adresse*--Angabenbreite:800xHöhe:300})" rel**" target** title=**|hier ist der Menüpunkttext und dann schließt a wieder

So waren die Links angegeben in der Seite im Menü. es ging um das ansprechen (javascript-doppelpunkt--displaybox--alle Angaben--schließen--fertig)

LG
Katharina

Antworten
Florian Brinkmann

Hi Katharina,

probier mal das hier (https://gist.github.com/FlorianBrinkmann/1be88345ba216cf00caf).

In Zeile 5 schreibst du den JavaScript-Code, der hinter dem „javascript:“ im href-Attribut steht. Das „id-des-menueintrags“ ersetzt du durch die ID des Links.

Nutzt du ein fremdes Theme oder ist das ein extra für dich erstelltes? Falls es ein für dich erstelltes Theme ist, dann kannst du den Code erst mal einfach in die footer.php kopieren, vor den schließenden body-Tag.

Wenn es ein fremdes Theme ist, solltest du diese Anpassung in einem Child-Theme vornehmen (https://t3n.de/news/wordpress-child-themes-527723/). Da kopierst du dir dann einfach den Inhalt der footer.php des Parent-Themes und packst dann das JavaScript mit rein.

Am besten wäre, du probierst das erst mal lokal, da ich nicht hundertprozentig garantieren kann, dass das alles funktioniert wie es soll.

LG,
Florian

Antworten
kather

Florian,

noch kurz schnell das warum. Als meine Webseite manuell programmiert wurde "kostenpflichtig" benötigte ich Formulare die wiederum andere Formulare ansprechen oder an gewisse Ausgaben gebunden sind per .js. Das sind fast 20 Einzelformulare die sehr aufwendig gestaltet wurden, alle als Fancybox-aufruf so das egal was im Formular gewählt wird, alles in der gleichen Fancybox geschieht, ohne umständliches schließen und öffenen. Um eben dieses "Erstformular" (es gibt 4 Menüpunkte davon) einfach anzusprechen wurde eben im Link dieser oben beschriebene (a *h*ref...) Link gesetzt im Menü, ohne das ein User suchen musste in der Seite wo dieses Formular ist.

Euer Thema hier ist "Wordpress auf dem Seziertisch", deswegen dachte ich Ihr wüsstet wo diese Menüeingabe gesteuert wird.

Als Laie weiss ich dennoch aus Erfahrung das jedes "Inputfeld" (in dem Fall das Feld Link in dem WP-Menü) bewusst so gestaltet werden kann das z.Bsp. fehlende E-Mail erkannt wird oder ähnliches. Darum denke ich das es in WP auch so eine Input-Prüfung in dem Link-Feld gibt und diese soll eben weg damit x-beliebige Zeichenketten als Link gesetzt werden können. Das Inputfeld packt diese Eingabe eh zwischen (h*ref*"und") und gibt meine Eingabe dementsprechend richtig aus. Wenn aber meine gewünschte Eingabe nicht angenommen wird, denke ich das dort eine Prüfung stattfindet die in den Wordpress-Dateien gesteuert wird.

Alle Formulare per Plugin neu gestalten, oder umzuändern wäre zu aufwendig, es ist fast ein Horror das so eine simple Linkeingabe scheitert.

Schade,

LG
Katharina

Antworten
kather

Hallo Florian,

Danke für deine Antwort. Diese Beschreibung hatte ich schon einmal gesehen beim "googeln", aber als "unwissende oder Laienhafte" in Sachen Programiersprachen stellt sich genau da ein Problem für mich ein. Jemand der sich mit Coding gut auskennt versteht was da steht und weiß es richtig zu platzieren in der richtigen eingeklammerten Form, sprich er weiss wie so ein Code komplett auszusehen hat.

Deswegen fragte ich hier nach einer Stelle in den Wordpress Dateien wo man etwas ändern kann das eben jede Eingabe als Eingabe interpretiert wird ohne abweisung von Wordpress. :(

Als Link hatte ich immer geschrieben (z.Bsp. Druckaufruf a-hre*f-istgleich**jvsc-doppelpunkt-fenster*druck*etc oder aber a-hre*f-istgleich**jvsc-doppelpunkt-dis*pl*ay*li-box*etc) das reicht als Eingabe schon das die entsprechende Funktion aufgerufen wurde, Fancybox js und jQuery js sind alle hinterlegt im Header.

In Wordpress werden diese Link´s eben nicht angenommen, deswegen fragte ich nach der Funktion wo ich die manipulieren kann (evtl. durch löschen oder ändern von befehl) das eben jede Eingabe genommen wird.

Ich kann zwar die Menü-ID per Firebug rausbekommen und auch direkt den Menüpunkt bestimmen für deine vorgeschlagene variante, aber wie muss so ein dort angezeigeter Code richtig geschrieben sein? Das weiß ich eben nicht. :( Alle Codebeispiele die im Netz zu finden sind, sind für erfarene die wissen was davor und danach gehört, die wissen was sich hinter (//**text) verbirgt oder was dort stehen muss.

Menno, ich dachte nicht das es so schwer wird meine normal programmierte Seite über Wordpress neu zu gestalten mit dem simpelsten Aufrufproblem im Menü was es gibt.

Falls ihr doch wisst wo die Linkeingabe für das Wordpress Menü geprüft wird und wie ich die Prüfung deaktivieren kann, wäre es super, ich sagte ja, mit den Codes kann ich leider nichts anfangen, ich weiß nicht wie die richtig auszusehen haben und wohin die müssen.

Schönen sonnigen Sonntag noch an alle,
LG
Katharina

Antworten
Florian Brinkmann

Hi Katharina,

was genau soll denn bei dem Klick auf den Menüpunkt passieren? Also welche JavaScript-Aktion soll ausgeführt werden?

Antworten
kather

Hallo t3n Team,

das ist ein sehr interessanter Bericht. Mir fehlt nur eine Kleinigkeit (Aufhebung oder Entfernung einer Sperrfunktion seitens Wordpress) im Wordpress-Backend. Könnt Ihr mir als Profis auch sagen was ich im Wordpress ändern müsste um in der Backend Menüeingabe x-beliebige Zeichenketten als Ling anzugeben? Sprich, wenn ich ein Menüpunkt erstelle erlaubt Wordpress nur die Form wie wir sie alle kennen (**http://***)etc.

Ich will aber einen Menülink (benutzerdefiniert) eingeben, sprich mit .js Aufruf für Drucken oder senden etc. Leider werden diese Links in Wordpress Backend->Menü nicht angenommen. Was eigentlich Schade ist, da ein vermehrter einsatz von PlugIn´s nicht nötig wäre wenn ich .js direkt ansprechen könnte im Menü. So im Text als manueller Link ist das alles kein Problemund ich verzichte weitestgehend auf PlugIn´s, aber die Menüeingabe macht eben wegen dieser "Sperre" Probleme, wenn ich nur ein "#" eingebe erscheint das ja auch im Link im Firebug, also müsste ja auch ein .js Aufruf richtig interpretiert werden in der Ausgabe, nur eingeben kann ich den nicht.

Wisst Ihr vielleicht welche Funktion von Wordpress dafür zuständig ist das im Menü kein .js Link als Aufruf eingegeben werden kann? Kann ich das direkt irgendwo in irgendeiner Datei (egal welcher) ändern, so das jede Eingabe akzeptiert wird?

LG
Katharina

Antworten
Florian Brinkmann

Hi Katharina,

eventuell wäre es für dich eine gangbare Lösung, wenn du das Klick-Event auf den bestimmten Link abfängst, wie das hier beschrieben ist?

http://wordpress.stackexchange.com/questions/153018/add-javascript-to-wordpress-menu/153026#153026

Dann müsstest du das zwar für jeden Menüpunkt, bei dem du ein JavaScript-Event ausführen möchtest extra festlegen, aber es ist vermutlich der schnellste Weg :)

LG,
Florian

Antworten
Internet Traffic Formula Review

Remarkable! Its really amazing piece of writing, I have got much clear idea on the topic of from this piece of writing.

Antworten
Lea Weitekamp

Danke, Raffael, haben wir behoben! :)

Grüße aus der Redaktion
Lea

Antworten
Raffael

Mal ganz ab von dem Artikel, der mir persönlich gut gefällt - das Wort heißt "Seziertisch" und nicht "Serziertisch". Der Typo befindet sich direkt im Titel des Artikels. ;)

Antworten
Christian

@ Tim
Vielleicht hilft Dir da Page Builder weiter. Nutze ich selber für meine Seiten :)
http://wordpress.org/plugins/siteorigin-panels/

Antworten
Jupp

Ich würde sowas mit dem Plugin "Advanced Custom Fields" lösen.
http://www.advancedcustomfields.com/
Custom Fields sind ja schon von Haus aus dabei, aber dieses Plugin bohrt die Funktion noch um einiges auf.
Dadurch kann man komplett neue Eingabefelder im Backend hinzufügen und auch mehr als nur ein Feld pro Seite/Post. Dabei gibt es verschiedene Eingabefeld-Typen: Der normale WYSIWYG-Editor, simple Text-Felder, Checkboxen, Felder um Bilder hinzuzufügen, ...
Ob das normale Backend angezeigt wird oder das modifizierte, kann man über verschiedene Regeln festlegen.
Im Theme kann man dann die Inhalte der einzelnen Felder abfragen und damit die verschiedenen Bereiche der Seite füllen.

Antworten
Jonathan

@Tim: Alles klar, ich bin davon ausgegangen, dass die "Content-Boxen" auf jeder Seite benutzt werden sollen. Wenn dies fest definiert ist, dass diese nur auf der Startseite auftauchen sollen, wäre es natürlich eine Möglichkeit. Obwohl ich sagen muss, dass du mit Shortcodes immer flexibler bist.

Antworten
Tim

@Jonathan: Es geht nur um die Startseite, die dann ein Widget-Area bekommt. Vielleicht überleg ich mir das nochmal mit den Shortcodes.

Antworten
Jonathan

@Tim: Ich lasse alle verfügbaren Shortcodes immer im TinyMCE als Dropdown ausgeben + Beschreibung. Bisher gab es dort noch keine Beschwerden. Wie möchtest du dies denn über Widgets realisieren? Du müsstest ja für jede Seite eine neue Widget Area erstellen. Dies finde ich aber sehr unglücklich gelöst. Somit kann der Kunde keine neuen Seiten erstellen, da zuvor dem Template eine Widget Area zugewiesen werden muss. Bzw. ein neues Template angelegt werden muss.

Antworten
Tim

@Jonathan: Shortcodes sind aber für den Benutzer eine halbe Wissenschaft für sich und dieser soll nicht die ganze Zeit nachschlagen sollen. Ich werde mir eigene Widgets basteln und dann über die Widgets meine Startseite befüllen.

Antworten
Tim

Was ist denn eurer Meinung die beste Möglichkeit, eine Front-Page, die ein Grid-Layout hat, übers Backend änderbar zu machen? Also das man flexibel bestimmen kann, welche Content-Box an welcher Stelle ist, ähnlich den Widgets, nur eben 2 dimensional.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.