WordPress Temanıza Widgetize Altbilgi Ekleme

Bu öğretici için ilham kaynağı bir aldığım tweet yakında piyasaya sürülecek geri bildirimlerle RS12 teması.


zakmorris twitter yanıtı

Widget’lı altbilgi sonunda RS12 temasının yayınlanmasına rağmen, insanlara temanızda widget’lı bir altbilgi tam olarak nasıl ekleneceğini göstermek için bu öğreticiyi yazmaya karar verdim. Bu kılavuzda şunları öğreneceksiniz:

  • Widgetlaştırılmış altbilgiyi oluşturmak için gereken HTML ve CSS kodu
  • Sık kullanılan WordPress şablon etiketlerini yer tutucu olarak ekleme
  • Altbilgiyi widget’lara ekleme ve widget’ları içine yerleştirme

Bu yayında çok fazla kod olacak, bu yüzden eğer hazırsanız, okumaya devam edin…

Kullanacağım Yeşil ışınlar Bu eğitimde örnek olarak WordPress teması. Şu anda altbilginin standart bir “telif hakkı” mesajı ve kredisi var.

HTML

İlk adım HTML işaretlemesini eklemektir. Widgetlaştırılmış altbilgide En Son Mesajların, Aylık Arşivlerin ve Günlük Arşivlerin listelerini içeren üç farklı bölümümüz olacağını varsayalım. Bu HTML kodunu mevcut “telif hakkı” satırının üzerine yerleştireceğiz.

yakın zamanda Gönderilenler

Monthy Arşivleri

günlük arşivler

Temel olarak bu kod, her bir “widget” ı bir div’a yerleştirir. Her widget’ın içinde bir başlık ve bağlantıları olan sıralanmamış bir liste bulunur. Evet, bağlantıların hiçbir yere gitmediğini biliyorum. Daha sonra bunu WordPress şablon etiketleriyle değiştireceğiz. Şimdiye kadar sahip olduklarımız:

Yeşil ışınlar altbilgi 1

CSS

Gördüğünüz gibi, bu herhangi bir CSS stili olmadan çok iyi görünmüyor. Stil sayfanıza aşağıdaki kodu ekleyin.

.altbilgi öğesi {
şamandıra: sol;
genişlik:% 33;
dolgu tabanı: 10 piksel;
}
.altbilgi öğesi ul {
dolgu sol: 15 piksel;
}

Bu kodun yaptığı, her altbilgi öğesini sola kaydırmaktır, yani temelde yan yana olabilirler. Genişlik% 33 olarak ayarlanmıştır, bu da tek bir satırdaki üç altbilgi öğesi için yeterli alan sağlar. Ayrıca her altbilgi öğesinin altına biraz dolgu eklenir. İkinci parça sadece 15 piksel sola doluyor.

Artık HTML ve CSS’nin bir araya gelmeye başladığını görebilirsiniz. Şimdiye kadar sahip olmanız gerekenler:

Yeşil ışınlar altbilgi 2

WordPress Kodu

Şu anda, gerçek WordPress kodu olmayan bir sürü boş HTML bağlantımız var. Son Gönderiler, Aylık Arşivler ve Günlük Arşivler altındaki listeleri WordPress şablon etiketi eşdeğerleriyle değiştirelim. Şu anda sahip olduklarınızı aşağıdakilerle değiştirin:

yakın zamanda Gönderilenler

    <?php wp_get_archives (‘type = postbypost&sınır = 4’ ); ?>

Monthy Arşivleri

    <?php wp_get_archives (‘limit = 4’); ?>

günlük arşivler

    <?php wp_get_archives (‘tür = günlük&sınır = 4’ ); ?>

Parametreler oldukça açıklayıcı olmalıdır, ancak bunlardan herhangi birinden emin değilseniz, wp_get_archives’ta WordPress Şablon Etiketi Arama Aracı. Unutmayın, wp_get_archives () şablon etiketlerini yer tutucu olarak kullanıyorum. Altbilgiyi widget haline getirdikten sonra bunları daha sonra diğer WordPress widget’larıyla değiştireceğiz.

Widgetize It

Eğiticinin bu bölümü için önceki bölümümün bazı kısımlarını ödünç alacağım widget temaları öğretici.

İlk adım “kenar çubuklarını” kaydetmektir. Bunu yapmak için, function.php dosyasının geçerli içeriğini aşağıdakilerle değiştirin:

<?php
if (function_exists (‘register_sidebar’))
register_sidebar (dizi (
‘name’ => ‘Kenar Çubuğu’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (dizi (
‘name’ => ‘Alt Bilgi’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

Şimdi sidebar.php dosyasına gideceğiz ve mevcut dinamik kenar çubuğu koşullu etiketini bununla değiştireceğiz:

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ()): ?>

Bununla:

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Kenar çubuğu")): ?>

Şimdi footer.php dosyamıza gireceğiz ve altbilgi öğelerini kendi ilgili kenar çubuğu koşullu etiketine ekleyeceğiz. İlk “kenar çubuğu öğesi” div’inden hemen önce aşağıdakileri ekleyin.

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Alt Bilgi")): ?>

Son kapanış “alt öğe öğesi” div’inden hemen sonra (ve daha önce eklediğimiz “açık” div’in üstünde) aşağıdakileri ekleyeceğiz:

<?php endif; ?>

Tamam, şimdi kenar çubuğumuz ve altbilgimiz widget’lı olmalı. Altbilgiye birkaç widget ekleyerek test edelim. Bir Blogroll widget’ı, Son Yorumlar widget’ı ve bir metin widget’ı ekleyeceğim. İşte neye benzemesi gerektiği:

Yeşil ışınlar altbilgi 3

Sonuç

Bu, temanıza widget’lı bir altbilgi eklemenin temelidir. Takvim veya arama kutusu gibi diğer widget türleri için ayrı stil kuralları eklemek isteyebilirsiniz. Bu, örneğin genişletilemeyen bir altbilgiye sahip olduğu için, örneğin RS12 teması gibi her temayla işe yaramayacaktır..

Herkes güncellenmiş Green Rays temasını herhangi bir şansla istiyorsa, indirebilirsiniz buraya. Bu şekilde kodu tam olarak nereye eklediğimi görebilirsiniz. İle karşılaştırabilirsiniz orijinal tema ayrıca.

Umarım öğreticiyi beğenmişsinizdir. Temanıza widget’lı bir altbilgi ekleyecek misiniz? Yukarıda kullandığım kodda farklı yapacağınız bir şey var mı? Sorular, yorumlar, öneriler ve eleştirilerin hepsi açıktır, bu yüzden yorumlarda ses vermekten çekinmeyin.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map