Giriş Yap / Kayıt Ol
igresellers

WM Aracı'na üyelikler tekrar açıldı! Kayıt olmak için TIKLAYIN!


Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   Forum > > WordPress

Wordpress Tema Sidebar Özelleştirme

  #1  
Okunmamış 05 Mayıs 2018, 00:29
Machine Adlı Üyenin Avatarı
www.huseyinkorbalta.com
 
Üyelik Tarihi: 24 Ağustos 2012
Yaş / Cinsiyet: 24 / Erkek
Konum: Aksaray
Ad, Soyad: Hü... Kö...
Mesajlar: 1.040
Beğeniler: 323 / 73
Ticaret: 12, 100%
Merhaba arkadaşlar,

Kendi kişisel sitem için bir tema tasarladım ve bunu wordpress yapısına uyarlıyorum, birçok şeyini sorunsuz bir şekilde yaptım, tek tek yapıyorum ancak takıldığım ve neredeyse sıfıra yakın, düzgün bir kaynak ile anlatımını bulamadığım bir sorunum mevcut.

Dinamik bir sidebar oluşturdum, WP Admin panelinden bileşen kısmından widgetleri sorunsuz bir şekilde ekleyebiliyorum. Ancak orada ki widgetler standart tasarıma göre ekleniyor ben onlar üzerinde değiştirmeler yapamıyorum ve bu değiştirmeleri nasıl yapacağıma dair bir anlatım ne resmi codex sayfasında ne yabancı, yerli kaynaklarda mevcut. (var ise yapıştırın linki yoruma)

Standart hali;


Dinamik bir şekilde widgets kısmından yine ekleyeceğim fakat standart tasarımın üzerinde css,js oynamaları yapabileceğim bunu sağladığımda tasarımın şu şekilde oturmasını istiyorum.



Bu sadece kategoriler için örnekleme, diğer bileşenler içinde benim customization yapabilmemi sağlayan bir yapı var mıdır? bir functions.php yardımı ile ya da başka dosya ile bu mümkün mü?

Yoksa statik sidebar yapıp, sidebar.php içerisinde loop'a sokup, oradan statik bir şekilde manuel olarak mı yapmak gerekiyor?
huseyinkorbalta.com | Blog
Kaliteli hosting sahibi olmak için https://bit.ly/kalitelihostinghk
  #2  
Okunmamış 05 Mayıs 2018, 00:40
Avatar Seçilmemiş
Web - SEO - Reklam
 
Üyelik Tarihi: 17 Eylül 2014
Yaş / Cinsiyet: 31 / Erkek
Meslek: Mühendis
Konum: Sakarya
Ad, Soyad: Se... Gö...
Mesajlar: 250
Beğeniler: 72 / 102
Ticaret: 18, 100%
Kod:
if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'Sağ Sidebar',
        'id' => 'sidebarsag',
        'description' => 'Sağ sidebar',
        'before_widget' => '<div class="part">',
        'after_widget' => '</div>',
        'before_title' => '<span class="caption title-line">',
        'after_title' => '</span>',
    ));
}
dinamik sidebar için functions.php içine şuna benzer bir kod eklemişsindir muhtemelen.

before_widget ve after_widget taglerinin karşısına sana uygun olan ara kodları girmelisin.
Machine bunu beğendi.
  #3  
Okunmamış 05 Mayıs 2018, 00:43
Machine Adlı Üyenin Avatarı
www.huseyinkorbalta.com
 
Üyelik Tarihi: 24 Ağustos 2012
Yaş / Cinsiyet: 24 / Erkek
Konum: Aksaray
Ad, Soyad: Hü... Kö...
Mesajlar: 1.040
Beğeniler: 323 / 73
Ticaret: 12, 100%
Alıntı:
hyppia Adlı Üyeden Alıntı
Kod:
if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'Sağ Sidebar',
        'id' => 'sidebarsag',
        'description' => 'Sağ sidebar',
        'before_widget' => '<div class="part">',
        'after_widget' => '</div>',
        'before_title' => '<span class="caption title-line">',
        'after_title' => '</span>',
    ));
}
dinamik sidebar için functions.php içine şuna benzer bir kod eklemişsindir muhtemelen.

before_widget ve after_widget taglerinin karşısına sana uygun olan ara kodları girmelisin.

Bunda sıkıntım yok hocam, zaten sidebarı konumlandırmak ve sidebar başlıkları için css classlarımı bu kod ile yapılandırdım benim sorunum şu; Bu sidebar bileşenlerinin içinde ki yapıya müdahale edemiyorum ve standart bir şekilde geliyor ve css ile özel tasarlama yapamıyorum genel yapıyı etkiliyor bunlar.

Misal birinci resimde ki kategoriler ve son yazılar kısmının kullandığı html elementleri

<ul><li> ben bunlara özel css tagı ekleyemiyorum, css tagı ekleyebilsem ona göre tasarım yapabilirim ancak buna izin vermiyor ve bunu nasıl yapabileceğime dair bir anlatım yok ne yazık yabancı ve yerli kaynaklarda bulamadım.
huseyinkorbalta.com | Blog
Kaliteli hosting sahibi olmak için https://bit.ly/kalitelihostinghk
  #4  
Okunmamış 05 Mayıs 2018, 01:01
Avatar Seçilmemiş
Web - SEO - Reklam
 
Üyelik Tarihi: 17 Eylül 2014
Yaş / Cinsiyet: 31 / Erkek
Meslek: Mühendis
Konum: Sakarya
Ad, Soyad: Se... Gö...
Mesajlar: 250
Beğeniler: 72 / 102
Ticaret: 18, 100%
hocam link ekleyebilirsen css'e bir de ben bakmak isterim
  #5  
Okunmamış 05 Mayıs 2018, 01:09
Machine Adlı Üyenin Avatarı
www.huseyinkorbalta.com
 
Üyelik Tarihi: 24 Ağustos 2012
Yaş / Cinsiyet: 24 / Erkek
Konum: Aksaray
Ad, Soyad: Hü... Kö...
Mesajlar: 1.040
Beğeniler: 323 / 73
Ticaret: 12, 100%
Alıntı:
hyppia Adlı Üyeden Alıntı
hocam link ekleyebilirsen css'e bir de ben bakmak isterim
CSS link eklemek derken hocam? css'lik bir sorun yok ben anlatmak istediğimi tam olarak anlatamadım sanırım şöyle açıklamaya çalışayım kodlamayı.

Standart olarak wordpress'de kategori listeleme bileşeninde <ul><li> yapısı kullanılıyor ve bu kodlara extra bir css classı ekleyemiyorum.

<ul class="benimözelclassım"><li class="benimikinciözelclassım">

Direkt <ul><li> yapısına css uygular isem örneğin yazı içerisinde listelemelerde bozuluyor. Sitenin genelinde kullanılan bir ul li yapısı olduğu için.

Benim de bulmak istediğim şey şu ben bu standart yapıya müdahale yapabilir miyim? kendi özel yapımı uygulayabilir miyim?

Standart yapı;



Kullanmak istediğim, oluşturmak istediğim kodlama yapısı.


Dinamik sidebar'da bunu sağlayabilir miyim? wordpressin temel bileşenler için kullandığı html yapısına, css yapısını kendime göre değiştirebilir miyim? bununla ilgili döküman arıyorum kısacası

Not: localhost'ta çalıştığım için herhangi bir canlı önizleme sunma imkanım yok tasarım ile ile ilgili.
huseyinkorbalta.com | Blog
Kaliteli hosting sahibi olmak için https://bit.ly/kalitelihostinghk
  #6  
Okunmamış 05 Mayıs 2018, 01:30
Avatar Seçilmemiş
Web - SEO - Reklam
 
Üyelik Tarihi: 17 Eylül 2014
Yaş / Cinsiyet: 31 / Erkek
Meslek: Mühendis
Konum: Sakarya
Ad, Soyad: Se... Gö...
Mesajlar: 250
Beğeniler: 72 / 102
Ticaret: 18, 100%
burada sanırım sorunun cevabı var


ayrıca bunu hiç değiştirmeden

temanın css kodunda şu yolu izleyerek istediğin görünümü sağlayabilirsin.
Kod:
.card .card-content ul{
// bu kısma kendi özel değerlerini girebilirsin.
}

.card .card-content ul li{
// bu kısma kendi özel değerlerini girebilirsin.
}
  #7  
Okunmamış 05 Mayıs 2018, 23:09
Machine Adlı Üyenin Avatarı
www.huseyinkorbalta.com
 
Üyelik Tarihi: 24 Ağustos 2012
Yaş / Cinsiyet: 24 / Erkek
Konum: Aksaray
Ad, Soyad: Hü... Kö...
Mesajlar: 1.040
Beğeniler: 323 / 73
Ticaret: 12, 100%
Alıntı:
hyppia Adlı Üyeden Alıntı
burada sanırım sorunun cevabı var


ayrıca bunu hiç değiştirmeden

temanın css kodunda şu yolu izleyerek istediğin görünümü sağlayabilirsin.
Kod:
.card .card-content ul{
// bu kısma kendi özel değerlerini girebilirsin.
}

.card .card-content ul li{
// bu kısma kendi özel değerlerini girebilirsin.
}
Merhaba,

Verdiğiniz kaynakta ki işlem ne yazık ki dinamik sidebar'da tam olarak çalışmıyor ya da eski wordpress yapısına ait bir kaynak.

CSS olayı da ne yazık ki işlemiyor hocam. Bu konuda bilgi sahibi olan arkadaşlar yardımcı olurlarsa çok sevinirim. Bi' aydınlatın beni
huseyinkorbalta.com | Blog
Kaliteli hosting sahibi olmak için https://bit.ly/kalitelihostinghk
  #8  
Okunmamış 11 Mayıs 2018, 11:52
wpuzman Adlı Üyenin Avatarı
wpuzman.com.tr
 
Üyelik Tarihi: 13 Ocak 2017
Yaş / Cinsiyet: 28 / Erkek
Meslek: Yazılım
Konum: Trabzon
Ad, Soyad: Bi... Ma...
Mesajlar: 2.706
Beğeniler: 877 / 280
Ticaret: 32, 100%
Her widget türünün kendine özgü class ı vardır. Direk ul ve li ye css eklersen bu bütün siteti etkiler. Yapman gereken ana div classlarını kullanmak. Örneğin;
.widget_categories ul li {
list-style-type: none;
}
  #9  
Okunmamış 11 Mayıs 2018, 17:31
Machine Adlı Üyenin Avatarı
www.huseyinkorbalta.com
 
Üyelik Tarihi: 24 Ağustos 2012
Yaş / Cinsiyet: 24 / Erkek
Konum: Aksaray
Ad, Soyad: Hü... Kö...
Mesajlar: 1.040
Beğeniler: 323 / 73
Ticaret: 12, 100%
Alıntı:
bilimokur Adlı Üyeden Alıntı
Her widget türünün kendine özgü class ı vardır. Direk ul ve li ye css eklersen bu bütün siteti etkiler. Yapman gereken ana div classlarını kullanmak. Örneğin;
.widget_categories ul li {
list-style-type: none;
}
Hocam onu bende biliyorum ancak istediğim şekilde düzenleme yapamıyorum.

Misal, kategorileri ul li yapısında düzenledim fakat kategori içerisinde yazı sayısı için ekstra bir css classı ekleyemiyorum.

Şuan default css classlarını kullanarak düzenleme yaptım;


Resimde gördüğün gibi sıkıntı yok ancak ben o kategori içinde ki yazı sayısını gösteren (1) vs yazan kısımları düzenleyemiyorum.

Eğer oraları düzenleyebilsem, oluşturmak istediğim şekil aşağıda ki görsel gibi olacak;


Tabii işin içine birkaç javascript'te giriyor, tooltip özelliği vs de eklemek istiyorum tasarıma.

Bulduğum tüm anlatımlar hepsi eski anlatımlar 2010-2011 yılları için geçerli anlatımlar ve paylaşılan kodlar, yapıların sadece belli bir kısmı çalışıyor diğerleri değişmiş. Güncel, yeni yapıya yönelik bir anlatım mevcut değil ne yazık ki.
huseyinkorbalta.com | Blog
Kaliteli hosting sahibi olmak için https://bit.ly/kalitelihostinghk
  #10  
Okunmamış 11 Mayıs 2018, 18:03
Machine Adlı Üyenin Avatarı
www.huseyinkorbalta.com
 
Üyelik Tarihi: 24 Ağustos 2012
Yaş / Cinsiyet: 24 / Erkek
Konum: Aksaray
Ad, Soyad: Hü... Kö...
Mesajlar: 1.040
Beğeniler: 323 / 73
Ticaret: 12, 100%
@bilimokur @hyppia Tamamdır arkadaşlar, kendim deneme yanılma yaparak sorunumu çözdüm. Çözüm, aşağıda ki kodu temanızın functions.php dosyasına eklemeniz gerekiyor, temanıza özel widget oluşturmuş oluyorsunuz, temel wordpress kategori bileşenini değil kendi bileşeninizi kullanarak oluşturabilirsiniz.

Kod:
class Huseyinkorbalta_Kategori_Widget extends WP_Widget{
    function __construct() {
        parent::__construct(
            'hk_kategori_widget', // Widget'in ID kısmı
            'Sidebar Kategori', // Widget'in adı
            array('description' => __( 'Sidebar kısmında özel kategori tasarımını gösterebileceğiniz widget'))
           );
    }
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        //$instance['post_type'] = strip_tags($new_instance['post_type']);
        //$instance['numberOfListings'] = strip_tags($new_instance['numberOfListings']);
        return $instance;
    }
    function form($instance) {
        if( $instance) {
            $title = esc_attr($instance['title']);
        } else {
            $title = '';
        }
        ?>
            <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'sim_most_viewed'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
            </p>

        <?php
    }
    function widget($args, $instance) {
        extract( $args );
        $title = apply_filters('widget_title', $instance['title']);

        echo $before_widget;
        if ( $title ) {
            echo $before_title . $title . $after_title;
        }
        $this->getMostViewedListings();
        echo $after_widget;
    }
    function getMostViewedListings() { //html
        $args = array(
        'type' => 'post'
        );
        $categories = get_categories($args);
        //echo "<pre>";var_dump($categories);echo "</pre>";
        if($categories){
            echo "<ul>";
            foreach($categories as $cat){
                // /kategori/ yazan kısımı kendinize göre düzenleyiniz.
                echo "<li><a href='".site_url().'/kategori/'.$cat->slug."'  class='cat-item cat-item-".$cat->term_id."'>".$cat->name."</a><div class=' css classları buraya' data-position='top' data-tooltip='Yazı Sayısı'>".$cat->count."</span></li>";
            }   
            echo "</ul>";
        }
    }


} //end class

register_widget('Huseyinkorbalta_Kategori_Widget');
?>
Gerekli css, div, ul li vb yerleri kendinize göre düzenleyin. Ayrıca /kategori/ yazna kısım url ayarı kısmıdır. Kendi site yapınıza göre o kısmı düzenlersiniz.
Konu Machine tarafından (11 Mayıs 2018, 18:14 ) değiştirilmiştir.
huseyinkorbalta.com | Blog
Kaliteli hosting sahibi olmak için https://bit.ly/kalitelihostinghk
Cevap Yaz Favorilerime Ekle


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   Forum > WordPress


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı




Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şu anki Zaman: 17:50.