Einbinden von kleinen Tools
Kleinere JavaScript-Tools, wie unsere kleine Color-Palette zum Beispiel, lassen sich relativ problemlos mit jedem beliebigen Editor in jede beliebige Webseite einbinden. Wobei es eigentlich in jede “normale” HTML-Seite heißen müsste, denn bei einem Blog oder CMS sieht es mitunter ein klein wenig anders aus. Weiter unten möchten wir Ihnen zwei Lösungen vorstellen, getestet mit unterschiedlichen Blogs, die auf WordPress basierten.
Zuvor jedoch noch ein Hinweis zur Bedienung der Color-Palette. Mit einem Klick in die obere Grafik wird ein Farbton gewählt und im Anschluss daran kann der Hell-Dunkel-Verlauf abgeglichen werden. Beim Hell-Dunkel-Verlauf sind zwei Klicks erforderlich, einer zum Starten und einer zum Stoppen des Abgleichs. Sie können die Color-Palette in Ihre Seiten einbinden, falls Bedarf bestehen sollte.
Zur den beiden Varianten sei bemerkt, unsere erste Versuche JavaScript-Code einfach in den Quelltext eines Blogs einzufügen, die schlugen leider fehl und endeten mit einem zerschossenen Code. Wie sich herausstellte, so lässt sich WordPress jedoch überlisten, wenn der entsprechende Code in einem CDATA-Abschnitt notiert wird. Es braucht wohl nicht ausdrücklich erwähnt zu werden, dass beim Einfügen die Ansicht “Text” und nicht “Visuell” im Editor von WordPress gewählt werden muss.
Ein Beispiel für eine Einbindung entsprechend der ersten Variante:
<div style="text-align:center; width:404; height:340px; margin-top:0px; margin-bottom:24px; margin-left:auto; margin-right:auto"> <p id="color01" style="margin:2px">Platzhalter für Colorpalette</p> <p style="margin:2px"><a id="color02" href="http://www.seo-welten.de" target="_blank" style="text-decoration:none; font-size:80%; color:#654d1f">Farbpalette von www.seo-welten.de</a></p> <p style="margin:2px"><script type=">text/javascript">// <![CDATA[ var fcborder = "ffffff"; var fcolorbg = "f1edda"; // ]]></script> <script type="text/javascript" src="http://www.seo-welten.de/tools/color/userinpalette.js"></script></p> </div>
Eine andere Variante lässt sich ebenfalls relativ einfach realisieren. Wird der Code innerhalb einer Funktion notiert, um diesen mit PHP als String einzulesen und im Anschluss an das Einlesen an WordPress zu übergeben, wird aus einem kleinen JavaScript Code-Schnipsel ein kleines Plugin. Dieses kleine Plugin braucht dann nur noch aktiviert zu werden. In den Quelltext der jeweiligen Seite, in der das Tool ausgegeben werden soll, muss dann nur doch der zugehörige Shortcode eingefügt werden.
Ein Beispiel für die Einbindung als Plugin entsprechend der zweiten Variante:
<?php /*-------------------------------------------------------------------------------------------- Plugin Name: Color Palette Plugin URI: http://www.seo-welten.de/webcoding/wysi/wysiwyg-editor-9.htm Description: Ein kleine Color-Palette als einfaches Plugin, Einbindung mit dem Short-Tag [farbpalette] Author: Horst Müller Version: 1.00 Author URI: http://www.seo-welten.de License: GPL v2 und Lizenz für Software * PHP- und HTML-Code stehen unter der GNU General Public License (GPL) Version 2 * http://www.gnu.org/licenses/gpl-2.0.txt * Grafiken, JavaScript- und CSS-Code stehen unter der Lizenz für Software vom Verlag * http://www.coder-welten.de/projekte/lizenz-fuer-software.htm ---------------------------------------------------------------------------------------------- */ function colorPalette() { $palette = "<!-- Dieser HTML-Code darf nicht verändert werden! -->\n". "<div style=\"border:1px solid #000;text-align:center; width:404; height:380px; margin-top:0px; margin-bottom:24px; margin-left:auto; margin-right:auto\">\n". "<p id=\"color01\" style=\"margin: 2px\">Palette</p>\n". "<p style=\"margin:-12px\"><a id=\"color02\" href=\"http://www.seo-welten.de/\" target=\"_blank\" style=\"text-decoration:none; font-size:80%; color:#654d1f\">Color-Palette von www.seo-welten.de</a></p>\n". "<script type=\"text/javascript\"><!--\n". "var fcborder = \"ffffff\";\n". "var fcolorbg = \"f1edda\";\n". "//--></script>\n". "<script type=\"text/javascript\" src=\"http://www.seo-welten.de/tools/color/userinpalette.js\"></script>\n". "</div>\n". "<!-- Ende des HTML-Codes -->\n"; return $palette; } add_shortcode("farbpalette", "colorPalette"); ?>
Wenn Sie diese zweite Variante vorziehen sollten, können Sie sich das Code-Listing kopieren und unter einem beliebigen Namen im Verzeichnis /wp-content/plugins/ abspeichern. Nach dem Sie das Plugin abgespeichert und im Admin-Bereich aktiviert haben, brauchen Sie nur noch den Shortcode [farbpalette] in einer zum Bearbeiten geöffneten Seite oder in einem Beitrag einfügen.
Erwähnenswert wäre in diesem Zusammenhang noch, dass ein abschließender Blick in den Quelltext der bearbeiteten Seite nicht fehlen sollte. Mit Blick in den Quelltext ist in diesem Zusammenhang nicht die Editor-Ansicht gemeint, sondern die Quelltext-Ansicht im Browser. Es kann vorkommen, dass WordPress nach dem Einfügen des Shortcodes noch einen P-Tag einfügt. In diesem Fall half bisher, den vorausgehenden Text mit einem </p> Tag zu beenden.
Hinweis: Mit diesem Plugin wird nur der Code-Schnipsel zum Laden der Color-Palette in den Quelltext geschrieben. Das Script, welches die recht umfangreichen Berechnungen durchführt, ist unter www.coder-welten.de (Script und Tools zum Einbinden) erreichbar.
