Bei den Beiträgen soll das Kommentar-Eingabefeld erst durch einen Klick auf dem Button „Infos hinzufügen“ oder Titel geöffnet werden.
Um den Kommentarbereich zu „verstecken“ habe ich bisher ein kleines Script in die comments.php eingebunden:
<script type="text/javascript" language="javascript">function showForm(obj){
obj.style.display = 'none';
var ele = document.getElementById('rumwallform');
if (ele){
ele.style.display = 'block';}
}
</script>
Der Kommentarbereich wird dann mittels eines Buttons geöffnet:
<div id="rumwallbtn">
<input type="image" src='http://foto.funkygog.de/images/Button/Button-Infos.png' alt="Info hinzufügen" onclick="showForm(this);" value="<?php _e('Comment'); ?>" class="styled"/>
</div>
<div id="rumwallform" style="display: none;">
Habe jetzt den Kommentar-Bereich mittels eines Accordion-Scripts „versteckt“
Infos und Anleitung siehe:
Eine schöne Umsetzung gibt es auch hier zu sehen:
- jQuery Tutorials for Designers von WebDesignerWall.com
Hier wird ein Simple Slide Panel (Demo) vorgestellt mit Hinweisen zum Einbau.
Hört sich einfach an, aber ich habe es leider nicht hinbekommen.
Die einzelnen Schritte
- Zunächst muss man jQuery in das Theme einbinden.
Bei WordPress ist dieses Standardmäßig bereits vorhanden.
Um es zum „leben zu erwecken“ muss es im Header aufgerufen werden.
Ich habe das gemäß dieser Anleitung gemacht.<?php wp_enqueue_script('jquery');?> - Danach muss die einzelne Funktion aufgerufen werden:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script> - css-Angaben in der
style.cssfestlegen
Dazu habe ich mir den Quelltext der Demo angeschaut und zunächst etwas vereinfacht:/* jQuery-Slide */
a:focus {
outline: none;
}
#panel {
background: #754c24;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
}
.btn-slide {
background:#fff;
text-align: center;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
text-decoration: none;
}
.active {
background-position: right 12px;
} - Die eigentliche Eingabe sieht dann so aus (Quelltext):
<div id="panel">
<!-- you can put content here -->
</div>
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
wie gesagt, leider habe ich es nicht hinbekommen. Vermutlich liegt der Fehler beim Eingabebereich.
weitere Möglichkeiten:
- WordPress functions.php aufbohren – Pfeufer-Blog
Noch kein Kommentar, Füge deine Stimme unten hinzu!