PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
j

paar vragen om te beginnen gebruiken Javascript in Wordpress

Door johannes davidian op 19-06-2022 12:33
2.224 views
Hallo,
ik wil weten welke methode is beter of sneller om Javascript in Wordpress thema te gebruiken.
1-CDN (misschien google CDN)
2-function.php.
als CDN is de beste oplossing kunt u mij de beste URL wijzen

als function.php is is deze code is correct:


function collectiveray_theme_scripts_function() {
  wp_enqueue_script( 'js-file', get_template_directory_uri() . '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_theme_scripts_function');

ik zie in deze code geen versie nummer van javascript. is dat belangrijk?

bedankt
johannes
Ariën
19-06-2022 13:58
Een CDN kan handig zijn, maar is niet verplicht. Welke snel is, zal weinig uitmaken, want een CDN wordt al via de snelste route ingeladen.

Verder zijn versienummers van Javascript niet echt interessant meer.
j
johannes davidian
19-06-2022 14:38
dank u wel,
ik weet dat jquery is library van javascript
als ik zou gebruiken jquery.min.js in plaats van javascript.min.js zou het verschil maken of het is hetzelfde?
Ariën
19-06-2022 15:12
jQuery is een library die gemaakt in in JavaScript. Verder vermoed ik sterk aan de naamgeving dat jquery.min.js en javascript.min.js beiden anders zijn.
j
johannes davidian
19-06-2022 16:39
dank u wel ,

ik zie in https://developers.google.com/speed/libraries alleen jquery scripts dus geen javascript scripts.

bijvoorbeeld:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

ik zie in in https://cdnjs.com/libraries/min.js/0.2.3

deze link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/min.js/0.2.3/$.min.js" integrity="sha512-5cEGd2WfKHAqhng7fVD0W9DrfnMDzSLCvM3nd8RYaXft02zMiiVBjUmn0JTFAa8rSdFwIj7Amx78q/WNBIk5zA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

moet ik deze gebruiken of van de googleapis?

2- laatste vraag ik moet zeker deze link in <head> gedeelte </head> van header.php paste!

Ariën
19-06-2022 17:06
jQury-scripts bestaan niet. jQuery is geen programmeertaal. Het zijn altijd nog Javascript-scripts met jQuery functies.
Ook min.js is een aparte library.

Geen idee wat je moet/wilt gebruiken. Je moet zelf uitzoeken welke library je nodig hebt of bij custom made scripts moet je zelf een keuze maken wat je wilt gebruiken.
j
johannes davidian
19-06-2022 19:16
dank u wel ,
ik wil on scrol de header1 vervangen met header2.
ik heb 2 headers klassen gemaakt.
header 1 wordt getoond tijdens openen van pagina en als wordt gescrold naar beneden wordt de header 2 getoond.
en als helemaal naar boven gescrold wordt de header1 getoond.(op 0 punt).
ik heb deze code gevonden :


<script>

 cons header=document.querySellector ("header");
window.addEventListener ('scroll',() => {
	if (window.scrollY > 0)  {		
		header.classList.add ("change-site-header") ;
		
	}
	else {
		header.classList.remove ("change-site-header") ;
		
	} 
})
</script>
Ozzie PHP
19-06-2022 20:44
En je vraag is?
j
johannes davidian
19-06-2022 21:10
bedankt,

ik heb deze html code in header.php:

<header>
		<div id="first-header" class="flex-container-site-header"></div>
	
		<div id="second-header" class="change-site-header"> </div>    		</header>


css code is :


#first-header{ 
 
   margin-top:0;
  width:100%;   
  height: 80px;
  background-color:#343a40;
  box-sizing: border-box; 
position:fixed;
  z-index: 1;
	
}

#second-header {
	
   margin-top:0;
  width:100%;   
  height: 80px;
  box-sizing: border-box; 
position:fixed;
  z-index: 1;	
background-color:red;
	
}


js code is :


<script>

 cons header=document.querySelector ("header");

window.addEventListener ('scroll',() => {

	if (window.scrollY > 0)  {
	
		header.classList.add ("second-header") ;
		
	}

	else {
		header.classList.remove ("second-header") ;	
		
	} 
})

</script>


ik wil tijdens scrollen de eerste header vervangen met de tweede header.
maar het lukt niet wat kan het fout zijn hier .
kunt u mij vertellen.

ik heb ook de link :
<script src="https://cdnjs.cloudflare.com/ajax/libs/min.js/0.2.3/$.min.js" integrity="sha512-5cEGd2WfKHAqhng7fVD0W9DrfnMDzSLCvM3nd8RYaXft02zMiiVBjUmn0JTFAa8rSdFwIj7Amx78q/WNBIk5zA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

in de head gedeelte gezet van header.php.
maar ik heb gehoord dat deze link is niet nodig voor mij js script. is dat waar ?

mij url is :http://webdesignleren.com/

als u opent mij website u kunt zien dat gewoon tweede header is active in plaats van eerste en tijdens scrollen gebeurt niets.
Ozzie PHP
20-06-2022 10:42
>> ik heb ook de link ... in de head gedeelte gezet van header.php. maar ik heb gehoord dat deze link is niet nodig voor mij js script. is dat waar ?

JIJ bent de programmeur, dus JIJ moet je afvragen waarom je ergens een link plaatst. Je moet niet zomaar ergens code kopiëren en plakken. Je moet weten WAAROM je iets doet.

Als ik jou was, dan zou ik werken met jQuery. Dat maakt het werken met JavaScript een stuk makkelijker.
j
johannes davidian
20-06-2022 14:55
dank u wel iedereen,

ik heb de probleem opgelost voor nu . de probleem was niet javascript code maar html code :

ik heb eerst de eerste lijn html code boven:

<header>
        <div id="first-header" class="flex-container-site-header"></div>

 vervangen met deze code :

<div id="header">        		 </header>

ik heb daarna  tweede lijn html code:

        <div id="second-header" class="change-site-header"> </div> 
 
vervangen met deze code :

	<div class="change">
			
		</div>



de javascript code is:


<script>

 const header = document.querySelector ("header");
window.addEventListener ('scroll',()=> {
	if (window.scrollY > 0)  {
	
		header.classList.add ("change") ;
		
	}
	else {
		header.classList.remove ("change") ;
		
		
		
	} 
})
	

</script>


css code in kort is :



#header { 
 
   margin-top:0;
  width:100%;   
  height: 80px;
  background-color:#343a40;
  box-sizing: border-box; 
position:fixed;
  z-index: 1;
	
}


.change {
	
   margin-top:0;
  width:100%;   
  height: 80px;
  box-sizing: border-box; 
position:fixed;
  z-index: 1;	
background-color:red;
	
}


als u gaat naar mij website :http://webdesignleren.com/

dan zie u wanneer scrolt u naar beneden de header background-color veranderd van zwart naar rood. en wanneer scrolt u naar de top de header background-color veranderd van rood naar zwart.

dank u wel
johannes

[size=xsmall]Toevoeging op 21/06/2022 12:48:40:[/size]

ik corrigeer mij fout :
de change class moet ID zijn dus #change.

dank u wel

Reageren

Inloggen om te reageren