HowTo: Ausklappbare Smilie Box einbauen

Im letzten Beitrag wurde die Frage gestellt, wie ich denn diese Smilie-Box eingebaut hätte. Gleich vorweg – diese Funktion ist nicht ganz auf meinem Mist gewachsen. Christoph war so nett und hat mich damals, bei einem vorherigen Theme, tatkräftig unterstützt. So ist auch eines der Scripte von ihm (glaube ich zumindest). Aber nun zum Thema…

Ihr benötigt zunächst das Plugin Smiley Javascript Buttons von Skippy. Das Plugin ist schon etwas älter, und damals war es noch üblich, dass man im Code rumwuseln musste, damit ein Plugin Wirkung zeigt. Editiert demnach die comments.php eures Themes und injiziert folgenden Codeschnipsel zwischen Kommentarfeld und Submit-Button:

<?php if (function_exists('SJB_outputSmilies')) {SJB_outputSmilies();} ?>

Wenn ihr jetzt damit zufrieden seid, dass euch diese Grinsekompanie ständig entgegenzappelt, dann ist hier die Arbeit getan. Ich finde es jedoch irritierend, daher lasse ich die Meute nur bei Bedarf aufklappen. Dazu muss sie zunächst hinter einem Link versteckt werden, was dann inklusive der obligatorischen DIV-Wüste so aussieht:

<div id="smilie_box">
<div id="wp_grins" style="display: none;">
<?php if (function_exists('SJB_outputSmilies')) {SJB_outputSmilies();} ?>
</div>
<a id="smileylink" href="javascript:smilean();">Smilies gef&auml;llig?</a>
</div>

Nutzer des Thesis-Themes packen das in den Hook thesis_hook_after_comment_box, den es erst seit der Version 1.7 gibt. Alle anderen können folgenden Teil ignorieren:

function smilie_box() { ?>
<div id="smilie_box">
<div id="wp_grins" style="display: none;">
<?php if (function_exists('SJB_outputSmilies')) {SJB_outputSmilies();} ?>
</div>
<a id="smileylink" href="javascript:smilean();">Smilies gef&auml;llig?</a>
</div>  
<?php }	
add_action('thesis_hook_after_comment_box','smilie_box');

Nun fehlt noch das kleine Javascript combo.js (das vom Nasendackel). Wie ihr das Script einbaut, muss ich nicht erklären, oder doch? Ach Quark – zur Not guckt bei mir in den Quelltext.

Zu guter Letzt fehlt nur noch eine Prise CSS, welche bei mir so aussieht:

#smilie_box {
	text-transform: uppercase;
	letter-spacing: 1px; 
	padding-right: 15px;
	float:  right;
	text-align: right;
	}

Das war’s. Meine ich zumindest. Wer es ausprobiert und eingebaut hat, gibt bitte mal kurz Feedback, ob die Anleitung so ok ist. Danke.

Tagged as: HowTo, Javascript, Smilies, Thesis