Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: Moderne Theme-Entwicklung mit Action Hooks

Richtig gute WordPress-Themes zu entwickeln ist eine echte Herausforderung. Doch auch das vermeintlich einfache Anpassen bereits vorhandener Themes kann schnell für graue Haare sorgen.

Kategorien
WordPress

WordPress: Diese Funktionen kennst du noch nicht!

Natürlich kennst du dich mit WordPress gut aus. Vielleicht nutzt du es bereits genauso lang wie ich. Auch ich werde ab und an überrascht, mit welch coolen Funktionen WordPress mittlerweile daherkommt.

Kategorien
E-Business E-Commerce Tipps, Tricks & Tutorials WordPress

WooCommerce: Die besten Code-Schnipsel zum eCommerce mit WordPress

In meinem Beitrag zu den nützlichsten WordPress-Snippets hatte ich ja schon angekündigt, dass noch ein Artikel zu den besten WooCommerce-Snippets folgen wird. Et voilà, hier kommen also meine besten Schnipsel zu WooCommerce.

Den einen oder anderen Schnipsel wirst du bereits kennen, doch ich bin überzeugt, dass ich dir auch Neues zeigen kann. Daher findest du hier die besten Snippets in einem Beitrag zusammengefasst.

Kompatibilität:

  • WordPress Version ab 4.6
  • WooCommerce Version ab 3.xx
  • PHP-Version 7.xx

Die Snippets kopierst du entweder in die functions.php deines aktiven Themes oder legst dir ein seitenspezifisches Plugin für diesen Job an.

Bitte das öffnende <?php nicht mit kopieren.

[blaue-box text=“ Bitte beachten: Mache dir vor jeder Änderung an der functions.php ein Backup der Datei. Ändere die Datei nicht über den Editor von WordPress. Geht etwas schief, hast du keinen Zugriff mehr auf deine Website. Führe deine Ergänzungen über einen FTP-Zugriff direkt auf deinem Webhosting durch.“] [promo-box headline=“Das könnte hilfreich für dich sein:“ linkeins=“https://docs.woocommerce.com/documentation/plugins/woocommerce/“ texteins=“Die WooCommerce Dokumentation“ linkzwei=“https://businessbloomer.com/category/woocommerce-tips/visual-hook-series/“ textzwei=“Der visuelle WooCommerce Hook Guide“ linkdrei=“https://docs.woocommerce.com/wc-apidocs/“ textdrei=“Die WooCommerce 3.0.x Code Reference“]

1 – WooCommerce Support für dein Theme sicherstellen

Falls dein eingesetztes Theme nicht für den Einsatz mit WooCommerce vorbereitet ist, solltest du an diesem Punkt starten und den Support sicherstellen. Nur dann ist gewährleistet, dass dein neuer Shop auch optimal angezeigt wird. Dieser Bereich besteht aus drei Teilen.

Teil eins: Zuerst deklarierst du den Support für dein Theme und fügst eine Produkt-Lightbox hinzu, wenn du möchtest.

<?php

/**
* Theme Support für WooCommerce
*/
add_theme_support( 'woocommerce' );  

/**
 * Add Theme Support for WooCommerce Gallery Lightbox
 */ 
add_theme_support( 'wc-product-gallery-lightbox' );


Teil zwei:
Du entfernst die öffnenden und schließenden Container-DIVs von WooCommerce aus den Templates des Plugins.

<?php

//remove function attached to woocommerce_before_main_content hook
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );

//remove function attached to woocommerce_after_main_content hook
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );


Teil drei:
Du ersetzt die DIVs mit denen, die dein Theme verwendet. Dazu musst du zuerst herausfinden, wie die Container-DIVs deines Themes benannt sind. Ein Rechtsklick auf deine Website und »Element untersuchen« kann hilfreich sein.

Finde deine Inhalts-Container heraus. Bei mir wären es die beiden markierten.

Danach füge diese Container in den folgenden Code ein:

<?php

if ( ! function_exists( 'evolution_wrapper_start' ) ) :
/**
 * Adding theme's starter container for WooCommerce support
 */
function evolution_wrapper_start() {
    
echo '<div id="primary" class="content-area"><main id="main" class="site-main" role="main">';
    
}
add_action( 'woocommerce_before_main_content', 'evolution_wrapper_start', 10 );
endif;



if ( ! function_exists( 'evolution_wrapper_end' ) ) :
/**
 * Adding theme's ending container for WooCommerce support
 */
function evolution_wrapper_end() {
    
    echo '</div></main>';
}
add_action( 'woocommerce_after_main_content', 'evolution_wrapper_end', 10 );
endif;

Nun sollte dein Shop genauso gut dargestellt werden wie der Rest deines Themes.

2 – WooCommerce Breadcrumbs durch die von Yoast SEO ersetzen

Sehr viele WordPress-Fans nutzen die Breadcrumb-Navigation des beliebten Yoast SEO-Plugins. Die kannst du durchaus auch auf den WooCommerce-Seiten einsetzten. Dieses Snippet erledigt den Job:

<?php

if ( ! function_exists( 'evolution_replace_breadcrumbs' ) ) :
/**
 * Replace WooCommerce Breadcrumbs with Yoast breadcrumbs
 */
function evolution_replace_breadcrumbs() {

    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
    

    function evolution_yoast_breadcrumb() {

        if ( function_exists('yoast_breadcrumb') ) { 
            yoast_breadcrumb('<nav class="woocommerce-breadcrumb">','</nav>');
        }
    }
}
add_action( 'init', 'evolution_replace_breadcrumbs' );
endif;

3 – Ändere die Anzahl der angezeigten Produkte in einer Reihe

Standardmäßig zeigt WooCommerce vier Produkte in einer Reihe an. Das kannst du ganz komfortabel ändern.

<?php

/**
 * Change number of products per row to 3
 */ 
if (!function_exists('evolution_loop_columns') ) {

    function evolution_loop_columns() {
        return 3; // 3 Produkte in einer Reihe
    }
}
add_filter('loop_shop_columns', 'evolution_loop_columns');

4 – Ändere die Anzahl der ähnlichen Produkte

Du kannst selbst bestimmen, wie viele »Related Products« dein Theme anzeigt. Das kann manchmal durchaus praktisch sein.

<?php

/**
 * WooCommerce Extra Feature
 * --------------------------
 *
 * Change number of related products on product page
 * Set your own value for 'posts_per_page'
 *
 */ 
if (!function_exists('evolution_related_products_args') ) {

    function evolution_related_products_args( $args ) {

        $args['posts_per_page'] = 4; // 4 ähnliche Produkte
        $args['columns'] = 4; // Alle vier in einer Reihe
        return $args;

    }
}
add_filter( 'woocommerce_output_related_products_args', 'evolution_related_products_args' );

5 – Bestimme, wie viele Produkte auf einer Seite angezeigt werden sollen

Solltest du entweder sehr viele Produkte oder sehr wenige in deinem Shop anbieten, dann wäre es vielleicht sinnvoll, die Anzahl der Produkte pro Seite zu bestimmen.

<?php

/**
 * Custom Product Cols
 * @return 12 Products per Page
 */
if (!function_exists('evolution_loop_shop_per_page') ) {

    function evolution_loop_shop_per_page( $cols ) {

        $cols = 12;
        return $cols;

    }
}
add_filter( 'loop_shop_per_page', 'evolution_loop_shop_per_page', 20 );

6 – Andere Versandarten ausblenden, wenn kostenloser Versand ausgewiesen ist

Du bietest deinen Kunden einen kostenlosen Versand der Produkte an? Dann solltest du diesen Code verwenden, denn WooCommerce zeigt alle Versandarten im Kassenbereich an.

<?php

/**
 * Hide shipping rates when free shipping is available.
 * Updated to support WooCommerce 2.6 Shipping Zones.
 *
 * @param array $rates Array of rates found for the package.
 * @return array
 */
if (!function_exists('evolution_hide_shipping_when_free_is_available') ) {

    function evolution_hide_shipping_when_free_is_available( $rates ) {
        $free = array();
        foreach ( $rates as $rate_id => $rate ) {
            if ( 'free_shipping' === $rate->method_id ) {
                $free[ $rate_id ] = $rate;
                break;
            }
        }
        return ! empty( $free ) ? $free : $rates;
    }
}
add_filter( 'woocommerce_package_rates', 'evolution_hide_shipping_when_free_is_available', 100 );

7 – WooCommerce CSS- und JavaScript-Dateien nur auf Shop-Seiten laden

WooCommerce lädt seine Dateien auf jeder Seite deiner Website, auch auf der Homepage, den Seiten und den Beiträgen. Erstens ist das nicht sinnvoll, zweitens macht es deine Website natürlich auch langsamer. Verwende daher diesen Schnipsel. Er sorgt dafür, das WooCommerce-Dateien nur dort geladen werden, wo sie gebraucht werden.

<?php

if (!function_exists( 'evolution_manage_woocommerce_styles' ) ) :
/**
* Optimize WooCommerce Scripts
* Removes WooCommerce styles and scripts from non WooCommerce pages.
*/  
function evolution_manage_woocommerce_styles() {

    //first check that woo exists to prevent fatal errors
    if ( function_exists( 'is_woocommerce' ) ) {

        //dequeue scripts and styles
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {          
            wp_dequeue_style( 'woocommerce-layout' );
            wp_dequeue_style( 'woocommerce-smallscreen' );
            wp_dequeue_style( 'woocommerce-general' );
            wp_dequeue_style( 'evolution-woostyles' );
            wp_dequeue_script( 'wc_price_slider' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-add-to-cart' );
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'wc-checkout' );
            wp_dequeue_script( 'wc-add-to-cart-variation' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-cart' );
            wp_dequeue_script( 'wc-chosen' );
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'prettyPhoto' );
            wp_dequeue_script( 'prettyPhoto-init' );
            wp_dequeue_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-placeholder' );
            wp_dequeue_script( 'fancybox' );
            wp_dequeue_script( 'jqueryui' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'evolution_manage_woocommerce_styles', 99 );
endif;

8 – Verwende eine eigene Sidebar auf den Shopseiten

Circa 95% aller Entwickler wissen nicht, wie man diese Anforderung ohne ein Überschreiben von WooCommerce-Templates lösen kann. Du wirst auch im Internet kaum eine Lösung für dieses Problem finden, denn auch dort wird dir ein Überschreiben der Templates vorgeschlagen.

Daher lernst du heute ein Geheimnis von mir :-) Denn ab sofort löst du das Problem wie ein Jedi-Meister, und nicht wie ein Padawan.

Teil eins: Lege eine neue Sidebar für die WooCommerce-Seiten an

<?php

if (!function_exists( 'evolution_woo_sidebar_init' ) ) :
/**
 * Eine neue Sidebar nur für die Shop-Seiten registrieren
 */
function evolution_woo_sidebar_init() {
    
    register_sidebar( array(
        'name'          => esc_html__( 'WooCommerce Sidebar', 'evolution' ),
        'id'            => 'woocommerce',
        'description'   => esc_html__( 'Dies ist die Sidebar für deinen WooCommerce Shop.', 'evolution' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
    ) );
}
add_action( 'widgets_init', 'evolution_woo_sidebar_init' );
endif;

Teil zwei: Lege eine WooCommerce-Sidebar Datei an

Damit die neue Sidebar auch genutzt werden kann, benötigen wir eine neue Theme-Datei. Lege eine leere Datei mit dem Namen sidebar-woocommerce.php an. Dazu nutzt du bitte einen HTML-Editor.

Die HTML-Container übernimmst du aus deiner sidebar.php. Füge nun den folgenden Code in die Datei ein und lade sie per (S)FTP in deinen Theme- oder Child-Theme-Ordner hoch.

<?php
/**
 * The sidebar containing the woocommerce widget area.
 *
 * @package Evolution Framework
 */
if (   ! is_active_sidebar( 'woocommerce' ) ) {
    return;
}
?>
<?php // Wichtig: die HTML-Container kopierst du aus deiner sidebar.php ?>
<div id="secondary" class="sidebar-area" role="complementary">

    <div class="normal-sidebar widget-area">

        <?php if ( is_active_sidebar( 'woocommerce' ) ) : ?>

        <?php dynamic_sidebar( 'woocommerce' ); ?>

        <?php endif; ?>

    </div><!-- .normal-sidebar -->

</div><!-- #secondary -->

Teil drei: Tausche auf den Shop-Seiten die Sidebars aus

Für den Austausch der beiden Sidebars sorgt die Original-Funktion des WooCommerce-Frameworks. Diese Funktionen wurden alle »Pluggable« geschrieben. Das bedeutet, das man diese Funktionen leicht überschreiben kann.

Eine überschreibbare Funktion sieht so aus:

<?php

if (!function_exists( 'eine_tolle_funktion' ) ) :
/**
 * Eine Funktion ueberschreibbar machen
 */
function eine_tolle_funktion() {
    
    
}
add_action( 'tolle_funktion', 'eine_tolle_funktion' );
endif;

Das if (!function_exists( 'eine_tolle_funktion' ) ) : sagt aus, das die Funktion nur ausgeführt wird, falls es noch keine Funktion dieses Namens geben sollte. Existiert hingegen eine Funktion dieses Namens bereits, wird die Funktion nicht ausgeführt. Das sorgt dafür, dass du diese Funktionen leicht überschreiben kannst. Und genau das werden wir nun tun.

Die Sidebar tauschen: Das Snippet

Das folgende Snippet sorgt dafür, dass auf deinen Shop-Seiten nun die WooCommerce-Sidebar anstatt der normalen Sidebar angezeigt wird.

<?php

/**
 * Get the spezial sidebar for the WooCommerce Templates
 * DO NOT CHANGE THIS FUNCTION, or the WooCommerce Sidebar will not work.
 * 
 * @overrides the woocommerce function
 * 
 * @hooked woocommerce_sidebar()
 */
function woocommerce_get_sidebar() {
    
    get_template_part( 'sidebar-woocommerce' );
    
}

Nun wird auf allen Shop-Seiten die Datei sidebar-woocommerce.php anstatt deiner sidebar.php aufgerufen und du kannst beide Sidebars mit verschiedenen Inhalten bestücken. Übrigens: eine weitere Möglichkeit lernst du in unsrem Artikel über das Evolution WordPress Framework kennen.

9 – WooCommerce-Checkout: Mache aus der Telefonnummer eine freiwillige Angabe

Die Angabe der Telefonnummer beim Checkout ist ein Pflichtfeld. Das wird mit Sicherheit einigen potenziellen Kunden nicht gefallen. Daher sorgt das folgende Snippet dafür, das diese Angabe freiwillig ist.

<?php

if (!function_exists( 'evolution_phone_no_pflicht' ) ) :
/**
 * Make the phone number a optional entry
 * 
 * @hooked woocommerce_billing_fields()
 * 
 * @return filter
 */
function evolution_phone_no_pflicht( $address_fields ) {
    
    $address_fields['billing_phone']['required'] = false;

    return $address_fields;
}
add_filter( 'woocommerce_billing_fields', 'evolution_phone_no_pflicht', 10, 1 );
endif;

10 – Prozentuale Ersparnis bei Angeboten anzeigen

Steigere die psychologische Anregung zum Kauf, indem du eine prozentuale Ersparnis bei deinen Angeboten anzeigst.

<?php

if ( !function_exists( 'evolution_custom_sales_price' ) ) :
/**
 * Show percent savings on sale - Only for WooCommerce version 3.0+
 * 
 * @add filter to products
 * 
 * @return filter
 */
function evolution_custom_sales_price( $price, $regular_price, $sale_price ) {
    
    $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
    
    $percentage_txt = __(' Spare ', 'evolution' ).$percentage;
    
    $price = '<del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del> <ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) . $percentage_txt : $sale_price . $percentage_txt ) . '</ins>';
    return $price;
    
}
add_filter( 'woocommerce_format_sale_price', 'evolution_custom_sales_price', 10, 3 );
endif;

11 – Füge deine Share-Buttons zur Produktseite hinzu

Jedes Produkt sollte über die Sozialen Netzwerke teilbar sein, um die Reichweite deines Shops zu erhöhen. Daher ist es mehr als sinnvoll, deine Share-Buttons auf den Produktseiten anzuzeigen. Um das machen zu können, benötigst du den Shortcode für die manuelle Integration in ein Theme.

Diesen findest du in der Dokumentation zu deinem WordPress-Theme. Ich zeige die Integration mit den Shariff Share-Buttons.

<?php

if (!function_exists( 'evolution_share_for_woocommerce' ) ) :
/**
 * Share-Buttons einfügen auf der Seite eines einzelnen Produkts
 * 
 * @hooked woocommerce_share()
 */
function evolution_share_for_woocommerce() {

    echo do_shortcode( '[[shariff]]' );
}
add_action( 'woocommerce_share', 'evolution_share_for_woocommerce', 5 );
endif;

Das Ergebnis:

Die nützlichsten und funktionellsten WooCommerce Snippets

12 – Produkt Tabs auf der Produkt-Ansicht entfernen

Die Tabs lassen sich entweder einzeln oder alle zusammen entfernen, was manchmal von Vorteil sein kann.

<?php

if (!function_exists( 'evolution_remove_product_tabs' ) ) :
/**
 * Wir entfernen die Produkt-Tabs der Beschreibung
 * 
 * @hooked woocommerce_product_tabs()
 */
function evolution_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );      	// Remove the description tab
    unset( $tabs['reviews'] ); 			// Remove the reviews tab
    unset( $tabs['additional_information'] );  	// Remove the additional information tab

    return $tabs;

}
add_filter( 'woocommerce_product_tabs', 'evolution_remove_product_tabs', 98 );
endif;

13 – Live Update des Warenkorbs mit Ajax

Du musst den Warenkorb nicht ständig neu laden, um ihn aktuell zu halten. Das lässt sich viel besser mittels Ajax »Live« erledigen.

<?php

if (!function_exists( 'evolution_header_add_to_cart_fragment' ) ) :
/**
 * Ensure cart contents update when products are added to the cart via AJAX
 * 
 * @add_filter woocommerce_add_to_cart_fragments
 */
function evolution_header_add_to_cart_fragment( $fragments ) {
    
    ob_start();
?>
<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf (_n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a> 
<?php

    $fragments['a.cart-contents'] = ob_get_clean();

    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'evolution_header_add_to_cart_fragment' );
endif;

14 – Link zum Benutzerkonto im Theme anzeigen

Wenn der Benutzer nicht eingeloggt ist, zeigt der Link »Login / Register« an und verwendet die Anmeldungs- / Anmeldeseite. Wenn der Benutzer angemeldet ist, zeigt der Link »Mein Konto« an und führt sie direkt zu ihrem Benutzerkonto.

 <?php if ( is_user_logged_in() ) { ?>
 	<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Mein Account','evolution'); ?>"><?php _e('My Account','woothemes'); ?></a>
 <?php } 
 else { ?>
 	<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login / Register','evolution'); ?>"><?php _e('Login / Register','woothemes'); ?></a>
 <?php } ?>

15 – Kunden-Zahlungsart in die Admin E-Mail hinzufügen

Nach jeder Bestellung bekommst du eine E-Mail von WooCommerce zugesendet. Mit diesem Snippet kannst du die Zahlungsart des Kunden in die E-Mail einfügen.

if (!function_exists( 'evolution_add_payment_method_to_admin_new_order' ) ) :
/**
 * Zahlungsart des Kunden zur Admin E-Mail hinzufuegen
 * 
 * @hooked woocommerce_email_after_order_table()
 */
function evolution_add_payment_method_to_admin_new_order( $order, $is_admin_email ) {
    
    if ( $is_admin_email ) {
        
        echo '<p><strong>Zahlungsart:</strong> ' . $order->payment_method_title . '</p>';
        
    }
}
add_action( 'woocommerce_email_after_order_table', 'evolution_add_payment_method_to_admin_new_order', 15, 2 );
endif;

16 – Ändere die Anordnung der Felder im Kassenbereich

Mit Hilfe dieses Snippet kannst du den Kassenbereich im WooCommerce Checkout anpassen. Du kannst die Reihenfolge der Felder im Kassenbereich ändern oder sie auch entfernen.

<?php

if (!function_exists( 'evolution_reorder_woo_fields' ) ) :
/**
 * Aendere die Reihenfolge der Felder im Kassenbereich oder entferne sie komplett.
 * 
 * @add_filter woocommerce_checkout_fields
 */
function evolution_reorder_woo_fields( $fields ) {
    
    //move these around in the order you'd like
    $fields2['billing']['billing_first_name'] = $fields['billing']['billing_first_name'];
    $fields2['billing']['billing_last_name']  = $fields['billing']['billing_last_name'];
    $fields2['billing']['billing_company']    = $fields['billing']['billing_company'];
    $fields2['billing']['billing_address_1']  = $fields['billing']['billing_address_1'];
    $fields2['billing']['billing_address_2']  = $fields['billing']['billing_address_2'];
    $fields2['billing']['billing_city']       = $fields['billing']['billing_city'];
    $fields2['billing']['billing_postcode']   = $fields['billing']['billing_postcode'];
    $fields2['billing']['billing_state']      = $fields['billing']['billing_state'];
    $fields2['billing']['billing_country']    = $fields['billing']['billing_country'];
    $fields2['billing']['billing_email']      = $fields['billing']['billing_email'];
    $fields2['billing']['billing_phone']      = $fields['billing']['billing_phone'];

    //just copying these (keeps the standard order)
    $fields2['shipping'] = $fields['shipping'];
    $fields2['account']  = $fields['account'];
    $fields2['order']    = $fields['order'];

    return $fields2;
}
add_filter( 'woocommerce_checkout_fields', 'evolution_reorder_woo_fields' );
endif;
[promo-box headline=“Das könnte dich auch interessieren:“ linkeins=“https://www.drweb.de/e-commerce-wie-nutella-co-ihre-kunden-mit-personalisierten-artikeln-binden/“ texteins=“E-Commerce: wie Nutella & Co. ihre Kunden mit personalisierten Artikeln binden“ linkzwei=“https://www.drweb.de/das-auge-kauft-mit-wie-das-perfekte-produktfoto-entsteht-58438/“ textzwei=“Das Auge kauft mit: Wie das perfekte Produktfoto entsteht“ linkdrei=“https://www.drweb.de/webshops-klassische-conversion-killer-und-conversion-booster-im-ueberblick-46302/“ textdrei=“Webshops: Klassische Conversion-Killer und Conversion-Booster im Überblick“]
Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress-Snippets: Die 26 besten Code-Schnipsel für deine Website

WordPress wird erst so richtig gut durch die Plugins, denn damit kannst du deine Website genau auf deine Bedürfnisse ausrichten. Viele Funktionen lassen sich jedoch auch ohne den Einsatz eines Plugins einbauen. Ein einfaches Snippet reicht. Sich die benötigten Snippets zusammenzusuchen kann jedoch ziemlich mühsam sein.

Kategorien
Plugins Tipps, Tricks & Tutorials WordPress

WordPress: Versionskontrolle mit Git ganz easy

WordPress und Git zu verbinden, ist generell erstmal keine schlechte Idee. Nur, wie stellst du es an, ohne zum Git-Experten zu werden? Das zeige ich dir im folgenden Beitrag.

Kategorien
Plugins WordPress

Die wichtigsten WordPress-Plugins hinter Dr. Web (DSGVO-Edition)

Plugins sind ein wichtiges Thema für jeden WordPress-User. Bisher haben wir hier bei Dr. Web ab und an neue Plugins vorgestellt. Noch nie haben wir dir jedoch gezeigt, womit unsere eigene Installation läuft. Das wollen wir heute nachholen. Im folgenden Beitrag findest du die wichtigsten Plugins hinter Dr. Web.

Kategorien
Plugins Themes WordPress

Visuelles Design-Tool für WordPress: Mit Elementor gestaltest du nicht nur Seiten, sondern dein komplettes Theme

Das recht junge Design-Tool Elementor für WordPress kann schon mehr als 900.000 aktive Installationen für sich verbuchen. Ich habe mir den Senkrechtstarter für dich angesehen.

Kategorien
Betriebliches E-Business E-Commerce Rechtliches Tipps, Tricks & Tutorials WordPress

WordPress: So setzt du als Seitenbetreiber die DSGVO um

Die Berichterstattung zur DSGVO ist von Panikmache geprägt. Manch einer will schon die digitalen Brocken hinschmeißen. Was WordPress-Seitenbetreiber beachten müssen, zeige ich dir im folgenden Beitrag.

Kategorien
E-Business Technik Tipps, Tricks & Tutorials WordPress

Kinsta: Dediziertes WordPress-Hosting in der Google Cloud

Dediziertes WordPress-Hosting ist seit einigen Jahren schwer im Kommen. Den interessantesten Ansatz dürfte dabei Kinsta verfolgen. Denn Kinsta unterscheidet sich in nahezu jedem Punkt vom restlichen Wettbewerb.

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: Gefürchtet unter Entwicklern?

Im Januar 2018 führten die Betreiber der Entwickler-Community Stack Overflow ihre alljährliche Umfrage unter ihren Nutzerinnen (rd. 7%) und Nutzern (rd. 93%) durch. Diese inzwischen etablierte und von mehr als 100.000 Teilnehmern gestützte Untersuchung geht in die Breite und Tiefe wie keine andere.

Kategorien
Themes WordPress

April 2018: Die 10 neuesten WordPress-Themes des Monats

Du kannst das Design deiner Website nicht mehr sehen? Super! Dann schau dir doch unsere zehn neuen WordPress-Themes an. Vielleicht ist gerade für dich das neue Traum-Theme dabei. So kann deine Website so richtig schick und frisch in die neue Saison starten.

Kategorien
(Kostenlose) Services Essentials Tipps, Tricks & Tutorials WordPress

Web-Performance steigern mit WebP

Performance ist ein Ranking-Faktor. Du musst also ansprechendes Layout und hohe Geschwindigkeit zusammenbringen. Dafür gibt es ein ganzes Bündel an Maßnahmen. Heute wollen wir dein Augenmerk auf die Bildoptimierung lenken.

Kategorien
(Kostenlose) Services Essentials Plugins Themes Tipps, Tricks & Tutorials WordPress

10web: WordPress-Komplettlösung für Anspruchsvolle

Wäre es nicht gut, wenn du alle wichtigen WordPress-Services außerhalb des eigentlichen Hostings aus einer Hand bekommen könntest. Der recht neue Dienstleister 10web will dir genau das anbieten.

Kategorien
(Kostenlose) Services Essentials Tipps, Tricks & Tutorials WordPress

KeyCDN: Internationales Content Delivery Network mit Schweizer Qualitätsanspruch

Content Delivery Networks sind ein wichtiger Baustein für alle Seitenbetreiber, deren Besucheraufkommen hoch ist. Auch stark schwankende und international verteilte Besucherzahlen lassen sich elegant per CDN-Dienstleister abfedern und optimal bedienen. Mit KeyCDN aus dem schweizerischen Winterthur steht uns ein europäischer Vertreter der Branche zur Verfügung. KeyCDN versteht es, sich in verschiedenen wichtigen Punkten vom Wettbewerb abzusetzen.

Kategorien
Plugins Tipps, Tricks & Tutorials WordPress

wpDataTables macht Tabellen in WordPress zu einem Kinderspiel

Tabellen in WordPress-Beiträgen sind in vielen modernen Themes bereits vorgesehen. Über die reine Optik gehen diese Lösungen jedoch nicht hinaus. wpDataTables hingegen erlaubt euch das Erstellen und Verwalten von Tabellen und deren Daten, wie kein anderes.

Unsere Tabellen-Tool-Wunschliste

Natürlich könnt ihr hergehen und mit gutem alten HTML eine Tabelle in euren Beitrag klöppeln. Das ist nicht weiter schwierig und mit CSS auch nach Belieben zu gestalten. Für einfache Bedarfe, etwa das strukturierte Impressum oder eine Preistabelle mit einem Dutzend Einträgen reicht das vollkommen aus.

Wenn ihr aber Tabellen tatsächlich als Datencontainer braucht, weil ihr eine Tool-Übersicht oder eine komplexe Feature-Übersicht oder einfach sonstige, größere Mengen an strukturierten Daten aufbereitet zeigen wollt, benötigt ihr was anderes. Schließlich soll sich die Ansicht automatisch aktualisieren, wenn neue Inhalte in der Datenbank oder Datentabelle, nennen wir es generisch Datenquelle, vorliegen. Natürlich soll der Betrachter die Tabelle nach seinen eigenen Erfordernissen sortieren können und farbliche Hervorhebungen, je nach definierten Konditionen, wären wirklich prima. Wenn jetzt noch Filterfunktionen für größere Datentabellen zur Verfügung stünden, was bliebe da zu wünschen übrig?

Zellhervorhebung nach definierten Bedingungen, das sogenannte Conditional Formatting (Screenshot: Dr. Web)

Gut, responsiv sollten sie sich verhalten, die Tabellen. Und wenn wir sie sogar zur Daten-Eingabe seitens des Besuchers nutzen könnten, hätten wir einen ordentlichen Zusatznutzen. Dazu müsste das Tool Frontend-Editing beherrschen, was ja ganz allgemein ein fantastisches Feature wäre. Bisweilen wollen wir unsere Daten zusätzlich als Charts zeigen, weil sich einfach Marktanteile oder andere kompetitive Daten angenehmer grafisch, denn als reine Zahlenliste visualisieren lassen. Außerdem wollen wir natürlich nicht hand-coden müssen, um zum Ziel zu gelangen. So, damit sollte unsere Wunschliste lang genug geworden sein.

wpDataTables erfüllt all unsere Wünsche

wpDataTables ist das Premium-WordPress-Plugin, das alle der genannten Wünsche erfüllt. Es stammt aus der Belgrader Software-Schmiede TMS, die sich mit immerhin 12 Teammitgliedern um die spezifischen Bedürfnisse ihrer Kunden kümmert. wpDataTables ist nicht die einzige Beschäftigung der Damen und Herren von TMS. Vielmehr erstellen sie ebenso Software-Lösungen für sensible Branchen, darunter die aufstrebende FinTech-Branche, ebenso wie für wissenschaftliche Einrichtungen. Ihre Kundschaft ist international. Dies sei nicht etwa vorausgeschickt, um TMS über den Klee zu loben, sondern ist lediglich als Qualifikationsnachweis zu sehen. wpDataTables ist eine professionelle Lösung eines professionellen Teams.

Mit der weiter oben geschriebenen Wunschliste haben wir denn auch tatsächlich die Feature-Liste des Plugins zur Hand. Dabei ist die Funktionalität aber weitaus anspruchsvoller, als unsere kleine Wunschliste verdeutlichen könnte. Schon die Einbindung einer Tabelle ist ja kein abschließend definiertes Feature. Was versteht wpDataTables darunter?

Der Assistent von wpDataTables hilft euch bei der Erstellung einer neuen Tabelle. (Screenshot: Dr. Web)

Zum einen können wir eine Tabelle ganz klassisch manuell erstellen und einbinden. Dabei erstellen wir zunächst die Tabelle mit ihren Datenspalten und befüllen sie anschließend händisch mit den entsprechenden Dateninhalten. Dabei stellt uns wpDataTables mehrere Wege des Editierens der Daten zur Verfügung.

Der Standard Editor erlaubt uns das dialoggesteuerte Befüllen der Tabelle. Hier erhalten wir ein Formular, in welches wir die gewünschten Inhalte eintragen. Diese klassische Form der Datenerfassung spricht Nutzer an, die nur wenige Datenfelder mit Inhalten füllen müssen und Wert auf eine gewisse Steuerung seitens des Verfahrens legen.

Der Excel-like Editor hingegen zeigt uns die Daten in der Form einer Tabelle und erlaubt es, Daten direkt in die einzelnen Tabellenzellen zu schreiben. Diese Form der Datenerfassung eignet sich für Nutzer, die schnell große Mengen an Daten manuell erfassen müssen, fix den Inhalt einer einzelnen Zelle korrigieren wollen oder per Copy-and-Paste Daten aus einer vorhandenen Tabelle einpflegen wollen.

Der Excel-like Editor gibt euch Zugriff auf die Daten wie in einem Excel-Sheet. (Screenshot: Dr. Web)

Wenn wir indes Daten ohnehin als Tabelle und diese wiederum als Excel, CSV, Google Tabelle, MySQL-Query, XML, JSON oder als PHP-Array vorliegen haben, müssen wir diesen Weg gar nicht gehen. In dem Falle machen wir es uns einfacher und wählen zwischen zwei Alternativen. Entweder linken wir die Datenquelle ein, was dafür sorgt, dass die Datenquelle bei jedem Aufruf der Tabelle mit der externen Quelle synchronisiert wird. Oder – wenn wir Excel, CSV oder Google Tabellen als Quelle haben – wir importieren die Quelle einmalig in unsere MySQL-Datenbank. Danach sind die Daten voll editierbar, während das bei der Sync-Lösung nur mit MySQL-Queries geht.

Die dritte große Möglichkeit, eine Tabelle in wpDataTables anzulegen, besteht darin, direkt ein MySQL-Query auf die WordPress-Datenbank oder sogar eine beliebige externe Datenbank abzusetzen und die Rückmeldung zu tabellisieren. Auch hierzu ist es nicht etwa erforderlich, dass ihr SQL sprecht. Die Abfragen werden mit einem grafischen Helferlein erstellt. Das kann im Grunde jeder. Änderungen an den verbundenen Daten, werden in der Urspungsdatenbank gespeichert, so dass ihr euer WordPress hier tatsächlich als Datenbankmanager verwenden könnt. Dabei bleibt die Schwerarbeit dem jeweiligen SQL-Server überlassen. wpDataTables holt sich lediglich per Ajax die Ergebnisse oder schickt die Änderungen zurück.

Einmal angelegte Tabellen oder Charts fügt ihr ganz simpel per Klick auf eines der Icons im Tiny MCE, dem Standard-Texteditor eures WordPress an gewünschter Stelle ein. Natürlich könnt ihr die entsprechenden Shortcodes auch manuell integrieren.

Integration in den Tiny MCE. (Screenshot: Dr. Web)

Die Entwickler versprechen übrigens, dass das Plugin auch bei Millionen Datenreihen nicht ins Schwitzen kommt und immer noch performant abliefert. Sämtliche Tabellen verhalten sich auf mobilen Geräten voll responsiv. Dabei ist es egal, welches Theme ihr verwendet, solange es sich selber responsiv verhält, natürlich.

wpDataTables an die Arbeit zu bekommen ist ebenso einfach

Da wpDataTables ein Plugin für WordPress ist, stellt euch die Installation nicht vor Probleme. Nach dem Erwerb des Plugins steht es euch als Zip-Archiv zur Verfügung. Dieses installiert ihr im Backend eurer WordPress-Installation unter Plugins > Installieren > Plugin hochladen. Nach der folgenden Aktivierung steht euch wpDataTables mit einem eigenen Menüpunkt im linksseitig angeordneten Navigationsmenü des Backend zur Verfügung.

wpDataTables arbeitet out-of-the-box und bedarf grundsätzlich keiner weiteren Konfiguration im Vorfeld. Dennoch ist das Plugin hochanpassbar, wie dieser Screenshot erahnen lässt:

Das Menü geht davon aus, dass ihr entweder auf vorhandene Tabellen zugreifen oder eine neue Tabelle erstellen wollt. Oder, dass ihr auf ein vorhandenes Visualisierungs-Chart zugreifen oder ein neues erstellen wollt. Damit dürfte euch die Bedienung nicht vor Schwierigkeiten stellen. Von der Übersicht der Tabellen und der der Charts aus, ist es ebenso möglich, neue Elemente zu erstellen. Alle Wege führen also nach Rom.

Datenvisualisierung mit verschiedenen Renderern. (Screenshot: Dr. Web)

Die Auswahl verschiedener Darstellungsoptionen lässt keinen Bedarf ungedeckt, ist aber abhängig von der Wahl des Renderers:

Verschiedene Darstellungsoptionen im Chart-Modul. (Screenshot: TMS)

Über verschiedene Addons bedient der Hersteller speziellere Bedarfe, die nicht in jedem Szenario vorkommen. Diese Addons sind jeweils kostenpflichtig. Wenn ihr wpDataTables für die Darstellung wirklich großer Datenmengen nutzt, wird euch womöglich das Addon Powerful Filters interessieren.

Dieses erlaubt euch, kaskadierende Filter auf eure Datentabellen loszulassen, also solche, die aufeinander aufbauen, um die angezeigte Datenmenge immer weiter einzuschränken. So könntet ihr etwa aus einem Tinder-Datenbestand erst einmal alle Frauen filtern, danach alle Blonden, danach alle mindestens 1,60 Meter großen – Ihr versteht das Prinzip. Powerful Filters kostet separate 33 US-Dollar – in Deutschland zuzüglich Mehrwertsteuer. Bislang gibt es vier separate Addons. TMS kündigt allerdings weitere an.

Die vier Addons, mit denen du die Leistungsfähigkeit von wpDataTables nochmal erweitern kannst. (Screenshot: Dr. Web)

wpDataTables erfreut sich einer ausgezeichneten Dokumentation, die durch viele Video-Tutorials ergänzt wird. Wenn du des Englischen mächtig bist, wird dich die Einarbeitung in wpDataTables nicht in Schweiß ausbrechen lassen. Hier gilt es, zudem zu betonen, dass wpDataTables sogar ohne die extensive Dokumentation sehr leicht zu erlernen ist.

Bei einem Preis von 44 US-Dollar zuzüglich Mehrwertsteuer (in Deutschland), müsst ihr aktuell rund 43 Euro für das Plugin auf den Tisch des Hauses zählen. Meine Bestellung bei Pizza Joe’s gestern Abend war teurer. Der Preis ist aber nicht nur im Vergleich zu Pizza günstig, sondern vor allem in Anbetracht dessen, was dafür geleistet wird, als ausgesprochen preiswert zu bezeichnen.

Zusammenfassung für Eilige

wpDataTables ist ein Premium-Plugin für WordPress, das sich mit 44 US-Dollar auf dem Envato-Market eines für den Funktionsumfang niedrigen Preises und einer, mit über 14.000 Verkäufen nicht nur großen, sondern, belegt durch Durchschnittsbewertungen mit 4,65 von 5 Sternen, auch einer durchaus begeisterten Nutzerschaft erfreut. Der Preis ist übrigens ein Verkaufspreis, kein Abo oder sonstige Subskription. Ihr erhaltet nach dem einmaligen Kauf alle zukünftigen Versionen kostenlos.

wpDataTables sorgt für das reibungslose Rendering auch sehr großer Tabellen und Charts. Millionen von Datenzeilen stellen das Plugin nicht vor Probleme. Sämtliche Funktionalität erfordert keine Coding-Kenntnisse, alle Features können grafisch verwendet werden. Dabei ist das Plugin kompatibel zu einer ganzen Reihe möglicher Input-Quellen, darunter Excel, CSV, JSON, Google Tabellen, MySQL und andere.

wpDataTables ist das Tool der Wahl für jeden, der eine WordPress-Site betreibt, auf der Daten tabellarisch oder als Grafik aufbereitet, gezeigt werden sollen. Ebenso ist es möglich, die Nutzer mit den Daten interagieren zu lassen. Mit optional erhältlichen Addons lässt sich das Featureset des Plugins bedarfsgerecht erweitern.

Wenn ihr euch jetzt direkt selbst ein Bild von der Leistungsfähigkeit machen wollt, so habt ihr zwei Möglichkeiten. Zum einen steht eine Online-Sandbox als Demo mit allen Features für euch bereit. Zum anderen könnt ihr eine abgespeckte Version des Plugins aus dem Plugin-Repository installieren und auf eurer Seite verwenden. In der Lite-Version nicht verfügbare Features sind dennoch sichtbar vorhanden, aber eben als nur in der Vollversion verfügbar gekennzeichnet.

Kategorien
E-Business E-Commerce Tipps, Tricks & Tutorials WordPress

Shopify vs. WooCommerce: Wer ist führend im E-Commerce?

Wie es aussieht, will heute wirklich jeder online Geld verdienen. Ist es nicht Affiliate Marketing, Blogging oder das Schreiben von Testberichten, ist es mindestens irgendeine Form von E-Commerce. Und da es so viele Tools gibt, ist das Aufsetzen eines Onlineshops noch nie so einfach gewesen.