apr 29, 2020
Funktioner og tilknytning i WP
Man kan udføre en Javascript funktion i WordPress hvor som. I det følgende beskriver jeg to måder at tilføje et JavaScript på.
Antag at vi gerne vil vise en tekst fra en JavaScript – fx stien til forælder temaet. Det lægger vi i en funktion på følgende måde i functions.php i child temaet
function custom_show_alert() {
$cssURI =get_template_directory_uri().'/style.css';
ob_start() ?>
<p> klik på knappen for at se lokationen for CSS filen </p>
<button onclick="myFunction()">Vis sti</button>
<script>
function myFunction() {
alert('<?php echo $cssURI ?>');
}
</script>
<?php
return ob_get_clean();
}
add_shortcode('popup-uri','custom_show_alert');Denne funktion henter først stien til en php-variabel,$cssURI, derefter lægges outputtet i en buffer ( ob_start() ). Derefter laver vi en kombination af html, JavaScript og php for at vise en knap, der ved klik udfører en alert, der viser indholdet af variablen. Tils sidst udfører vi en “ob_get_clean”, der både lukker outputstrømmen, og returnerer indholdet for det opsamlede. Resultatet er så en knap, som viser et alert vindue, når man klikker på knappen.
Denne funktion skal jo naturligvis kaldes for at blive udført. Men det er så spørgsmålet hvordan vi gør det. I denne situation har jeg valgt en short-code. Det vil sige, at man tildeler et navn, eller en alias til funktionen, og registrerer den under short ode. Navnet, som jeg har teldelt er ‘popup-uri’ og så skal jeg fortælle WordPress, at det skal i listen af shortcodes. Det gøres ved følgende statement:
add_shortcode('popup-uri','custom_show_alert');
Der er 2 ting at bemærke her.
- I alert funktionen skal man skrive
echo $cssURI;,hvis man bare skriver$cssURI;så bliver den ikke skrevet og funktionen går i fejl. - Funktionen, get_template_directory_uri henter forældretemaets uri og ikke childtemaets. For at hente childtemaets sti – så skal man skrive get_stylesheet_directory_uri
Udførsel af JavaScript overalt
Det andet eksempel er en simpel JavaScript alert vindue, der vises over alt. Denne placeres i en speciel fil i JavaScript mappen JS, og alt, der placeres i denne vil WordPress lægge i en <script> … </script> klammer. Denne fil, custom_alert_path.js indeholder følgende kode:
teksten = "Hello World";
//denne test er lidt tricky, det skal være !== ellers virker den ikke
if(teksten!==null) {
alert(teksten);
} else {
alert("teksten er ikke defineret");
}Den sætter indholdet af variablen, teksten, i et alertvindue, hvis teksten ikke er null, ellers “teksten er ikke defineret”. Noter her, at for at være på den sikre side skal man teste med !== ellers virker det ikke.
Man skal nu fortælle WordPress, at dette script skal udføres globalt. Det vil sige vi registrerer scriptet og fortæller WordPress at udføre en add_action registrering
For at registrere scriptet laver vi en funktion i functions.php i childtemaet, Og så skal vi udføre funktionen ved en – add_action registrering. Registreringen af scriptet forløber, som følger
function custom_child_scripts() {
wp_enqueue_script('Alert sti' , get_stylesheet_directory_uri()
. '/assets/js/custom_alert_path.js' );
}Vi allokerer navet ‘Alert sti’ til scriptet, ved specifikation af dens sti. Da det ligger i child-temaets /asset/js/ mappe, skal vi specificere den. Og vi udfører en wp_enqueue_script, som en script.
Dette er dog ikke tilstrækkeligt. For vi skal jo også fortælle WordPress at udføre funktion, custom_child_scripts. Dette gør vi ved at udføre
add_action('wp_enqueue_scripts', 'custom_child_scripts');
Dette fortæller, at WordPress skal udføre funktionen og lægge scriptet i – listen af scripts
More Details
