WooCommerce: Kategorie-Filter (Dropdown)

WooCommerce: Kategorie-Filter (Dropdown)

Screenshot: WooCommerce: Kategorie-Filter (Dropdown) cpu20/T.Bortels

In der Basis-Installtion bringt WooCommerce einen Filter, der für Programmierer vielleicht intereesant ist, aber meiner Meinung nach für Kunden und Händler nur wenig Mehrwert bringt. Eine Sortierung nach Preis und Bewertung etc ist theoretisch interessant – aber in der Praxis doch selten hilfreich. Es sei denn, man hat tausende Produkte – was in der Praxis wohl eher selten vorkommt.

Stattdessen würde ich mir eigentlich eher wünschen, dass es einen entsprechenden Filter für Kategorien gäbe. Aus Kunden-Sicht: Egal wie teuer, egal wie beliebt – ich will jetzt alle Produkte aus der Kategorie XY sehen. Leider bringt das WordPress Shop-Plugin WooCommerce eine solche Funktion bzw. ein solches Dropdown-Menu nicht „einfach so“ mit. Aber es gibt ja Code…

WooCommerce „Standard-Filter“ entfernen

Zunächst möchte ich den „Standard-Filter“ deaktivieren. Ich könnte ihn auch einfach über CSS verstecken, aber dann würde WordPress im Hintergrund immernoch die Prozesse ausführen, die den Filter generieren. Das möchte ich nicht. Also raus damit. Hier die passende Funktion:

remove_action( ‚woocommerce_before_shop_loop‘, ‚woocommerce_catalog_ordering‘, 30 );

Und um das Dropdown auch von StoreFront-Shops zu beseitigen ist noch folgender Code-Schnippsel notwendig – nachzulesen bei Business Bloomer.com bzw. hier.

/**
* @snippet Remove "Default Sorting" Dropdown @ StoreFront Shop & Archive Pages
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @source https://businessbloomer.com/?p=401
* @author Rodolfo Melogli
* @compatible Woo 3.5.2
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_action( 'init', 'bbloomer_delay_remove' );

function bbloomer_delay_remove() {
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 10 );
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 10 );
}

So. Damit hätten wir das Sortierungs-Dropdown chon mal beseitigt,

Nun zum Kategorie-Dropdown.

Bei remicorson.com (WooCommerce: Create a shortcode to display product categories) gibt es einen Code-Schnippsel von 2013, der in meinem Fall „fast“ gepasst hat. Leider nur fast. Irgendwie haben die Entwickler übersehen, dass das Skript die ID des Elements anspricht – und nicht die Klasse des Elements. Aber dieser Fehler ist ziemlich einfach behoben. Hier zunächst der Original-Code von remicorson.com –>

/**
* WooCommerce Extra Feature
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
 
function woo_product_categories_dropdown( $atts ) {
 
extract(shortcode_atts(array(
'count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts));
 
ob_start();
 
$c = $count;
$h = $hierarchical;
$o = ( isset( $orderby ) && $orderby != '' ) ? $orderby : 'order';
 
// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
woocommerce_product_dropdown_categories( $c, $h, 0, $o );
 
?>
<script type='text/javascript'>
/* <![CDATA[ */
var product_cat_dropdown = document.getElementById("dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value !=='' ) {
location.href = "<?php echo home_url(); ?>/?product_cat="+product_cat_dropdown.options[product_cat_dropdown.selectedIndex].value;
}
}
product_cat_dropdown.onchange = onProductCatChange;
/* ]]> */
</script>
<?php
 
return ob_get_clean();
 
}

so. Der Haken an der Sache ist wie gesagt, dass nach der ID „dropdown_product_cat“ gesucht wird – die gibt es aber nicht. Es gibt aber das Element mit der Klasse „dropdown_product_cat“. Ich habe also einfach die Funktion so abgewandelt, dass nicht nach der ID, sondern nach der Klasse „dropdown_product_cat“ gesucht wird. Das sieht dann so aus:

/////
/**
* WooCommerce Extra Feature
* --------------------------
*
* Register a shortcode that creates a product categories dropdown list
*
* Use: [product_categories_dropdown orderby="title" count="0" hierarchical="0"]
*/
add_shortcode( 'product_categories_dropdown', 'woo_product_categories_dropdown' );
function woo_product_categories_dropdown( $atts ) {
extract( shortcode_atts(array(
'count' => '0',
'hierarchical' => '0',
'orderby' => ''
), $atts ) );
ob_start();

// Stuck with this until a fix for http://core.trac.wordpress.org/ticket/13258
wc_product_dropdown_categories( array(
'orderby' => ! empty( $orderby ) ? $orderby : 'order',
'hierarchical' => $hierarchical,
'show_uncategorized' => 0,
'show_counts' => $count,
'show_count' => 0, 
) );
?>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(function(){
var product_cat_dropdown = jQuery(".dropdown_product_cat");
function onProductCatChange() {
if ( product_cat_dropdown.val() !=='' ) {
location.href = "<?php echo esc_url( home_url() ); ?>/?product_cat=" +product_cat_dropdown.val();
}
}
product_cat_dropdown.change( onProductCatChange );
});
/* ]]> */
</script>
<?php
return ob_get_clean();
}

Und natürlich muss auch dieser Code-Schnippsel in die functions.php des aktiven Themes – oder in ein entsprechendes Plug-In – sonst funktioniert das nicht.

Sobald beide Code-Schnippsel in der functions.php des aktiven Themes eingebaut sind ist es möglich, das Kategorie-Dropdown ins Theme einzubauen. Das macht man dann über einen Shortcode – bzw. über den Aufruf eines Shortcodes.

Ich habe den Shortcode in das WooCommerce-Template „archive-product.php“ eingebaut. Dieses habe ich in meinem Theme-Verzeichnis unter „theme/woocommerce/archive-product.php“ hinterlegt, damit es beim nächsten WooCommerce-Update nicht überschrieben wird. Der Shortcode bzw. die Aktivierung des Shortcodes sieht dann so aus:

echo do_shortcode('[product_categories_dropdown orderby="title" count="0" hierarchical="0"]');

Ich hoffe, dass das dem einem oder der anderen vielleicht hilft?

Logout-Link im Menu der Hauptnavigation (ohne Zusatz-Abfrage)

Logout-Link ohne Bestätigung (Wordpress)

Logout-Link ohne Bestätigung - Screenshot/Montage: T.Bortels/cpu20.de

Bei manchen WordPress-Seiten möchte man, daß sich die Nutzer anmelden, um auf bestimmte Inhalte zugreifen zu können. Für den Login gibt es auch schöne und elegante Lösungen – nur beim Logout wird es manchmal ein bisschen unschön. Der Nutzer wird in der Regel auf eine Seite mit einer zusätzlichen Abfrage weitergeleitet und dort erneut gefragt, ob er/sie sich denn nun wirklich abmelden möchte. Von der Benutzerfreundlichkeit her ist das nicht optimal – die UX könnte besser aussehen. Zum Beispiel so: ein Klick auf „Logout“ – und man ist abgemeldet – der Logout ist komplett.

Das Problem erschien mir zunächst relativ trivial. Bei näherem Hinsehen wird die Lösung dann aber doch ein bisschen komplexer, als zunächst erhofft. Letztendlich benötigt man aber doch nur ein entsprechendes Plugin und ein paar Zeilen zusätzlichen PHP-Code in der functions.php – und schon kann man sich mit nur einem Klick abmelden. Hier mein Lösungsweg:

Zunächst benötigen wir das Plugin „If Menu – Visibility control for Menu Items“ oder ein ähnliches Plugin, um zu steuern, welche Menu-Punkte für angemeldete Nutzer sichtbar sind, und welche für unangemeldete. Schließlich wollen wir den Logout-Link nur für angemeldete Nutzer anzeigen – unangemeldete Nutzer bekommen hingegen den Login-Link angezeigt.

Logout-Menu WordPress

Screenshot „if menu“ by T.Bortels/cpu20.de

Das Plugin ist schnell installiert und konfiguriert – in den Menu-Einstellungen gibt es nun die Möglichkeit, einzelne Menu-Links nach vorgegebenen Bedingungen anzeigen oder verstecken zu lassen. In diesem Falle nutzen wir die Option, den Logout-Link nur für angemeldete Nutzer anzeigen zu lassen. Dementsprechend lassen wir den Login-Link nur für unangemeldete Nutzer anzeigen.

Jetzt müssen wir nur noch den Link anpassen – das geht über die functions.php

Bei Stackexchange fand ich dazu folgenden Vorschlag:

add_action('check_admin_referer', 'logout_without_confirm', 10, 2);
function logout_without_confirm($action, $result)
{
    /**
     * Allow logout without confirmation
     */
    if ($action == "log-out" && !isset($_GET['_wpnonce'])) {
        $redirect_to = isset($_REQUEST['redirect_to']) ? $_REQUEST['redirect_to'] : 'url-you-want-to-redirect';
        $location = str_replace('&amp;', '&', wp_logout_url($redirect_to));
        header("Location: $location");
        die;
    }
}

Leider hat das nicht so funktioniert, wie es sollte. Wo genau das Problem liegt ist mir unklar – der Nutzer wurde jedenfalls nach dem Klick auf „Logout“ weiterhin auf die Bestätigungs-Seite weitergeleitet.Aber der Ansatz war schon ganz richtig: den vorhandenen Logout-Link so zu ergänzen, dass eine erneute Bestätigung übersprungen werden würde.

Dann fand ich auf Github folgende Lösung:

// LOGOUT LINK IN MENU
function diww_menu_logout_link( $nav, $args ) {
  $logoutlink = '<li><a href="'.wp_logout_url().'">Logout</a></li>';
  if( $args->theme_location == 'primary' ) {
    return $nav.$logoutlink ;
  } else {
    return $nav;
  }
}
add_filter('wp_nav_menu_items','diww_menu_logout_link', 10, 2);

Viel kompakter – allerdings ergänzt diese Funktion das Menu (in diesem Falle „primary“) durch einen zusätzlichen Logout-Link.

Beide Ansätze kombiniert ergaben dann das für mich passende Resultat:

function change_menu($items){
  foreach($items as $item){
    if( $item->title == "Logout"){
      $item->url = wp_logout_url();
    }
  }
  return $items;
}
add_filter('wp_nav_menu_objects', 'change_menu');

Die Funktion sucht nach einem Menu-Item mit dem Titel „Logout“ und setzt dann den Link für diesen Menu-Eintrag auf die direkte Lougout-Adresse. Und fertig ist die Hütte.

Dieser Beitrag wurde am von cpu20 in Wordpress veröffentlicht. Schlagworte: , .

WordPress: alle Original-Bilder finden und auflisten (obwohl nur ‚medium-Bilder‘ im Text zu finden sind)

Wordpress: Original-Bilder finden

Folgende Fragestellung lag zugrunde: wie kann der Kunde alle in einer Seite bzw. in einem Artikel eingebundenen Bilder in Originalgröße finden, um diese herunterzuladen, zu bearbeiten und anschliessend wieder neu einzubinden?

Natürlich kann man alle Originalbilder auch ohne zusätzlichen Code relativ einfach ‚manuell‘ finden. Zunächst klickt man dazu mit der rechten Maustaste auf das zu tauschende Bild und wählt ‚Bild in einem neuen Tab öffnen‘ aus. Dann entfernt in der Adresszeile des Browsers die Größenangaben (z.B. „-800×600.jpg“), die WordPress immer dann an Dateinamen von Bildern anhängt, wenn das Bild skaliert wurde. Durch das Abschneiden dieses Zusatzes bekommt man das Bild in Originalgröße – bzw. das Originalbild, wie es einmal hochgeladen wurde. Dieses speichert man dann lokal auf dem Computer, kann es anschliessend bearbeiten und neu hochladen. Man wählt in der Admin-Ansicht einfach das Bild aus, das getauscht werden soll und geht in der Bild-Bearbeiten-Ansicht auf „Bild ersetzen“. Nun kann man das neue Bild hochladen.

Noch einfacher geht es natürlich, wenn man seine Bilder gut organisiert hat und das Bild direkt auf der lokalen Festplatte findet – dann kann man sich das Herunterladen sparen.

Beide Optionen fielen in der mir gestellten Anfrage leider aus – die Originalbilder waren nicht aufzufinden und der Trick mit der rechten Maustaste war zu umständlich. Also sollte eine Liste aller Bilder generiert werden, über die man die Originalbilder direkt herunterladen sollte.

Das Artikelbild (post thumbnail) sowie alle anderen als Attachment gespeicherten Bilder lassen sich relativ finden.

/* Alle Attachment-Bilder finden - kommt ins Template */

$images = get_children( array( 'post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); 
 if ( $images ) {

//looping through the images
 foreach ( $images as $attachment_id => $attachment ) {
 
 $img_path_array = (wp_get_attachment_image_src( $attachment_id, 'full' ));?>
 <a href="<?PHP echo($img_path_array[0]); ?>" target="_blank"><?PHP echo wp_get_attachment_image( $attachment_id, 'full' ); ?></a>

<?php
 }
 ?><?php
 
 }

Bei den im Text platzierten Bildern ist das schon ein bisschen schwieriger – diese sind ja nicht als Attachment abgelegt. Also müssen wir zunächst mal alle Bilder finden, die in den Text (content) eingebunden sind. Dazu durchsuchen wir den Seiteninhalt nach dem Codeschnippsel „src=“, der uns verrät, dass dort ein Bild zu finden ist.

Das klappt soweit auch ganz gut – allerdings bekommen wir einen Array der Bilder, wie sie im Text eingebunden sind – also mit angehängten Pixelmaßen (z.B. „bild-800×600.jpg). Mithilfe der Funktion get_original_image können wir aber die Originalbilder herausbekommen.

/* Alle Inline-Bilder finden - dieser Code-Schnippsel kommt ins Template */
 $regex = '/src="([^"]*)"/';
 $content = $post->post_content;
 // echo($content);
 preg_match_all( $regex, $content, $matches );

foreach($matches[1] as $image):
 
  $the_orig_image = get_original_image( $image);

  echo '<a href="'.$the_orig_image.'" target="_blank"><img src="'.$the_orig_image.'"></a>';
  $ii++;

endforeach;
/* Die Funktion get_original_image kommt in die functions.php des Themes */
function get_original_image( $url ) { 
global $_wp_additional_image_sizes; $new_url = $url; // Get All Image Sizes 
$builtin_sizes = // *** BREAK WAS MISSING *** 
 array( 'large' => array( // *** WRONG ARROW "=–>" ***
 'width' => get_option('large_size_w'),
 'height' => get_option('large_size_h')
 ),
 'medium' => array(
 'width' => get_option('medium_size_w'),
 'height' => get_option('medium_size_h')
 ),
 'thumbnail' => array(
 'width' => get_option('thumbnail_size_w'),
 'height' => get_option('thumbnail_size_h')
 )
 );

$image_sizes = array_merge( $builtin_sizes, $_wp_additional_image_sizes );

// Parse URL
$info = pathinfo( $url );

// Check to see if image is a thumbnail

// Get image size extensions, e.g. -200×200
// Get image size width only extensions, e.g., -200x
// Get image size height only extensions, e.g., x200.
$image_exts = array();
$image_exts_width = array();
$image_exts_height = array();
foreach ($image_sizes as $image_size) {
  $image_exts[] = '-'.$image_size['width'].'x'.$image_size['height'];
  $image_exts_width[] = '-'.$image_size['width'].'x';
  $image_exts_height[] = 'x'.$image_size['height'];
}

// Cycle through image size extensions, e.g. -200×200
foreach ( $image_exts as $image_ext ) {
  //if found, replace the extension with nothing
  $new_url = str_replace( $image_ext , '' , $url );

// we found an original – don't look any further
if ( $new_url != $url )
  break;
}

// if a new url hasn't been generated yet, keep looking…
if ( $new_url == $url ) {
  // Cycle through image width only extensions, e.g. -200x
  foreach ( $image_exts_width as $image_ext ) {

    // check for width, e.g., -200x
    $pos1 = strrpos( $info['basename'] , $image_ext , -1 );
    if ( $pos1 ) {
      // strip, & assign new url
      $new_url = $info['dirname'] . '/' . substr( $info['basename'] , 0 , $pos1 ) . '.' . $info['extension'];
    }

    // we found an original – don't look any further
    if ( $new_url != $url )
      break;
  }

  // if a new url hasn't been generated yet, keep looking…
  if ( $new_url == $url ) {
    // Cycle through image height only extensions, e.g. x200.
    foreach ( $image_exts_height as $image_ext ) {

      // check for height, e.g., x200
      $pos2 = strrpos( $info['basename'] , $image_ext , -1 );

      //example_2a-263×300.jpg -> example_2a.jpg
      if ( $pos2 ) {
        // get position of -, strip, & assign new url
        $pos3 = strrpos( $info['basename'] , '-' , -1 );
        $new_url = $info['dirname'] . '/' . substr( $info['basename'] , 0 , $pos3 ) . '.' . $info['extension'];
      }

      if ( $new_url != $url )
        break;
    }
  }
}

if ( $new_url != $url )
  return $new_url;
else
  return $url;
}

Die Funktion habe ich dem Artikel „How to Get Original Image from a Thumbnail Image in WordPress“ (wpsmith.net) entnommen – allerdings waren in der Original-Funktion einige Fehler vorhanden. DIese habe ich korrigiert und zum Teil oben im Code entsprechend markiert.

Was macht die Funktion ‚get_original_image‘? Zunächst werden alle möglichen Bildformate bzw. die jeweiligen Breiten und Höhen in Arrays gespeichert. Dann vergleichen wir jede Bild-URL, die im Text einer Seite gefunden wurde, mit den möglichen Höhen und Breiten. Wenn Höhe und/oder Breite im Dateinamen des Bildes vorkommen, wird die Endung mit den Angaben zu Höhe und Breite (z.B. „-800×600“) entfernt – und schon haben wir das Originalbild.

 

Dieser Beitrag wurde am von cpu20 in Wordpress veröffentlicht. Schlagworte: .

WooCommerce Formal: Anrede auf „Deutsch (Sie)“ umstellen

WooCommerce Formal - Anrede auf "Deutsch Sie" umstellen

Ein Problem, das immer wieder auftritt: man installiert zunächst WordPress und WooCommerce und stellt die Sprache auf Deutsch. Dabei stört es zunächst nicht, dass standardmäßig die Du-Version installiert ist. Irgendwann möchte man aber auf die formale Sprachversion „Deutsch (Sie)“ umstellen und stellt fest, dass alle WooComerce-Texte nun wieder in Englisch angezeigt werden. Das läßt sich aber mit wenigen Handgriffen korrigieren. Hier eine kurze Anleitung, was zu tun ist.

Eine Standard-WordPress-Installation ist mittlerweile in der Regel für verschiedene Sprachen vorbereitet – für den WordPress-Core gibt es eine Reihe von Übersetzungen, jeweils mit den zur Übersetzung passenden Sprachdateien. Und auch für viele Plugins und Themes gibt es inzwischen häufig auch eine deutschen Übersetzung, die kaum Wünsche offen lässt. Diese sind aber in der Regel nicht installiert.

Auch für das Shop-Plugin WooCommerce gibt es natürlich eine passende formale Sprachdatei. Um diese zu aktivieren muß man allerdings zunächst ein Update durchführen.

WooCommerce auf Deutsch Sie umstellen

WooCommerce Sprachdatei laden und auf Deutsch Sie umstellen

Zuerst stellt man WordPress also auf die formale Sprachdatei Deutsch (Sie) um. Das geht unter Einstellungen > Allgemein > Sprache der Website.

Anschliessend ruft man die ausstehenden Aktualisierungen auf. Dazu einfach oben in der Admin-Leiste das Kreis-Pfeil-Symbol anklicken. Ganz unten in der Liste sollte der dezente Hinweis versteck sein, dass neue Übersetzungen verfügbar sind. Ein Klick auf die Schaltfläche „Aktualisiere Übersetzungen“ lässt WordPress alle ausstehenden Sprachdateien automatisch installieren – und schon ist WooCommerce auf das formale „Sie“ umgestellt.

WordPress: Sprachdateien "Deutsch Sie" werden geladen

WordPress: Sprachdateien „de_DE_formal“ werden geladen

Mithilfe von Übersetzungs-Plugins wie zum Beispiel Loco Translate oder WPML kann man dann noch die Feinheiten anpassen. Und schon ist der Online Shop auf die formale Anrede „Deutsch (Sie)“ umgestellt.

Sollte es nicht möglich sein, WordPress dauerhaft auf „Deutsch (formal)“ umzustellen (Einstellung wird jedesmal zurückgesetzt) dann empfielht sich bei Verwendung von WPML folgender Weg:  In WPML > Sprachen auf “ Sprachen bearbeiten“ – den Sprachentag con de_DE auf de_DE_formal ändern.

HTML5 Video Player ohne Controls – aber mit eigenem Play-Overlay

HTML5 Video Player mit eigenem Play-Overlay

HTML5 Video Player mit eigenem Play-Overlay - Illustration/Montage: T.Bortels/cpu20.de

Als erstes kann man natürlich fragen, warum sollte man einen eigenen HTML5 Video Player verwenden wollen – und dann auch noch ohne Controls – aber mit eigenem Play-Overlay? Am einfachsten wäre es doch sicherlich, ein Video per Vimeo oder YouTube in eine Webseite einzubinden. Man kopiert einfach den embed-Code und fertig ist die Hütte. Aber wie das aussieht? Naja – meistens eben so, wie sich die Damen und Herren von Vimeo und YouTube vorstellen – und diese Vorstellung kann schon mal von den eigenen Vorstellungen abweichen.

Wenn man auch das Design auf der Webseite gezeigten Videos – also das Design des Video Players kontrollieren möchte ist es in jedem Falle hilfreich zu wissen, wie man einen eigenen HTML5 Video Player baut.

In diesem Beispiel beschränken wir uns dabei allerdings zunächst mal auf das Weglassen der Bedienelemente (Controls – z.B. Play-Button, Ladebalken, Lautstärke, Fullscreen-Button etc.) und wollen stattdessen nur einen Play-Button bzw. von der Funktion her einen Play-Pause-Button als Overlay über das Startbild legen. Und das ist gar nicht mal so schwierig, wie die Einleitung vielleicht vermuten läßt. Los geht’s.

Eigener Play-Pause-Button für HTML5 Video Player

Zunächst bauen wir uns mal den HTML5 Video Player ein – also den Code, der dafür sorgt, dass der HTML5 Video Player angezeigt wird, der vom jeweiligen Browser angeboten wird, wenn er das HTML5 Video Tag interpretiert. Damit haben wir dann bereis einen voll funktionsfähigen Video Player, der per CSS auch ein responsiver Player sein kann. Allerdings werden zunächst entweder gar keine Bedienelemente angezeigt, oder alle – je nachdem, ob das Attribut „controls“ gesetzt ist, oder nicht – und diese Controls sind dann natürlich im Design des jeweiligen Browsers. Hier exemplarisch das HTML5 Video Tag mit kurzer Erklärung:

<video autobuffer controls>
    <source src="/files/video.mp4" type="video/mp4" >
</video>

Das erste Attribut „autobuffer“ sorgt dafür, dass das Video geladen wird, sobald es zu sehen ist – und nicht erst dann, wenn es vollständig geladen ist. Der zweite Parameter „controls“ sorgt dafür, dass die Standard-Bedienelemente für Play, Pause, Zeitleiste etc. angezeigt werden. Wer zudem noch möchte, dass das Video automatisch anfängt zu spielen, kann noch das Attrivut autoplay="autoplay" hinzufügen.

Um nun die Standard-Controls nun gegen einen Play-Pause-Overlay auszutauschen, geht man am besten wie folgt vor: Das HTML5 Video Tag muss zunächst in einen Container umziehen, der dann das Overlay für die Play-Pause-Funktion beinhaltet. Dann verstecken wir die Standard-Video-Controls per JavaScript bzw. jQuery und regeln die Play- und Pause-Funktionen ebenfalls über Javascript. So können auch Nutzer, die kein JavaScript aktivert haben, den Player weiterhin problemlos über die Standard-Controls bedienen. Das klingt jetzt vielleicht erstmal ein bisschen kompliziert, ist aber gar nicht so wild – und sieht der Player so aus, wie er soll. Der Aufwand lohnt sich. Los geht’s:

Hier erstmal das HTML:

<div class="video_wrapper">
<video autobuffer controls>
    <source src="/files/video.mp4" type="video/mp4" >
</video>
<div class="playpause"></div>
</div>

Und hier der dazu passende JavaScript-bzw. jQuery-Code, der die Play-Pause-Funktion regelt und die Standard-Bedienelemente versteckt:

<script>
jQuery('.video').parent().click(function () {
    if(jQuery(this).children(".video").get(0).paused){
        jQuery(this).children(".video").get(0).play();
        jQuery(this).children(".playpause").fadeOut();
    }else{
       jQuery(this).children(".video").get(0).pause();
        jQuery(this).children(".playpause").fadeIn();
    }
});

var vids = jQuery("video"); 
jQuery.each(vids, function(){
       this.controls = false; 
}); 
</script>

Nun fehlt nur noch das CSS, das unser Play-Pause-Bild als Overlay auf den Player zaubert:

.video {
    width: 100%;
    height: auto;
    border: none;
}

.video_wrapper{
    display:table;
    width:auto;
    position:relative;
    width:100%;
    cursor:pointer;
}

.playpause {
    background-image:url(img/play-icon.png);
    background-repeat:no-repeat;
    width:35%;
    height:35%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}

Auf iOS Geräten (iPhone, iPad) wird automatisch ein Play-Overlay angezeigt, das das Design unseres Play-Overlay natürlich stören würde. Zu guter letzt also noch ein CSS-Schnippsel, der verhindert, dass das iOS-Player-Overlay angezeigt wird:

video::-webkit-media-controls-start-playback-button {
  display: none;
}

Das war’s. Viel Spaß damit!

Navigation: Links ändern mit jQuery

WordPress-Navigation: Link ändern mit jQuery

WordPress-Navigation – Foto: T.Bortels/cpu20.de

Ich musste neulich mal nach Möglichkeiten recherieren, wie man mit jQuery einen Link ändern kann – und zwar dynamisch, bzw. responsiv – also je nach Bildschirmgröße. Das ist nicht wirklich das schönste, was man so machen kann – aber es kann an der einen oder anderen Stelle praktisch sein, um einem ganz speziellen Problem zu begegnen, von dem man zunächst nicht wusste, dass man es hat. Die Situation war wie folgt:  einer meiner Kunden hatte schon vor einer Weile in ein sogn. Premium WordPress-Theme investiert.

Später stellte sich heraus, dass das Problem zwar sehr schön aussah, sich aber nicht ganz so suchmaschinenfreunlich verhielt, wie zunächst gehofft. Insbesondere die Navigation bereitete SEO-Probleme. Was war das Problem? Das WordPress Theme hatte nicht nur eine Hauptnavigation, sondern zwei – bzw. wurde eine Navigation zweimal ausgeprägt: einmal für breite Bildschirme (Desktop) und einmal für schmale Bildschirme (Mobil). Der einzige Unterschied bestand in unterschiedlichen CSS Klassen. Soweit so gut. Wozu mussten wir nun die Links mit jQuery ändern?

In der Desktop-Ansicht wurden die hauptnavigationspunkte lediglich ans Anker-Links verwendet, um die untergeordnete zweite Navigationsebene bei Klick auszuklappen. Die einzigen verlinkten Navigationspunkte befanden sich also in der zweiten Ebene – die erste Ebene bestand ausschliesslich aus ‚toten‘ Anker-Links. Warum? Vermutlich wollte der Theme-Autor die Navigation vor allem Mobil-freundlich gestalten. So wurden in der mobilen Darstellung zunächst nur die Links der Hauptebene angezeigt – die zweite Ebene wurde dann bei Klick auf den jeweiligen Hauptpunkt ausgeklappt. Bei Touch-Geräten (Smartphones) gibt es ja keinen Hover-Zustand – daher ist der Klick zum Ausklappen notwendig. Wären nun die Hauptnavigationspunkte mit ‚echten‘ Links verknüpft, hätte der Nutzer keine Chance, jemals die Subnavigation zu sehen. Der Nutzer würde auf die verlinkte Seite weitergeleitet werden, bevor irgendeine Subnavigation angezeigt werden könnte.

Für mich ergaben sich aus diesem Umstand eigentlich zwei verschiedene Probleme: die hauptnavigation war aufAnker-Links reduziert und daher für Suchmaschinen uninteressant. Leider besteht die Hauptnavigation häufig aus wichtigen Keywörtern, die für SEO nun unbrauchbar wären – oder anders ausgedrückt: ungenutztes SEO-Potential. Andererseits haben die Hauptnavigationspunkte keine andere Funktion, als bei Klick die Subnavigation anzuzeigen. Es sind also jedesmal zwei Klicks notwendig – und das ist nicht besonders nutzerfreundlich – die User Experience ist nicht optimal – Bad UX. Oder anders ausgedrückt: warum soll zweimal klicken, wenn 1 Klick eigentlich reichen sollte?

Links dynamisch ändern mithilfe von jQuery

Was wir letztendlich gemacht haben: wir haben die Hauptnavigationspunkte ‚richtig‘ verlinkt – und diese Links dann mithilfe von jQuery für die mobile Darstellung so angepasst, dass dann wieder nur die Subnavigation angezeigt wird.

Auf dem Weg zur Lösung trat dann aber erstmal eine weitere Schwierigkeit auf. Eigentlich würde man Links über die ID oder die CSS-Klasse des Links oder des übergeordneten Elements beeinflussen. Leider waren in diesem Theme keine entsprechendes IDs oder CSS-Klassen zu finden, sodass eine eindeutige Zuordnung erstmal nicht so einfach möglich war. Wir mussten also die Link-Informations des eigentlichen Link-Elements (href)  selbst nutzen, um die Links ausfindig zu machen, die dynamisch geändert werden sollten. Das sieht dann so aus:

jQuery(".sf-mobile-menu a[href='/about-us/']").attr('href', '#');

Leider benötigt man für diesen Workaround eine Zeile Code pro Link. Aber immerhin. Hätte es eindeutige IDs zu jedem Link gegeben, hätte der Code-Schnippsel entsprechend anders – und vor allem kompater ausgesehen:

jQuery('.sf-mobile-menu #content_1 li:first a').attr('href', '#');

Man kann natürlich auch gleich mehrere Links in einem jQuery-Loop bearbeiten. Zum Beispiel so:

$('.content').each( function() {   
    $(this).find('li:first a').attr('href', '#'); 
});

oder so:

$('.content').each( function() {   
    $(this).find('li a').first().attr('href'); 
});

Alternativ könnten wir auch eine WordPress-Funktion nutzen, um durch die Navigation zu loopen und dann den entsprechenden jQuery-Schnippsel einzufügen – der jQuery-Loop ist aber eigentlich schon komfortabel genug.

Responsives jQuery – Links für bestimme Bildschirmgrößen anpassen

Oben haben wir nun verschiedene Optionen, Links dynamisch mithilfe von jQuery anzupassen. Wir wollen diese Links aber nur für bestimmte Bildschirmgrößen anpassen – n unserem speziellen Fall nur für das mobile Layout. Dafür können wir einen jQuery Listener verwenden – ein Code-Snippet, dass sozusagen auf bestimmte CSS-Klassen ‚hört‘ und seinen Code nur dann ausführt, wenn sich diese Klassen ändern.

Im Fourfront’s Blog ist zu dem Thema ein etwas ausführlicherer Artikel zu finden:  „Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width„. Hier beschränken wir uns jetzt mal auf die Umsetzung:

function checkSize(){
    if (jQuery("#az-header.h-classic .az-menu-trigger").css("visibility") == "visible" ){
        /* your code */ 
    }
}

Der Code unter „/* your code */“ iwrd in diesem Falle nur dann ausgeführt, wenn die Klasse „.az-menu-trigger“ im Header-Bereich zu finden ist. Der Listener „checkSize“ wird wiederum so eingebaut, dass er beim Laden der Seite ausgeführt wird.

jQuery(document).ready(function() {

Ich hoffe, ich konnte damit dem einen oder anderen weiterhelfen.