functions.php - WordPress-Blog

WordPress: Hinzufügen von Shortcode-Button im TinyMCE

Sehr praktisch zum Arbeiten für Redakteure sind Button für eigene angelegte WordPress Shortcodes. Diese können im TinyMCE-Editor wie folgt ergänzt und mit Dashicons verschönert werden.

Der Shortcode für dieses Beispiel lautet:

[update title="Titel des Shortcodes"]Ein Beispieltext im Shortcode[/update]

1	[update title="Titel des Shortcodes"]Ein Beispieltext im Shortcode[/update]

Das PHP Snippet für die functions.php:

add_action( 'after_setup_theme', 'kfp_child_theme_setup' );
function wby_theme_setup() {
	
	// Important for adding Custom TinyMCE Buttons
	add_action( 'init', 'wbq_buttons' );
}

if ( ! function_exists( 'wbq_buttons' ) ) {
    function wbq_buttons() {
        if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) )
            return;

        if ( get_user_option( 'rich_editing' ) !== 'true' )
            return;

        add_filter( 'mce_external_plugins', 'wbq_add_buttons' );
        add_filter( 'mce_buttons', 'wbq_register_buttons' );
    }
}

if ( ! function_exists( 'wbq_add_buttons' ) ) {
    function wbq_add_buttons( $plugin_array ) {
        $plugin_array['wbq_buttons'] = get_stylesheet_directory_uri().'/js/dashboard.js';
        return $plugin_array;
    }
}

if ( ! function_exists( 'wbq_register_buttons' ) ) {
    function wbq_register_buttons( $buttons ) {
        array_push( $buttons, 'wbq_update' );
        return $buttons;
    }
}

add_action ( 'after_wp_tiny_mce', 'wbq_tinymce_extra_vars' );

if ( !function_exists( 'wbq_tinymce_extra_vars' ) ) {
	function wbq_tinymce_extra_vars() { ?>
		<script type="text/javascript">
			var tinyMCE_object = <?php echo json_encode(
				array(
					'update_name' => esc_html__('Update', 'wbq'),
					'update_title' => esc_html__('Update Shortcode', 'wbq'),
				)
			);
			?>;
		</script><?php
	}
}

add_action( 'after_setup_theme', 'kfp_child_theme_setup' );

function wby_theme_setup() {

// Important for adding Custom TinyMCE Buttons

add_action( 'init', 'wbq_buttons' );

}

if ( ! function_exists( 'wbq_buttons' ) ) {

function wbq_buttons() {

if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) )

return;

if ( get_user_option( 'rich_editing' ) !== 'true' )

return;

add_filter( 'mce_external_plugins', 'wbq_add_buttons' );

add_filter( 'mce_buttons', 'wbq_register_buttons' );

}

if ( ! function_exists( 'wbq_add_buttons' ) ) {

function wbq_add_buttons( $plugin_array ) {

$plugin_array['wbq_buttons'] = get_stylesheet_directory_uri().'/js/dashboard.js';

return $plugin_array;

}

if ( ! function_exists( 'wbq_register_buttons' ) ) {

function wbq_register_buttons( $buttons ) {

array_push( $buttons, 'wbq_update' );

return $buttons;

}

add_action ( 'after_wp_tiny_mce', 'wbq_tinymce_extra_vars' );

if ( !function_exists( 'wbq_tinymce_extra_vars' ) ) {

function wbq_tinymce_extra_vars() { ?>

var tinyMCE_object = <?php echo json_encode(

array(

'update_name' => esc_html__('Update', 'wbq'),

'update_title' => esc_html__('Update Shortcode', 'wbq'),

)

);

?>;

</script><?php

}

Das JavaScript Snippet für die dashboard.js (der Dateiname ist nur ein Beispiel) sollte auch nur im Dashboard geladen werden:

// Add Button to TinyMCE editor
(function() {
    tinymce.PluginManager.add('wbq_buttons', function( editor, url ) {
		editor.addButton( 'wbq_update', {
            text: tinyMCE_object.update_name,
            icon: 'mce-ico mce-i-icon dashicons-flag',
			tooltip: tinyMCE_object.update_title,
            onclick: function() {
                editor.windowManager.open( {
                    title: tinyMCE_object.update_title,
                    body: [
                        {
                            type   : 'textbox',
                            name   : 'title',
                            label  : 'Title',
                            tooltip: 'Text',
                            value  : ''
                        },
                        {
                            type   : 'textbox',
                            name   : 'text',
                            label  : 'Text',
                            tooltip: 'Text',
							vakue  : 'Vakue Cobntent',
							multiline: true,
                            style  : 'min-width:300px;'
                        },                    ],
                    onsubmit: function( e ) {
                        editor.insertContent( '[update title="' + e.data.title + '"]' + e.data.text + '[/update]');
                    }
                });
            },
        });
    });

})();

// Add Button to TinyMCE editor

(function() {

tinymce.PluginManager.add('wbq_buttons', function( editor, url ) {

editor.addButton( 'wbq_update', {

text: tinyMCE_object.update_name,

icon: 'mce-ico mce-i-icon dashicons-flag',

tooltip: tinyMCE_object.update_title,

onclick: function() {

editor.windowManager.open( {

title: tinyMCE_object.update_title,

body: [

{

type : 'textbox',

name : 'title',

label : 'Title',

tooltip: 'Text',

value : ''

{

type : 'textbox',

name : 'text',

label : 'Text',

tooltip: 'Text',

vakue : 'Vakue Cobntent',

multiline: true,

style : 'min-width:300px;'

}, ],

onsubmit: function( e ) {

editor.insertContent( '[update title="' + e.data.title + '"]' + e.data.text + '[/update]');

}

});

})();

Quellen und Links

Adding shortcode button to TinyMCE editor

WordPress Dashicons: Icon-Set für das Dashboard

Dashicons ist die offizielle Icon-Schrift für das WordPress Dashboard seit Version 3.8 und bietet ein umfangreiches Icon-Set (Menüs, Medien, Pfeile, Social Media oder Produkte) zur freien Verwendung in Plugins, Widgets, Einstellungen oder für Button in dem TinyMCE.

WordPress Dashicons im Frontend

Die WordPress Dashicons können ebenso im Frontend verwendet werden. Dazu müssen diese für das Frontend mit dem Hook wp_enqueue_scripts() eingebunden werden.

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

function wbq_include_dashicons_font(){

wp_enqueue_style('dashicons');

}

add_action( 'wp_enqueue_scripts', 'wbq_include_dashicons_font', 100 );

Dieses Snippet kann in der functions.php verwendet werden.

Beispiele

Adding an icon to a header, with the dashicons-before class. This can be added right to the element with text.

<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>

1	<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>

Adding an icon to a header, with the dashicons class. Note that here, you need extra markup specifically for the icon.

<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>

1	<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>

Quellen und Links

WordPress Dashicons

WordPress Hock: Current Page Number in wp_link_pages()

Wie man die aktuelle Seitenzahl in der Funktion wp_link_pages() markiert. Diese WordPress-Funktion gibt ansonsten alle Seitenzahlen als Link und ohne Kennzeichnung der aktuellen Seite aus. Anschließend kann sie über die CSS-Klassse .current gesondert gestylt werden.

/**
 * Filter wp_link_pages to wrap current page in span.
 *
 * @param $link
 * @return string
 */
 function wbq_link_pages_current( $link ) {
   global $page;
 
   if ( strip_tags($link) == $page ) {
     return '<span class="current">' . $link . '</span>';
   }
   return $link;
 }
 add_filter( 'wp_link_pages_link', 'wbq_link_pages_current' );

/**

* Filter wp_link_pages to wrap current page in span.

* @param $link

* @return string

function wbq_link_pages_current( $link ) {

global $page;

if ( strip_tags($link) == $page ) {

return '<span class="current">' . $link . '</span>';

}

return $link;

}

add_filter( 'wp_link_pages_link', 'wbq_link_pages_current' );

Dieses WordPress Snippet könnt ihr einfach in die functions.php des Themes einfügen. Getestet mit WordPress-Version 4.8.

Um die aktuelle Seitenzahl zu bestimmen, ist die Variable $page nötig, die ihr in die Funktion mit global einbinden müsst.

The $page global variable returns the current page of a multi-page post.
The $numpages global variable returns the total number of pages in a multi-page post.

Die Ausgabe der Funktion wp_link_pages() erfolgt in dieser Form:

wp_link_pages(
  array(
    'before'=>'<div class="post-pages">'.__('Pages:','THEME'),
    'after'=>'</div>',
    'next_or_number' => 'number',
    'pagelink' => '%',
    'separator' => '|'
  )
);

wp_link_pages(

array(

'before'=>'<div class="post-pages">'.__('Pages:','THEME'),

'after'=>'</div>',

'next_or_number' => 'number',

'pagelink' => '%',

'separator' => '|'

)

);

Beispiel: Pages: 1 | 2 | 3 | 4

Möchte ihr zur nächsten oder vorherigen Seite verlinken verwendet ihr diese Funktion in dieser Form:

wp_link_pages(
  array(
    'before'=>'<div class="post-pages">',
    'after'=>'</div>',
    'next_or_number' => 'text',
    'separator' => '|',
  )
);

wp_link_pages(

array(

'before'=>'<div class="post-pages">',

'after'=>'</div>',

'next_or_number' => 'text',

'separator' => '|',

)

);

Beispiel: Vorherige Seite | Nächste Seite

Quellen und Links

WordPress: FlexSlider in Standard-Galerie Shortcode [gallery] ersetzen

Die Standard-Galerie in WordPress wird durch das Shortcode gallery erzeugt. Für die Ausgabe kann man dieses durch einen Slider (z.B. den bliebten jQuery FlexSlider von WooThemes) ersetzen.

Wir haben es getestet und in einem Projekt umgesetzt.

Quellen und Links

WordPress Theme: Menüs registrieren und ausgeben

In WordPress lassen sich sehr einfach eigene Menüs in einem WordPress Theme registrieren und an beliebiger Stelle im Theme (z.B. in Header oder Footer) ausgeben. Die Funktionen register_nav_menus() und wp_nav_menu() sind die bequeme Basis dafür.

WordPress Menü registrieren

Mit folgendem Snippet in der functions.php können neue Menüs (footer-menu und header-menu) in einem WordPress Theme registriert werden. In dem PHP Array array(Menu 1, Menu 2, …, Menu n) kann dies sehr schnell um sehr viele Menüs ergänzt werden.

function wbq_register_menus() {
  register_nav_menus(
    array(
      'footer-menu' => __( 'Footer Menu' ),
      'header-menu' => __( 'Header Menu' )
    )
  );
}
add_action( 'init', 'wbq_register_menus' );

function wbq_register_menus() {

register_nav_menus(

array(

'footer-menu' => __( 'Footer Menu' ),

'header-menu' => __( 'Header Menu' )

)

);

}

add_action( 'init', 'wbq_register_menus' );

WordPress Menü ausgeben

Die Ausgabe der Menüs erfolgt über die Funktion wp_nav_menu() an der Position, wo es ausgegeben werden soll, z.B. in den Template-Dateien footer.php oder header.php.

wp_nav_menu(
  array(
   'theme_location' => 'footer-menu'
  )
);

wp_nav_menu(

array(

'theme_location' => 'footer-menu'

)

);

Quellen und Links

WordPress Theme: Widget Area hinzufügen

WordPress Widget Areas sind eine ideale Möglichkeit neue Bereiche in der Webseite (korrekt im jeweiligen WordPress Theme) zu schaffen, um Inhalte (auch optional) einzufügen oder später zu bearbeiten.

What is Widgetizing?
Widgetizing is a pseudo word that describes the process of implementing Widgets and Widget Areas into your Theme.

Ursprünglich war das Widgetizing für die Blog-Sidebar gedacht, es ist jedoch an jeglicher Stelle im Theme möglich, durch eine Widget Area einen neuen Platzbereich zu schaffen. In dieser Widget Area können alle zur Verfügung stehenden Widgets (Text-Widget, Individuelle Menüs oder andere spezielle Widgets von externen Plugins) integriert werden.

WordPress Widget Area registrieren

register_sidebar( 
  array(
    'name' => __( 'New Widget Area', 'textdomain' ),
    'id' => 'new-widget-area',
    'description' => __('Description of the Area. Output in Backend.', 'textdomain'),
    'before_widget' => '<section id="%1$s" class="widget %2$s new-area-class">',
    'after_widget' => '</section>',
    'before_title' => '<h2 class="widget-title widgettitle new-area-title-class">',
    'after_title' => '</h2>'
  )
);

register_sidebar(

array(

'name' => __( 'New Widget Area', 'textdomain' ),

'id' => 'new-widget-area',

'description' => __('Description of the Area. Output in Backend.', 'textdomain'),

'before_widget' => '<section id="%1$s" class="widget %2$s new-area-class">',

'after_widget' => '</section>',

'before_title' => '<h2 class="widget-title widgettitle new-area-title-class">',

'after_title' => '</h2>'

)

);

Sobald dieses Snippet in die functions.php des Themes eingefügt ist, steht dieser neue Widget Bereich im Backend unter Themes > Widgets für alle angelegten Widgets bereit und kann mit diesen gefüllt werden. Von diesen Dynamic Sidebars können unzählig viele registriert werden, allerdings mit eigener ID (intern wichtig) und Namen (dieser wird im Backend ausgegeben). Eine Beschreibung und weitere Parameter (class, before_widget etc.) können optional ergänzt werden.

Widget Area im Theme ausgeben

Die Widget Area (Dynamic Sidebar) kann im Theme in die verschiedenen Templates (z.B. sidebar.php, header.php oder footer.php) mit folgendem Snippet platziert werden. Mit der if-Bedingung vorweg wird geprüft, ob die Sidebar aktiv ist, also ein Widget enthalten ist.

<?php if ( is_active_sidebar( 'new-widget-area' ) ) : ?>
  <?php dynamic_sidebar( 'new-widget-area' ); ?>
<?php endif; ?>

<?php if ( is_active_sidebar( 'new-widget-area' ) ) : ?>

<?php dynamic_sidebar( 'new-widget-area' ); ?>

<?php endif; ?>

Du hast Tipps, Vorschläge oder Fragen dazu? Dann schreibe uns einen Kommentar unter diesen Beitrag!

Quellen und Links

PHP Warning: Illegal String Offset Error

Nach der Umstellung von PHP 5.4 und höher immer mal wieder eine Fehlerursache: PHP Warning: Illegal string offset.

Beispiel:

if( $array['index'] !== '' ){

1	if( $array['index'] !== '' ){

PHP Fehlerausgabe: Warning: Illegal string offset in [‚index‘] in www/root/file.php:28.

Lösung:

if( is_array($array) && $array['index'] !== '' ){

1	if( is_array($array) && $array['index'] !== '' ){

Erst das Array prüfen und dann den Index abfragen. Fertig!

Weitere Lösungen, auch speziell für WordPress, sind unter Fix PHP Illegal String Offset Error zu finden.

WordPress: E-Mail, wenn eine Beitrag aktualisiert wurde

Wer ihr mit mehreren Mitarbeitern an einem Blog schreibt oder arbeitet, möchte ihr auch auf dem neuesten Stand der Beiträge bleiben. Folgendes Snippet schickt eine E-Mail an den Administrator, wenn ein Beitrag aktualisiert wurde.

Manchmal hilfreich, wenn zu viele Änderungen anstehen, kann es auch zu einer Meldungsflut kommen. Wer es braucht, kann diesen Code verwenden, austesten oder auch erweitern. Das Snippet kann in der z.B. in der functions.php eines WordPress Themes verwendet werden.

function post_updated_email( $post_id ) {
 global $current_user;
 get_currentuserinfo();
 
 // If this is just a revision, don't send the email.
 if ( wp_is_post_revision( $post_id ) )
 return;
 $post_title = strip_tags(get_the_title( $post_id ));
 $post_url = get_permalink( $post_id );
 $subject = '[UPDATE] ' . $post_title ;
 $message = __('Update by ', 'domain') . $current_user-&gt;display_name . ' ('.date('c', current_time( 'timestamp', 0 )).')' . "\n\n";
 $message .= $post_title . ": " . $post_url;
 $message .= "\n\n" . __('Update in Post.', 'domain');
 
 $headers = 'From: '.get_bloginfo('name').' &lt;' . get_bloginfo('admin_email') . '&gt;' . "\r\n";
// Send email to admin.
 wp_mail( get_bloginfo('admin_email'), $subject, $message, $headers );
}
add_action( 'save_post', 'post_updated_email' );

function post_updated_email( $post_id ) {

global $current_user;

get_currentuserinfo();

// If this is just a revision, don't send the email.

if ( wp_is_post_revision( $post_id ) )

return;

$post_title = strip_tags(get_the_title( $post_id ));

$post_url = get_permalink( $post_id );

$subject = '[UPDATE] ' . $post_title ;

$message = __('Update by ', 'domain') . $current_user->display_name . ' ('.date('c', current_time( 'timestamp', 0 )).')' . "\n\n";

$message .= $post_title . ": " . $post_url;

$message .= "\n\n" . __('Update in Post.', 'domain');

$headers = 'From: '.get_bloginfo('name').' <' . get_bloginfo('admin_email') . '>' . "\r\n";

// Send email to admin.

wp_mail( get_bloginfo('admin_email'), $subject, $message, $headers );

}

add_action( 'save_post', 'post_updated_email' );

Wer weitere Hilfe beim Einbinden oder Ausprobieren benötigt, kann sich gerne melden. Eure Erfahrungen sind ebenfalls gefragt.

WordPress: Suchergebnisse filtern, Posts oder Pages ausschließen

Bei der Standardsuche in WordPress werden automatisch alle Beiträge (Posts) und Seiten (Pages) durchsucht und bei einem Treffer ausgegeben. Um diese internen Suchergebnisse vorab zu filtern und nur eine von beiden Beitragstypen zu durchsuchen, könnt ihr folgenden Filter in die functions.php eurer WordPress Themes einsetzen.

function custom_search_filter($query) {
 if ($query->is_search) {
 $query->set('post_type', 'post');
 }
 return $query;
}
add_filter('pre_get_posts','custom_search_filter');

function custom_search_filter($query) {

if ($query->is_search) {

$query->set('post_type', 'post');

}

return $query;

}

add_filter('pre_get_posts','custom_search_filter');

Durch dieses Snippet werden nur Posts bei der Suche berücksichtigt.

WordPress Core Funktion existiert im WordPress Theme

Nach dem Update von WordPress 4.2 fanden wir den Fall vor, dass eine Funktion im WordPress Code neu hinzukam, die auch im verwendeten Theme schon definiert war.

Fatal error: Cannot redeclare get_avatar_url() (previously declared in /home/blog/wordpress/wp-includes/link-template.php:3414) in /home/blog/wordpress/wp-content/themes/…/functions.php on line 123

Um diese Problem auszuschließen, bietet sich bei neuen Funktionen im Theme die Prüfung an, ob diese bereits existiert.

Der folgende Code-Schnippsel zeigt dies exemplarisch.

if ( ! function_exists( 'my_new_awesome_function' ) ) {
/**
 * My new function is awesome
 *
 * @param array $args
 * @return array
 */
function my_new awesome_function( $args ) {
  // function stuff
  return array();
  }
}

if ( ! function_exists( 'my_new_awesome_function' ) ) {

/**

* My new function is awesome

* @param array $args

* @return array

function my_new awesome_function( $args ) {

// function stuff

return array();

}

Wie würdet ihr dieses Problem lösen?