Css ve Javascripti Yükleme
Wordpress tema oluşturken css ve javascript dosyalarımızı yükleme normalden biraz farklı.
Öncelikle functions.php adında bir dosya oluşturmalıyız sonra css ve javascript dosyalarımızın barındırdığı, css ve js adında iki tane klasör oluşturdum.
Css içinde app.css, Js içinde ise app.js oluşturdum
Function.php dosyamın içine fonsiyon yazarak bu dosyaları dinamik olarak çağıracağım.
<?php
function forumlogs_scripts_enqueue() {
wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' )
wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
}
Fonksiyon ismi neden forumlogs_scripts_enqueue ?
İstediğiniz ismi yapabilirsiniz fakat başka fonksiyonlarla karışıklık çıkmasın diye böyle bir isim koydum.
Bu fonsiyon içinde Wordpress'in wp_enqueue_style wp_enqueue_script adında sağladığı fonsiyonu barındırıyor.
Neye göre koyduk bunu?
Code reference'tan yardım aldım bu konuda.
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Code reference'ta da gördüğümüz gibi wp_enqueue_style ve wp_enqueue_script 5 parametreden oluşmakta. Açıklamaları da çok güzel bir şekilde verilmiş.
wp_enqueue_style Parameteler
$handle
(string)(gerekli) stylesheet ismi. özgün (benzersiz) bir isim olmalı
$src
(string)(İsteğe bağlı)Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
Varsayılan değer: ''
$deps
(array)(Optional)An array of registered stylesheet handles this stylesheet depends on.
Default value: array()
$ver
(string|bool|null)(İsteğe bağlı) scriptin versiyonuyla ilgili
Varsayılan değer: false
$media
(string)(İsteğe bağlı) Medya türleri 'all', 'print' and 'screen', veya medya sorguları '(orientation: portrait)' and '(max-width: 640px)' değerler verebiliyoruz.
Varsayılan değer: 'all'
wp_enqueue_script Parameteler
$handle
(string)(gerekli) scriptin ismi. özgün (benzersiz) bir isim olmalı
$src
(string)(İsteğe bağlı
)ilgili scriptin dizini
Varsayılan değer: ''
$deps
(array)(isteğe bağlı) bu scripte bağlı scriptlerin aray olarak çağırılması.
Varsayılan değer: array()
$ver
(string|bool|null)(İsteğe bağlı) scriptin versiyonuyla ilgili
Varsayılan değer: false
$in_footer
(bool)(İsteğe bağlı) script head'te mi yoksa footer'da mı olacak onu belirtmek için.
Varsayılan değer: false
Sonuç olarak
function forumlogs_scripts_enqueue() {
wp_enqueue_style( 'styleApp', get_template_directory_uri() . '/css/app.css', array(), '1.0.0', 'all' );
wp_enqueue_script( 'jsApp', get_template_directory_uri() . '/js/app.js', array(), '1.0.0', false );
}
styleApp ve jsApp benim uydurduğum isimler.
get_template_directory_uri() WordPress fonsiyonu sayesinde temamızın url'ini alıyoruz.
array() öyle kalıyor
version 1.0.0 ekledik.
style için all şuanlık ideal script için false çünkü scriptin head'te değil footer'a yüklenmesini istiyoruz.
Fonsiyonu tanımladık fakat fonsiyonu harekete geçirmedik bunun için add_action fonksiyonun kullanacağız.
iki parametre gerekli birincisine wp_enqueue_scripts ikincisine forumlogs_scripts_enqueue yani yazdığımız fonsiyonu yazıyoruz.
Toplamda şöyle bir durumda olması gerekli
function forumlogs_scripts_enqueue() {
wp_enqueue_style( 'styleApp', get_template_directory_uri() . '/css/app.css', array(), '1.0.0', 'all' );
wp_enqueue_script( 'jsApp', get_template_directory_uri() . '/js/app.js', array(), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'forumlogs_scripts_enqueue' );
Şimdi bunları head ve footer şablonumuzda çağırmak kaldı.
header.php şablonu
wp_head() Wordpress fonksiyonunu ekledik.
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Forumlogs.com teması başlığı</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body>
footer.php şablonu
wp_footer() Wordpress fonksiyonunu ekledik
<footer>
Forumlogs.com teması
</footer>
<?php wp_footer(); ?>
</body>
</html>
app.css
test etmek için body rengini değiştirdim.
body {
background: lightblue;
}
app.js
test etmek için console'da forumlogs yazdırdım.
console.log('forumlogs.com');
Artık istediğimiz javascript ve css dosyasını temamıza yükleyebiliriz.
githubtan bu derste yaptığımız kodlara bakabilirsiniz.
https://github.com/forumlogs/wordpress-tema-gelistirme-kayip-rehberi/