Monat: November 2012

WordPress is_page() reloaded

29. November 2012 - wordpress

Um Nebenwirkungen gerade auf komplexen Webseiten auszuschliessen sollte man sich daran erinnern, Code und  Styles nur dort einzufügen, wo sie wirklich benötigt werden.

English summary: This is just a reminder for me (and maybe you?) not to flood whole websites with scripts and css. By using the old and familar is_page() we can inject our code and styles only into those pages that definitely need them.

Im Beispiel sollen Styles und Scripts nicht auf den Seiten home, page1 und page2 inkludiert werden

class abc {
....
function abc() {
// if (is_page(....) doesn't work here. At this point, no information about pages is available.

add_action('wp_print_scripts', array ('abc','my_scripts'));
add_action('wp_print_styles', array ('abc', 'my_styles'));
}
function my_scripts() {
{
if  (is_page( array( 'page1','page2','home') )) return;
wp_register_script('script1', scriptname, dependencies,false,true);
wp_enqueue_script('script1');
}

function my_styles() {
if  (is_page( array( 'page1','page2','home') )) return;
wp_register_style('style1',stylename);
wp_enqueue_style('style1');
}
....

Ein Theme mit dem WordPress plugin all-in-one Event Calendar erstellen – Teil 2

23. November 2012 - all-in-one, Windows

Erfahrungen

All-In-One Event Calendar ist ein schönes und frisches neues Mitglied in der Familie der vielen Event-Plugins von WordPress. Es funktioniert und Probleme (davon weiter unten) werden von einem motivierten Help-Desk Team schnell angenommen und versucht zu lösen.

Soweit ich es beurteilen kann, ist die Programmierung sehr professionell und stammt von der Full Service Agentur The seed studio.

Den Funktionsumfang kann man erkennen, wenn man sich die Einstellungen zum Plugin im Dashboard von WordPress, die Seite zum Erzeugen der Events und die FAQ Seite des Plugins auf wordpress.org ansieht.

Das reicht für 80% aller Anforderungen aus und sieht auch noch schön aus.

Leider bin ich damit auch schon am Ende meines Artikels, weil es ein Theming mit All-In-One Event Calendar nicht gibt. Denn zur Zeit ist es ein Endprodukt, das man über CSS noch anpassen, aber in wesentlichen Bereichen nicht verändern kann.

Wenn es in den Blog passt, wunderbar, wenn es nicht passt, such dir was anderes oder zahle dafür.

Zusammenfassung

  • All-in-one Event Calendar ist als Endprodukt konzipiert, das schnell in den Markt kommen soll und viele Benutzeransprüche auf visuell ansprechende Art befriedigt
  • Schnittstellen für Änderungen, die über das mit CSS erledigbare hinausgehen sind zur Zeit nicht vorhanden (z.B. ist es nicht möglich, die Events eines vorgegebenen Monats anzuzeigen)
  • eine Dokumentation der Software ist im wesentlichen nicht vorhanden, eine Einarbeitung in die Software ist daher sehr zeitaufwändig und läuft, da Schnittstellen fehlen, auf einen – wenn man das auf sich nehmen will – Neubau der Funktionen im Originalcode hinaus, da Überschreiben nicht möglich sind.

Aufgetretene Probleme

Inkompatibilitäten zu Jigoshop

Inkompatibilitäten zu wpSeo

Ein Theme mit dem WordPress plugin all-in-one Event Calendar erstellen

16. November 2012 - all-in-one, wordpress

Hier und in einem noch zu schreibenden Artikel geht es um die Auswahl und das Anpassen eines Event Kalenders.

Anm.: (der zweite Artikel ist hier )

English Summary: This articel describes the criteria für the selection of a calendar plugin und the how to modify it.

Wie die Überschrift schon suggeriert, habe ich mich für den all-in-one Event Calendar entschieden. Bei der Unmenge von calendar plugins kann man sich leider nur sehr zeitaufwändig eine Übersicht verschaffen. Angeschaut habe ich mir

Event Espresso Lite
My Calendar
Simple Events Calendar
The Events Calendar
Calendar
All-in-One Event Calendar
Events Manager / Events Made Easy
WP-Events
Events Calendar

Kriterien waren:

  • Bewertung/ Zufriedenheitsgrad
  • Anzahl der Downloads
  • Weiterentwicklungschancen
  • Dokumentation/ Support
  • Softwarestruktur
  • Funktionen (Shortcodes), die ich für das Projekt unbedingt benötige

Bei den ersten vier Kriterien schneidet All-in-one sehr gut ab.

Die Softwarestruktur hat mir sehr gut gefallen, weil unter anderem die Themes über WordPress verwaltet werden. Man kann sie sehr leicht auswechseln ( ab der Version 1.8.3) und ihr Code wird nicht in den Code der Basisfunktionalität hineingemischt. Die von mir benötigten Shortcodes sind zu 90% vorhanden.

Allerdings gibt es nun noch eine Sache zu bedenken:

All-in-one kommt in zwei Geschmacksrichtungen auf den Markt:

als  kostenlose, von den WordPress Plugin Seiten ladbare Version (zur Zeit 1.8.2) und als eine, ebenfalls kostenlose, von den time.ly Seiten ladbare Premium Version (zur Zeit 1.8.3)

Beide unterscheiden sich erheblich bei der Lizenz. Die „WordPress“ Version ist GNU lizensiert, die „time.ly Version ist eine  End User License Agreement – EULA Lizenz

Darin heisst es unter anderem

2. DESCRIPTION OF OTHER RIGHTS AND LIMITATIONS.
(a) Maintenance of Copyright Notices.
You must not remove or alter any copyright notices on any and all copies of The All-in-One Event Calendar.
(b) Distribution.
You may not distribute registered copies of The All-in-One Event Calendar to third parties. Evaluation versions available for download from Timely Network Inc.’s websites may be freely distributed.
(c) Prohibition on Reverse Engineering, Decompilation, and Disassembly.
You may not reverse engineer, decompile, or disassemble The All-in-One Event Calendar, except and only to the extent that such activity is expressly permitted by applicable law notwithstanding this limitation.

Kann man unter diesen Umständen überhaupt eine Veränderung vornehmen?

Time.ly hat sich hier  noch einmal etwas entgegenkommender geäußert. Trotzdem werde ich wohl mit der GNU Version beginnen.

Ein Theme mit WordPress/ Jigoshop erstellen – Teil 6

8. November 2012 - jigoshop, wordpress

Nachdem mein Theme im wesentlichen fertig ist, möchte ich hier in lockerer Folge alle Dinge zusammenstellen, die mir im Verlauf mit der Arbeit am Jigoshop aufgefallen sind

Benutzerverwaltung

Jigoshop nutzt die WordPress Benutzerverwaltung, also die users und usermeta Datenbanktabellen von WordPress.

Jeder Käufer, der sich im Shop registriert, wird in diese Tabellen eingetragen und kann sich daher auf der Seite über das WordPress login  anmelden. Auf seinem Level 0 (der Administrator hat den Level 10) darf er allerdings nur seine Profildaten verändern. Für große Shops mit Tausenden von Käufern halte ich diese Vorgehensweise aber für intolerabel.

Übersetzungen

Jigoshop ist leider an (für mich) wesentlichen Stellen bisher (jigosho 1.4.3 Oktober 2012) unübersetzbar. Bei der Übersicht seiner Bestellungen wird einem Käufer als Versandort Germany genannt. Das kann man zwar patchen – jigoshop/classes/jigosho_order.class.php – Zeile 145 einfügen

if ($country==’Germany‘) $country=’Deutschland‘; –

aber ein Patch ist ein Patch und eine Rose ist eine Rose. Die classes lassen sich leider nicht überschreiben wie die templates (siehe dazu Teil 3). Warten wir halt mal auf eine neue Version.

Die Begrüßung, nachdem man sich registriert hat, ist englisch-amerikanisch. Ein Käufer namens Bram Stoker wird mit

„Hallo, Bram. Von Ihrer Benutzerkonto-Übersicht aus können Sie neue Bestellungen sehen, den Versand und die Rechnungsadresse verwalten sowie Ihr Passwort ändern.“
empfangen.

Für Bram ist das ok, aber für Otto Müller vielleicht nicht…

Bestellungen

Die Bestellungen landen in serialisierter Form in der postmeta Tabelle des Themes und können von einem externen Auswertungsprogramm nicht ohne weiteres analysiert werden.

Beispiel:

a:1:{i:0;a:9:{s:2:“id“;s:3:“122″;s:12:“variation_id“;s:0:““;s:9:“variation“;a:0:{}s:13:“customization“;s:0:““;s:4:“name“;s:37:“2011 – Riesling – Trocken“;s:3:“qty“;s:1:“1″;s:4:“cost“;s:5:“10.84″;s:12:“cost_inc_tax“;s:2:“-1″;s:7:“taxrate“;s:7:“19.0000″;}}

Ein Theme mit WordPress/ Jigoshop erstellen – Teil 5

5. November 2012 - jigoshop, wordpress

5. Featured Products / der Bestseller

Ein featured product ist ein normales Jigoshop Product, bei dem im Backend ein zusätzliches Kennzeichen gesetzt wurde

Die Darstellung im Frontend ist dieses Mal sehr einfach. Im Template Weinshop muss nur an geeigneter Stelle der folgende jigoshop-shortcode eingefügt werden


<?php echo do_shortcode( '[featured_products per_page="1" columns="1"]' ) ?>

Dadurch wird unsere modifizierte loop-shop.php aufgerufen, die das Produkt über die vorhandene Funktion nf_product_display(…) darstellt.

6. Styling der weiteren Seiten des Jigoshops

Die restlichen Seiten des Shops werden relativ unverändert übernommen. Das Styling dieser Seiten steht in der Datei plugins/jigoshop/assets/css/frontend.css im Jigoshop.

Wenn es z.B. durch veränderte Seitendimensionen nicht ganz passt und verrutscht, kann man das jigo-css über die obligatorische  style.css im WordPress Theme überschreiben.

Z.B. habe ich im Warenkorb das standardmässige Produktbild-Thumbnail mit display: none verschwinden lassen und die Gesamtbreite der Shopseiten verändert.

7. https

Zu diesem Thema werde ich mich später mal wieder melden, wenn ich damit beim Launch meines Projekts mehr Erfahrung gesammelt habe

Ein Theme mit WordPress/ Jigoshop erstellen – Teil 4

4. November 2012 - jigoshop, wordpress

4. Einzelproduktdarstellung

Die wichtigste Datei ist hier … plugins/jigoshop/templates/single-product.php. Die Umstände sind ähnlich wie bei der Produktdarstellung in der  loop-shop.php.

Also wird auch single-product.php in das Theme in den Ordner jigoshop kopiert und modifiziert.

Anschließend sieht die Datei wie folgt aus, gleicht also eher der bekannten single.php


<?php get_header('shop'); ?>
<div ...>
<div ...>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); global $_product; $_product = new jigoshop_product( $post->ID ); ?>
<?php do_action('jigoshop_before_single_product', $post, $_product); ?>
<?php nf_single_product_display($post,$_product,$loop); ?>
<?php endwhile; ?>
</div>
</div>
<?php get_footer('shop'); ?>

Die  (hier viel aufwändigere) Umsetzung der grafischen Vorlage wird in der Funktion nf_single_product_display(..) in der functions.php durchgeführt.

Ein Theme mit WordPress/ Jigoshop erstellen – Teil 3

4. November 2012 - jigoshop, wordpress

3. Produktdarstellung

Verantwortlich für die Anzeige des Shops bzw. in meinem Fall der einzelnen Produkte in ihren Kategorien ist die Datei …plugins/jigoshop/templates/loop-shop.php

Sie wird über den entsprechenden Shortcode auf den WordPress-Produktseiten (z.B.

[ jigoshop_category slug="weissweine” ]

aufgerufen.

In loop-shop.php sind bereits einige action-hooks enthalten. Diese Hooks werden über

…. plugins/jigoshop/template_actions.php  und

…. plugins/jigoshop/template_functions.php  bedient.

Alles in allem ist das etwas unübersichtlich, weil template_actions.php und  template_functions.php selbst wieder neue action-hooks erzeugen und bedienen.

Der Demo-Shop im Theme twentyeleven lässt sich damit perfekt erzeugen, aber eine Änderung der Produktanzeige nur über die Hooks ist entsetzlich mühselig.

Ich habe daher auf all diese Hooks verzichtet, in meinem Theme einen Ordner jigoshop erstellt, die loop-shop.php dort hinein kopiert und modifiziert. Ähnlich wie WordPress mit den Childthemes verfährt, greift Jigoshop auf diese Datei zu, wenn loop-shop.php geladen werden soll.

Meine loop-shop.php sieht jetzt so aus:

global $columns, $per_page;
$nf_flag=is_shop('Weinshop');
if (!$nf_flag) do_action('jigoshop_before_shop_loop');

$loop = 0;
ob_start();

if (have_posts()) : while (have_posts()) : the_post(); $_product = new jigoshop_product( $post->ID ); $loop++;

nf_product_display($post,$_product,$loop,$nf_flag);

endwhile; endif;

if ($loop==0) :

if ($nf_flag) echo '';
else echo '<p class="info">'.__('No products found which match your selection.', 'jigoshop').'</p>';

else :

$found_posts = ob_get_clean();

if ($nf_flag) {echo $found_posts;}

else {echo '<div id="product_wrapper">' . $found_posts . '</div><div class="clear"></div>';}

endif;

In der Funktion nf_product_display (…), die in der functions.php steht, wird das Produkt so wie in der Werbeagentur-Vorlage grafisch vorgegeben aus den vielen Einzelteilen über get_post_meta( $post->ID, …. ) zusammen gebaut und direkt ausgegeben.

Wenn man genau hingesehen hat, sind zwei Loops notwendig für die Produktausgabe.

Über loop-shop.php werden alle in Frage kommenden Produkte gesammelt und formatiert und über die zweite Loop in dem WordPress-Seiten-Template dann in einem Satz ausgegeben.

Für einige Funktionen wie „Preis ausgeben“ und „in den Warenkorb legen“ habe ich mich noch an Methoden der wichtigen Produktklasse plugins/jigoshop/classes/ jigoshop_product.class.php, die in der Loop für jedes Produkt neu instanziiert wird, bedient ($_product->get_price_html() bzw. $_product->add_to_cart_url())

Man sollte noch daran denken, in der Nähe des Preises den Hinweis „inkl. MwSt. zzgl. Versand“ anzufügen.

Ein Theme mit WordPress/ Jigoshop erstellen – Teil 2

4. November 2012 - jigoshop, wordpress

2. Seiten

Für die Produktseiten  lege ich ein Template an

<?php
/*
Template Name: Weinshop_leer_ohne_Kommentare
*/
?>
<?php
get_header(); ?>
<div …
<div ….
<?php if (have_posts()) : while (have_posts()) : the_post();

the_content()

endwhile; endif; ?>
</div>
</div>
<?php get_footer(); ?>

Hier ist nur das notwendigste enthalten.

Für jedes Produkt (Rotweine, Weißweine, …) erzeuge ich dann eine WordPress-Seite, der dieses Template zugeordnet wird.

Auf der WordPress-Seite wird der Jigoshop-Shortcode für das entsprechende Produkt eingetragen.

Also für Weißweine:

[ jigoshop_category slug="weissweine" ]

Ein zweites Template bekommt die WordPress-Seite „Weinshop“. Hier werden aber keine Produkte (Ausnahme: das featured product – Bestseller, aber davon später mehr) angezeigt, sondern nur allgemeine Informationen. Deshalb enthält dieses Template auch keinen Loop.

<?php
/*
Template Name: Weinshop_ ohne_Kommentare
*/
?>
<?php
get_header(); ?>
<div …
<div ….
<?php do_action('jigoshop_before_shop_loop');?>
</div>
</div>
<?php get_footer(); ?>

Der action-hook ‚jigoshop_before_shop_loop‘ wird benötigt, um Jigoshop Meldungen anzuzeigen (z.B. „Produkt erfolgreich in den Warenkorb gelegt“)

Um die Sidebar auszublenden, die wir in diesem Theme nicht benötigen, muss man in die functions.php folgendes eintragen:

remove_action('jigoshop_sidebar', 'jigoshop_get_sidebar', 10);

Damit Jigoshop zufrieden ist, lege ich noch eine WordPress-seite “shop” an und weise in der Jigoshop Konfiguration, „Katalog&Preise“ dem Eingabefeld „Basisseite Produktkatalog“ diese Seite, die aber sonst im Weinshop überhaupt keine Rolle spielt, zu.

Das nächste Eingabefeld auf der gleichen Seite  „Weiter zum Shop“ bekommt die Startseite des Shops, die Seite „Weinshop“ zugewiesen.

Als letztes müssen WordPress Seiten für die einzelnen Shop- Funktionen (Benutzerkonto, Warenkorb usw. )angelegt werden. Auf jeder Seite muss der in der Jigoshop Konfiguration „Seiten“ angezeigte Shortcode eingetragen werden.

Damit hätten wir den 2. Teil erledigt

Ein Theme mit WordPress/ Jigoshop erstellen – Teil 1

2. November 2012 - jigoshop, wordpress

In den nächsten Artikeln möchte ich beschreiben, wie ein neues Theme für einen Jigoshop entsteht.

Der Shop ist online unter diesem Link

English Summary: This is a description of how to set up a new Jigosgop theme, not a description of the installation and configuration. The foundation of the theme is an ad agency design which requires extensive modifications of the simple twentyeleven demo shop layout.

Warum Jigoshop und nicht woocommerce?

Jigoshop und woocommerce sind (noch) funktional fast identisch. Das meiste, was hier über Jigoshop gesagt wird, trifft auch auf woocommerce zu. Den Ausschlag für Jigoshop gab, dass hier alle im Projekt benötigten Zahlungsmodule in der Basisversion bereits enthalten waren, und nicht dazu gekauft werden mussten.

Vorgehensweise:

Die Vorlage für das Theme ist ein Entwurf einer Werbeagentur. Das Produkt, hochwertiger Wein, soll in einem kleinen aber feinen Weinshop vom Winzer direkt vermarktet werden.

Teil 1: Backend

Mit dem Backend (Jigoshop/ Produkte) fangen wir an. Zum Anlegen der Produkte (die Jigoshop Produkte sind „custom posts“ und heißen schlicht „product“) brauchen wir die Möglichkeit, mehrere verschiedene Bilder zu hinterlegen und über 20 Produktzusatz-Angaben zu erfassen. Der Jigoshop bringt hier bereits einiges mit (z.B. die Preiseingabe), aber leider reicht es nicht aus.

Zum Glück ist „Wein“ ansonsten ein „einfaches“ Produkt, so dass wir uns nicht auch noch mit „gruppierten“ oder „variablen“ Produkten herumschlagen müssen.

Der Jigoshop benutzt als  Produktbild das quadratische WordPress Artikelbild. Das gefällt nicht so sehr.

Produktzusatz-Angaben kann man über die mitgelieferte Metabox „Produktdaten“ machen. Die Bedienung dieser Metabox ist gewöhnungsbedürftig und lässt auch keine komfortable Eingabe von zusätzlichen Bildern zu.

Wer damit leben kann, braucht jetzt nicht weiter zu lesen, d.h. vielleicht noch den Abschnitt „Zu guter Letzt“ ganz unten. Für die Bilder gibt es noch den Plan B auch weiter unten. Die zusätzlichen Daten aus der Metabox „Produktdaten“ werden in die postmeta Tabelle der WordPress Datenbank in komprimierter Form eingetragen.

Das ist ok für wenige Produkte. Für viele Produkte sollte man einen anderen Ansatz (=eigene Datenbanktabelle) oder einen anderen Shop wählen.

Weil ich nicht so gut mit der vorhandenen Metabox leben kann (der Kunde soll die Webseite später selbst pflegen können), wird das Backend (Produkt hinzufügen) um zwei Eingabefelder für Bilder und 20 Text- bzw. Textarea-Felder in zwei neuen Metaboxen erweitert. Dazu benutze ich das von Steve Taylor  beschriebene Verfahren. Er hat auch ein Plugin  für Entwickler geschrieben, das ich aber noch nicht ausgetestet habe.

Warum kein fix & fertiges Plugin wie Magic Boxes? Das ist Geschmacksache. Ich würde dies Plugin sofort einsetzen, wenn es von WordPress anstelle von Hello Dolly ausgeliefert würde. Im Falle meines Kundenprojekts verlasse ich mich auf die Sachen, die ich kenne, und weiß, wo ich hinfassen muss, wenn es mal nicht funktioniert. Der Jigoshop ist schon kompliziert genug.

Der Code, der die Metaboxen erzeugt, sieht etwas anders aus als bei Steve Tylor:

 add_meta_box('jigo_shop_prod','weitere Produktdaten', array( &$this, 'displayCustomFields1' ), 'product','normal','core');
 add_meta_box('jigo_shop_prod_detail','Weindetails', array( &$this, 'displayCustomFields2' ), 'product','normal','core');

Hier steht explizit der Posttyp ‚product‘ drin.

So sieht es fertig aus (Ausschnitt):

Von den Jigoshop Standard Feldern wird nur das Preisfeld benutzt.

Ganz oben kann man den Bild-Uploader sehen. Informationen dazu gibt es z.B. hier

Wenn man den so nicht hinbekommt (ihr könnt auch einen Kommentar schreiben, ich helfe gerne) gibt es den Plan B: ein einfaches Textfeld erzeugen, Bilder in die Mediathek laden, Bild aufrufen, den Link kopieren und in das Textfeld eintragen. Ist etwas aufwendiger, funktioniert aber auch.

Auch in diesem ohne Zweifel aufwändigerem Verfahren werden die Daten in die postmeta Tabelle von WordPress eingetragen, allerdings ohne serialisiert zu werden. Da wir aber nur wenige Produkte haben, ist das so in Ordnung.

Und wenn es mehr werden? Die Struktur der zusätzlichen Eingabefelder ermöglicht einen leichten Übergang auf Datenspeicherung in einer eigenen Tabelle.

Zu guter Letzt:

Im Backend werden Jigoshop-Kategorien für die einzelnen Produkte angelegt, in meinem Fall also Weißwein, Rotwein, Sekt usw