Author Archives: woyng

Ich muß hier mal wieder mehr schreiben

Jeden Tag sitze ich von morgens bis abends am Rechner, um einfache und auch abstrus komplizierte WordPress- und WooCommerce zu erstellen, zu ändern und zu reparieren…da gibt es natürlich auch hilfreiche Tips oder skurrile Anekdoten, die durchaus mitteilungswürdig wären.

Also mache ich das jetzt wieder öfter.

(Mit den richtigen Keywords kommt am Ende vielleicht sogar noch ein potentieller Neukunde auf die Seite…)

Animierte GIFs sind die Hölle

Zumindest im Plugin-Bereich von WordPress oder der eigenen WordPress-Seite!

Man sucht nach einem Plugin, erhält 537 Ergebnisse und muß sich jetzt einen Überblick verschaffen. Das wird aber immer schwieriger, weil die Icons, die bei den Plugins dabeistehen, ganz oft mit GIF-Animationen versehen sind, die die Aufmerksamkeit auf sich ziehen und das Lesen und Verstehen der Plugin-Beschreibungen völlig unmöglich machen.

Wir befinden uns im Zeitalter der ständigen Ablenkung. Digital Fatigue.

Aber man kann auch was degegen tun!

Mein Plugin der Woche ist Toggle Animated GIF für Mozilla.

Und plötzlich hört das nervige Geblinke auf.  Aaaaahhhh 🙂

Ob die „Hersteller“ dieser GIFs wohl wissen, daß viele Leute wegen diesem Nerv das Produkt und die Herstellerfirma ablehnen und die beworbenen Dinge absichtlich ignorieren? Neee…vermutlich nicht…

WordPress schneller machen 2023 – #1: Google PageSpeed und WP Rocket

Hallo Zielgruppe.

Vor Jahren habe ich mal 2 Beiträge geschrieben, wie man WordPress schneller macht: #1: JavaScripts in den Footer und #2: Performance-Bremsen ermitteln.

Das war damals so mein Wissensstand für WordPress. Mittlerweile habe ich mich mit der Performance-Optimierung von WooCommerce-Shops befaßt, und da hat sich eine andere Vorgehensweise als sinnvoll herausgestellt: (Achtung…das kostet Geld!)

Zuerst auf Google Pagespeed Insights gehen und die betreffende WebSite testen.

Da kommen jetzt alle möglichen Dinge zum Vorschein, zuerst wird die Mobilansicht angezeigt, aber man kann auch auf Desktop umschalten.

Das Interessante sind die Empfehlungen, die unten stehen.

Z.B. könnte da stehen „Reduziere nicht verwendete CSS„. Daneben ein Pfeil zum rausklappen.

Mit einiger Wahrscheinlichkeit steht etwas mit WP-Rocket dabei, z.B. „Aktiviere das Entfernen von nicht verwendetem CSS-Code in WP Rocket, um dieses Problem zu beheben. Die Funktion verringert die Seitengröße, indem sie sämtlichen CSS-Code und alle Stylesheets entfernt, die nicht verwendet werden, und nur den für einzelne Seiten verwendeten CSS-Code beibehält.

Und genau das müssen wir jetzt machen. Hierhin gehen und WP-Rocket installieren. Kostet 59$ im Jahr, aber es gibt eine 14-tägige Money-Back-Garantie.
Dann einfach den Schalter finden, den Google Pagespeed Insights uns verraten hat, und einschalten.

Ich kann aus eigener Erfahrung sagen, daß man auf diese Art die größten Performance-Bremsen sehr einfach beseitigen kann. Manchmal wundert man sich ungläubig und reibt sich die Augen, wenn man sieht, was es tatsächlich gebracht hat 🙂

Aber klar, das kostet Geld, und nicht jeder kann/möchte das bezahlen.

Im nächsten Artikel stelle ich deshalb eine andere Methode vor, die nichts kostet, aber etwas mehr Arbeit bedeutet…

YITH WooCommerce Custom Order Status funktioniert nicht unter PHP8? Doch!

Ich sollte wieder mehr Beiträge schreiben. Gelegentlich liest das jemand und kann damit sogar was anfangen 🙂

Also gut…was gibt’s heute?

Nach Umstellung auf PHP8 funktioniert das YITH WooCommerce Custom Order Status-Plugin nicht mehr?

Das ist ganz einfach zu beheben. Gut wenn man ein Error-Logfile hat oder Fehler direkt angezeigt bekommt, denn da steht dann etwa das hier:

Deprecated: Array and string offset access syntax with curly braces is deprecated in /wp-content/plugins/yith-woocommerce-custom-order-status/plugin-fw/lib/yit-plugin-gradients.php line 443

Das bedeutet, daß es ab PHP8 verboten ist, ArrayElemente mit geschweiften Klammern anzusprechen, und das ist hier der Fall:

Das hier:

$base[‚R‘] = hexdec( $color{0} . $color{1} );
$base[‚G‘] = hexdec( $color{2} . $color{3} );
$base[‚B‘] = hexdec( $color{4} . $color{5} );

muß ersetzt werden durch das hier:

$base[‚R‘] = hexdec( $color[0] . $color[1] );
$base[‚G‘] = hexdec( $color[2] . $color[3] );
$base[‚B‘] = hexdec( $color[4] . $color[5] );

 

WooCommerce: Produkt im Warenkorb bearbeiten

Ich habe mich gerade damit rumgeschlagen, ein Produkt im Warenkorb zu bearbeiten.

Bei normalen Produkten ist das eigentlich nur die Anzahl, die geändert werden soll, und das kann man im Warenkorb selbst machen.

Bei Produkten mit Custom Attributes ist das schon schwieriger. Wenn z.B.  eine Bestellung auf mehrere Lieferadressen aufgeteilt werden soll, und von 5 Stück für Bruchmühlbach-Miesau jetzt 2 davon nach Thaleischweiler-Fröschen gehen sollen und nur 3 nach Bruchmühlbach-Miesau. Ich habe dafür mehrere Input-Felder erstellt und rechne die Gesamtanzahl mit JavaScript aus. Das klappt auch alles. Nur…wie editiert man das?

Eine Anfrage bei WooCommerce ergab, daß es diese Funktion nicht gibt. Und irgendwie scheint sie auch niemand außer mir zu vermissen. Was tun?

Selber machen 🙂

Meine Idee war, Löschen und Hinzufügen zu einer Bearbeiten-funktion zu kombinieren.

1.) Meine Warenkorb-Seite liegt (als WooCommerce-Template) in /wp-content/themes/mytheme/woocommerce/cart/cart.php. Es ist eine Kopie des Original-Woo-Templates. Ich gucke rein und sehe, daß die Löschfunktion mit esc_url(wc_g
et_cart_remove_url( $cart_item_key )…
gelöst wird. Ich baue daneben eine Edit-Funktion mit esc_url( $product_permalink ).“?edit_item=“.esc_attr( $cart_item[‚key‘] )… und übergebe den key. Unterhalb der Löschfunktion erstelle ich etwas in der Art:


echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf('Bearbeiten',
esc_url( $product_permalink )."?edit_item=".esc_attr( $cart_item['key'] ),
__( 'Edit this item', 'woocommerce' ),
esc_attr( $product_id ),
esc_attr( $_product->get_sku() )
), $cart_item_key );

Der Link sieht so aus:


produkt/permalink/?edit_item=cc4dfe235de18d17fd11c3953d4a47d0

2.) Die Variable $edit_item steht für das Warenkorb-Item, das entfernt werden soll. Leider ist es mir nicht gelungen, den Key mit $_GET oder $_POST zu übergeben, deshalb verwende ich eine Session-Variable, die ich nach getanre Arbeit wieder lösche.

In der functions.php erstelle ich eine Funktion, die ddie Session-Variable erstellt:


function gw_edit_cart_item() {
$keytoremove = $_GET['edit_item'];
$_SESSION['keytoremove'] = $keytoremove;
}
add_action('woocommerce_after_single_product_summary', 'gw_edit_cart_item');

3.) So, erstellt. Jetzt brauche ich noch eine Funktion, die beim In-den-Warenkorb-legen des neuen Produktes das alte löscht. Und danach die Session-Variable. Ich mach das mit einer weiteren Funktion in der functions.php:


function gw_validate_add_cart_item( $passed, $product_id, $quantity, $variation_id = '', $variations= '' ) {
GLOBAL $woocommerce;
if ( isset ($_SESSION['keytoremove']) ) {
$keytoremove=$_SESSION['keytoremove'];
$passed = true;
$woocommerce->cart->remove_cart_item($keytoremove);
wc_add_notice( __( 'Produkt wurde aus dem Warenkorb entfernt', 'textdomain' ), 'notice' );
unset ($_SESSION["keytoremove"]);
}
return $passed;
}
add_filter( 'woocommerce_add_to_cart_validation', 'gw_validate_add_cart_item', 10, 5 );

 

4.) Jetzt sehe ich beim Produkt-Bearbeiten 2 Notices oben stehen:

„Produkt X wurde in den Warenkorb gelegt“
und
„Produkt wurde aus dem Warenkorb entfernt“

Das kann man sicher noch schöner machen…aber es funktioniert und macht genau das was es soll.

Freue mich über Anregungen und Ideen 🙂

7 Tips, wie man seinen Webmaster verliert

(Inspiriert von hier, übersetzt und erweitert)

  1. Geben Sie verwirrende, unklare und knappe Anweisungen und lassen Sie den Webmaster rätseln, was das zu bedeuten hat. Nachfragen lassen Sie aus Zeitmangel nicht zu. Wenn er alles richtig gemacht hat, sagen Sie gar nichts. Wenn er etwas falsch gemacht hat, machen Sie ihn zur Sau, schieben Sie ihm die gesamte Schuld in die Schuhe und drohen mit Ihrem Anwalt.
  2. Obwohl Sie keine Ahnung vom Internet haben, sollten Sie immer darauf bestehen, daß Ihr Webmaster die Dinge genauso umsetzt, wie Sie das wünschen, anstatt so, wie er das für Ihre Website für richtig hält.
  3. Handeln Sie zu Anfang stark um den Preis und deuten Folgeaufträge an. Feilschen Sie danach aber auch um jede Viertelstunde der Folgeaufträge.
  4. Verlangen Sie regelmäßig Extra-Arbeiten…mal eben schnell hier was machen…und dann noch hier…und seien Sie stinksauer, wenn Sie die Zeit dafür auf der Rechnung wiederfinden.
  5. Wenn der Webmaster fragt, was Sie auf Ihrer neuen WebSite gerne selbst ändern möchten, sagen Sie „alles!“. Wenn das stark modifizierte Content-Management-System fertig ist schicken Sie ihm aber trotzdem alle Änderungen als mehrseitiges DOC oder PDF zu und verlangen, daß er das für Sie ändert.
  6. Lassen Sie ihn viel Zeit mit der Beantwortung Ihrer Anfragen verbringen (z.B. für Geschwindigkeits-Optimierung, SEO, AdWords, das richtige Plugin unter 67 verschiedenen Möglichkeiten etc.), sagen Sie „Danke“, wenn er das Ergebnis ausführlich präsentiert, aber sonst auch nichts.
  7. Lassen Sie sich für jeden kleinen geplanten Vorgang eine genaue Zeitschätzung geben. Dann gehen Sie zu Ihrem Ex-Programmierer oder jemandem aus Ihrer Verwandschaft („der 14-jährige Sohn vom Schwager kann auch Internet“), fragen Ihn was er dafür nehmen würde, und danach präsentieren Sie diese Zahl Ihrem Webmaster.

 

…Fortsetzung folgt…

Der GoogleMaps-Geocoder ist auch nicht mehr das was er mal war!

Ein Update zu meinem Artikel von neulich: „The Events Calendar“ mit OpenStreetMaps statt Google Maps.

Es hat quasi alles geklappt mit der im Artikel beschriebenen OpenStreetMap. Nur lagen manche Marker und Adressen extrem daneben, z.B. mitten in den USA, westlich von Sardinien im Meer oder auch in Zentralafrika. Dabei liegen die Orte eindeutig im schönen Rheinhessen. Was stimmt hier also nicht?

Das Problem trat sowohl auf der im ersten Artikel beschriebenen Events-Calendar-Seite als auch bei einer anderen WebSite auf, die die Adressen einfach aus einer selbst erstellten Dartenbank holt. Egal was man tut…es ist immer irgendwas nicht ok.

Offensichtlich ist es so, daß der Geocoder von Google Maps (also der Service, der aus einr Adresse Koordinaten macht) in letzter Zeit unzuverlässig geworden ist. Etwa seit Mai 2018, als dort zwingend Kreditkartendaten und strengere Regeln für die Benutzung eingeführt wurden (wieder ein Grund mehr, auf OpenStreetMaps umzustellen).

Deshalb habe ich folgende Lösung programmiert:

  • Ein neues Custom Field erstellt, und „latlng“ genannt.

Dazu muß man rechts oben im WP-Admin auf Optionen gehen und „Benutzerdefinierte Felder“ anwählen. Beim ersten Mal muß man „neues Feld“ auswählen und ihm den Namen „latlng“ geben. Beim nächsten Mal existiert latlng dann schon, das muß man dann in der Liste auswählen.

Links oben den Ort suchen. In der dann erscheindenden Karte die richtige Adresse lokalisieren, dann mit der rechten Maustaste dahin klicken und „Adresse anzeigen“ wählen. Jetzt erscheinen links die Koordinaten. Toll, gell?

  • Die Koordinaten komplett kopieren (etwa „49.7427,8.2378“), mitsamt dem Komma, und in das Feld latlng eintragen. Seite / Beitrag dann speichern.

Adresse stimmt jetzt, jetzt nur noch die Anzeige von Adresse auf Koordinaten umstellen, wenn dieses Feld gefüllt ist.

  • Die in der functions.php vorhandene Funktion, die den [leaflet-map]-Shortcode erzeugt, etwas erweitern.

Ich gehe mal davon aus, daß die Adresse bekannt ist, etwa in der Art oder so ähnlich:

$address .= $strasse." ".$hausnummer.", ".$plz." ".$ort;

dann wäre die Version mit funktionierendem Geocoder z.B. folgende:

$sc  = "[leaflet-map address='".$address."' tileurl='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' zoom=14]";
$sc .= ' [leaflet-marker address="'.$address.', DE" '.$icon.']';
$sc .= $address.'[/leaflet-marker]';

muß jetzt geändert werden zu

$latlng = get_post_meta($post->ID, 'latlng');
if ($latlng) {
$latlng = explode(",", $latlng[0]);
$sc = '[leaflet-map lat='.$latlng[0].' lng='.$latlng[1].' tileurl="https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png" zoom=14]';
$sc .= ' [leaflet-marker lat="'.$latlng[0].'" lng="'.$latlng[1].'" '.$icon.']';
$sc .= esc_html($address);
$sc .= '[/leaflet-marker]';
}
else {
$sc = "[leaflet-map address='".$address."' tileurl='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' zoom=14]";
$sc .= ' [leaflet-marker address="'.$address.', DE" '.$icon.']';
$sc .= $address.'[/leaflet-marker]';
}

Jetzt stimmts 🙂

„The Events Calendar“ mit OpenStreetMaps statt Google Maps

Ein sehr beliebtes Kalender-Plugin ist The Events Calendar…auch schon in der kostenlosen Basisversion wunderbar und meistens ausreichend.

Man kann auch automatisch Google Maps einbinden. Das kann aber datenschutzrechtlich problematisch sein, denn eingebundene GoogleMaps benutzen viele viele Cookies und viele Tracker, um den Besucher der WebSite zu identifizieren und nachzuverfolgen. Das sollte man abschalten!

Eine Möglichkeit, OpenStreetMaps statt Google Maps einzubinden sucht man vergeblich. Auch der Support vom Events Calendar ist da eher lustlos: „Danke für deine Anfrage. Im Moment machen wir ganz viele Sachen, und evtl. ist dieses Feature auch schon dabei. Ansonsten schreib das doch einfach auf die Wishlist. Wir melden uns bei dir wann wir uns dransetzen.“ Tja…das Thema ist seit 4 Jahren in der Wishlist, und niemand hat sich je drangesetzt.

Also…setze ich mich halt mal dran 🙂

  1. Zuerst braucht man natürlich einen installierten  The Events Calendar mit mindestens einer Veranstaltung, die eine Adresse hat („Schnitzelbacher Straße 77a, 66321 Schmutzweiler“ z.B.). Jetzt im Admin-Bereich beiVeranstaltungen -> Einstellungen -> Allgemein -> Karteneinstellungen -> Google Karte aktivieren -> ankreuzen.Klar, dann kommt jetzt eine GoogleMap, aber die ist auch gleich wieder weg.
  2. Jetzt das Plugin Leaflet Map installieren. Das bindet wunderschöne OpenStreetMaps ein, mit wählbarem Stil (Wasserfarben etc.) und ist ganz leicht mit [shortcode] steuerbar.
  3. Jetzt muß man dem Events Calender nur noch sagen, daß er einen anderen Atlas nehmen soll:
    1. Die Datei the-events-calendar\src\views\modules\map.php finden
    2. und so wie oben in der Datei beschrieben  ins Theeme-Verzeichnis kopieren
      [your-theme]/tribe-events/modules/map.php
    3. Jetzt nur noch im Code ein paar Zeilen ändern. Das hier:

      $style = apply_filters( 'tribe_events_embedded_map_style', "height: $height; width: $width", $index );
      ?>
      <div id="tribe-events-gmap-<?php echo esc_attr( $index ) ?>" style="<?php echo esc_attr( $style ) ?>" aria-hidden="true"></div><!-- #tribe-events-gmap-<?php esc_attr( $index ) ?>

      ändern in

      $address = tribe_get_address( $venue_id ).", ".tribe_get_zip( $venue_id )." ".tribe_get_city( $venue_id ).", ".tribe_get_country( $venue_id );
      $shortcode  = '[leaflet-map address="'.$address.'" zoom="15" fit_markers="1"]';
      echo do_shortcode($shortcode);
      ?>

Fertig 🙂 Wer will kann bei der Karte jetzt noch mit diversen Shortcodes Aussehen und Verhalten ändern…