WordPress CSS & WordPress Style.css Dosyası

Yeni bir WordPress teması için style.css temel dosyalardan biridir. Her WordPress temasında bulunan style.css dosyası sayfalar için gerekli olan CSS kodlarını barındırır.

Style.css Konumu

Style.css WordPress temasının root dizininde bulunmalıdır.

Custom WordPress CSS Dosyasının Sayfalara Eklenmesi

WordPress style CSS dosyasının temanın sayfalarından çekilebilmesi için functions.php üzerinden sayfalara eklenmelidir.

wp_enqueue_style( 'style', get_stylesheet_uri() );

header.php sayfalara eklendiğinde style.css de bu sayfalara eklenmiş olur.

Style.css Yapısı

WordPress stil dosyasını oluştururken dosyanın en başında yorum alanı içerisinde tema hakkında bilgiler verilir. Bu yapı genelde WordPress’in tema marketine tema hazırlanırken kullanılır. Kişisel bir WordPress teması hazırlanırken tüm bu öğeleri eklemeye ihtiyaç duymayız.

Örnek WordPress style.css dosyası:

/* 
Theme Name: Twenty Twenty 
Theme URI: https://wordpress.org/themes/twentytwenty/ 
Author: the WordPress team 
Author URI: https://wordpress.org/ 
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors. 
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready 
Version: 1.3 
Requires at least: 5.0 
Tested up to: 5.4 
Requires PHP: 7.0 
License: GNU General Public License v2 or later 
License URI: http://www.gnu.org/licenses/gpl-2.0.html 
Text Domain: twentytwenty 
This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. 
*/

Style.css Öğelerinin Açıklamaları

Theme Name (*): Tema adı.

Theme URI: Kullanıcıların daha fazla bilgi tema hakkında daha fazla bilgi edinebilmesi için temanın bulunduğu sayfanın URL’i.

Author (*): Temayı yapan kişi veya kurumun adı.

Author URI: Temayı oluşturan kişinin veya kurumun sayfasının URL’i.

Description (*): Tema hakkında kısa bir açıklama.

Tags: Kullanıcıların etiket filtrelerini kullanarak temayı bulmalarına yardımcı olacak tema etiketleri. (Tema etiketleri için link: https://make.wordpress.org/themes/handbook/review/required/theme-tags/)

Version (*): X.X veya X.X.X formatında belirtilen temanın versiyonu. (Örnek olarak 1.2.4 veya 1.2).

Requires at least (*): X.X formatında oluşturulan WordPress temasının desteklediği en eski WordPress sürümü. Oluşturulan temanın, en eski son üç versiyon WordPress sürümü ile çalışması gereklidir.

Tested up to (*): X.X formatında temanın test edildiği en son sürüm.

Requires PHP (*): X.X formatında temanın desteklediği en eski PHP sürümü. (Örnek olarak 7.2).

License (*): Temanın lisansı.

License URI (*): Tema lisansının URL’i.

Text Domain (*): Tema için benzersiz bir spesifik domain eki.

Not: Bu dosyada “Version” belirtildiğinde WordPress tema marketi, temanın yeni kullanılabilir versiyonunun olup olmadığını belirler.

Kaynak:

https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/