« »

WordPress - Une puissante plate-forme open source de PHP pour d

ï¿½tiquette: Mode d'emploi, ma

Demo
Agrandir
Recharger
New window

Gï¿½nï¿½rez vos vidï¿½os d'entreprise par l'IA avec la voix ou simplement du texte

Votre premiï¿½re application vidï¿½o AI GRATUITE ! Automatisez votre premiï¿½re vidï¿½o AI. Crï¿½ez votre vidï¿½o professionnelle en 5 minutes grï¿½ce ï¿½ l'IA. Aucun ï¿½quipement ni compï¿½tence en montage vidï¿½o requis. Production vidï¿½o sans effort pour les spï¿½cialistes du marketing de contenu. Application vidï¿½o AI ILLIMITï¿½E gratuite ï¿½ portï¿½e de main

If you're involved in WordPress development, a challenge that you're going to face sooner or later is how to include JavaScript files efficiently.

In this tutorial, I'm going to show you the best way to do that.

Let's say you have a plugin that adds a custom shortcode. The shortcode needs some JavaScript code which requires jQuery.

If you're just starting out with WordPress development, you might be tempted to write something like this:

How a WordPress Youngling does it

add_action('wp_head', 'add_my_script');
 
function add_my_script() { ?>
<script type="text/javascript" src="/javascript/article/How_to_load_JavaScript_like_a_WordPress_Master.php/<?php bloginfo('wpurl'); ?>/wp-content/plugins/my-plugin/jquery.js"></script>

<script type="text/javascript" src="/javascript/article/How_to_load_JavaScript_like_a_WordPress_Master.php/<?php bloginfo('wpurl'); ?>/wp-content/plugins/my-plugin/my-script.js"></script>
<?php }

Let's see what's wrong with that approach:

Firstly, since WordPress 2.6, the user can move the wp-content directory wherever he wants. What does that mean? That's right: instant plugin breakage.

Secondly, if the user installs another plugin that also uses jQuery, the page will end up with jQuery being loaded twice.

Fortunately, WordPress lends us a hand with these two problems:

How a young Padawan does it

add_action('template_redirect', 'add_my_script');

 
function add_my_script() {
	wp_enqueue_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);

}

The above script ultimately does what the first one does, except:

it gets the correct path for the file
it checks if jQuery has already been included or not
the script tag is written in the footer, so the page loads faster

That's an obvious improvement. But what if the shortcode appears on a single page?

You're needlessly including a file 99% of the time, causing slower page loads.

Notice that in the last two examples, we've been using the template_redirect action.

The trouble with wp_enqueue_script() is that you have to call it before wp_head() fires. So, before the page is rendered, you have to decide if you should add your script or not. Not an easy call to make, is it?

Well, there's a secret method that will let you enqueue scripts after the entire page has been displayed.

The Jedi Knight way

add_action('wp_footer', 'print_my_script');
 
function print_my_script() {

	global $add_my_script, $wp_scripts;
 
	if ( ! $add_my_script )

		return;
 
	wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);

 
	$wp_scripts->do_items('my-script');
}

In this case, the script will be enqueued only if the $add_my_script global was set at some point during the rendering of the page.

The key here is that you're calling $wp_scripts directly, instead of relying on WordPress to do it for you.

It will still check if jQuery was already enqueued or not.

You can set the $add_my_script flag from any function or method, including from a shortcode handler:

add_shortcode('myshortcode', 'my_shortcode_handler');

 
function my_shortcode_handler($atts) {
	global $add_my_script;
 

	$add_my_script = true;
 
	// actual shortcode handling here
}

So, the script will be added if [myshortcode ...] was found in any of the posts on the current page.

Nothing more to do here, except wrap it up in a nice class:

The Jedi Master way

class My_Shortcode {
	static $add_script;
 
	function init() {

		add_shortcode('myshortcode', array(__CLASS__, 'handle_shortcode'));
		add_action('wp_footer', array(__CLASS__, 'add_script'));

	}
 
	function handle_shortcode($atts) {
		self::$add_script = true;

 
		// actual shortcode handling here
	}
 
	function add_script() {

		global $wp_scripts;
 
		if ( ! self::$add_script )

			return;
 
		wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);

 
		$wp_scripts->do_items('my-script');
	}
}
 
My_Shortcode::init();

I hope this tutorial has helped you on your way to mastering WordPress script loading.

ï¿½crivez votre commentaire

Commentaires du client sera publiï¿½ avant previwed
Donnez votre email rï¿½el pour obtenir des rï¿½ponses notification ou commentaire sera supprimï¿½

Votre nom *
Votre e-mail^g *
~~Votre site~~

Comment's Titre

J'assure ï¿½ 100% je suis humain rï¿½el
Je le rï¿½pï¿½te, je ne suis pas bot

Sent (0)
Nouveau

BBCode
HTML
URL
JID

AIVideo-App.com
GÃ©nÃ©rez vos vidÃ©os d'entreprise par l'IA avec la voix ou simplement du texte

chatGPTaz.com
Parlez Ã ChatGPT dans votre langue maternelle

AppAIVidÃ©o
Votre premiÃ¨re application vidÃ©o AI GRATUITE

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Faceswap AI en ligne
Ã‰changez des visages, des vidÃ©os, des photos et des GIF instantanÃ©ment avec de puissants outils d'IA - Faceswap AI Online GRATUIT

Faceswap AI en ligne
Ã‰changez des visages, des vidÃ©os, des photos et des GIF instantanÃ©ment avec de puissants outils d'IA - Faceswap AI Online GRATUIT

Faceswap AI en ligne
Ã‰changez des visages, des vidÃ©os, des photos et des GIF instantanÃ©ment avec de puissants outils d'IA - Faceswap AI Online GRATUIT

Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app

Your next top AI Assistant
Claude AI, developed by Anthropic

Your next top AI Assistant
Claude AI, developed by Anthropic

Temu gratuit 500 $ pour les nouveaux utilisateurs
Claim Free Temu $500 Credit via Affiliate & Influencer Program

CrÃ©dits publicitaires TikTok gratuits
MaÃ®trisez les publicitÃ©s TikTok pour le marketing de votre entreprise

Dall-E-OpenAI.com
GÃ©nÃ©rez automatiquement des images crÃ©atives avec l'IA

chatGPT4.win
Parlez Ã ChatGPT dans votre langue maternelle

Premier produit d'intelligence artificielle d'Elon Musk - Grok/UN.com
Parlez au chatbot Grok AI dans votre langue

Outily.win
Centre d'outils ouvert et gratuit, utilisable par tous et pour tous, avec des centaines d'outils

GateIO.gomymobi.com
Airdrops gratuits Ã rÃ©clamer et Ã partager jusqu'Ã 150 000 $ par projet

iPhoneKer.com
Ã‰conomisez jusqu'Ã 630 $ Ã l'achat d'un nouvel iPhone 16

Acheter le robot Tesla Optimus
Commandez votre robot Tesla Bot : Optimus Gen 2 dÃ¨s aujourd'hui pour moins de 20 000 $

Cool Domains for Sale!

MetaTru.com Card.rip CreditCard.rip system.money gomy.mobi hearf.com eChainBank.com war.money ApexBTC.com gomy.mobi chatGPTaz.com index.services ChatTotal.com gomymobi.com AIvideo-app.com CryptoKD.com Dall-E-OpenAI.com chatGPT4.win JavaScriptBank.com GrokUN.com lend.services ABP3.com chatGPT2.fun AI-Trading-Bot.com gomymobi.com pornID.net CTRCoin.com XMQV.com javascriptON.com ChainTutor.com ZWVQ.com

Dï¿½poser jours:
Auteur:
Previews:
Commentaire:
Votes:
Sent:
Taille:
Rang:

04/11/2010
scribu [more]
58,087
1
0
0
20.93 KBytes

Comment charger JavaScript comme un ma - Langue: Franï¿½aise

0/5 0 votes / 58,087 previews / 1 commentaire 04/11/2010 WordPress - Une puissante plate-forme open source de PHP pour d...Comment charger JavaScript comme un ma - Comment charger JavaScript comme un ma - Langue: Franï¿½aise

SZmoorway[2] RFgyloaps SBJebooth[2] CvetkoFFF SteveWalsh[2] spampeema[3] HappySoftGroup