WordPress'te Sekmeli Mesaj Filtreleri Oluşturun (Video)

Merhaba millet,

Premium alandaki bir öğrenci, kaynak türüne göre filtreleyebileceğimiz bir kaynak sayfasını nasıl yapabileceğimizi sordu.

İşte video eğitimi:

Sonuç, aşağıdaki ekran gibi bir şey olacaktır:

Bunu yapmak için 3 öğe kullandım: 2 eklenti ve özel css.

İhtiyacımız olacak eklentiler:

• Tekir Duyarlı Sekmeler
• Kategori gönderilerini listele

Tabby Duyarlı Sekmeler eklentisi, web sitemize kolayca sekme eklememize izin verecek. Sekmeleri eklemek için sadece bazı kısa kodlar eklememiz gerekecek.

Liste kategorisi gönderileri eklentisi, belirli bir kategorinin içeriğini sekmelerin her birine eklememize izin verecektir.

Başka bir deyişle, her sekmeye tıkladığınızda belirli bir kategorinin gönderileri görünecektir.

Tipik sekme şekline sahip olmaması ve sonuç yukarıdaki resim olması için, yapacağımız şey stil sayfalarını değiştirmek.

Kullandığım CSS'yi aşağıdaki gibi geliştirebilirsiniz. Görünüm -> Özelleştir -> Ek Css'ye eklemeniz gerekecek

body.page-id-533 {
    background-color: #f7f7f7;
}

.tabcontent ul.lcp_catlist li{
float: left;
width:32%;
margin:5px;
list-style-type: none;
font-size:15px;
background:white;
padding:10px;
}

.responsive-tabs .responsive-tabs__panel {
border:0px !important;
padding: 0px !important;
background: #f7f7f7 !important;
}

.responsive-tabs .responsive-tabs__list__item {
color: grey !important;
border: 1px solid #cacaca !important;
font-size:14px!important;
padding:10px 30px !important;
margin-bottom:20px !important;
}

.responsive-tabs .responsive-tabs__list__item--active{
color: #f4633e !important;
border: 1px solid #f4633e !important;
}

.responsive-tabs ul.responsive-tabs__list{
margin:0px !important;
}

.entry-content ol, .entry-content ul {
  margin-left: 0px;
}

.button{
border-radius: 47px;
background: #f4633e;
font-size: 12px;
text-decoration:none;
}

.page-id-533  h4{
color:#f4633e;
font-weight: normal;
}

Şimdi sadece bir sayfa oluşturmamız ve içeriğin görünmesini sağlamak için kullanacağımız kısa kodları eklememiz gerekiyor:

Benim durumumda şuydu:

[tabby title="TODO"]

[catlist id=2 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]


[tabby title="DOMINIO"]

[catlist id=32 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]

[tabby title="HOSTING"]

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. 

[tabbyending]

Videoda her bir kısa kod parametresinin ne anlama geldiğini açıklıyorum ancak özetle aşağıda açıklıyorum:

Kısa koddan:

[catlist id=2 excerpt=yes excerpt_strip=no thumbnail=yes no_post_titles=yes]

• ID Listelemek istediğimiz kategorinin tanımlayıcısıdır
• alıntı=evet İçerik özetinin görünmesini istediğimi belirtiyorum
• alıntı_strip=hayır Html işaretlemesinin kaldırılmasını istemediğimi belirtiyorum
• küçük resim=evet resmin görünmesine izin ver
• no_post_titles=evet Başlık görünmüyor

Umarım işinize yarar 😉
selamlar
Oskar