Online Kimya Özel Dersi Al

DERS

KİMYA

SÜRE

50 dakika

ÜCRET

800₺

Hemen yer ayırt

2.12 CSS ve JavaScript Dosyalarını Ekleme

wordpress tema yapımı

WordPress sadece temanızı değil, aynı anda bir çok eklentiyi de çalıştırmaktadır. Bu eklentilerin, her birinin, kendi CSS ve JavaScript dosyaları vardır. Her şeyin uyum içinde çalışabilmesi için, siz de temanıza eklemek istediğiniz CSS ve JavaScript dosyalarını WordPress’in kurallarına göre eklemelisiniz. Bu, herhangi bir yan etki veya uyumsuzluk sorunuyla karşılaşmanızı engelleyecektir.

WordPress’e bir CSS veya JavaScript dosyası eklemek basit bir işlemdir. Bunun için, bir fonksiyon yardımı ile dosyanızı eklemeniz ve bir kanca yardımı ile de, WordPress’e, bu dosyayı ne zaman çağıracağını söylememiz yeterlidir.

JavaScript ve CSS Ekleme

Temanıza, CSS ve script dosyaları kullanmanın en uygun yolu, bu dosyaları functions.php dosyanızda eklemektir.

WordPress, bazı yaygın JavaScript kütüphaneleri ile birlikte gelir. Bunlar, JQuery gibi yaygın olarak kullanılan kütüphanelerdir. Bu yüzden, bir kütüphane eklemeden önce, WordPress’te bu kütüphanenin, zaten var olup olmadığını kontrol etmeniz doğru olacaktır. Bu yazının sonunda, WordPress kurulumu ile birlikte gelen JavaScript kütüphanlerinin listesi verilmiştir.


WordPress’e bir CSS veya JavaScript dosyası eklemek için kullandığımız fonksiyonlar şunlardır:

  • wp_enqueue_style()
  • wp_enqueue_script()

Stil Dosyaları (CSS)

Her temanın zorunlu dosyası olan, style.css dosyası, hem temanızı şekillendirir hem de WordPress’e, temanız hakkında gerekli bilgileri verir.

style.css dosyasını çağırmak için functions.php dosyanıza şöyle bir kod yazmalısınız:

function tema_scriptleri() {
     wp_enqueue_style( 'ana-stil', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'tema_scriptleri' );

wp_enqueue_style() fonksiyonunun temel yapısı şöyledir:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Gördüğünüz gibi, bu fonksiyon beş parametre almaktadır. Bu parametrelerin anlamları şöyledir:

  • $hadle: Zorunludur. Eklediğiniz dosyayı tanıtan herhangi bir addır. Boşluksuz ve Tükçe karakter içermemelidir.
  • $src: Dosyanın bulunduğu adrestir.
  • $deps: Dizidir. Dosyanızın, hangi dosyalardan sonra eklenmesi gerektiğini belirtir. Yani, dosyanızın düzgün çalışabilmesi için, eklenmiş dosyalar arasından, ihtiyaç duyduklarının, “$handle” değerleridir. (Nasıl ki, bu dosyayı eklerken bir ad ($handle) verdiysek, WordPress’te, eklenmiş bütün dosyaların bir adı vardır.) Eğer dosyamız bağımsız çalışabilecek bir dosya ise, bu parametreye false değeri veriyoruz.
  • $ver: Eklenen dosyanın versiyonudur.
  • $media: Dosyanızın, çalışmasını istediğiniz ekran türünü veya ekran büyüklüğünü belirtir. “all“, “print” ve “screen” almak üzere üç değer alır. Varsayılan değeri “all”, yani bütün ekranlardır.

Mesela, CSS klasörünün içinde stilim.css adında bir stil dosyanız var diyelim. Bu dosyayı "benim-stilim" adını vererek eklemek için şu kodu kullanırsınız:

function tema_scriptleri() {
     wp_enqueue_style( 'benim-stilim', get_template_directory_uri() . '/css/stilim.css',false,'1.1','all');
}
add_action( 'wp_enqueue_scripts', 'tema_scriptleri' );

Scriptler (JavaScript)

Temanızın ihtiyaç duyduğu bütün ekstra JavaScript dosyalarını wp_enqueue_script() fonksiyonunu kullanarak ekleyebilirsiniz. Bu fonksiyon da, wp_enqueue_style() fonksiyonu ile benzer parametreler alır.

wp_enqueue_script() fonksiyonunun temel yapısı şöyledir:

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

Gördüğünüz gibi, bu fonksiyon beş parametre almaktadır. Bu parametrelerin anlamları şöyledir:

  • $hadle: Zorunludur. Eklediğiniz dosyayı tanıtan herhangi bir addır. Boşluksuz ve Tükçe karakter içermemelidir.
  • $src: Dosyanın bulunduğu adrestir.
  • $deps: Dizidir. Dosyanızın, hangi dosyalardan sonra eklenmesi gerektiğini belirtir. Örneğin, jQuery kütüphanesine gereksinim duyacak bir kod yazdıysanız, burada jquery’nin önce yüklenmesi gerektiğini belirtmelisiniz. Eğer dosyanız bağımsız çalışabilecek bir dosya ise, bu parametreye false değeri veriyoruz.
  • $ver: Eklenen dosyanın versiyonudur.
  • $in_footer: true derseniz, dosyanız sayfanın en altına eklenir, false derseniz sayfanın en üstüne eklenir.

Mesela, JS klasörünün içinde slider.js adında bir script dosyanız varsa ve bu script jquery içeriyorsa, bu dosyayı eklemek için şu kodu kullanırsınız:

function tema_scriptleri() {
     wp_enqueue_script( 'slider-icin', get_template_directory_uri() . '/js/slider.js', array ( 'jquery' ), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'tema_scriptleri' );

Yorum Cevaplama Scripti

WordPress, gelişmiş bir yorum scripti ile birlikte gelir, fakat, yorum cevaplama özelliğini kullanmak bize bırakılmıştır. Bu özelliğin çalışabilmesi için, ihtiyaç duyduğu JavaScript’i biz eklemeliyiz. Bunu yapmak için, functions.php dosyasına şu kodu eklemek yeterli olacaktır:

function tema_scriptleri() {
     if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
           wp_enqueue_script( 'comment-reply' );
     }
}
add_action( 'wp_enqueue_scripts', 'tema_scriptleri' );

Bu kod, tek bir içeriğin gösterildiği sayfada ve kullanıcı yorumları açıkken ve bizim ayarladığımız cevap derinliğine uygun olarak, yorum cevapları için gerekli scripti ekler.

Koşullu ve Toplu Ekleme

function tema_scriptleri() {
  wp_enqueue_style( 'ana-stilim', get_stylesheet_uri() );
 
  wp_enqueue_style( 'resim-kaydirici', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
 
  wp_enqueue_script( 'js-kodlarim', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 
  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'tema_scriptleri' );

Örnekte de görüldüğü gibi, CSS ve JavaScript dosyalarını topluca ve belli koşullar öne sürerek ekleyebiliriz. Bunun için, kodlarımızı bir fonksiyon içine alırız ve bu fonksiyonu, add_action() fonksiyonuna, wp_enqueue_scripts kancası takarak çağırırız.

CSS ve JavaScript dosyalarınızı, temanın genel özelliklerini ekledikten sonra eklemeniz önerilir.


WordPress Kurulumuyla Birlikte Gelen Scriptler

Script AdıAdı ($handle)Gereksinimi*
Image CropperImage cropper (not used in core, see jcrop)yok
Jcropjcropyok
SWFObjectswfobjectyok
SWFUploadswfuploadyok
SWFUpload Degradeswfupload-degradeyok
SWFUpload Queueswfupload-queueyok
SWFUpload Handlersswfupload-handlersyok
jQueryjqueryjson2 (for AJAX calls)
jQuery Formjquery-formjquery
jQuery Colorjquery-colorjquery
jQuery Masonryjquery-masonryjquery
jQuery UI Corejquery-ui-corejquery
jQuery UI Widgetjquery-ui-widgetjquery
jQuery UI Mousejquery-ui-mousejquery
jQuery UI Accordionjquery-ui-accordionjquery
jQuery UI Autocompletejquery-ui-autocompletejquery
jQuery UI Sliderjquery-ui-sliderjquery
jQuery UI Progressbarjquery-ui-progressbarjquery
jQuery UI Tabsjquery-ui-tabsjquery
jQuery UI Sortablejquery-ui-sortablejquery
jQuery UI Draggablejquery-ui-draggablejquery
jQuery UI Droppablejquery-ui-droppablejquery
jQuery UI Selectablejquery-ui-selectablejquery
jQuery UI Positionjquery-ui-positionjquery
jQuery UI Datepickerjquery-ui-datepickerjquery
jQuery UI Tooltipsjquery-ui-tooltipjquery
jQuery UI Resizablejquery-ui-resizablejquery
jQuery UI Dialogjquery-ui-dialogjquery
jQuery UI Buttonjquery-ui-buttonjquery
jQuery UI Effectsjquery-effects-corejquery
jQuery UI Effects – Blindjquery-effects-blindjquery-effects-core
jQuery UI Effects – Bouncejquery-effects-bouncejquery-effects-core
jQuery UI Effects – Clipjquery-effects-clipjquery-effects-core
jQuery UI Effects – Dropjquery-effects-dropjquery-effects-core
jQuery UI Effects – Explodejquery-effects-explodejquery-effects-core
jQuery UI Effects – Fadejquery-effects-fadejquery-effects-core
jQuery UI Effects – Foldjquery-effects-foldjquery-effects-core
jQuery UI Effects – Highlightjquery-effects-highlightjquery-effects-core
jQuery UI Effects – Pulsatejquery-effects-pulsatejquery-effects-core
jQuery UI Effects – Scalejquery-effects-scalejquery-effects-core
jQuery UI Effects – Shakejquery-effects-shakejquery-effects-core
jQuery UI Effects – Slidejquery-effects-slidejquery-effects-core
jQuery UI Effects – Transferjquery-effects-transferjquery-effects-core
MediaElement.js (WP 3.6+)wp-mediaelementjquery
jQuery Scheduleschedulejquery
jQuery Suggestsuggestjquery
ThickBoxthickboxyok
jQuery HoverIntenthoverIntentjquery
jQuery Hotkeysjquery-hotkeysjquery
Simple AJAX Code-Kitsackyok
QuickTagsquicktagsyok
Iris (Colour picker)irisjquery
Farbtastic (deprecated)farbtasticjquery
ColorPicker (deprecated)colorpickerjquery
Tiny MCEtiny_mceyok
Autosaveautosaveyok
WordPress AJAX Responsewp-ajax-responseyok
List Manipulationwp-listsyok
WP Commoncommonyok
WP Editoreditorremovyok
WP Editor Functionseditor-functionsyok
AJAX Catajaxcatyok
Admin Categoriesadmin-categoriesyok
Admin Tagsadmin-tagsyok
Admin custom fieldsadmin-custom-fieldsyok
Password Strength Meterpassword-strength-meteryok
Admin Commentsadmin-commentsyok
Admin Usersadmin-usersyok
Admin Formsadmin-formsyok
XFNxfnyok
Uploaduploadyok
PostBoxpostboxyok
Slugslugyok
Postpostyok
Pagepageyok
Linklinkyok
Commentcommentyok
Threaded Commentscomment-replyyok
Admin Galleryadmin-galleryyok
Media Uploadmedia-uploadyok
Admin widgetsadmin-widgetsyok
Word Countword-countyok
Theme Previewtheme-previewyok
JSON for JSjson2yok
Plupload Corepluploadyok
Plupload All Runtimesplupload-allyok
Plupload HTML4plupload-html4yok
Plupload HTML5plupload-html5yok
Plupload Flashplupload-flashyok
Plupload Silverlightplupload-silverlightyok
Underscore jsunderscoreyok
Backbone jsbackboneyok

Artık kullanılmayan scriptler:

Script AdıAdı ($handle)İptal VersiyonuYerine Gelen
Scriptaculous Rootscriptaculous-rootWP 3.5Google Version
Scriptaculous Builderscriptaculous-builderWP 3.5Google Version
Scriptaculous Drag & Dropscriptaculous-dragdropWP 3.5Google Version
Scriptaculous Effectsscriptaculous-effectsWP 3.5Google Version
Scriptaculous Sliderscriptaculous-sliderWP 3.5Google Version
Scriptaculous Soundscriptaculous-soundWP 3.5Google Version
Scriptaculous Controlsscriptaculous-controlsWP 3.5Google Version
ScriptaculousscriptaculousWP 3.5Google Version
Prototype FrameworkprototypeWP 3.5Google Version

DERSİN SONU

Kimya Özel Dersi Al

Yorum yaparak bize destek olabilirsiniz.

3 yorum “2.12 CSS ve JavaScript Dosyalarını Ekleme”

Bir cevap yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu kadar HTML serbest:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>