Widget der Schlagwörter-Wolke anpassen

In der Theme-Entwicklung kann es interessant sein, das Widget Schlagwörter-Wolke anzupassen. Dabei stehen die gleichen Parameter zu Verfügung, wie wenn die Wolke via wp_tag_cloud in das Theme integriert wird. In diesem Beispiel wird die Anzahl der Schlagwörter auf 24 begrenzt.

add_filter( 'widget_tag_cloud_args' , 'tag_cloud_args' );

function tag_cloud_args($args) {
  $args = array(  'number' => 24 );
  return $args;
}

Dashicons: Native WordPress-Icons im Theme nutzen

Die Icons im Administrationsbereich von WordPress entstammen seit Version 3.8 einer eigenen Schriftart, die unter GPL lizenziert ist. Die Dashicons lassen sich nicht nur bei der Pluginentwicklung für das Backend, sondern auch im Frontend einsetzen.

functions.php

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Alternativ kann wp_enqueue_style( 'dashicons' ); in den bereits bestehenden Hook des Themes eingebunden werden.

style.css

Einbinden des WordPress-Logos vor allen Überschriften erster Ebene <h1>.

h1:before {
    content: "\f120";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 1em 'dashicons';
    vertical-align: top;
}

Codestyling mit Prism ohne Plugin umsetzen

Das Plugin SyntaxHighlighter Evolved ist eine der Standardlösungen, wenn es um das Formatieren von Quellcode geht. Dieser Weg kann allerdings gehörig auf die Performance drücken. Eine Alternative ist das Codestyling mit dem jeweiligen Theme zu verknüpfen und eine kleinere JavaScript-Bibliothek wie Prism oder highlight.js zu nutzen.

Das Beispiel geht unter Verwendung der Bibliothek Prism davon aus, dass die Dateien prism.js und prism.css im Themeordner abgelegt werden. Außerdem soll der visuelle Editor zum komfortablen Formatieren angepasst werden.

functions.php

// Prism JS und CSS einbinden
function codestyling_scripts_styles() {
 wp_register_script( 'prism', get_template_directory_uri() . '/prism.js', '', '0.1', true );
 wp_enqueue_script( 'prism' );
 wp_register_style( 'prism', get_template_directory_uri() . '/prism.css', false, '0.1', 'screen' );
 wp_enqueue_style( 'prism' );
 }
add_action( 'wp_enqueue_scripts', 'codestyling_scripts_styles' );

// TinyMCE-Editor anpassen
function mce_mod( $init ) {
$init['block_formats'] = 'Paragraph=p;Pre=pre;Code=code;Heading 2=h2;Heading 3=h3;Heading 4=h4;Blockquote=blockquote';
$style_formats = array(
array( 'title' => 'CSS', 'block' => 'code', 'classes' => 'language-css'),
array( 'title' => 'HTML/XHTML', 'block' => 'code', 'classes' => 'language-markup' ),
array( 'title' => 'PHP', 'block' => 'code', 'classes' => 'language-php' ),
array( 'title' => 'JavaScript', 'block' => 'code', 'classes' => 'language-javascript' ),
array( 'title' => 'HTTP', 'block' => 'code', 'classes' => 'language-http' ));
$init['style_formats'] = json_encode( $style_formats );
return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');
function mce_add_buttons( $buttons ){
array_splice( $buttons, 1, 0, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Referenz

Kommentar-Formular mit comment_form anpassen

comments.php

comment_form();

ersetzen durch

$comments_fields =  array(
  'author' =>
    '<p class="comment-form-author"><label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="25"' . $aria_req . ' /></p>',
  'url' =>
    '<p class="comment-form-url"><label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
    '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
    '" size="25" /></p>',
);
$comments_args = array(         
    // Titel des Formulars
    'title_reply'=>'Anmerkung oder Frage schreiben',
    // Titel bei Antwort auf einen anderen Kommentar
    'title_reply_to'=>'%s antworten',
    // Text vor dem Formular
    'comment_notes_before' => '',
    // Kommentarfelder Autor, URI
    'fields' => apply_filters( 'comment_form_default_fields', $comments_fields ),
    //Kommentarfeld
    'comment_field'=>'<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
    // Text hinter dem Formular
    'comment_notes_after' => '<p class="comment-notes">Jeder Beitrag wird von Hand freigeschaltet.
    Mit dem Absenden Ihres Kommentars willigen Sie ein, dass der angegebene Name im Zusammenhang mit Ihrem Kommentar und ggf. Ihrer Website gespeichert wird.</p>',
    // Senden-Schaltfläche
    'label_submit'=>'Absenden'
  );
comment_form($comments_args);

Das E-Mail-Feld wurde in diesem Beispiel entfernt.

functions.php

Alternativ zur Defintion der Felder Autor, URI usw. über das Array $comments_fields lassen sich diese über eine Funktion in der functions.php deaktivieren.

function remove_comment_fields($fields) {
unset($fields['email']);
unset($fields['url']);
return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

Wer die Kommentarfunktion dann noch datensparsamer machen möchte, kann die Kommentare ohne IP-Adresse speichern lassen. Ein angepasstes Kommentarformular soll sich außerdem positiv auf das SPAM-Aufkommen auswirken, da die SPAM-Bots nach bestimmten Schlüsselbegriffen wie z. B. den erlaubten HTML-Tags suchen.

Referenz

Erweiterte Autoreninformationen ohne Plugin anzeigen

Realisiert werden soll die Anzeige von Autoreninformationen in der Einzelansicht von Beiträgen ohne Plugin. Folgende Punkte sollen angezeigt bzw. beachtet werden:

  • Links zur Website des Autors und ggf. sozialen Netzwerken, sofern diese Informationen im Profil angegeben sind
  • bisher verfasste Beiträge verlinkt mit dem individuellen Archiv des Autoren
  • Ausgabe des Website-Namens im Text via Abfrage, damit die Lösung variabel einsetzbar ist

Über die functions.php oder via Plugin werden benutzerdefinierte Autorenangaben möglich. In einer Multisite-Umgebung präferiere ich den Einsatz dieser Kontaktangaben netzwerkweit, also über ein Must-Use-plugin zu definieren. Zur Übersichtlichkeit auf der Profil-Seite werden dort zunächst AIM, Jabber und YIM deaktiviert.

function custom_contactmethods( $contactmethods ) {
  unset($contactmethods['aim']);
  unset($contactmethods['jabber']);
  unset($contactmethods['yim']);
  $contactmethods['twitter'] = 'Twitter';
  $contactmethods['facebook'] = 'Facebook';
  $contactmethods['xing'] = 'XING';
  return $contactmethods;
}
add_filter('user_contactmethods','custom_contactmethods',10,1);

single.php

<div class="postauthor">
  <p class="postauthorabout">&Uuml;ber den Autor<p>
  <h2><?php the_author(); ?></h2>
  <p class="postauthorbio"><?php if(get_the_author_meta('description') != NULL) { ?><?php the_author_meta('description'); ?> <?php } ?>
  Auf <?php bloginfo('name'); ?> stammen <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Alle Beitr&auml;ge von <?php the_author(); ?>"><?php the_author_posts(); ?> Beitr&auml;ge</a> aus der Feder von <?php the_author_meta('user_firstname'); ?>.</p>
  <p class="postauthorlinks">
  <?php if(get_the_author_meta('user_url') != NULL) { ?><a href="<?php the_author_meta('user_url'); ?>">Website</a> <?php } ?>
  <?php if(get_the_author_meta('facebook') != NULL) { ?><a href="<?php the_author_meta('facebook'); ?>">Facebook</a> <?php } ?>
  <?php if(get_the_author_meta('twitter') != NULL) { ?><a href="<?php the_author_meta('twitter'); ?>">Twitter</a> <?php } ?>
  <?php if(get_the_author_meta('xing') != NULL) { ?><a href="<?php the_author_meta('xing'); ?>">XING</a> <?php } ?>
  </p>
</div>

style.css

.postauthorabout { font-size:0.8em; }
.postauthorabout, .postauthorlinks { font-variant:small-caps; }
.postauthorbio { margin:0 0 0.8em 0; }
.postauthorlinks { font-weight:bold; }
.postauthorlinks a { margin:0 0.4em 0 0; }

Ergebnis

So kann das Ganze dann aussehen:

Autoreninformationen Screenshot

Referenz

Artikelbild mit Zufalls-Bild als Fallback

  • start.php mit benutzerdefinierter Startseite auf der eine eigene Version des Artikelbilds (homepage-thumbnail) ausgegeben werden soll
  • single.php mit entsprechendem Artikelbild
  • ein Ordner /images/artikelbild/start/ im Theme-Ordner, in dem Bilder 1.jpg, 2.jpg und 3.jpg in den passenden Dimensionen des homepage-thumbnail abgelegt sind
  • ein Ordner /images/artikelbild/single/ im Theme-Ordner, in dem Bilder 1.jpg, 2.jpg und 3.jpg in den passenden Dimensionen des post-thumbnail abgelegt sind
  • hat ein Artikel kein Artikelbild, wird automatisch mittels Zufallsfunktion eines der Bilder aus den Ordnern angezeigt

functions.php

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 600, 200, true );
add_image_size( 'homepage-thumbnail', 290, 120, true );

start.php

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php if ( has_post_thumbnail() )
{ the_post_thumbnail( 'homepage-thumbnail', array('class' => 'homepage-thumbnail') ); }
else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/artikelbild/start/<?php echo mt_rand(1, 3); ?>.jpg" alt="<?php the_title(); ?>" class="homepage-thumbnail" />
<?php } ?></a>

single.php

<?php if ( has_post_thumbnail() )
{ the_post_thumbnail( 'post-thumbnail', array('class' => 'single-thumbnail') ); }
else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/artikelbild/single/<?php echo mt_rand(1, 5); ?>.jpg" alt="<?php the_title(); ?>" class="single-thumbnail" /><?php } ?>

Anpassen