Javascript - ThemesPress https://themespress.ca Experts en développement d’API, plugins et intégrations WordPress. Mon, 17 Jan 2022 19:08:24 +0000 fr-FR hourly 1 https://wordpress.org/?v=7.1.4 https://themespress.ca/wp-content/uploads/2020/10/cropped-Favicon-Themepress.ca_-32x32.png Javascript - ThemesPress https://themespress.ca 32 32 Extension WordPress : WP Enqueue style Boostrap dans une page settings options https://themespress.ca/plugin-wordpress-wp-enqueue-style-boostrap-dans-une-page-settings-options/ https://themespress.ca/plugin-wordpress-wp-enqueue-style-boostrap-dans-une-page-settings-options/#respond Mon, 11 Sep 2017 14:59:11 +0000 https://themespress.ca/?p=2225

Plugin WordPress : Nous allons dans ce tutoriel faire en sorte de faire interagir Bootstrap Style uniquement dans une des pages ou plusieurs pages de notre plugin comme par exemple des Settings Options, des pages sous-menus.

Ça évite surtout de donner des conflits CSS ou d’imposer des CSS avec d’autres plugins WordPress.

Donc voici une astuce pour faire wp_enqueue_style dans un hook action du nom de admin_enqueue_scripts.

Cette condition comme vous voyez ne fonctionne qu’avec un ID de page. Si par exemple vous avez des sous pages dans votre plugin, nous allons le développer juste en dessous.

[gridzy id=”5″]

function themeplifyenqueuebootstrap() { 
//remplacer themeplify avec vos slug pages ID 
	if(($_GET['page'] == 'themeplify') || ($_GET['page'] == 'autreslugid') || ($_GET['page'] == 'encoreunautreslugid') ) { 
	   wp_enqueue_style('bootstrap.min', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
	} 
} 
add_action('admin_enqueue_scripts', 'themeplifyenqueuebootstrap');

Avec plusieurs GET pages ….

function themeplifyenqueuebootstrap() { 
//remplacer themeplify avec vos slug pages ID 
	if(($_GET['page'] == 'themeplify') || ($_GET['page'] == 'autreslugid') || ($_GET['page'] == 'encoreunautreslugid') ) { 
	   wp_enqueue_style('bootstrap.min', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
	} 
} 
add_action('admin_enqueue_scripts', 'themeplifyenqueuebootstrap');

Voilà, vous pouvez ajouter une autre fonction ou Class pour les Javascripts Bootstrap en créant les mêmes conditions. Vous permettez à votre plugin d’avoir une indépendance style ou JS. C’était un tutoriel simple, mais utile à l’agréable.

The post Extension WordPress : WP Enqueue style Boostrap dans une page settings options first appeared on ThemesPress.

]]> https://themespress.ca/plugin-wordpress-wp-enqueue-style-boostrap-dans-une-page-settings-options/feed/ 0 Enqueue Javascript dans le footer WordPress https://themespress.ca/enqueue-javascript-footer-wordpress/ https://themespress.ca/enqueue-javascript-footer-wordpress/#respond Wed, 10 May 2017 14:42:17 +0000 https://themespress.ca/?p=1842

Enqueue Javascript dans le footer WordPress : Nous allons dans ce tutoriel ajouter du javascript dans le footer.

Bien sur, il y a différentes manières de faire, par exemple dans un plugin. Surtout quand on doit le placer après notre HTML et puis que nous souhaitons y faire interagir du PHP dedans.

Si on ne souhaite pas faire interagir du PHP dedans, alors on peut fait un enqueue script wp_footer et appeler un fichier JS.

Si on veut y intégrer du PHP, voici donc la fonction a intégrer dans le fichier de votre thème ou Plugin WordPress :

Dans cet exemple, nous créons un enqueue script du code JavaScript directement dans le footer parce que nous souhaitons par exemple faire interagir des options dans notre Javascript.

On va utiliser un add_action( ‘wp_footer’, ‘woocommerce_via_order_delivery_date_get_datapicker’);

/********************************* Enqueue JS in the footer for Datapicker ****************************/
add_action( 'wp_footer', 'woocommerce_via_order_delivery_date_get_datapicker');
function woocommerce_via_order_delivery_date_get_datapicker() {
?>
<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#wodd_livraison_date').datepicker({
			dateFormat : 'dd-mm-yy'
		});
	});
	
	jQuery(function($){
	$.datepicker.regional['fr'] = {
		closeText: 'Fermer',
		prevText: '&#x3c;Préc',
		nextText: 'Suiv&#x3e;',
		currentText: 'Aujourd\'hui',
		monthNames: ['Janvier','Fevrier','Mars','Avril','Mai','Juin',
		'Juillet','Aout','Septembre','Octobre','Novembre','Decembre'],
		monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jun',
		'Jul','Aou','Sep','Oct','Nov','Dec'],
		dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
		dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
		dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
		weekHeader: 'Sm',
		dateFormat: 'dd-mm-yy',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: false,
		yearSuffix: '',
		minDate: 3,
		maxDate: '+12M +0D',
		numberOfMonths: 1,
		showButtonPanel: true
		};
	$.datepicker.setDefaults($.datepicker.regional['fr']);
	});
</script>
<?php
}

The post Enqueue Javascript dans le footer WordPress first appeared on ThemesPress.

]]> https://themespress.ca/enqueue-javascript-footer-wordpress/feed/ 0