Jquery in wordpress: non ne vengo fuori

alecss

Jquery in wordpress: non ne vengo fuori

Ciao a tutti, dal titolo vi potrà sembrare una situazione già trattata, trita e ritrita...ma vi assicuro che non ne vengo a capo. Ho cercato sul web da tutte le parti e ho trovato chiaramente molte risorse, ho provato tutti i vari metodi consigliati, ma senza risultati.

Il nocciolo della questione riguarda un scrolling in Jquery, lo potete vedere facilmente qui http://manos.malihu.gr/jquery-custom-content-scroller

La pagina in cui devo inserirlo è questa: http://wordpresstest.alecss.it/gare/

Al momento è già inserito, ma come potete notare non funziona.

Si tratta di inserire tre script: due che vanno nell'header e un terzo che va caricato insieme ad una funzione appena prima della chiusura del tag body (immagino per alleggerire).

Detto questo, ho sperimentato diversi metodi, dall'usare la funzione wp_enqueue_script a caricare jquery direttamente da google, al sostituire il simbolo $ con "jquery" (dove chrome mi dava l'errore).
Il problema è che dopo avere letto un sacco di cose su come risolvere la questione, non l'ho risolto primo e ora ho le idee ancora più confuse.

Quindi, chi volesse aiutarmi dovrebbe darmi un'idea generale della cosa, partendo da zero e a passi. Io non sono uno sviluppatore e non conosco bene l'utilizzo di jquery.

C'è da sottolineare che il template di wp che utilizzo carica già da sé degli script in jQuery, oltre ad avere attivi dei plugin che ho messo io. Il conflitto più grande che ho notato è quello relativo alla pagina "contatti", dove ho caricato un plugin per google maps. La mappa infatti sparisce una volta che carico i nuovi script, nonostante poi lo scroller non funzioni. Anche disattivando il plugin citato non cambia niente. Credo proprio sia un problema si jQuery.

I messaggi di errore che mi da al momento chrome sono questi:

nello script jquery.easing mi dice "Uncaught error: jQuery is not defined
in jquery.mCustomScrollbar dice "Uncaught type error: object has no method 'draggable' (sotto la riga "$dragger.draggable")
in jquery.mousewheel mi da un errore ma non dice cosa.

Questi tipi di errori li ho cercati sul web, ma non riesco ad interpretarli a dovere, tanto che non capisco cosa ci sia di sbagliato.

Spero mi possiate aiutare, perché ne sto uscendo pazzo!

Grazie.

cardy

Ciao Alecss, visto che i punti sono molti cercherò di risponderti un po' per volta (soprattutto vista l'ora)..
Partiamo con la funzione wp_enqueue_script: questa serve per far inserire a wordpress lo script all'interno della pagina. Questa funzione può essere utile quando devi caricare script che dipendono gli uni dagli altri (=ovvero funzionano solo in un certo ordine).
Al momento non considerei questa funzione visto che prima dobbiamo riuscire a far funzionare lo script...

L'errore Uncaught error: jQuery is not defined dipende dal fatto che stai provando a caricare la libreria degli effetti (easing) prima di quella di Jquery. Verifica che nel codice gli script vengano chiamati nel giusto ordine (prima di qualsiasi altro script ci deve essere Jquery, presa da Google o dal sito locale è indifferente per quanto riguardo il funzionamento)
Sul sito da te indicato sono infatti caricati in questo ordine:
[html]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>

[/html]il metodo "draggable" è presente nella libreria jquery-ui. Vale quindi il discorso esposto sopra: prima di richiamare lo script che effettua lo scrolling, verifica che siano stati richiamati tutti i files nell'ordine corretto:

jquery
jquery-ui
jquery-easing
mousewheel
script personalizzato per scrolling.

Fammi sapere se è sufficente la spiegazione o se ti serve altro aiuto

alecss

Leggo solo ora, perché nel weekend ho staccato la spina...Intanto ti ringrazio molto per la disponibilità.

Ok, ho controllato l'ordine e c'erano degli errori, ora carico prima gli script da google e poi il resto.

Ti metto qui il codice che ho nel mio tag <head>:

[PHP]<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php elegant_titles(); ?></title>
<?php elegant_description(); ?>
<?php elegant_keywords(); ?>
<?php elegant_canonical(); ?>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>

</head>[/PHP]

Ora Chrome mi sa solo un errore relativo al metodo "draggable", nello scrip che carico prima della chiusura del body, nel file footer.php. È chiaro che li è presente solo quello scrip, ma siccome è incluso header.php, dovrebbero essere già caricati prima tutti gli altri...però mi sa che non è così...come posso correggere?

Grazie ancora per la pazienza.

cardy

Quale script è presente nel footer? in che modo è inserito nella pagina?

alecss

Questo è il codice del footer.php (ti avevo già risposto, ma vedo che non c'è il messaggio):

[PHP]<?php $fullWidthPage = is_page_template('page-full.php'); ?>

		</div> <!-- end #main-content -->
	</div> <!-- end-wrap -->
</div> 	<!-- end .container -->

</div>

	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : ?> 
	<?php endif; ?>
	<div class="clear"></div>

</div> <!--end .container -->

</div>

	<?php $menuClass = 'bottom-nav';
	$footerNav = '';
	
	if (function_exists('wp_nav_menu')) $footerNav = wp_nav_menu( array( 'theme_location' => 'footer-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false, 'depth' => '1' ) );
	if ($footerNav == '') show_page_menu($menuClass);
	else echo($footerNav); ?>
	
	<p id="copyright"><?php _e('Designed by ','TheSource'); ?> <a href="http://www.elegantthemes.com" title="Elegant Themes">Elegant Themes</a> - <?php _e('Customization by ','TheSource'); ?> <a href="http://www.alecss.it" title="AleCss Lab">AleCss Lab</a> | <?php _e('Powered by ','TheSource'); ?> <a href="http://www.wordpress.org">Wordpress</a></p>
</div> <!--end .container -->

</div>

<?php include(TEMPLATEPATH . '/includes/scripts.php'); ?>

<?php wp_footer(); ?>

<?php wp_pagenavi(); ?>

</body>
</html>[/PHP]

Come puoi vedere lo script è caricato in fondo, prima della chiusura del body. È caricato prima lo script jquery.mCustomScrollbar.js e poi la funzione che vedi.

Mi da l'errore che ti ho descritto prima e cioè "Uncaught type error: object has no method 'draggable' " (sotto la riga "$dragger.draggable" all'interno dello script).

Non saprei come e cosa correggere, hai qualche idea?

Al momento lo scroller funziona a metà, nel senso che è comparso tutto lungo lo slider, come dovrebbe essere dalle prove che ho fatto precedentemente. Ma non scorre, è sempre bloccato.

cardy

mmm...:? puoi postare anche il contenuto di [php]
<?php include(TEMPLATEPATH . '/includes/scripts.php'); ?>
[/php]

alecss

Certamente, eccolo:

[PHP]<?php global $shortname; ?>
<script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/superfish.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();

	jQuery('ul.superfish, #page-menu ul.nav').superfish({ 
		delay:       200,                            // one second delay on mouseout 
		animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
		speed:       'fast',                          // faster animation speed 
		autoArrows:  true,                           // disable generation of arrow mark-up 
		dropShadows: false                            // disable drop shadows 
	});
	
	jQuery('ul.nav > li > a.sf-with-ul').parent('li').addClass('sf-ul'); 
	
	et_search_bar();
	et_footer_improvements('#footer .footer-widget');
	
	<!---- et_switcher plugin v1.3 ---->
	(function($)
	{
		$.fn.et_switcher = function(options)
		{
			var defaults =
			{
			   slides: '>div',
			   activeClass: 'active',
			   linksNav: '',
			   findParent: true, //use parent elements in defining lengths
			   lengthElement: 'li', //parent element, used only if findParent is set to true
			   useArrows: false,
			   arrowLeft: 'prevlink',
			   arrowRight: 'nextlink',
			   auto: false,
			   autoSpeed: 5000
			};

			var options = $.extend(defaults, options);

			return this.each(function()
			{
				var slidesContainer = jQuery(this);
				slidesContainer.find(options.slides).hide().end().find(options.slides).filter(':first').css('display','block');
		 
				if (options.linksNav != '') { 
					var linkSwitcher = jQuery(options.linksNav);
									
					linkSwitcher.click(function(){
						var targetElement;

						if (options.findParent) targetElement = jQuery(this).parent();
						else targetElement = jQuery(this);

						if (targetElement.hasClass('active')) return false;

						targetElement.siblings().removeClass('active').end().addClass('active');

						var ordernum = targetElement.prevAll(options.lengthElement).length;
										
						slidesContainer.find(options.slides).filter(':visible').hide().end().end().find(options.slides).filter(':eq('+ordernum+')').stop().fadeIn(700);
						return false;
					});
				};
				
				jQuery('#'+options.arrowRight+', #'+options.arrowLeft).click(function(){
				  
					var slideActive = slidesContainer.find(options.slides).filter(":visible"),
						nextSlide = slideActive.next(),
						prevSlide = slideActive.prev();

					if (jQuery(this).attr("id") == options.arrowRight) {
						if (nextSlide.length) {
							var ordernum = nextSlide.prevAll().length;                        
						} else { var ordernum = 0; }
					};

					if (jQuery(this).attr("id") == options.arrowLeft) {
						if (prevSlide.length) {
							var ordernum = prevSlide.prevAll().length;                  
						} else { var ordernum = slidesContainer.find(options.slides).length-1; }
					};

					slidesContainer.find(options.slides).filter(':visible').hide().end().end().find(options.slides).filter(':eq('+ordernum+')').stop().fadeIn(700);

					if (typeof interval != 'undefined') {
						clearInterval(interval);
						auto_rotate();
					};

					return false;
				});   

				if (options.auto) {
					auto_rotate();
				};
				
				function auto_rotate(){
					interval = setInterval(function(){
						var slideActive = slidesContainer.find(options.slides).filter(":visible"),
							nextSlide = slideActive.next();
					 
						if (nextSlide.length) {
							var ordernum = nextSlide.prevAll().length;                        
						} else { var ordernum = 0; }
					 
						if (options.linksNav === '') 
							jQuery('#'+options.arrowRight).trigger("click");
						else 		 		
							linkSwitcher.filter(':eq('+ordernum+')').trigger("click");
					},options.autoSpeed);
				};
			});
		}
	})(jQuery);
	
	
	var $featuredArea = jQuery('#featured'),
		$all_tabs = jQuery('#all_tabs');
	
	if ($featuredArea.length) {
		$featuredArea.et_switcher({
			useArrows: true <?php if (get_option($shortname.'_slider_auto') == 'on') { ?>,
									auto: true,
									autoSpeed: <?php echo(get_option($shortname.'_slider_autospeed')); ?>
							<?php }; ?>		
		});
	};
			
	if ($all_tabs.length) {
		$all_tabs.et_switcher({
			linksNav: 'ul#tab_controls li a'
		});
	}; 

	<?php if (get_option($shortname.'_disable_toptier') == 'on') echo('jQuery("ul.nav > li > ul").prev("a").attr("href","#");'); ?>
	
	<!---- Footer Improvements ---->
	function et_footer_improvements($selector){
		var $footer_widget = jQuery($selector);
	
		if (!($footer_widget.length == 0)) {
			$footer_widget.each(function (index, domEle) {
				if ((index+1)%4 == 0) jQuery(domEle).addClass("last").after("<div class='clear'></div>");
			});
		};
	};
	
	<!---- Search Bar Improvements ---->
	function et_search_bar(){
		var $searchform = jQuery('#cat-nav div#search-form'),
			$searchinput = $searchform.find("input#searchinput"),
			searchvalue = $searchinput.val();
			
		$searchinput.focus(function(){
			if (jQuery(this).val() === searchvalue) jQuery(this).val("");
		}).blur(function(){
			if (jQuery(this).val() === "") jQuery(this).val(searchvalue);
		});
	};
	
//]]>	
</script>[/PHP]