Monat: September 2011

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');
}

WordPress Plugin: Google Maps V3 mit Markern und Polylines

3. September 2011 - JavaScript, wordpress

Nachtrag 14.8.2012 Google Maps V3 funktioniert auch ohne Schlüssel für bis zu 25000 Abrufe am Tag. Ein falscher (z.B. alter V2 Schlüssel) führt zu einem Sperren des Dienstes. Hier ist ein Schnellbauksten mit allen Quelldateien zum Runterladen für die, die Google Maps mit eigenen Bildern und Wegmarkierungen verbessern wollen English Summary: If You need Google Maps showing Your own markers and polylines: here is a quick assembly kit Benötigt werden nur:
  • die Bilder (Marker), die ihr anzeigen lassen wollt, am besten im png Format
  • die Koordinaten für die Bilder und Strecken
  • etwas Mut, ein vorhandenes JavaScript Programm zu verändern
Zunächst müßt ihr in der quickmaps.php folgende Zeile suchen und euren Google Key zwischen die Hochkommas eintragen: 
$maps_text=$this->nf_enqueue('googlemaps','http://maps.google.com/maps/api/js?sensor=false&
language=de&v=3.1&key='******euer Google Key');
Die Hauptarbeit macht das (selbsterklärende 😉 ) JavaScript quickmaps_init.js: 
jQuery(window).load(function () {

map_initialize();

});
function map_initialize() {
    var latlng = new google.maps.LatLng(49.31681,8.43885);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	var image= my_param.google_img_url+'logo_passend.png';
	var parkplatz= my_param.google_img_url+'parkplatz_passend.png';
	var latlngparkpl = new google.maps.LatLng(49.31450,8.44450);
	var marker = new google.maps.Marker({
	position: latlng,
	map: map,
	icon: image
	 });
	var markerparkpl = new google.maps.Marker({
	position: latlngparkpl,
	map: map,
	icon: parkplatz
	 });

var parkplatzweg = [
    new google.maps.LatLng(49.31450,8.44450),
    new google.maps.LatLng(49.31500,8.44450),
    new google.maps.LatLng(49.31500,8.44250),
    new google.maps.LatLng(49.31600,8.44170),
    new google.maps.LatLng(49.31670,8.44150),
    new google.maps.LatLng(49.31650,8.43900),
    new google.maps.LatLng(49.31681,8.43885)
  ];

var vomparkplatz = new google.maps.Polyline({
    path: parkplatzweg,
    strokeColor: "#FF0000",
    strokeOpacity: 0.4,
    strokeWeight: 2
  });
  var bahnhofsweg = [
    new google.maps.LatLng(49.32470,8.42870),
    new google.maps.LatLng(49.32340,8.42881),
    new google.maps.LatLng(49.32210,8.4295),
    new google.maps.LatLng(49.31900,8.431400),
new google.maps.LatLng(49.3174,8.4314),
    new google.maps.LatLng(49.31728,8.43885),
    new google.maps.LatLng(49.31681,8.43885)
  ];

var vombahnhof = new google.maps.Polyline({
    path: bahnhofsweg,
    strokeColor: "#0000FF",
    strokeOpacity: 0.4,
    strokeWeight: 2
  });

  vomparkplatz.setMap(map);
  vombahnhof.setMap(map);
Ok, es sieht erstmal schlimm aus, aber eigentlich ist es nicht schwer. In Zeile 7 wird ein Koordinatenobjekt erzeugt. Das wird das Zentrum der Karte und hier sitzt das Bild aus Zeile 15. In den Zeilen 16 und 17: noch eine Koordinatenobjekt und noch ein Bild. Alle Koordinaten in den ..... LatLng(49.31681,8.43885) müßt ihr durch eure Werte ersetzten. Ebenso die Bilder z.B. in my_param.google_img_url+'logo_passend.png'; Die Zeilen 18-27 passen die Bilder in die Karte ein, die mit der Zeile 13 erzeugt wurde. Im Rest der Datei werden Linien definiert und angezeigt. Am Ende vom Artikel seht ihr, wie das ganze aussieht. Gestartet wir das Ganze dann mit einem shortcode in eurem Artikel oder auf euerer Seite (aber OHNE die Leerzeichen hinter [ und vor ] !!!!!) [ quickmaps ] in der Größe 700x700 Pixeln oder wenn ihr andere Kartengrößen braucht mit [ quickmaps width=300px height=400px ] für eine 300px x 400px Karte. Hier  könnt ihr das gesamte Plugin runterladen und so sieht es dann aus: