paar vragen om te beginnen gebruiken Javascript in Wordpress

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Johannes davidian

johannes davidian

19/06/2022 12:33:30
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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');

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

bedankt
johannes
 
PHP hulp

PHP hulp

28/03/2024 16:26:22
 
- Ariën  -
Beheerder

- Ariën -

19/06/2022 13:58:23
Quote Anchor link
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.
 
Johannes davidian

johannes davidian

19/06/2022 14:38:16
Quote Anchor link
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  -
Beheerder

- Ariën -

19/06/2022 15:12:39
Quote Anchor link
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.
 
Johannes davidian

johannes davidian

19/06/2022 16:39:53
Quote Anchor link
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  -
Beheerder

- Ariën -

19/06/2022 17:06:19
Quote Anchor link
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.
 
Johannes davidian

johannes davidian

19/06/2022 19:16:32
Quote Anchor link
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 :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Ozzie PHP

Ozzie PHP

19/06/2022 20:44:59
Quote Anchor link
En je vraag is?
 
Johannes davidian

johannes davidian

19/06/2022 21:10:22
Quote Anchor link
bedankt,

ik heb deze html code in header.php:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
    
}


js code is :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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

Ozzie PHP

20/06/2022 10:42:13
Quote Anchor link
>> 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.
 
Johannes davidian

johannes davidian

20/06/2022 14:55:05
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>        



de javascript code is:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


css code in kort is :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
    
}


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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.