Kategorie: wordpress

SuperBGImage-lite

22. Dezember 2011 - JavaScript, wordpress

Wenn Ihr browserfüllende Hintergrundbilder im Stil von SuperBGImage ( Autor: Andreas Eberhard) einsetzen wollt, aber die Diashow nicht benötigt: hier findet Ihr ein winziges Script, ein WordPress-Plugin und eine Demoseite dafür

English Summary for „SuperBGImage-lite“:

If you need full-screen images on your website in SuperBGImage-style but without the overhead of the slideshow, here is a small-footprint script, an optional wordpress plugin and a demo page.

WordPress User:

Website vorbereiten:
Wir brauchen einen action hook ‚body‘ im Header direkt nach dem <body> tag;
```
<body>
<?php do_action('body'); ?>
```
Wenn ihr schon einen action hook habt (z.B. beim xtreme Framework) könnt ihr diesen verwenden und müsst dann nur im php File des Scripts die Zeile 12 anpassen.

Das Tag, mit dem euer Content beginnt, muss modifiziert werden, damit der Content über dem Bild schwebt:

<body>
<?php do_action('body'); ?>
<div id="content>
...

vorher kann es z.B. so aussehen

<body>
<?php do_action('body'); ?>
<div id="content" style="position: relative;z-index: 3;">
...

nachher dann so

Legt eure Bilder in das image Verzeichnis vom Plugin. Wenn mehrere Bilder vorhanden sind, wählt das Plugin eines davon zufällig aus.

Non WordPress User

Download plugin, unzip und Bild und den js Code (start_BGimage.js) so in eure Seite integrieren, wie es der Codeview der Demopage anzeigt

Die Demo page ist hier

Download plugin SuperBGImage-lite

Tipp für ajax im Frontend

7. Dezember 2011 - wordpress

Bei meinen Tests mit ajax im Frontend ist mir eines aufgefallen:
Ich hatte versucht, mein JS Script und das Registrieren des ajax_nopriv Hooks von den Admin-Pages fernzuhalten und in meinem Plugin folgendes notiert:


function ...() {
if (is_admin() === false ) {
add_action('wp_enqueue_scripts', array ('...','my_scripts'));
add_action('wp_ajax_nopriv_...', array ('...','...'),7);
}
}

Das führt aber dazu, dass der ajax Request nicht ausgeführt werden kann und eine -1 zurück liefert.

So ging es dann ohne Probleme:


function ...() {
add_action('wp_enqueue_scripts', array ('...','my_scripts'));
add_action('wp_ajax_nopriv_...', array ('...','...'),7);
}

Nach wie vor muss man sich ausloggen, wenn man sein Plugin austesten will, da es sonst nicht funktioniert und eine 0 zurück liefert.

English Summary for „Tipp für ajax im Frontend“:

Don’t try to exclude your add_action(‚wp_ajax_nopriv_…‘, array (‚…‘,’…‘),7);

from admin pages. Otherwise your ajax nopriv request will return a -1.

WordPress: add_action richtig deklarieren

2. Dezember 2011 - wordpress

Die Angaben in add_action müssen nach den php callback Konventionen (Klassenname, Methode) erstellt werden.

Z.B


class abc {

function abc() {
add_action('wp_enqueue_scripts', array ('abc','my_scripts'),6);
}
function my_scripts() {

....

Oft wird aber auch in der Literatur folgendes vorgeschlagen

class abc {

function abc() {
add_action('wp_enqueue_scripts', array (&$this,'my_scripts'),6);
}
function my_scripts() {

....

Der kleine Unterschied ist: &$this trägt nicht nur den benötigten Klassennamen sondern auch den gesamten Code der Klasse ein.

Hier sieht man den Unterschied im array wp_filters

Fall1:


results of wp_filter:

Array
 (
 [5] => Array
 (
 [abccb123] => Array
 (
 [function] => Array
 (
 [0] => abc
 [1] => cb123
 )

[accepted_args] => 1
 )

)

)

Fall2:


results of wp_filter:
 Array
 (
 [5] => Array
 (
 [000000003079115c0000000037d96f3dcb123] => Array
 (
 [function] => Array
 (
 [0] => abc Object ......
 (
 )

[1] => cb123
 )

[accepted_args] => 1
 )

)

)

WordPress bekommt es (meistens?) offensichtlich immer noch hin, trotzdem einen gültigen Eintrag in wp_filters zu erzeugen, aber der Rechenaufwand z.B. für die Erzeugung der ID („abccb123“ gegenüber „000000003079115c0000000037d96f3dcb123“ ist ungleich größer

Wenn man auf der sicheren Seite stehen will, sollte man also auf &$this in add_action verzichten.

Download: Testplugin für ajax Frontend (nopriv) Request in WordPress

2. Dezember 2011 - JavaScript, wordpress

Weil zur Zeit einige Verwirrung herrscht, was in WordPress mit ajax im Frontend möglich ist, habe ich ein kleines Plugin geschrieben, das ihr hier runterladen, installieren und austesten könnt.

English Summary for „Download: Testplugin für ajax Frontend (nopriv) Request in WordPress“:

This is a small WordPress Plugin to demonstrate the use of ajax on the viewer side. You are free to download and test it or use it as a basis for your own implementations. Because WordPress doesn’t support viewer- or front-side ajax with user-logged-in: logout from the dashboard, otherwise you get a „0“ result in the alert box.

Das Plugin besteht nur aus zwei Dateien:

1. der ajax_test.php


if ( !class_exists('abc') ) {

class abc {

function abc() {
add_action('wp_enqueue_scripts', array ('abc','my_scripts'),6);
add_action('wp_ajax_nopriv_cb123', array ('abc','cb123'),5);
}
function my_scripts() {
wp_register_script('xyz', plugins_url().'/ajax_test/js/ajaxtest.js', array('jquery'),false,true);
wp_enqueue_script('xyz');
wp_localize_script('xyz', 'ajaxdata', array( 'ajaxurl' => admin_url( 'admin-ajax.php'),'akt_nonce' => wp_create_nonce('foo'),'action' => 'cb123' ));
}
function cb123() {
global $wp_filter;
check_ajax_referer('foo');
echo "results of wp_filter: \n";
print_r ($wp_filter['wp_ajax_nopriv_cb123']);
echo "\nresults of has_action (prio): ".has_action('wp_ajax_nopriv_cb123', array ('abc','cb123'))."\n";
die();
}
} // End Class
$abc = new abc();
}

Der Name der Klasse ist ‚abc‘, die Methode, die von ajax aufgerufen wird ist ‚cb123‘. In cb123 wird über print_r der Teil des arrays wp_filter angezeigt, der von add_action(‚wp_ajax_nopriv_cb123‘,… in WordPress registriert wird.

Danach wird das Ergebnis von has_action(…) angezeigt. Den Rückgabewert der Funktion has_action() kann man auch ganz gut zum Testen verwenden um zu kontrollieren, ob die Action richtig registriert wurde.

Hier seht ihr in der alertbox z.B. die Priorität (5) und die Komponenten für den Callback , also die Klasse und die Methode.

2. ajaxtest.js


jQuery(document).ready(
function()
{
var data = {
action: ajaxdata.action,
_ajax_nonce: ajaxdata.akt_nonce
};
alert("ajaxtest");
var sendimage=jQuery.Deferred();
var mytimer=setTimeout(loadImage,1000);

function loadImage() {
alert('Hi : '+ ajaxdata.ajaxurl + ' ' + ajaxdata.action);
sendimage=jQuery.post(ajaxdata.ajaxurl,data);
jQuery.when (sendimage)
.then (
function (response) {
alert(response);

},
function (response) {
alert("error :"+ response);
}
);
}
})

Hier ist noch ein kleiner Timer eingebaut, der aber nicht wichtig für das Ergebnis ist.
ajaxtest.js verwendet das promise() Interface von jQuery, was die Programmierung nach meiner Ansicht deutlich vereinfacht.

Achtet darauf, dass ihr beim Testen nicht als Benutzer eingeloggt seid, weil WordPress keine Front-End ajax requests mit eingeloggten Usern unterstützt. Der response ist dann schlicht ‚0‘. Warum? Man weiss es nicht…

Plugin ajax_test zum Downloaden

ajax_test

NextGEN Gallery und FancyBox auf einer Webseite

11. November 2011 - wordpress

Wenn man wie hier auf diese Webseite NextGEN Gallery und Fancybox zusammen einsetzen möchte, muss man nur eine kleine Anpassung machen.

English Summary for „NextGEN Gallery und FancyBox auf einer Webseite“:

NextGEN Gallery and Fancybox cooperate very well together…after a slight modification in the NextGEN options/effects menue : select your own effect and enter the fancybox class ‚class=“fancybox“ rel=“%fancybox%“‚

In dem Galerie->Options Menu/Effekte müsst ihr eintragen: Eigener Effekt und dann

class=“fancybox“ rel=“%fancybox%“.

FancyBox for WordPress

10. November 2011 - JavaScript, wordpress

Fancy Box von Janis Skarnelis ist eine freundliche Alternative zur immer etwas düster wirkenden Thickbox und zur tristen Darstellung von Bildern in einem eigenen Browser-Fenster:

Wenn ihr es einsetzt (z.B. als Plugin), werden möglicherweise nicht alle Bilder auf eurer Webseite gefunden.

English Summary: If you are using FancyBox by Janis Skarnelis on your website, be careful to include images the right way. Always us „File URL“, otherwise FancyBox will ignore your image on your page. „Post URL“ creates a rel= element that keeps FancyBox from touching it because it has to write it’s own rel element (rel=“fancybox“) and won’t overwrite an existing element and the third option („no URL“) doesn’t create the necessary <a href…> .

Grund dafür ist die Art und Weise, wie Ihr ein Bild in die Seite integriert:

„Keine“ URL: es wird kein <a href…> Tag erzeugt; das Bild wird von FancyBox ignoriert

„Artikel-URL„: das <a href Tag …> bekommt zusätzlich das Element rel=“attachment…“ und wird ebenfalls von FancyBox ignoriert. FancyBox muss rel=“fancybox“ an die Bilder anfügen und ist bei einem schon vorhandenen „rel=“ sehr vorsichtig. Find ich ganz gut.

„Datei-Url„: nur wenn diese Option ausgewählt ist, wird FancyBox das Bild darstellen.

redirect von einer WordPress admin page auf eine andere

20. September 2011 - JavaScript, wordpress

Es funktionierte einfach nicht. Immer wieder diese „Warning: Cannot modify header information – headers already sent by …“ . Dann ging es doch….

English Summary: I wanted to redirect from on wordpress admin page to another one, but all the classical php and wordpress functions failed. Then JavaScript came in.

Ausprobiert hatte ich

header(‚Location: <?php echo admin_url(‚edit.php?post_type=page&page=…..
header(‚Location: …. URL mit „&noheader=true“ am Ende
wp_redirect (admin_url(‚ ….
wp_redirect( URL mit „&noheader=true“ am Ende

Die Meldung ging aber nicht weg.

Die Lösung, ein kleines Javascript, fand ich hier


<script type="text/javascript">
window.location = '<?php echo admin_url('edit.php?post_type=page&page=... ?>';
</script><?php

IE7 z-index bug in WordPress Menüs

14. September 2011 - HTML, IE7, JavaScript, wordpress

Wenn ihr den IE7 noch unterstützen müßt und lange (mehrreihige) WordPress Menüs habt: hier ist eine Hilfe gegen den z-index bug von IE7.

English Summary: The following is dedicated for people who have to support IE7 and encounter the z-index bug in their wordpress menues.

Über den z-index bug vom IE7 ist ja schon viel geschrieben worden, z.B. hier. Wenn das Menü nur unter den nachfolgenden Content rutscht, kann man sich durch Vergabe eines z-index per style.css für den Container, der das Menü enthält, behelfen.

Anders ist es leider, wenn man eine Webseite untersützen muss, deren Redakteure gerne viele Toplevel Menüeinträge generieren. Auf einmal wird das Menü mehrzeilig.

Für moderne Browser ist dies kein Problem. Für den IE7 schon. Der aufgeklappte Inhalt des ersten Menüpunktes rutscht hier unter einen Menüpunkt in der zweiten Zeile. Folge: das Menü ist nicht mehr funktionstüchtig.

Jetzt hilft leider keine style.css weiter. Die einzige Möglichkeit ist, jedem Menüpunkt der obersten Ebene einen passenden z-index zu verpassen: der erste Menüpunkt bekommt den höchsten z-index, der zweite den zweithöchsten usw.

Da das Menü dynamisch ist, kann man das nur mit einem JavaScript hinbekommen.

Zum Glück ist es sehr kurz 🙂

jQuery(document).ready(
function()
{
var maxzindex=2000;
jQuery('#access > .menu > ul > li').each(function(index,value) {
jQuery(this).css("z-index",maxzindex-index);
});
});

#access > .menu > ul > li ist bei meiner Webseite der eindeutige Pfad zu den Top-Level
Menüs. Sie erhalten die z-indizes 2000, 1999, 1998 usw.

Einbinden kann man script z.B. so:


<!--[if IE 7]>
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/js/patch_menue_ie7.js'></script>
<![endif]-->

Und wenn man alles richtig gemacht hat, sieht es dann so aus:

WordPress und JQuery-UI-datepicker

7. September 2011 - HTML, JavaScript, wordpress

Die Integration von datepicker in eine WordPress Seite mit einem Datumsfeld ist sehr einfach.

English Summary: “ The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.“ jquerui.com

Folgende Elemente vom datepicker müssen von jquery.com ins Plugin geladen werden.

jquery.ui.datepicker.js
jquery-ui-1.8.16.custom.css
alle Bilder
die Anpassung an das deutsche Datumsformat von http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-de.js

Dazu benötigt man noch den jquery-ui-core, der ist aber in WordPress bereits vorhanden.

Die JavaScript Datei zum Init vom datepicker sieht dann etwa so aus:

jQuery(document).ready(function()
{jQuery('.nf_datum').datepicker();

jQuery(function($){
 $.datepicker.regional['de'] = {
 closeText: 'schließen',
 prevText: 'zurück',
 nextText: 'Vor',
 currentText: 'heute',
 monthNames: ['Januar','Februar','März','April','Mai','Juni',
 'Juli','August','September','Oktober','November','Dezember'],
 monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
 'Jul','Aug','Sep','Okt','Nov','Dez'],
 dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
 dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
 dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
 weekHeader: 'Wo',
 dateFormat: 'dd.mm.yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''};
 $.datepicker.setDefaults($.datepicker.regional['de']);
 });   .....................................

In diesem Fall wird der datepicker an alle input Felder mit der Klasse „nf_datum“ gebunden.

WP-Syntax oder SyntaxHighlighter Evolved

7. September 2011 - HTML, wordpress

Seit einiger Zeit versuche ich, die Darstellung von Code in meinem Blog zu verbessern.

Der erste Plugin-Kandidat war WP-Sytax

Es gab aber Probleme mit den WordPress-Editoren und WordPress.

Der Code wird so umschlossen (ohne die Leerzeichen nach < und >)

< pre lang=“PHP“ line=“1″ > und < /pre >

Der wysiwyg Editor wirft z.B. das attribut line hinaus, weil es nicht erlaubt es. Dadurch kann man aber keine Zeilennummern ausgeben. WordPress macht die ganzen eckigen Klammern unschädlich. Dann wird <pre> aber nicht mehr vom Plugin erkannt.

Man muß den ganzen Code-Block nochmal mit < code > < /code > kapseln und in den Artikel vor dem Sichern nochmal mit dem HTML Editor das line=“1″ einfügen. Und den Artikel nicht mehr später mit wysiwyg wieder öffnen.

Das war mir zu mühselig.

Jetzt verwende ich SyntaxHighlighter Evolved .

Hier werden die Code-Zeilen im Shortcode-Stil mit [ php ] und [ /php ] umschlossen. Tut auf Anhieb in beiden Editoren.

 function kiju_init() {
wp_register_script('jquery-ui-datepicker',WP_PLUGIN_URL.'/kiju_admin/js/jquery.ui.datepicker.js',array('jquery', 'jquery-ui-core'),false,true);
wp_register_script('check_selected', WP_PLUGIN_URL.'/kiju_admin/js/check_selected.js', array('jquery', 'jquery-ui-core'),false,true);
wp_register_style('kiju_admin_css',WP_PLUGIN_URL.'/kiju_admin/css/kiju_admin.css');
}