# 108: Bağımsız Parçacıklar Sayfası Oluşturma - CSS Hileleri

Anonim

Sahne arkasında yaptığım bazı homurdanma işlerine bakarak, yapılması gereken bazı şeyleri detaylandırarak başlıyoruz. Geri kalan wp_list_pages () çağrılarını ekleyerek, her bir kategori için parçacık listesinin geri kalanının çıktısını verir. Ayrıca, kategorileri ve parçacık listelerini ayıran çubuğun rengini değiştirmek için CSS'ye ekleme. Ayrıca, geçici olarak sahip olduğumuz aptal beyaz sınır yerine renkleri hafifletmek için kategorilerin gezinmelerini değiştirdik. Kelimenin tam anlamıyla, lighten()işi bizim için yapmak için Sass'taki işlevi kullandık .

Bu ekran video kaydındaki amaç, tek bir pasaj için görünümü biçimlendirmektir. Sitenin bu alanını daha yakın zamanda oluşturmuş olsaydım, snippet'ler özel bir gönderi türü olabilir (tek galeri ekran görüntüleri gibi), ancak bunu yapmaya başladığımda bunlar yoktu. Bu nedenle, bunlar yalnızca "Sayfalar" dır ve tümü özel bir sayfa şablonu kullanır. Gerçekten önemli değil, özellikle de artık çok sayıda sayfaya sahip olmak bir performans sorunu değil.

Bireysel parçacık sayfaları, blog gönderilerine çok benzeyecek. Standart 2/3 1/3 ızgara yapısı ve normal bir kenar çubuğu. Yine de bazı farklılıklar var. Parçacıklar için açık bir hiyerarşi vardır, örneğin

Ana Sayfa »Kod Parçacıkları» Parçacık Kategorisi »Parçacık Adı

Bu, bu sitede gelişen "siyah çubuk" alt gezinme için mükemmeldir. Yoast SEO eklentimiz, kırıntı işlevselliği sağlar, bu nedenle bu kolaydır - sadece bir işlevi çağırmak yeterlidir.

Diğer bir fark ise the_modified_time()yayın tarihi yerine çıktı vermemizdir . Bu şekilde, insanlar pasajın en son güncellendiği tarihi bilir ve bu, yayınlandığı zamandan daha alakalı olur. Ayrıca, parçacıkları düzenli olarak tekrar gözden geçirmem için bana biraz motivasyon sağlıyor.

Eski bir pasajı sadece eğlence için güncellemeyi bir kenara bırakıyoruz.

Alt kategori görünümlerimizin çalışmasını sağlayacak biraz JavaScript yazarak bitiriyoruz. Bu görünümler aslında Parçacıklar ana sayfamıza benziyor, yalnızca / snippet / javascript / adresindeyseniz, JavaScript parçacıkları varsayılan olarak görünümde olacak ve JavaScript kategorisi vurgulanacaktır. İster inanın ister inanmayın, muhtemelen kendi üzerine bir pasaj olması gereken birkaç satırlık sinsi URL zirvesi JavaScript kodu.