Problem mit masonry (jQuery) - Admin Bar ist weg.

Jabberblab

Hallo!

Ich habe vor das jQuery Plugin masonry auf meiner Seite einzubauen. So weit hat das auch geklappt, die gewünschten Effekte funktionieren einbahnfrei. Nun ist es aber so, dass auf einmal meine Admin Bar verschwunden ist (ich meine die Leiste, die oben angezeigt wird, sofern man eingeloggt ist).

Nach langer recherche gibt es nun die Theorie, dass sich verschiedene jQuery Versionen eventuell gegenseitig überschreiben. So weit ich weiß wird ja mit dem <?php wp_head(); ?> eine jQuery version eingebunden.

So hab ich das ganze gemacht:

header.php:

PHP

<?php wp_enqueue_script('jquery'); ?>  <?php wp_head(); ?>   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>   <script type="text/javascript">/* <![CDATA[ */jQuery(window).load(function(){  jQuery('#container').masonry({    // options    itemSelector : '.item',    columnWidth : 240  });});/* ]]> */
</script>

Dabei ist mir aufgefallen, dass mein Admin Bar Problem von folgender Reihenfolge abhängt:

PHP

<?php wp_head(); ?>   
<?php wp_enqueue_script('jquery'); ?>

Admin Bar funktioniert/Plugin nicht.

PHP

<?php wp_enqueue_script('jquery'); ?>  
<?php wp_head(); ?>

Plugin funktioniert/Admin Bar dagegen nicht.

Ich bin so langsam etwas ratlos, weil ich wirklich keinen Fehler finde. Habt Ihr eine Idee oder Anregung?

Schon mal vielen Dank für Eure Mühen und Antworten!

P.S. Ich habe Euch noch einen Screenshot vom Code angehangen, weil der erste Code etwas schwer zu lesen ist in der Forenansicht.

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

Tutrix

die jquery.masonry.min.js ist ja bereits in der WP Installation vorhanden, wp-includes/Js/Jquery/....
vielleicht lässt du einfach mal die doppelte Einbindung weg

Jabberblab

Hi, danke für die Antwort!

ich habe Deinen Vorschlag versucht umzusetzen:

<?php wp_head(); ?>
<script type="text/javascript" src="http://xyz.de/wp-includes/js/jquery/jquery.masonry.min.js">
$(window).load(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
});
/* ]=]=> */

</script>

Nur leider funktioniert das nicht. Siehst Du einen Fehler?

[Nachtrag]
P.S. mit jQuery anstatt $ geht's auch nicht.

Tutrix

also ich meine diesen Teil (aus deinem Code im ersten Post)

PHP

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>

mal weglassen

wenn das nichts ändert oder deine Effekte nicht mehr funktionieren
kannst du mal mit $.noConflict arbeiten

also diesen Teil (aus deinem Code im ersten Post)

Code

<script type="text/javascript">
/* <![CDATA[ */jQuery(window).load(function(){
  jQuery('#container').masonry({ 
     // options    
	 itemSelector : '.item',   
	 columnWidth : 240  });});/* ]]> */
</script>

ersetzen durch

Code

<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});
</script>

Jabberblab

Also den ersten Teil weglassen bewirkte nur, dass kein Effekt mehr eintrat (keine Admin Bar)

Die noConflict lösung:

<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
});
</script>

Hier habe ich keine Admin Bar und keinen Effekt.

Puuh, irgendwo ist da der Wurm dirn.

Tutrix

das durch $.noConflict(); gar nichts mehr geht, kann eigentlich nicht sein

bei deinem jetzigen Code fehlt ja die

Code

jquery.masonry.min.js

obwohl du schreibst das ohne diese zusätzliche Einbindung auch nichts geht

wobei ich jetzt ja nicht weiß, was für Varianten du alles getestet hast
was noch alles in deinem Theme eingebunden ist
oder was du sonst noch doppelt einbindest

vielleicht steht ja dies

PHP

<?php wp_head(); ?>

oder dies

PHP

<?php wp_enqueue_script('jquery'); ?>

schon in deinem Theme und fügst es nochmal ein

ach ja...........

Zitat

Also den ersten Teil weglassen bewirkte nur, dass kein Effekt mehr eintrat (keine Admin Bar)

das kann ja auch nicht sein, die Admin Bar hat ja nichts mit deinem Theme zu tun, folglich müssen auch keine Dateien aus dem Theme geladen werden um diese anzuzeigen

Jabberblab

Hm...also nein eigentlich nicht.
Ich stehe noch so ziemlich am Anfang des Aufbaus, sodass ich eigentlich nur das jQuery Plugin versucht habe einzubauen.

Hier kannst Du Dir das ansehen. Aber nur wenn Du Zeit und Lust hast, sonst muss ich ohne Admin Bar auskommen.

Nochmals vielen Dank!

Tutrix

das heißt jetzt funktionieren die Effekte obwohl die jquery.masonry.min.js nicht zusätzlich eingebunden ist?
ist ja derzeit "nicht" in der header.php

und in diesen jetzigen Zustand funktioniert die Admin Bar nicht?

Jabberblab

Nein in diesem Zustand funktionieren die Effekte nicht und die Admin Bar ist leider weg.

Tutrix

du bist ja lustig ;)
dann würde ich die jquery.masonry.min.js wieder einbinden

und mal

PHP

<?php wp_head(); ?>

ans Ende setzen, also

PHP

<?php wp_head(); ?>
</head>

Tutrix

sehe gerade du hast auch einen Fehler in der header.php

Code

[COLOR="#FF0000"]</div>[/COLOR]<!-- header -->

das rote muss weg, vermutlich ein Rest von etwas das du gelöscht hast

vielleicht ist ja auch dies das Problem

wird die Admin Bar nur im Frontend nicht angezeigt oder auch im Dashbard nicht?

Jabberblab

Habe alle Varianten noch mal mit

[COLOR=#0000BB][FONT=monospace]<?php wp_head[/FONT][/COLOR][COLOR=#007700][FONT=monospace](); [/FONT][/COLOR][COLOR=#0000BB][FONT=monospace]?>
[/FONT][/COLOR][COLOR=#000000][FONT=monospace]</head>[/FONT][/COLOR]

unten ausprobiert.

Funktionierte leider auch nicht. Mir ist aufgefallen, dass die Admin Bar nur funktioniert, wenn ich das hier weglasse:

[COLOR=#333333]<?php wp_enqueue_script('jquery'); ?>

[/COLOR]

Jabberblab

Nur im Frontend. Und danke! die </div> ist weg!

Tutrix

tja wenn ohne

PHP

<?php wp_enqueue_script('jquery'); ?>

alles funktioniert, dann lass es weg ;)

Jabberblab

Ja alles außer das jQuery Plugin...

Ich denke ich verzichte jetzt erst mal auf die Admin Bar im [COLOR=#333333]Frontend und mache erst mal mit der Programmierung weiter. Vielleicht kommt mir irgendwann noch die Erleuchtung ;-)

Was ein Katastrophenprojekt. Aber ich muss ja unbedingt so tolle jQuery Effekte nutzen...

Dankesehr! [/COLOR]

Tutrix

gerade noch einen Fehler entdeckt ;-)

du muss in der header.php ans Ende das öffnende

Code

<body>

einfügen, damit dies in allen anderen Dateien geladen wird

und dafür aus der index.php entfernen

Jabberblab

ohja stimmt! Danke für den Hinweis!

Tutrix

ans Ende ;)

also

Code

</head>
<body>

Jabberblab

Hi, habe grade durch Zufall (programmiere noch meinen Blog neu) die Lösung für das Problem gefunden.

jQuery muss man bei Wordpress grundsätzlich in der footer.php einbinden. Umzwar unmittelbar vor dem </body> Tag:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(window).load(function(){
jQuery('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
});
/* ]]> */

</script>

</body>

Funktioniert wunderbar und die Admin Bar ist da wo sie sein soll :-)

Noch mal ein großes Dankeschön an Art fo Pic!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Problem mit masonry (jQuery) - Admin Bar ist weg.

Jetzt mitmachen!

Benutzer online in diesem Thema