Analytics Event Tracking mit WordPress Shortcodes

Ich stand vor dem Problem in einer WordPress-Installation bei einem Button, den ich über einen WordPress-Shortcode realisert habe ein Google Analytics Event Tracking einzubauen. Der Shortcode sah folgendermaßen aus:

[button link="http://www.meinedomain.de/angebotsanfrage/" type="big" color="green"]Angebot anfordern[/button]

Wo und wie also den Event Tracking Code von Google einfügen, der normalerweise als z.B. Onclick-Handler in einem <a>-tag steht:

onclick="_gaq.push(['_trackEvent', 'Angebotsanfrage', 'Button']);"

Nach einiger Recherche im Netz habe ich keine direkt Möglichkeit gefunden, aber eine indirekte. Und zwar den Button eben nicht als Shortcode-Implementierung realisieren, sondern als ganz normalen Link mit klassischem <a>-Tag, aber dafür diesem Link die Klasse des Shortcodes geben, z.B. so:

<a href=http://www.meinedomain.de/angebotsanfrage/" onclick="_gaq.push(['_trackEvent', 'Angebotsanfrage', 'Button', 'Office 2003']);" class="biggreen">Angebot anfordern</a>

Und die entsprechend CSS-Klasse könnte dann so aussehen:

.biggreen {
    background: linear-gradient(to bottom, #95be0e 0%, #95be0e 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) ;
    border: 1px solid #4dab46;
    color: #fff ;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
    margin: 25px 6px 8px 0;
    padding: 14px 24px;
    border-radius: 10px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 1px 1px 1px rgba(0, 0, 0, 0.1);
    display: inline-block;
    line-height: 26px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

Conversion Tracking Code für WordPress Plugin Fast and Secure Contact Form

Über längere Zeit habe ich versucht beim Kontaktformuar Plugin für WordPress "Fast and Secure Contact Form" meinen einzelnen Formularen in z. B. verschiedenen Sprachen jeweils eigene AdWords Conversion Tracking Codes zu geben, die dann quasi nach erfolgreichem Abschicken des Formulars auf der "Success Page" ausgegeben werden, um einen Conversion erfolgreich im AdWords-Backend zu zählen.

Über einen Thread im WordPress Plugin Support habe ich es geschafft, dass mir der Entwickler Mike Challis ein Feld in einen neue Version (ab 4.0.23) des Plugins eingebaut hat, wo ich Code auf der "Sucess Page" hinterlegen kann, also auch das AdWords Conversion Tracking Script:

Das Feld findet sich bei der Formularverwaltung im WordPress Backend im Tab "Erweitert" und heisst "Success page additional HTML".

Hier der Link zum Support Thread: http://wordpress.org/support/topic/contact-form-tracking-w-google-ad-words

Ausschalten der automatischen Update-Funktion in WordPress

Um das seit der Version von WordPress 3.7 automatisierte Update auszuschalten, muss man etwas in der wp-config.php ergänzen:

/* Automatische Update von WordPress ausschalten */
define( 'AUTOMATIC_UPDATER_DISABLED', true );

Eigene Navigation im WordPress Template einbauen

Hier ein schöner Link wie man eine im WordPress-Backend unter Design -> Menüs angelegte Navigation an beliebiger Stelle in einem Template ausgeben lassen kann:

http://www.stylaxy.de/2011/11/selbst-erstelltes-menu-in-wordpress-theme-aktivieren/

Silbentrennung im WordPress TwentyTwelve Theme ausschalten

Um die Silbentrennung im WordPress TwentyTwelve Theme auszuschlaten kann man einfach eine überschreibende CSS-Formatierung am Ende der style.css verwenden:

.site-content article,
.widget-area .widget {
    word-wrap: normal !important;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
}

Woocommerce Tabs auf Produktebene ohne CSS-Styling?

Nach einem Update war bei der Produktbeschreibung und bei der Bewertung auf einmal die Tab-Optik weg und die zwei Bereiche wurden nur noch als Liste mit Links dargestellt? Nach langerer Recherche konnte ich rausfinden warum. Das CSS passte nicht mehr und somit wurden die "Tabs" nicht gestylt.

Irgendetwas scheint bei der Benennung der Klassen in Woocommerce auf einem etwas anders zu sein. Und zwar fehlen "übergeordnete Klassen" die aber in der CSS-Benennung verwendet werden. Diese sind .woocommerce und .woocommerce-page.

Meine Lösung war also diese Klasse(n) übergeordnet irgendwo im Template wo sie sonst nicht stören zu ergänzen, damit die Benennung im Woocommerce-CSS wieder stimmt.

Ads Zones - Simple Ads Manager - kategorisierte Bannerausgabe auch für einzelne Artikel

Ich benutze bei einem WordPress-Projekt das Simple Ads Manager Plugin und arbeite auch mit den Ads Zones. Jetzt stand ich vor der Aufgabe bestimmte Banner nur für alle Artikel einer spezifischen Kategorie ausgeben zu lassen. Leider geht das in der Verwaltung der Ad Zone nur für die Kategorie-Übersichtseiten (Archives), aber nicht für die einzelnen Artikel in ihnen. Eventuell weil es sonst zu Problemen bei Artikel kommen kann, die in mehreren Kategorien sind?

Die Lösung ist die Steuerung eines Banners für die Ausgabe in allen Artikel einer Kategorie nicht über die verschiedenen Ads Places in einer Ads Zone, sondern innerhalb eines Ads Place auf Bannerebene. Das bedeutet in anderen Worten, man macht eine globalen großen Ad Place und packt da alle Banner rein, die man spezifisch in den Kategorien ausgeben lassen möchte. Dann sagt man dem Banner in welcher Kategorie und v.a. auch in welchen Artikel einer Kategorie das Banner kommen soll, indem man den Haken in die richtige Checkbox setzt und dann die entsprechende Kategorie(n) auswählt:

Hat man seinen globalen großen Ads Place mit seinen kategorisierten Bannern erstellt, geht man in die entsprechende Ads Zone die man belegen will und hinterlegt den globalen großen Ads Place (hier: Zonen Test Kategorien) als Standard Ads Place und ganz wichitg auch als Ads Place auf Artikel. Zusätzlich hat man noch die Möglichkeit die Homepage mit einem eigenen Ads Place (hier: Tiermedizin 160x600 grau) anzusteuern was durchaus oft Sinn macht.

Natürlich gibt es noch mehr Einstellungen, aber das sind sozusagen die Basics.

Pflichtfelder Woocommerce Checkout ein- und ausschalten

Wie schalte ich bei dem WordPress-Shop-Plugin Woocommerce die Pflichtfelder im Checkout aus und an. Dazu muss man in der Datei /wp-content/plugins/woocommerce/classes/class-wc-countries.php bei dem entsprechenden Formularfeld das folgendermaßen z.B. ändern:  

‘required’ => true, in ‘required’ => false,

Das könnte dann z.B. so aussehen, wenn man bei der Telefonnummer das Pflichtfeld aufheben möchte:

$address_fields['billing_phone'] = array(
‘label’ => __(‘Phone’, ‘woocommerce’),
‘placeholder’ => _x(‘Phone’, ‘placeholder’, ‘woocommerce’),
‘required’ => false,
‘class’ => array(‘form-row-last’),
‘clear’ => true
);

Updatesicher ist die Änderung an dieser Stelle wohl leider nicht, da sie bei einem Woocommerce-Update wohl wieder mit den Standardeinstellungen überschrieben wird.

Nachtrag (18.10.2014):
Der Datei-Pfad in meinem aktuellen Woocommerce 2.2.6 hat sich geändert und ist jetzt:
/wp-content/plugins/woocommerce/includes/class-wc-countries.php

Breite bei Standard-Theme WordPress Twentytwelve ändern

Ich wollte mal schnell die Breite beim aktuellen Standardtheme von WordPress Twentytwelve ändern und hab einfach die Pixelwerte in der style.css angepasst - aber Pustekuchen, nix passiert. Dann habe ich einen guten Artikel gefunden, der noch auf die "rem"-Angabe eingeht, die ich vorher nicht kannte und wie man diese entsprechend passend ausrechnet (rem=Pixelwert/14):

http://knallbummpeng.de/wordpress-twenty-twelve-width/

Im Nachhinein kann ich mich auch erinnern, dass am Anfang der style.css vom Twentytwelve Theme auch was in der Richtung in den Kommentaren beschrieben steht, aber ich hatte es erst nicht gecheckt.

Der visuelle Editor bei WordPress geht nicht?

Man kann viel rumprobieren und suchen, aber manchmal liegt es gar nicht am System selber oder dass man etwas falsch gemacht hat. Manchmal liegt es einfach daran, dass via FTP die Daten nicht richtig übertragen wurden. Hatte diese Problem auch schon bei Magento. Hier kann dieser Sachverhalt auch zutreffen. Unter folgendem Artikel ist das Ganze Thema sehr gut aufgegriffen:

http://www.ueberkritisch.de/wordpress-visueller-editor-funktioniert-nicht-mehr/

Responsive Text erstellen

Ich stand vor dem Problem einen Überschriften-Bereich, den ich selber in den Header einer WordPress-Seite integriert hatte "responsive" zu machen. Das ausgewählte Theme selber war schon responsive, aber beim "kleinerschieben" im Browser ist mein Überschriftenblock zu groß und statisch geblieben.

Also suchte ich eine Lösung Text responsive zu gestallten und habe das Plugin/Code von FixText gefunden:

WordPress-Plugin: http://wordpress.org/extend/plugins/fittext/

Händische Lösung: http://www.drweb.de/magazin/responsive-schriftgrosen-mit-fittext/
und http://fittextjs.com/

Ich benutzte bei dieser Webseite (www.axel-schaedlingsbekaempfung.de) momentan die WordPress-Version 3.5.1. Leider hat es hier nach der Installation und der Einbindung des <script> nicht funktioniert?

Wir haben herausgefunden, dass es an der falschen jQuery Bibliothek lag. WordPress 3.5.1 lädt wohl die Version 1.8.3 das FixText-Plugin arbeitet aber mit 1.7.2!

Also haben wir einfach im Ordner wp-include/js/jquery die ursprüngliche Datei jquery.js mit der 1.8.3 Version auskommentiert. Stattdessen haben wir eine neue jquery.js Datei mit dem Inhalt der Version 1.7.2 angelegt (http://code.jquery.com/jquery-1.7.2.js). Und siehe da, es funktioniert! Wenn man jetzt noch das Skript mit der minFontSize und der maxFontSize nimmt, hier etwas rumspielt und mit dem Skalierungsfaktor etwas rumspielt, schafft man es sich das Ganze schön einzurichten.

Einen Seiteninhalt an belieber Stelle im WordPress-Template ausgeben

Ich stand vor dem Problem auf einer Startseite bei WordPress in der index.php einen Intro-Text einzufügen. Den Text einfach hart reincoden wäre ja kein Problem gewesen, allerdings soll der Kunde gerade diesen Bereich auch selber übers WordPress-Backend steuern können. Mit folgenden zwei Codestücken könnt ihr das Problem lösen:

Code für die Ausgabe des Inhalts an gewünschter Stelle:

    <?php echo getPageContent(ID-der-Seite); ?>

Code für die functions.php damit das Ganze funktioniert:

<?php

function getPageContent($pageId)
{
if(!is_numeric($pageId))
{
return;
}
global $wpdb;
$sql_query = 'SELECT DISTINCT * FROM ' . $wpdb->posts .
' WHERE ' . $wpdb->posts . '.ID=' . $pageId;
$posts = $wpdb->get_results($sql_query);
if(!empty($posts))
{
foreach($posts as $post)
{
return nl2br($post->post_content);
}
}
}

?>

Quelle ist dieser super Blogartikel:

http://www.get-up-works.de/wordpress/wordpress-themes/seiteninhalt-an-beliebiger-stelle-im-theme-aufrufen/

Nachtrag 06.06.2014:

Da die Beschreibung oben bei mir gerade nicht mehr funktioniert hat hier eine Alternative. Den Code im Template an der gewünschten Stelle platzieren und die "99" mit der ID seiner Seite, die den Inhalt bereitstellen soll austauschen:

<?php
 $id = 99;
 $p = get_page($id);
 echo apply_filters('the_content', $p->post_content);
 ?>

Gefunden habe ich das hier:
http://www.netz-gaenger.de/blog/wordpress-tutorials/wordpress-seiteninhalte-sidebar-ausgeben

Seiten und Artikel in WordPress duplizieren

Wenn ihr euch schon immer gefragt habt, ob man Artikel und Seiten in WordPress nicht einfach duplizieren kann, lautet die Antwort: Nicht mit Bordmitteln!

Allerdings gibt es natürlich ein Plugin, das diesen Missstand löst: Duplicate Post

Einen schönen Artikel dazu habe ich hier gefunden.

.html bei WordPress Seiten bzw. Pages

Aus SEO-Sicht stellt sich gerne mal die Frage welche Endungs-Art einer URL die beste ist - mit .html, ohne oder in einem Unterordner oder ...

Ich hatte auch schon öfters den Fall, dass ich eine mehr oder weniger statische Seite auf eine WordPress-Installation umziehen oder relauchen musste.
Jetzt könnte z.B. die URL-Struktur und Benennung genau übernommen werden. Problem ist allerdings, dass die alte statische Seite eine .html-Endung hat und zumindest die Seiten in WordPress diese Möglichkeit nicht bieten (bei den Artikel sieht es anders aus und würde es funktionieren in WordPress).

Das Problem kann man mit einem einfachen WordPress-Plugin lösen, das bei den Seiten das .html hinzufügt: .html on Pages

Die Info dazu habe ich selber unter diesem sehr schönen Artikel von Dennis Bitsch gefunden.

FS Contact Form und Conversion Tracking AdWords

Habe mir die Aufgabe gestellt das AdWords Conversion Tracking bei WordPress beim Senden des Kontaktformulares einzurichten. Ich verwende das Fast and Secure Contact Form Plugin. Grundsätzlich wäre das ganze bei einer klassischen statischen HTML-Seite ja kein Problem. Ich generiere mir den Conversion-Tracking-Code in meinem AdWords-Account und füge diesen dann irgendwo, am besten am Ende, zwischen den body-Tags auf der "Danke für Ihre Nachricht"-Seite ein. Jetzt hat aber das WordPress Plugin FS Contact Form keine eigene URL für die "Danke für Ihre Nachricht"-Seite. Also wo den Conversion-Tracking-Code von AdWords einfügen? Ich habe es folgendermaßen gelöst. In der Datei si-contact-form.php habe ich wie in dem Bild unten zu sehen den Code an der Stelle eingebaut zwischen den p-Tags wo der "Danke für Ihre Nachricht"-Text ausgegeben wird. Die Datei findet man unter /wp-content/plugins/si-contact-form/si-contact-form.php:

Dann habe ich testmäsig ein Kontaktformular auf der Webseite abeschickt, um mir die "Danke für Ihre Nachricht"-Seite anzeigen zu lassen. Ich wollte schauen ob das Kontaktformular noch grundsätzlich funktioniert und ob im Quelltext der Conversion-Tracking-Code von AdWords mit ausgegeben wird. Und wie es scheint funktioniert es wie man am ausgegebenen Seitenquelltext erkennen kann.

Nur Flaggen-Navigation beim WPML-Übersetzungs Plugin für WordPress

Hier habe ich ganz schön gekämpft, da ich grundsätzlich nicht so der Chef im PHP-Syntax bin. Das Hauptproblem bei der Sache war, dass auf der WPML-Homepage die Übersetzung im Deutschen für den "Custom Language Switcher" sich nicht mit dem englischen Original inhaltlich deckt. Im englischen wird der Punkt wie man eine reine Flaggen-Auswahl ohne Text macht explizit beschrieben, in der deutschen Übersetzung der WPML-Seite fehlt dieser Punkt einfach ganz. Und so gehts:

function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        foreach($languages as $l){
            if(!$l['active']) echo '<a href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" 
            alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

Der oben stehende Code muss in die function.php des "default" Standard-Themes eingetragen werden. Da ich es nicht besser kann habe ich es direkt am Anfang eingefügt.

Dann muss man an die Stelle wo man die Flaggen darstellen will den folgenden Code einfügen, z.B. in der header.php:

<div id="flags_language_selector"><?php language_selector_flags(); ?></div >

Als letztes muss man noch den DIV-Container und die Flagen-IMG via CSS positionieren und stylen, z.B.:


#flags_language_selector img{
margin:1px;
border:1px solid #333;
}


Die IDs bei WordPress im Backend anzeigen

Wenn man in WordPress ein bisschen mehr machen will wie der absolute Standard, kommt man irgendwann an den Punkt wo man die IDs der z.B. einzelnen Seiten oder Bilder benötigt. Normalerweise muss man z.B. im Backend auf die entsprechende Seite klicken und oben in der URL kann ich dann die ID ablesen. Hat man aber viele Seiten und brauch auf die Schnelle alle IDs ist es recht mühsam in jede Seite einzeln reinzuklicken. Deshalb wäre es angenehm die IDs in Backend in der Seitenübersicht zu sehen. Mit dem WordPress-Plugin Reveal IDs kann man diese Problem elegant lösen.

http://wordpress.org/extend/plugins/reveal-ids-for-wp-admin-25/

WPML-Plugin - hart codierte Links übersetzbar machen

Ich stand vor der Aufgabe eine WordPress-Installation mehrsprachig zu machen. Aus mehreren Gründen habe ich mich für das kostenpflichte Plugin WPML entschieden. Soweit alles wunderbar. Allerdings stand ich vor dem Problem, dass meine Navigation hart codierte Links waren und nicht über den Backend-Punkt "Menü" bei WordPress erstellt wurden. Nach längerem recherchieren, zusammenstöpseln, in Foren rumtreiben, posten und ausprobieren bin ich auf folgenden Lösung gestoßen, die ich mir dann auch vom offiziellen WPML-Support verifizieren habe lassen:

<a href="<?php $permalink = get_permalink( icl_object_id(111, 'page', false) ); echo $permalink ?>"><h3><?php _e('IMPRESSUM','twentyten-child'); ?></h3></a>

Kurz zur Erklärung: die 111 ist die ID des Posts/Page in der Standardsprache, IMPRESSUM ist der zu übersetzende Text, und twentyten-child das Theme das ich verwnende. Die Aussage vom WPML-Support war noch das es Ok ist, er aber persönlich diese Variante bevorzugen würde:

<?php $permalink = get_permalink( icl_object_id(111, 'page', false) ); ?>

<a href="<?php echo $permalink ?>">
<h3><?php _e('IMPRESSUM','twentyten-child'); ?></h3></a>

FS Contact Form individuell gestalten

Meine eigene Aufgabenstellung war das WordPress Plugin Fast Secure Contact Form dazu zu bringen ein Kontaktformular nach meinen Wünschen darzustellen: vordefinierte Werte in den Inputfelder, die auf Klick verschwinden und die Felder sollen individuell kleiner gemacht werden. Hintergrund ist, dass ich ein Kontaktformular für einen Sidebar erstellen wollte, das möglichst wenig Platz benötigt, um nicht zuviel des sichtbaren Bereiches zu verschwenden. Das Formular wird dann mittels Shortcode einfach in ein Text-Widget der WordPress Sidebar integriert.


Da es ein indivuelles Formular ist benutze ich die Extra Fields.  Folgende Bereich habe ich verändert:

1. Das Label wollte ich ja nicht angezeigt haben, muss es aber beim Extra Field angeben, da hiermit das Feld "aktiviert" wird.
2. bei Default text kann man den Text eingeben, der im Inputfeld vordefiniert ausgegeben wird.
3. Bei Attributes kann man HTML-Attribute hinterlegen, hier onfocus="this.value=''" um den vordefinierten Wert fürs Inputfeld beim Klick verschwinden zu lassen.
4. Bei Label CSS habe ich dann das Label einfach via display: none ausgeblendet.
5. Bei Inupt CSS kann man dann noch das Inputfeld seinen Wünschen anpassen.
6. Da durch das Ausblenden des Labels scheint es die Inputfelder inline darstellen zu wollen. Ich habe es über die Breitendefinition gelöst, die ich einfach so klein gemacht habe damit das nächste Inputfeld in eine neue Zeile springt.

WordPress im Unterordner als Root

Oft macht man ja der Ordnung wegen eine Installation in ein Unterverzeichnis. Hier kann man dann auch die aktuelle Webseite im Root-Verzeichnis lassen und im Unterordner sein WordPress in Ruhe aufbauen. Aber irgendwann will man dann die alte Webseite "abschalten" und die neue WordPress-Installation als Relaunch über die Root-Domain erreichbar machen. Leider funktioniert es nicht den Unterordner auf dem Server einfach als neue Root zu definieren (warum auch immer?). Hier eine Anleitung wie man es machen muss damit alles funzt:

http://faq.wordpress-deutschland.org/wordpress-trotz-installation-in-unterverzeichnis-ueber-hauptverzeichnis-aufrufen/