tr:WordPress ve CSS « WordPress Codex

WordPress temaları bütük bir oranda CSS yardımıyla şekillenir.Temalar şablon seçenekleri ve kullanımı açısından sonsuz seçeneklere sahiptir.WordPress temaları websitesinizin görünümü değiştirir ve daha esnek bir yapı katar.

CSS Cascading Style Sheets kısaltmasıdır. Bu stil sunum bilgileri (renk ve düzen gibi), HTML yapısını ayrı saklamanızı sağlar.Bu bağlamda websitesinin düzenini hassaslaştırır ve sayfaların açılma ve güncellenme hızını artırır.

Bu makalede kısaca WordPress'te CSS kullanımını göreceksiniz.

1 WordPress ve CSS
2 WordPress Stil Sınıfları Oluşturma
3 Tema vs CSS
4 WordPress Layout Help
5 CSS Kaynakları
6 Çeviri

WordPress ve CSS

WordPress tema oluşturmak için tema dosyaları,tema etiketleri ve CSS dosyaları kullanırsınız.

Tema Dosyaları: Kısaca özetlemek gerekirse,şablon dosyaları ile bir araya gelerek temanın yapı taşını oluşturur.Tema yapısında başlık,kenar çubuğu(sidebar),üst kısım gibi esas yapıları barındırır.

Tema Etiketleri: Tema etiketleri WordPress veritabanı içinde bulunan bilgilerin çekilmesini sağlayan taleplere sahip kod parçaçıkları olara adlandırılabilir.Bunlardan bazıları size en küçük detayına kadar bilgi sunabilir(tarih fonks.).

Stylesheet: Tema etiketleri ve tema dosyaları ile oluşturulmuş bir temaya, CSS sayesinde esnek ve özelleştirilebilir bir görünüm kazandırılır.Eğer bir temada stil tanımlamamışsa o tema,uzun daktilo çıktısı gibi bir görünüm elde edecektir.Her temada bir style.css tanımlanmalıdır.

WordPress Stil Sınıfları Oluşturma

Her WordPress teması bu veya benzeri stil kodlarını style.css sinde bulundurmalıdır.

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
    display:block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}

Yukarıdaki kodlar yazılarda bulunan resimler ve captionların düzgün görüntü alabilmesi için her temada olmalıdır.

Tema vs CSS

Web sayfanızın, CSS ile ilişki içinde nasıl çalıştığı hakkında daha fazla bilgi için, bu listelerde belirtilen bazı kaynakları okumak isteyebilirsiniz:

Using Themes - Bu listede birçok gelişmiş makale vardır.
Templates - WordPress Tema ve Şablon makaleleri için kapsamlı bir liste.
Theme Development - WordPress Tema Geliştirme kılavuzu ve kod standartları.

WordPress Layout Help

If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or answers to your questions. Here are some other resources:

Lessons on Designing Your WordPress Site
Site Design and Layout - Comprehensive list of resources related to site design in WordPress.
FAQ Layout and Design

CSS Kaynakları

Çeviri

Çeviri: * WordPress

Languages: English • 日本語 ไทย • 中文(简体) • (Add your language)

Codex