Gemakkelijk JavaScript toevoegen aan WordPress pagina's of berichten - DeLaatbusiness

Gemakkelijk JavaScript toevoegen aan WordPress pagina’s of berichten

4 min


125
6 gratis internet marketing ebooks, klik hier voor download

Wilt u een JavaScript toevoegen aan uw WordPress-pagina’s of berichten? Soms moet u een JavaScript-code toevoegen aan de volledige website of specifieke pagina’s. WordPress staat standaard niet toe dat je rechtstreeks code toevoegt in je berichten. In dit artikel laten we u zien hoe u eenvoudig JavaScript kunt toevoegen in WordPress-pagina’s of berichten.

Eenvoudig JavaScript toevoegen aan WordPress-berichten en -pagina's

Wat is JavaScript?

JavaScript is een programmeertaal die niet op uw server wordt uitgevoerd, maar in de browser van de gebruiker. Deze client-side programmering stelt ontwikkelaars in staat veel coole dingen te doen zonder uw website te vertragen.

Als u een videospeler wilt insluiten, een rekenmachine of een andere service van derden wilt toevoegen, wordt u vaak gevraagd een JavaScript-codefragment te kopiëren en in uw website te plakken.

Een typisch JavaScript-codefragment ziet er ongeveer zo uit:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!> 
<script type="text/javascript" src="/path/to/some-script.js"></script>

Als u nu een JavaScript-codefragment toevoegt aan een WordPress-bericht of -pagina, wordt het verwijderd door WordPress wanneer u het probeert op te slaan.

Dat gezegd hebbende, laten we eens kijken hoe u eenvoudig JavaScript kunt toevoegen in WordPress-pagina’s of berichten zonder uw website te verbreken.

Methode 1. Voeg JavaScript-site-breed toe met behulp van kop- en voetteksten invoegen

Soms wordt u gevraagd een JavaScript-codefragment te kopiëren en in uw website te plakken om een ​​hulpprogramma van derden toe te voegen. Deze scripts gaan meestal naar het hoofdgedeelte of onderaan voor de tag </ body> van uw website. Op deze manier wordt de code in elke paginaweergave geladen.

De installatiecode van Google Analytics moet bijvoorbeeld aanwezig zijn op elke pagina van uw website, zodat deze uw websitebezoekers kan volgen.

U kunt een dergelijke code toevoegen aan de header.php- of footer.php-bestanden van uw WordPress-thema. Deze wijzigingen worden echter overschreven wanneer u uw thema bijwerkt of wijzigt.

Daarom raden we aan om een ​​plug-in te gebruiken om javascript op uw site te laden.

Eerst moet u de plug-in invoegbare kopteksten en voetteksten installeren en activeren .

Na activering moet je de pagina Instellingen »Kopteksten invoegen en voettekst gebruiken . Je ziet twee vakken, een voor de koptekst en de andere voor de voettekst.

Voeg invoegtoepassingen voor kop- en voetteksten toe

U kunt nu de JavaScript-code plakken die u naar een van deze vakken hebt gekopieerd en vervolgens op de knop Opslaan klikken.

Insert Headers and Footers plugin zal nu automatisch de code laden die u op elke pagina van uw website heeft toegevoegd.

Methode 2. JavaScript-code handmatig toevoegen met behulp van code

Voor deze methode moet u code aan uw WordPress-bestanden toevoegen.

Laten we eerst eens kijken hoe u code toevoegt aan de header van uw WordPress-site. U moet de volgende code toevoegen aan het functie.php-bestand van uw thema of een sitespecifieke plug-in .

1
2
3
4
5
6
7
8
function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

JavaScript toevoegen aan een specifiek WordPress bericht of pagina met code

Laten we aannemen dat u dit javascript alleen op een specifiek WordPress-bericht wilt laden. Om dat te doen, moet u voorwaardelijke logica aan de code toevoegen. Bekijk het volgende voorbeeld:

1
2
3
4
5
6
7
8
9
10
function wpb_hook_javascript() {
  if (is_single ('16')) {
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

Als u de bovenstaande code van dichtbij bekijkt, ziet u dat we javascript-code hebben ingepakt rond conditionele logica om overeen te komen met een specifiek bericht-ID. Je kunt dit gebruiken door 16 te vervangen door je eigen bericht-ID.

Nu zou deze code voor elk berichttype kunnen werken, behalve voor pagina’s. Laten we een ander voorbeeld bekijken, behalve dat deze zal controleren op een specifiek pagina-ID voordat de JavaScript-code aan het hoofdgedeelte wordt toegevoegd.

1
2
3
4
5
6
7
8
9
10
function wpb_hook_javascript() {
  if (is_page ('10')) {
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

In plaats van is_single gebruiken we nu is_page om te controleren op pagina-ID.

We kunnen dezelfde code gebruiken met een kleine aanpassing om JavaScript-code toe te voegen aan de voettekst van uw site. Bekijk het volgende voorbeeld.

1
2
3
4
5
6
7
8
function wpb_hook_javascript_footer() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

In plaats van onze functie aan wp_head te koppelen, hebben we het nu aan wp_footer gekoppeld. U kunt het ook gebruiken met voorwaardelijke tags om Javascript toe te voegen aan specifieke berichten of pagina’s.

Methode 3. Javascript-code toevoegen aan berichten of pagina’s met behulp van plug-in

Met deze methode kunt u overal in uw WordPress-berichten en -pagina’s code toevoegen. U kunt ook selecteren waar in de inhoud u de JavaScript-code wilt insluiten.

Allereerst moet u de plug-in Code Insluiten installeren en activeren .

Na activering moet je het bericht of de pagina bewerken waarop je het javascript wilt toevoegen. Klik op de pagina voor het bewerken van berichten op de knop ‘ Schermopties ‘ en vink de optie ‘Aangepaste velden’ aan.

Toon meta-vak aangepaste velden

Blader nu omlaag en onder de berichteditor, u ziet de metabox ‘Aangepaste velden’, waarbij u op de link ‘Nieuw invoeren’ moet klikken.

Voeg een nieuw aangepast veld toe

De velden voor het aangepaste veld en de waarde verschijnen nu.

U moet een naam voor het aangepaste veld voorzien van een CODE-prefix (bijvoorbeeld CODEmyjscode) en vervolgens de JavaScript-code in het waardeveld plakken.

Een JavaScript-code toevoegen aan een aangepast veld

Vergeet niet op de knop ‘Aangepast veld toevoegen’ te klikken om uw aangepaste veld op te slaan.

Nu kunt u dit aangepaste veld gebruiken om de JavaScript-code overal in dit bericht of deze pagina in te sluiten. Voeg deze insluitcode eenvoudig overal in uw berichtcontent toe.

{{}} CODEmyjscode

U kunt nu uw bericht of pagina opslaan en uw site bekijken. U kunt de JavaScript-code zien met behulp van het hulpprogramma Inspecteren of door de paginabron te bekijken.

Tip: deze methoden zijn bedoeld voor beginners en website-eigenaren. Als u WordPress-thema of plugin-ontwikkeling aan het leren bent, moet u JavaScript en stylesheets naar uw projecten toe te voegen .


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format