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/

results matching ""

    No results matching ""