PVP Server Tanıtımı - Knight Online, Metin2

Geri git   PVP Server Tanıtımı - Knight Online, Metin2 > Webmaster Alanı > WordPress > Wordpress Temaları

Wordpress Temaları Wordpress Temaları Paylaşılan Bölümdür.

Yeni Konu aç  Cevapla
 
LinkBack Seçenekler Arama Stil
Alt 25 Mart 2020, 11:15   #1
KO-DEVE.COM
 RoxiRox - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: 29 Mart 2019
Üye No: 1
Nerden: Zonguldak
Yaş: 28
Mesajlar: 162
Konular: 150
@RoxiRox
Standart Wordpress Tema Düzenleme Ve Kullanma Rehberi



Wordpress Tema Düzenleme Ve Kullanma Rehberi

Merhaba arkadaşlar bu yazımda bir temayı nasıl düzenleyeceğimiz (editleyeceğimiz) konusunda bir arşiv dökümanı olarak hazırlıyorum..Günümüzde bir çok wordpress temasının çıkması ve kullanımıyla ilgili eksiklerimizi veya temada hoşumuza gitmeyen yerlerin düzeltimiyle ilgili düzenlemeler yapacağız..

1.Temayı tanımak:
Öncelikle kullandığımız temanın dosyalarının ne işe yaradığını ve hangi dosyalarında düzenleme yapacağımıza karar vermemiz gerekmektedir..Son günlerde yeni çıkan temalarda bir çok yeni özellik eklendiğinden dolayı standart header,footer,index gibi templateler yerine bir çok artı bölümler eklendi..

Kısacası bir temayı açtığımızda bir çok "include" fonksiyonu sayesinde başka dosyalar çekilip o dosyalar entegre edildi..Bu nedenle düzenleyeceğimiz yeri sadece header,footer gibi dosyalar yerine temanızdaki diğer klasörlerde arayabilirsiniz..

Görsel Düzenleme:
Öncelikle default tema üzerinde bir tema editleme rehberi hazırlamak istedim.Yalnız biraz CSS-XHTML bilginizin olması gereklidir..Aksi takdirde style.css'de hangi kodun nereyi,nasıl değiştirdiğini bulmanız oldukça zor olur..

2.Header.Php'de düzenleme:

[/SIZE][/SIZE]
PHP- Kodu:
<body <?php body_class(); ?>>
<div id="page">

<div id="header" role="banner">
    <div id="headerimg">
        <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>
    </div>
</div>
<hr />
(head tagından öncesi görsel olarak birşey ifade etmediği için body tagından sonrasını incelemek istedim)

Öncelikle kısa bir bilgi veriyim;
-Css kodları div id veya div class fonksiyonları içerisinde "tırnak işareti" içinde olan kodlardır..<div id="page"> yazan yerde "page" kelimesi css'nizde tanımlı bir kelime olup düzenlemeleri style.css üzerinden #page tablosunda yapmanız gerekmektedir..
-Css tabloları içi içe yapılmaktadır..Bir genel tablo altında "page" örneğini görüyorsunuz,onun içerisinde farklı class ların eklenmesiyle oluşturulur..

Yani tüm sitenin genel sayfa yapısıyla ilgili bir düzenleme yapıcaksak #page classında düzenleme yapmamız gerekir.

PHP- Kodu:
#page {
    
background-colorwhite;
    
border1px solid #959596;
    
text-alignleft;
    } 
Style.css deki bu kod div id="page" deki değişmeleri yapar..Örneğin yazıları basit bir şekilde ortalamak için "text-align: left;" kodunu "text-align: center;" olarak değiştirebilirsiniz..

Fakat üst kısım #header tablosu altındadır..Page tüm sayfaları işgale alır..Ama header class'ı sadece üst kısmı ilgilendirir.Çünkü dikkat ettiyseniz div header lar en altta </div> sonlandırma koduyla sona erdirilmiş fakat page class'ı tüm siteyi kapsadıktan sonra sitenin en altında footer.php de sonra erdirilmektedir.

PHP- Kodu:
#header {
    
background#73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
    
}

#headerimg     {
    
margin7px 9px 0;
    
height192px;
    
width740px;
    } 
#header kodunda gördüğünüz gibi bir background ve bir background rengi atanmış..Eğer biz oradan o kodu silersek header.php'mizin arkaplanı gidip sadece kod olarak eklenen

PHP- Kodu:
        <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>
    </div>
Kısmı kalacaktır..

Neyse fazla uzatmadan misal biz oraya yazı değil logo eklemek istiyoruz.Diyorsanız..


PHP- Kodu:
        <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>
Bu kodu kaldırmamız gereklidir..Yani header.php den o kodları silmemiz gerekir..

#Headerimg class'ında gördüğünüz gibi hazırlayacağınız logo için bir boy ve bir en belirtilmiştir.740px Boyunda 192px yüksekliğinde bir resim hazırlayıp oraya koyabilirsiniz..Tabi boyutu isterseniz cssden düzeltip keyfinize göre resim atabilirsiniz..

Tabi iyi derecede css öğrenirseniz bunları ezbere kullanabilirsiniz

Header.Php yi örnek olarak verdim ki diğer dosyalarınızda düzenleme yaparken bu mantık üzerinden kullanın..

Mesala yazı rengini değiştirecekseniz değiştirmek istediğiniz tablonun adını bulup style.css de aratın..Ardından "color"değişkenini kafanıza göre ayarlayın..Yoksa da kendiniz ekleyin

Size alt kısımda lazım olacak bir bilgi açısından kısaca css kodlarının ne işe yaradığına dair bilgi veriyim..Aslında bu kodları ezbere bilseniz tema editlemek yerine sıfırdan tema yazmak size daha kolay gelecektir.

Görsel kısım'ı bir tarafa bırakıp asıl baba kısım olan kodlama kısmına gelelim...

2.Kod Düzeni

Yukarıda değindiğim header,footer,index,home gibi templatelerde wordpress'e özgü bir çok kod bulunmaktadır..Bunları help sheet halinde bulabilirsiniz.Benim kullandığım help sheet kodunuda [Sadece kayıtlı kullanıcılar linkleri görebilir (Ücretsiz Kayıt olmak için buraya tıklayın)] paylaştım..

Bu help sheet de kodların ne işe yaradıkları ve hangi amaçla kullanıldıkları yazmaktadır..Fakat burada kod düzeni açısından birkaç bilgi vermek istiyorum..Genelde çoğunuz takılırsınız..

Örneğin kategorileri listeleme kodu:
PHP- Kodu:
<?php wp_list_cats(); ?>
Bu kod varsayılan css-xhtml şemalarında <ul><li>Kategori 1</li><li>kategori 2</li></ul> şeklinde tanır..Ve eğer temanızda ul ve li tanımlı classlar olmazsa default yani orjinal değerleri kullanır..Bunlarda linklerin başında çıkan yuvarlak discler gibi..

Bunlarıda css kodlarımıza ek fonksiyon ekleyip..Örneğin;
#menu fonksiyonumuza #menu ul li ekleyerek düzenleme yapabiliriz.Yukarıdaki css tablosunda verdiğim liste özelliklerini burada kullanabilirsiniz..

Sıkça Karşılaşılan Tema Editleme Ve Kullanma Sorunları:
  • Temada kodu düzenlememe rağmen herhangi bir değişiklik olmuyor?
    Bunun sebebi en başta bahsettiğim div classların içe içe olmasından dolayı birbirine çakışmasıdır..Misal page de color değişkenini değiştirdiğimizde color kodu tanınmamış tüm tabloların renkleri değişecektir..
  • Thumb ekliyorum fakat çıkmıyor?
    Belkide bugüne kadar bana en çok sorulan sorulardan biriside bu Öncelikle doğru thumb kodunu girdiğinize emin olun.Kullandığınız temanın içerisinde readme klasörü filan vardır..Onlarda kodları genellikle yazar.Eğer yazmıyorsa thumb kodunun ekli olduğu dosyadan thumb ismini öğrenin..Ve ona göre ekleyin.

    Diğer bir olmama sebebide cache özelliğidir..Temanızın içinde resimleri otomatik küçültmek için kullanılan timthumb benzeri eklentiler varsa onların klasörlerine yazma izinleri verin..(777) Birde dosyaları başka siteden değil de kendi sitenizden ekleyin..
  • Yan taraftaki menüyü nasıl kullanabilirim?
    Bunun için admin panelinizdeki bileşenler özelliğini kullanabilirsiniz (eğer temanın widget destekliyorsa)
  • Temam sağa sola kayıyor?
    Eğer herhangi bir düzenleme yaptıktan sonra bu sorun yaşandıysa yaptığınız hatayı geri alın..Genellikle ya fazla </div> kapatma kodu kullanmışsınızdır yada eksik
    Yada bir konuyu direk gelişmiş editör açıkken kopyalayıp yapıştırmışsınızdır.O yüzden sorun olacaktır.

Konuya sorular geldikçe ekleme yapıp her gün benzeri açılan konulardan bir nebze olsun kurtulmuş olacağız..Ve bilmeyen arkadaşlarımıza kısa ve hızlı çözüm sağlamış olacağız..

Saygılarımla..


__________________

RoxiRox isimli Üye şimdilik offline konumundadır  
Alıntı ile Cevapla
Alt 26 Mart 2020, 00:04   #2
Deve Üye
 Linux - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: 24 Mart 2020
Üye No: 50
Nerden: istanbul
Yaş: 31
Mesajlar: 54
Konular: 46
@Linux
Standart

Teşekkürler hocam.

Linux isimli Üye şimdilik offline konumundadır  
Alıntı ile Cevapla
Cevapla


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler Arama
Stil

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-KodlarıKapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık


Forum Site Hakkında
vBulletin® tarafından desteklenmektedir Versiyon 3.8.9
Telif hakkı ©2000 - 2019, Jelsoft Enterprises Ltd.

Sitemizdeki içerikler kopyalanmaya karşı DMCA ile korunmaktadır. DMCA.com Protection Status
İçerik sağlayıcı paylaşım sitelerinden biri olan ko-deve.com Forum Adresimizde T.C.K 20.ci Madde ve 5651 Sayılı Kanun'un 4.cü maddesinin (2).ci fıkrasına göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur. ko-deve.com hakkında yapılacak tüm hukuksal Şikayetler için iletisim@ko-deve.com Mail adresimiz üzerinden iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 1 (Bir) Hafta içerisinde ko-deve.com yönetimi olarak tarafımızdan gereken işlemler yapılacak ve Avukatımız size dönüş yapacaktır.
© 2018 RoxiRox ( by ko-deve.com 2018/2019 )