paar vragen om te beginnen gebruiken Javascript in Wordpress
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:
Code (php)
1
2
3
4
2
3
4
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');
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
Verder zijn versienummers van Javascript niet echt interessant meer.
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?
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!
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.
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 :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
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>
ik heb deze html code in header.php:
Code (php)
1
2
3
4
2
3
4
<header>
<div id="first-header" class="flex-container-site-header"></div>
<div id="second-header" class="change-site-header"> </div> </header>
<div id="first-header" class="flex-container-site-header"></div>
<div id="second-header" class="change-site-header"> </div> </header>
css code is :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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;
}
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 :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
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.
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.
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
const header = document.querySelector ("header");
window.addEventListener ('scroll',()=> {
if (window.scrollY > 0) {
header.classList.add ("change") ;
}
else {
header.classList.remove ("change") ;
}
})
</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 :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#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;
}
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
Toevoeging op 21/06/2022 12:48:40:
ik corrigeer mij fout :
de change class moet ID zijn dus #change.
dank u wel