☰

Δυναμική εισαγωγή αρχείων CSS & JavaScript

Για την δυναμική εισαγωγή αρχείων css και javascript χρησιμοποιούμε το αρχείο functions.php.

Το αρχείο functions.php δεν είναι υποχρεωτικό σε ένα theme αλλά είναι πρακτικά απαραίτητο.

css scripts

Για εισαγωγή css αρχείων οι εντολές είναι:

wp_enqueue_style('theme-style', get_stylesheet_uri());

Για την εισαγωγή του style.css.

Και:

wp_enqueue_style('main-style', get_template_directory_uri() . '/assets/css/main.css');

Για την εισαγωγή οποιουδήποτε css αρχείου.

Θα πρέπει να δώσετε διαδρομή και όνομα αρχείου.

Οι δύο παραπάνω συναρτήσεις θα περαστούν σε μια γονική έστω με το όνομα: my_theme_scripts.

Το αποτέλεσμα θα είναι:

function my_theme_scripts() {
   // Add main-style, used in the main stylesheet
   wp_enqueue_style('main-style', get_template_directory_uri() . '/assets/css/main.css');

   // Theme stylesheet
   wp_enqueue_style('theme-style', get_stylesheet_uri());
}

Τέλος, η παραπάνω συνάρτηση πρέπει να γίνει hook στην: wp_enqueue_scripts.

Και το τελικό αποτέλεσμα είναι:

function my_theme_scripts() {
   // Add main-style, used in the main stylesheet
   wp_enqueue_style('main-style', get_template_directory_uri() . '/assets/css/main.css');

   // Theme stylesheet
   wp_enqueue_style('theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_scripts' );

js scripts

Για εισαγωγή js αρχείων η εντολή είναι:

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

Όπου:

$handle Το όνομα του script (υποχρεωτικό)
$src Διαδρομή και όνομα αρχείου
$deps Πίνακας (array) με dependencies όπως jQuery
$ver Έκδοση (version)
$in_footer Τιμή boolean για το αν θα περάσει το σκριπτ στο footer.

wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', array('jquery'), 1.0, true);

Σε συνδυασμό με css και js έχουμε:

function my_theme_scripts() {
	// Add main-style, used in the main stylesheet
	wp_enqueue_style('main-style', get_template_directory_uri() . '/assets/css/main.css');

	// Theme stylesheet
	wp_enqueue_style('theme-style', get_stylesheet_uri());

	// Theme javascript
	wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js');
}
add_action('wp_enqueue_scripts', 'my_theme_scripts' );