Kategorie: wordpress

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 700×700 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:

JQuery UI dialog in WordPress

23. August 2011 - JavaScript, wordpress

Für ein eiliges Kundenprojekt mußten  die Sponsoren eines gespendeten Fahrzeugs auf der Sponsorenliste hervorgehoben werden. Standard war bei der Sponsorengruppe: per Popup. Ich habe mich dann für den jQuery UI dialog entschieden und hier sind meine Erfahrungen dazu.

English summary: In the following I wrap up my experiences with jQuery UI dialog in a WordPress environment.

Solide Grundlage zur Lösung der Anforderung ist wie oft ein Plugin. Hier bringt man den php Code unter und kann die Javascript Programme so eintüten, dass sie nicht auf jeder Seite geladen werden.

Die ersten Zeilen des Plugins sehen etwa so aus:


if ( !class_exists('xxxxSponsoren') ) {
class xxxxSponsoren{
         function xxxxSponsoren() {
                add_action('wp_print_scripts', array (&$this,'sponsoren_scripts'));
                add_action('wp_print_styles', array (&$this, 'sponsoren_styles'));

         }
         function sponsoren_scripts() {

           if (is_page('sponsoren')) {
             wp_register_script('show_sponsoren', WP_PLUGIN_URL.'/sponsoren/js/show_sponsoren.js', array('jquery', 'jquery-ui-core', 'jquery-ui-dialog'),false,true);
             wp_enqueue_script('show_sponsoren');
          }
         }
         function sponsoren_styles() {
            if (is_page('sponsoren')) {
              wp_register_style('nf_dialog',WP_PLUGIN_URL.'/sponsoren/css/jquery-ui-1.8.16.custom.css');
              wp_enqueue_style('nf_dialog');
           }
         }
.....

Die grundlegenden Javascript Dateien jquery , jquery-ui-core, jquery-ui-dialog sind in WordPress vorhanden und werden automatisch in die Seite inkludiert, wenn man beim Registrieren der eigenen js Datei (hier: show_sponsoren.js) die Abhängigkeiten angibt.

Seltsamerweise trifft das für die Stylesheets nicht zu, und ohne diese ist das Ergebnis sehr schrecklich und entmutigend.  Das WordPress Stylesheet zum UI Dialog ist vollkommen unbrauchbar. Im Internet gibt es verschiedene Quellen , z.B. http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css oder auch Einzelhinweise zum css.

Um es kurz zu machen: man braucht

  • das gesamte css zu UI und nicht nur das für den Dialog (d.h. anstelle von 3k css 32k css)
  • und alle icons dazu (sonst sieht es ebenfalls schrecklich und entmutigend aus)

Am Ende habe ich mir von http://jqueryui.com/ das gesamte Bundle geholt und das css mitsamt den Icons lokal im Plugin abgelegt; die Version ist  jquery-ui-1.8.16.custom.css

Netterweise sah das Ergebnis bei jedem css Versuch anders aus. Im letzten Fall ist der Dialog orange. Wenn man gezielt ein css-Theme auswählen möchte, sollte man das css von Google holen. Dort sind alle Themes erhältlich. Das „Orangene“ ist ui-lightness 🙂

Der Rest ist einfacher: man legt die anzuzeigenden Daten unsichtbar mit display: none und einer passenden id (hier: id=“spon_li“) auf der Webseite ab und braucht dann nur noch ein kurzes js Script (hier:show_sponsoren.js)


jQuery(document).ready(function() {
     jQuery("[title*=danken]").click(function() {
     jQuery("#spon_li").dialog({
        width: 600,
        resizable: true,
        title: 'Die Sponsoren für unseren neuen Transporter',
        position: 'center'
});

return false;
});

In der zweiten Zeile wird ein Bild gesucht (und hoffentlich auch  gefunden), dessen ‚title=‘ den String „danken“ enthält. Wenn man auf dieses Bild clickt wird der Dialog aktiviert, hier mit Optionen wie einem Titel, einer Position usw.

Wenn die Website größer wird, werden functions.php und Plugins zu Monstern

22. August 2011 - wordpress

Es fängt meistens klein an und wird dann größer als gedacht: das CMS für einen Kunden. Leider ist das Wachstum keine Stärke von WordPress. Nette Annehmlichkeiten entwickeln sich dann zu unzähmbaren Code-Monstern.

English Summary: If your WordPress CMS website grows, be sure that some of the functionality inside WordPress you always loved before is going to kill you, i.e. functions.php or plugins .

Bei 50 Seiten im CMS hatte meine functions.php bereits 1000 Zeilen Code, bei 100 waren es über 2000. Aus fünf Plugins wurden fünfundzwanzig, davon die Hälfte selbst geschrieben. Von der Größe der CSS Dateien will ich erst gar nicht anfangen.

Dabei war die einzelne Seite  im Durchschnitt nicht komplizierter geworden. Es waren aber mehr, und jede Seite brauchte einen etwas anderen Code, eine etwas individuellere CSS Behandlung.

Ein Webshop auf WordPress? Vergiß es. Das Ding fliegt Dir um die Ohren, dann, wenn Du es am wenigsten gebrauchen kannst: wenn es wächst. Sagt man dann dem Kunden: wir müssen jetzt auf xx wechseln, dauert aber ein Jahr? Oder zwei?

Ich mag WordPress eigentlich sehr, aber man sollte auch wissen, wo die Grenzen für ein CMS auf dieser Basis liegen:

Man kann den Code für eine spezielle Seite nicht einer speziellen Seite zuordnen. Sicher, man kann js Scripte einer Seite beim Laden zuordnen, um die Ladezeiten zu verrringern. Auf dem Server muß aber der Inhalt der gesamten Webseite, auch alles, was in functions.php oder den plugins enthalten ist, einmal geladen werden. Für die Webseite yy werden dann die meisten dieser Funktionen nicht aufgerufen, das verringert die Rechenzeit, aber geladen werden muss das ganze Zeug.

Die meisten Provider bieten für das Geld eine Produkt aus max. Rechenzeit mal  max. Speicherbedarf an. Leider hat man auf den Speicherbedarf als Programmierer wenig Einfluß.

Wo sind die functions-sponsoren.php, functions-aktionen.php, functions-was-weiss-ich.php für jede spezielle Webseite? Plugins, die zu 100% einer bestimmten Webseite zuordbar sind, und nicht nur für den js Teil?

Natürlich kann man aus jeder page.php eine aktionen.php oder sponsoren.php machen und den Code da reinschreiben oder inkludieren. Wo bleibt aber dann das template Konzept, wenn man 15mal page.php verwendet und 85 Sonderseiten hat?

Ein riesige functions.php lässt sich auch nicht mehr warten, weil Nebeneffekte auf anderen Seiten nicht ausgeschlossen werden können. Man verbessert einen Fehler und fängt sich einen anderen auf einer anderen Webseite ein, die bis dahin immer problemlos funktionierte.

Ich will hier nicht behaupten, dass das Problem zu komplex wäre, um gelöst zu werden. Natürlich kann man von außen dazu programmieren. Aber der richtige Ansatz dafür liegt im WordPress kernel.

ältere Webseiten mit CSS Navigation: Abreißen oder Modernisieren

28. Juli 2011 - HTML, JavaScript, wordpress

Unter Kollegen gab es kürzlich die Diskussion,  wie man bei vorhandenen und älteren Webseiten die Navigation verbessert. Abreißen und durch ein JavaScript Plugin ersetzen oder modernisieren?

Eine Fraktion war die „nimm doch superfish oder ….  und dann hast du keinen Ärger mehr“, die andere Fraktion war eher nachdenklich. Durch ein aktuelles Projekt etwas schlauer geworden, gehörte ich auch zu den nachdenklichen.

Fakt ist wohl, dass die JavaScript-Navigations Plugins auch nur mit Wasser (=CSS) kochen und JavaScript lediglich zum Vorbereiten und Verbessern der HTML Struktur der Navigation benutzen. Natürlich fügen sie den Menüs auch noch ein paar Effekte hinzu. Die Hauptarbeit (90%) wird aber immer noch über CSS erledigt.

Wenn man eine vorhandene CSS Navigation mit sicherlich einigen Dutzend Zeilen CSS durch ein „fertiges“ JavaScript Produkt ersetzt, das eigene, völlig neue  CSS Dateien mit wiederum einigen Dutzend Zeilen CSS benötigt, ist dies wie ein Neuanfang. Man versteht zunächst nichts und es funktioniert auch erstmal nichts.

Deshalb, und weil ich auch nicht unbegrenzte Zeit habe und auch nicht unbegrenzte Lust, wieder da anzufangen, wo ich vor drei Jahren schon mal stand, plädiere ich für das behutsame Modernisieren:

Belasse die CSS Struktur wie sie ist und ändere gezielt über JavaScript.

Ein Beispiel dafür ist dieser Artikel.

Wenn man neu anfängt, sollte man das beste und flexibelste Tool auswählen oder auf das vertrauen, was einem ggf. sein Framework anbietet 🙂

 

 

Add arrows to menus in WordPress

27. Juli 2011 - HTML, JavaScript, wordpress

Wenn ihr ein vorhandenes Menü mit Richtungspfeilen ergänzen möchtet:  hier ist ein kleines Plugin dafür.

English summary: If you have an existing menu on your WordPress blog or site and want to enhance it with arrows to indicate submenus: here is a proposal to do so.  But be aware, that the plugin isn’t out of the box and needs slight modifications to meet your special requirements.

Die Grundidee findet man  z.B. auch beim superfish Menu: per JavaScript/ jQuery werden dem Menü beim Laden der Seite kleine Pfeilchen hinzugefügt, wenn ein Menüpunkt Untermenüs besitzt.

Der js Code besteht nur aus wenigen Zeilen:

jQuery(document).ready( function()<
{
       jQuery(".vlist li:has(ul) > a").each(function() {
       jQuery(this).html(jQuery(this).text() + '<img src="' + pathtoimage.jsmenuImageUrl + 'arrow_down.png" width="20px" height="10px"/>');
});
       jQuery("#access > .menu > ul > li:has(ul) > a").each(function() {
       jQuery(this).html(jQuery(this).text() + '<img src="' + pathtoimage.jsmenuImageUrl + 'arrow_down.png" width="20px" height="10px"/>');
       });
       jQuery("#access > .menu > ul > li:not(ul) li:has(ul) > a").each(function() {
       jQuery(this).html(jQuery(this).text() + '<img src="' + pathtoimage.jsmenuImageUrl + 'arrow_right.png" width="20px" height="10px"/>');
        });

});

Die erste Funktion:

jQuery(".vlist li:has(ul) > a").each(function() {.....

findet alle li- Listpunkte nach dem div mit der Klasse vlist, die Untermenüs besitzen und fügt einen arrow-down an.
Ich benutze dies für ein Menü in der Sidebar, das Untermenüs durch Einrückung anzeigt und nicht „aufklappt“.

Die zweite Funktion:

jQuery("#access > .menu > ul > li:has(ul) > a").each(function() {...

findet alle li-Listpunkte mit Untermenüs auf der ersten Ebene und fügt ebenfalls einen arrow-down an.
Dass benutze ich für das Hauptmenü, das die zweite Ebene nach unten aufklappt.

Die dritte Funktion

jQuery("#access > .menu > ul > li:not(ul) li:has(ul) > a").each(function() {...

findet alle li-Listpunkte mit Untermenüs nach der ersten Ebene und fügt einen arrow-right an. Dies benutze ich im Hauptmenü für alle folgenden Untermenüs.

Mit

jQuery(this).html(jQuery(this).text() + ....

wird der angezeigte Menüname  gefunden und um das entsprechende Bild erweitert.

Damit das Plugin funktioniert, müsst ihr für jQuery den Suchpfad (z.B („.vlist li…“ oder „#access > .menu > ul > li…“ modifizieren, damit die richtigen li-Listpunkte gefunden werden.

 

Hier könnt ihr das Plugin downloaden: jsmenu. Denkt aber daran, dass ihr es anpassen müsst

WordPress 3.2.1 auf 1und1 nicht installierbar

17. Juli 2011 - wordpress

WordPress 3.2.1 hat höhere Anforderungen an die Software-Umgebung beim Provider:

  • PHP-Version 5.2.4 oder höher
  • MySQL-Version 5.0.15 oder höher

Das Update auf die neue Version  hat bei 1und1 (Smartweb L Vertrag ) nicht funktioniert

 Norbel

RIP RichText Widget

9. Juni 2011 - JavaScript, tinymce, wordpress

Seit ein paar Tagen habe ich mein Rich Text Widget Problem vom Hals. Der Kunde hat eine einfachere Lösung akzeptiert.

English Summary: Rest In Peace, Rich Text Widget… What to do, when a customer who runs a page-based site has fallen in love with his easy-to-use Text Widget and now asks for a better one with color and images and videos and …

I tried very hard to overcome the existing problems (see…) but without thorough help from WordPress all solutions only work with considerable compromises. Now I could talk the customer into a “loop”-based approach:  he writes a post with a special category (“sidebar, “teaser”, etc) which then is displayed  in the desired part of his webpage.

Die Probleme bei der Realisierung solch eines Widgets habe ich schon früher beschrieben ()

Sie betreffen nicht nur Widgets, die tinyMCE enthalten, sondern alle Javascript basierenden Widgets.

Die Hoffnung auf Hilfe von WordPress musste ich bald aufgeben. Auf meine Fehlermeldung im Forum kam nie eine Antwort und schon allein anzusehen, wie dort die Anfragen aus aller Welt fast im Sekundenbereich einlaufen ist deprimierend. Wer soll das alles lesen? Schon nach einem Tag ist die eigene Anfrage ein paar Hundert Plätze weiter nach unten gerutscht.

Ok, jetzt kurz die wohlbekannte „Loop“-Lösung: der Kunde schreibt einen Artikel mit seinem Standard-Editor und vergibt dabei eine Kategorie „sidebar“ oder „teaser“ oder …  und die paar Zeilen


<span style="font-family: courier new,courier;"><?php query_posts('category_name=sidebar');</span><span style="font-family: courier new,courier;">
 if (have_posts()) : while (have_posts()) : the_post();?>
 <div id="sidebar_info"><?php the_content();?>
 </div></span><span style="font-family: courier new,courier;"><?php endwhile; else : ?>
 <?php endif; ?></span>

erledigen den Job.

NextGEN Gallery von Alex Rabe

9. Juni 2011 - JavaScript, wordpress

Seit ein paar Wochen setze ich hier auf dem Blog die NextGEN Gallery von Alex Rabe ein.

NextGen Gallery ( man muss bei dem Namen immer an Steve Jobs Next Cube denken) installiert ein aufwändiges aber intuitives Menüpaket im Admin. Zum Konfigurieren und Starten der Gallerie werden Shortcodes verwendet.

Für die Bilder verwendet NextGen Gallery eine eigene Datenverwaltung. Das hat Vor- und Nachteile.Wird die Galerie gelöscht, verschwinden automatisch auch alle Bilder vom Server.Für Kunden, die Bilder in Galerien und im Content ihrer Seiten verwenden, wird die Sache unübersichtlicher. Sie müssen zweimal uploaden. Für sie wäre es praktikabler, wenn sie die Galerie aus der Mediathek als einheitliche Medienquelle füttern könnten.

Immerhin kann man im Standarddialog zum Hinzufügen der Bilder zu Posts und Seiten zusätzlich jetzt auch die NextGen Galerien als Quelle auswählen.Vielen Dank an Alex Rabe für die gewaltige und gute Arbeit, die er in sein Projekt hineingesteckt hat.

Norbel

tinyMCE erweitern mit neues Styles

9. Juni 2011 - tinymce, wordpress

Für ein Projekt musste ich den tinyMCE um ein paar Stilvorlagen erweitern. Die Vorgehensweise möchte ich hier kurz aufzeigen. Damit es einfacher wird, kann man sich auch ein kleines Plugin herunterladen.

English Summary: if you want to configure the WordPress standard editor, tinyMCE,  you need to change just one array. That sounds easy. However: This array is huge and not without contradictions. Same is true for the documentation. In the following I want to show how to add some styles to the tinymce style-dropdown meue. For better understanding you may download a small plugin.

Tinymce wird über ein riesiges Array konfiguriert. Darauf kann man mit verschiedenen Methoden zugreifen:
mit jQuery, mit dem Plugin Tinymce Advanced oder mit WordPress Bordmitteln „add_editor_style(…)“ oder add_filter(‚tiny_mce_before_init‘,’name_of_function_you_have written’)

Um die Stilvorlagen im Hauptmenu anzuzeigen, schaltet man sich die benötigten  Dropdowns ( hier: Styles und Font Size für unterschriedliche Schriftgrößen ) am einfachsten mit dem Tinymce Advanced Plugin frei.

Beispiel: kiju_fliess soll ein Format sein, das auf beiden Seiten einen definierten Abstand zum Rand hat.

.kiju_fliess { padding: 0 15% 0 15%;}

Das Menü styles wird nun um den Eintrag Fliesstext=kiju_fliess erweitert. Tinymce trägt an allen markierten Textstellen die Klasse kiju_fliess ein, wenn „Fliesstext“ angewählt wurde.

Natürlich muss man im Frontend auch sein Seitenstylesheet (z.B. style.css) entsprechend erweitern 🙂

Wenn man die Auswirkungen der Formatierung gleich im Editor sehen möchte, kann man tinymce  ein zusätzliches Stylesheet mitgeben. Dieses Stylesheet liegt in diesem Beispiel im Plugin im Ordner stylesheets.

Das Plugin besteht nur aus den folgenden Zeilen:

if ( !class_exists( 'tinymce_add_styles' ) ) {
class tinymce_add_styles {
function tinymce_add_styles() {
add_action( 'admin_head',array(&$this, 'tinymce_add_styles_init'));
}
function tinymce_add_styles_init() {
if (get_user_option('rich_editing') == 'true') {
add_filter('tiny_mce_before_init',array(&$this,'nf_add_styles'));
}
}
public function nf_add_styles ($initArray) {
$initArray['theme_advanced_font_sizes'] = "8px=8px,10px=10px,12px=12px,14px=14px,18px=18px,24px=24px,36px=36px";
$initArray['theme_advanced_styles'] ="Überschrift_gross=kiju_sub_36,Überschrift_mittel=kiju_sub_24,Überschrift_klein=kiju_sub_18,Fliesstext=kiju_fliess";
$nf_stylesheet=plugins_url().'/tinymce_add_styles/stylesheets/editor-style.css';
if (array_key_exists('content_css', $initArray) && !empty($initArray['content_css'])) $initArray['content_css'].=",".$nf_stylesheet;
else $initArray['content_css'] = $nf_stylesheet;
return $initArray;
}
}
$tinymce_add_styles = new tinymce_add_styles();
}

Tinymce kann mit mehreren Stylesheets umgehen. Man muss nur aufpassen, dass man bestehende Einträge in $initArray[‚content_css‘] nicht überschreibt.

Achtung:

Ich hatte in diesem Fall den tinyMCE  ‚advanced’ . Es gibt noch einen zweiten erweiterbaren Style-Bereich im initArray:
$initArray[’style_formats‘]=….

Den sollte man aber nicht verwenden, da sich seine Einstellungen mit „advanced“ nicht vertragen. Nur zur Vollständigkeit: $initArray[’style_formats‘]= „[{title : ‚Fliesstext‘, block :’p‘,classses :’kiju_fliess‘}]“;

Hier könnt ihr das Plugin downloaden:  tinymce_add_styles

WordPress: farbige Hintergründe und Hintergrundbilder auf Seiten und im Editor

8. April 2011 - tinymce, wordpress

Der Kunde erstellt seine Seiten selbst und wünscht ein einfaches Verfahren für farbige Hintergründe und Hintergrundbilder auf seiner Website.

English Summary: Though WordPress claims to be a CMS, some basic functions are not yet supported. If a customer demands background color or background images on pages, you have to add some php functionality…

Manchem grausts, aber wenn der Kunde es so will: Farbe muß her und auch Bilder.

Die Lösung war: beim Anlegen einer Seite wird der Dialog bei „Seite erstellen“  um ein paar Felder für die Hintergrundfarbe, das Bild und die Behandlung des Bildes (kacheln z.B.) erweitert.

Wie das geht,  steht in diesem Artikel:

WordPress image uploaders in admin

Die Einstellungen speichere ich in einer eigenen Tabelle in der Datenbank, alternativ kann man das auch über die custom fields lösen.

Die Templates für die Seiten müssen nun so erweitert werden, dass beim Aufruf einer Seite per style Farben und Bilder passend ausgegeben werden. Dazu muß man im Template die richtige Stelle erwischen. Bei meinen Seiten war die: <div id=main ….. >.

An dieser Stelle wird die Funktion nf_background() aufgerufen. Sie holt die Informationen aus der Datenbank und verwandelt sie in style= Befehle für html.


<?php
 /*
  Template Name: Seite_ohne_Kommentare
  */
 ?>
 <?php
 get_header();
 $bg_style='';
 if ( function_exists('nf_background') ) {
  $bg_style=nf_background();
  //echo "<p> bg: $bg_style</p>";
 }?>
 <div id="main"<?php echo $bg_style;?>>
         <div id="col1">

Hier ist ein Listing dazu:


function nf_background() {
 global $wpdb;
 global $post;
 $bcolor=false;
 $bimage=false;
 $bimage_pos=false;
 $bimage_beh=false;
 $style_string="";
 $bcolor = $wpdb->get_var($wpdb->prepare("SELECT hintergrundfarbe FROM stueckinfo WHERE post_id = %s and valid='yes'",$post->ID));
 if (!empty ($bcolor)) {
 if (preg_match('/^[0-9A-Fa-f]{6}$/',$bcolor)) {
 $bcolor ="#".$bcolor;
 }

}
 $bimage = $wpdb->get_var($wpdb->prepare("SELECT hintergrund_bild_link FROM stueckinfo WHERE post_id = %s and valid='yes'",$post->ID));
 if (!empty ($bimage)) {
 $bimage_pos = $wpdb->get_var($wpdb->prepare("SELECT hintergrund_bild_position FROM stueckinfo WHERE post_id = %s and valid='yes'",$post->ID));
 $bimage_beh = $wpdb->get_var($wpdb->prepare("SELECT hintergrund_bild_behandlung FROM stueckinfo WHERE post_id = %s and valid='yes'",$post->ID));
 }
 if ((!$bcolor) && (!$bimage)) return "";
 $style_string="style=\"";
 if ($bcolor) $style_string .= " background-color: $bcolor; ";
 if (!$bimage) {
 $style_string .="\"";
 return $style_string; }
 else {
 $style_string .=" background-image: url($bimage);";
 if ($bimage_pos) {
 switch ($bimage_pos) {
 case 1:
 $style_string .= "background-position: top left;";
 break;
 case 2:
 $style_string .= "background-position: top center;";
 break;
 case 3:
 $style_string .= "background-position: top right;";
 break;
 case 4:
 $style_string .= "background-position: center left;";
 break;
 case 5:
 $style_string .= "background-position: center center;";
 break;
 case 6:
 $style_string .= "background-position: center right;";
 break;
 case 7:
 $style_string .= "background-position: bottom left;";
 break;
 case 8:
 $style_string .= "background-position: bottom center;";
 break;
 case 9:
 $style_string .= "background-position: bottom right;";
 break;
 }
 }
 if ($bimage_beh) {
 switch ($bimage_beh) {
 case 1:
 $style_string .= "background-repeat: no-repeat;";
 break;
 case 2:
 $style_string .= "background-repeat: repeat;";
 break;
 case 3:
 $style_string .= "background-repeat: repeat-x;";
 break;
 case 4:
 $style_string .= "background-repeat: repeat-y;";
 break;
 }
 }
 $style_string .="\"";
 return $style_string;
 }

}

So far, so good. Leider muß jetzt aber auch noch tinymce mitspielen, weil man sonst die Seiten nicht richtig gestalten kann. Dafür sorgt dann dieses jQuery Script:


jQuery(window).load(function () {make_my_background();
 });

jQuery(document).ready(function() {
 jQuery('#hintergrundfarbe').click( function() {
 make_my_background();
 });
 jQuery('#hintergrund_bild_link_uebernehmen').click( function() {
 make_my_background();
 });
 jQuery('#hintergrund_bild_position_uebernehmen').click( function() {
 make_my_background();
 });
 jQuery('#hintergrund_bild_behandlung_uebernehmen').click( function() {
 make_my_background();
 });
 });

function make_my_background() {
 if (jQuery('#valid').attr('checked')){ // Anzeige nur wenn das valid -Häkchen gesetzt wurde
 var tf=jQuery('#hintergrundfarbe').val();
 if (tf != '') jQuery('#content_ifr').contents().find("body#tinymce").css("background-color",tf);
 var ti=jQuery('#hintergrund_bild_link').val();
 if (ti != '') {
 ti="url("+ti+")";
 jQuery('#content_ifr').contents().find("body#tinymce").css("backgroundImage",ti);
 var tp=jQuery('#hintergrund_bild_position').val();
 if (tp != '') {
 var bpos='';
 tp *=1;
 switch (tp) {
 case 1: bpos="top left";
 break;
 case 2: bpos="top center";
 break;
 case 3: bpos="top right";
 break;
 case 4: bpos="center left";
 break;
 case 5: bpos="center center";
 break;
 case 6: bpos="center right";
 break;
 case 7: bpos="bottom left";
 break;
 case 8: bpos="bottom center";
 break;
 case 9: bpos="bottom right";
 break;
 }
 if (bpos != '') {
 jQuery('#content_ifr').contents().find("body#tinymce").css("backgroundPosition",bpos);
 //alert("bgpos: "+ bpos);
 }
 }
 }
 var tb=jQuery('#hintergrund_bild_behandlung').val();
 //alert("bg_tb: "+ tb);
 if (tb != '') {
 var bbeh='';
 tb *=1;
 switch (tb) {
 case 1: bbeh="no-repeat";
 break;
 case 2: bbeh="repeat";
 break;
 case 3: bbeh="repeat-x";
 break;
 case 4: bbeh="repeat-y";
 break;</span>

}
 if (bbeh != '') {
 jQuery('#content_ifr').contents().find("body#tinymce").css("backgroundRepeat",bbeh);
 //alert("bgbeh: "+ bbeh);
 }
 }
 }
 }

Die Hauptfunktion make_my_background()  ist wie die php Funktion aufgebaut, bezieht ihre Daten aber nicht aus der Datenbank sondern aus den oben erwähnten Zusatzfeldern, die ja beim Gestalten der Seite zur Verfügung stehen.

Interessant ist, wo man die Styles hinpacken muß:

jQuery('#content_ifr').contents().find("body#tinymce").css("background-color",tf);

jQuery(document).ready hat bei mir nicht funktioniert. Da war der tinymce iframe noch nicht anwesend, deswegen

jQuery(window).load(function ()

Die anderen Funktionen dienen dazu, dass man bei dynamisch veränderten Farben oder Bildern die Wirkung im Editor gleich beurteilen kann.

Und so könnte es  aussehen: