Scipt.aculo.us Effekte nutzen?

Bastian-oelkuch

Hallo,

ich arbeite gerade an meinem ersten Theme und versuche gerade ein div nur bei einem Klick einblenden zu lassen, bis dahin soll es versteckt sein.

Zuerst hab ich versucht es mit dem Mootools Framework lösen, aber da hapert es schon bei der Einbindung von Mootools in Wordpress.

Als ich mir dann den Code des Standard-Themes von Wordpress angeschaut habe, ist mir aufgefallen, das Wordpress mit dem Script.aculo.us Framework arbeitet. Habe ich das richtig gesehen?

Wäre es dann nicht möglich diesen Effekt / Code in meine Theme einzubauen? http://github.com/madrobby/scrip…ffect-blinddown

Bitte helft mir, denn ich komme gerade echt nicht weiter und der Java-Guru bin ich leider auch nicht :(

Grüße und schon mal vielen Dank
Bastian

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Zitat

Zuerst hab ich versucht es mit dem Mootools Framework lösen, aber da hapert es schon bei der Einbindung von Mootools in Wordpress.

Wo genau?

Zitat

Als ich mir dann den Code des Standard-Themes von Wordpress angeschaut habe, ist mir aufgefallen, das Wordpress mit dem Script.aculo.us Framework arbeitet. Habe ich das richtig gesehen?

Prototype (+ Scriptaculous) und JQuery, ja.

Wie gesagt, was genau ist das problem? Was hast du bisher gemacht, was passiert dabei, was erwartest du statt dessen? "Geht nicht" gibts nicht. ;-)

Zitat

der Java-Guru bin ich leider auch nicht

Musst du auch nicht sein. Ein wenig JavaScript reicht hier, mit Java brauchst du dich nicht beschäftigen...

Bastian-oelkuch

Es ist mir klar, das ich das Framework in dem Head-Bereich meines Themes einfügen muss.

PHP

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/mootools.js"></script>

Jetzt versuche ich diese Demo einzubauen...

MooTools Demos: Fx.Slide

Aber ich bekomme das einfach nicht hin, den CSS-Code einzubinden macht keine Problem, aber wenn ich dann den HTML Code in meinen Footer einbinde wird er zwar angezeigt, aber wenn ich daraufklicke passiert nichts.

Ich möchte im Prinzip ein Div, das per klick eingeblendet wird und auch per klick wieder ausgeblendet werden kann. Bei Script.aculo.us gibt es diese Demo: Effect.BlindDown — scriptaculous — GitHub

Genau diesen Code habe ich eingebunden, aber es passiert wieder beim Klick nichts :(

marX

Zitat von Bastian-oelkuch
Es ist mir klar, das ich das Framework in dem Head-Bereich meines Themes einfügen muss.
PHP
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/mootools.js"></script>

Soweit korrekt (vorausgesetzt die JS-Lib liegt im Theme-Verzeichnis im Unterverzeichnis /js/).

Zitat

Jetzt versuche ich diese Demo einzubauen...

Wo? Gibts eine URL wo man sich das mal anschauen kann? Was sagt die Error-Console deines Entwicklungsbrowsers dazu?

Tipp: der JavaScript-Debugger von Firebug.

Bastian-oelkuch

Also die Datei liegt dort, das ist sicher :)

Ich verusche wie gesagt diese Demo bei mir Umzusetzen...

MooTools Demos: Fx.Slide <- Klick

Eigentlich möchte ich wie gesagt nur ein Div per Klick ein-/ausblenden :)

marX

Ich kenne die Mootools-Demos. Und die funktionieren auch in der Regel. Warum es bei dir nicht funktioniert kann ich dir ohne weitere Hinweise - z.B. der URL *deiner* Seite, wo du das Script einbauen möchtest - nicht sagen. ;-)

Bastian-oelkuch

Okey, dann geb ich dir schnell den Link per PM :)

Bastian-oelkuch

So jetzt nach Lösung meines Problems (Danke marX!) möchte ich noch schnell die Lösung posten:

Script.aulo.us kann ganz leicht mir folgendem Code in Wordpress eingebunden werden...

PHP

<script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/scriptaculous.js" type="text/javascript"></script>

...dazu muss man einfach die oben genannten Codezeilen in den Head-Bereich eures Themes eingefügt werden und schon stehen euch die Zahlreichen Funktionen von Script.aulo.us zur verfügung.

Der Vollständigkeit halber, das Framework Script.aulo.us ist Standardmäßig in Wordpress integriert.

mfitzen

Kann man sich auch irgendwo Dein Ergebnis ansehen? Würde mal gerne sehen wie Du das nun gemacht hast. Wollte mich auch in nächster Zeit an meinem eigenen Theme versuchen. Auch ich hatte geplant einen solchen Slide Effekt einzubauen, bin aber leider ebenso wenig JavaScript versiert. Vielleicht könntest Du auch mal den Code für die Divs posten, damit man mal die Zusammenhänge sehen kann?!

Gruß
infected

funkygog

Schließe mich infected an.
Mich würde auch das Ergebnis interessieren.
Ist das Dein Blog?: Bloggen ist nicht alles!

[size=8]Ich habe auf meinem Blog auch etwas ähnliches eingebaut mit
Elektronramp v5.0 | Adventures » DOWNLOADS
ich nutze aber noch eine ältere Version.

[size=10][COLOR=Gray] Und ich hätte da noch ein paar offene Fragen:[/COLOR][/SIZE]
[/SIZE][size=8][COLOR=Black]http://forum.wordpress-deutschland.org/plugins-und-wi…ich-machen.html
http://forum.wordpress-deutschland.org/konfiguration/…igt-werden.html
http://forum.wordpress-deutschland.org/konfiguration/…igt-werden.html[/COLOR][/SIZE]

marX

Ich bringe mal etwas Licht in die Sache, da sich Bastian ja nicht mehr meldet. Das ganze lief übrigens auf einer Testinstallation, nicht auf seinem normalen Blog.

Folgender HTML-Code:

PHP

<div id="buttons">
  <a href="#" onclick="return aufklappen('tagcloud'); return false;">Tagcloud</a>
  <a href="#" onclick="return aufklappen('archiv'); return false;">Archiv</a>
                
  <div id="tagcloud" style="display:none;">
        <ul>
            <?php wp_tag_cloud() ?>
        </ul>
   </div>
            
   <div id="archiv" style="display: none;">
       	<ul>
                <?php wp_get_archives() ?>
	</ul>
   </div>
</div><!--Ende Div id=buttons-->

Alles anzeigen

Und folgenden Scriptbereich im <head> dazu:

PHP

<script src="http://example.com/wp-includes/js/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="http://example.com/wp-includes/js/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
function aufklappen( id ) {
	if( id != 'tagcloud' ) $('tagcloud').hide();
	if( id != 'archiv' ) $('archiv').hide();
	Effect.BlindDown(id);
	return false;
}
</script>

mfitzen

Vielen Dank marX! Damit sollte sich doch arbeiten lassen... Werd´s am Wochenende mal testen und sehen wie weit ich komme.

Alphawolf

Zitat von Bastian-oelkuch

PHP

<script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="<?php bloginfo('url'); ?>/wp-includes/js/scriptaculous/scriptaculous.js" type="text/javascript"></script>

Nein, bitte nicht so! :) Wenn du das so machst, und ein Plugin auch, hast du u.U. zweimal das referenzierte scriptaculous im Header. Nutze lieber in der header.php:

PHP

<?php wp_enqueue_script( array('scriptaculous') ); ?>

Und auch nur einzelne Module kann man laden:

PHP

<?php wp_enqueue_script( array('scriptaculous-effects') ); ?>

Was man damit alles laden kann, sieht man hier: Function Reference/wp enqueue script « WordPress Codex

Vorteile:
1. Löst Abhängigkeiten automatisch auf, in diesem Fall wird also Prototype automatisch mitgeladen
2. Es befindet sich so immer nur ein Aufruf des Scripts im Header, egal wie viele Plugins/ Themes es aufrufen
3. Du musst dich nicht um aktuelle Versionen kümmern, denn WP selbst wird immer aktualisiert damit ausgeliefert

[SIZE="1"]ps. Ich würde lieber jQuery nutzen. Ist performanter und umfangreicher.[/SIZE]

mfitzen

Das wäre auch meine nächste Frage gewesen... Wenn ich mich nicht irre, werden diese JS Dateien bereits durch einige Plugins aufgerufen (wobei ich mir bei der scriptaculous.js gerade nicht sicher bin). Ist dann ein erneuter Aufruf nötig?

[size=8]Den Hinweis mit JQuery habe ich vernommen :) Habe mich dazu auch schonmal im Web umgesehen, aber klargekommen bin ich damit bislang auch nicht.[/SIZE]

Alphawolf

Zitat von infected

Das wäre auch meine nächste Frage gewesen... Wenn ich mich nicht irre, werden diese JS Dateien bereits durch einige Plugins aufgerufen (wobei ich mir bei der scriptaculous.js gerade nicht sicher bin). Ist dann ein erneuter Aufruf nötig?

Wenn ein Plugin es bereits einfügt im HTML-Kopf, brauchst du es nicht nochmal aufrufen.. solltest du auch nicht. Aber man kann eben nicht voraussetzen, dass das Plugin geladen wird.

Bastian-oelkuch

Sorry Leute das ich nicht selbst eure Fragen beantworten konnte, aber danke an marX und Alphawolf, die das freundlicherweise übernommen haben.

Alphawolf, deine Lösung mit dem einbinden des Frameworks scheint mir auch sehr gut, da man du sagt den Problemen vielleicht schon im voraus entgegenwirken kann.

Auf meinem Testblog funktioniert das auch soweit ohne Probleme, aber sobald ich das Theme auf den Ordner mit dem "richtigen" Blog schiebe, funkioniert es nicht mehr. :(

Woran kann das liegen?

Alphawolf

Zitat von Bastian-oelkuch

Auf meinem Testblog funktioniert das auch soweit ohne Probleme, aber sobald ich das Theme auf den Ordner mit dem "richtigen" Blog schiebe, funkioniert es nicht mehr. :(

Wie genau meinst du das? Du testest es lokal, und wenn du es online schiebst, geht es nicht mehr?

In der header.php muss auch ein Aufruf zu

PHP

<?php wp_head(); ?>

vorhanden sein, damit WP die Scripts schreiben kann.

Bastian-oelkuch

Zitat von Alphawolf

Wie genau meinst du das? Du testest es lokal, und wenn du es online schiebst, geht es nicht mehr?

Nein ich mache es anders, beides ist Online, aber unter einer Subdomain erreicht man extra den Testblog. Ich meinte es so, wenn ich dann das Theme in das Verzeichnis der "richtigen" Blogs schiebe und dieses aktiviere geht es leider nicht :(

Zitat
In der header.php muss auch ein Aufruf zu
PHP
<?php wp_head(); ?>
vorhanden sein, damit WP die Scripts schreiben kann.

Ist drin.

Alphawolf

Link zur Online-Version? :) Und haben die beiden Systeme die gleiche WP-Version?

Bastian-oelkuch

Wie gesagt bei Versionen sind Online, aber mein Hauptblog läuft mit dem Standard-Theme und Testweise mit dem Plugin Theme Test Drive.
Ich schicke dir eine Pm, dann können wir es vielleicht darüber regeln :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Scipt.aculo.us Effekte nutzen?

Jetzt mitmachen!