Belli bir kategoriden makale gösterebileceğiniz dörtlü sütun

Wordpress dortlu sutun yazidan once kategoriye ait konulari cek Belli bir kategoriden makale gösterebileceğiniz dörtlü sütun Bugüne kadar sitede birçok tasarım örneği paylaştık ama paylaştığımız içeriklerin çoğu Html, Css, js dosyaları olduğu için herkes kendine göre uyarlamak zorunda kalıyordu. Bir bakıma daha iyi ama bu sitede çoğunluk WordPress konular olduğu için bundan sonra WordPress ile alakalı farklı bir seriye gitmeye karar verdim. Mesela makalelerin altında veya üstünde belirlemiş olduğunuz bir kategoriye ait olan bir kaç konuyu göstermek istiyorsunuz yada anasayfada yazılardan önce magazin sitelerinde olduğu gibi her kategori için ayrılmış olan bölümlerden eklemek istiyorsunuz. Bundan sonra bu tarz içeriklerin yerleştirlmesi, kurulumu gibi aşamaları anlatarak nasıl yapacağınızı aşama aşama anlatarak örnekler paylaşmak istiyorum. Malum herkes Wp sistemine aşina değil ve yapmak istediği bir içeriği de tamamlamak için uzunca bir süre uğraşması gerekiyor. Ben de burda hazırlar paylaşırım ve beğenirseniz kendi sitenize uygularsınız.

Paylaşmayı düündüğüm bazı içerikleri index.php dosyasına bir kaç defa ekleyerek çok güzel görünen bir anasayfaya da sahip olabileceğinize inanıyorum. Malum ücretsiz temalara ait en beğendiğimiz özellikleri sadece premiuma geçince kullanabiliyoruz. Bu da pek Ulan demoda bu var kullandığımızda neden olmuyor bile dediğimiz oluyor. Aslında benim gibi Wp üzerine konular paylaşan birçok kişi var. Herkes elinden geldiği kadar bu gibi konular paylaşırsa, ücretsiz sürüm olan bir temayı da premium gibi bir sayfaya dönüştürmek sizler için daha kolay olur o zaman. Bugün paylaşacağım örnek de bunlardan ilki bu arada. Daha öncesinden kendim için çok kullandığım ama kim uğraşacak o kadar dediğim için de paylaşmayı hiç düşünmedim. Malum herkes parasını basıp kullanmıyor ve benim gibi kullandığı temadan çok çabuk sıkılan bir sürü kişi vardır mutlaka. Tam bir temayı satın alacağım derken şu özellik benim isteklerimi karşılamıyor yada şu tema bundan daha iyi diye kararsız kaldığımdan hiç premium şablonlara yönelmedim. En kullanılabilir olanları da 59$’dan başlıyor. Az para değil ki bu miktar. Kendi hosting parasını bile zor çıkaran bir site için de böyle bir yatırım yapmak oldukça mantıksız. Zaten bi haber sitesi gibi olayım düşüncesinde olmadım hiçbir zaman. Arada böyle şeylerle uğraşmak eğlenceli oluyor, vakit öldürmeye yarıyor.

Neyse gelelim saadettine artık… Aşağıda aşama aşama anlatacaklarımı uyguladığınızda anasyfanıza, kategori sayfasına yada makale sayfasına 4 konudan oluşan bir sütun ekleyebilirsiniz. Öncelikle işin php kodundan anlatmaya girmem gerek, iş oldukça basit. Altta verdiğim kodun aynısını sitenize ekleyeceğiniz kodlar içinde görebilirsiniz. Bu kısmı ayrı girmek istedim.

  • cat=14 yazan yer tanıtmak istediğiniz kategori id dir.
  • showposts=4 yazan yer kaç adet yazı gösterileceğidir.
  • offset=0 ise gösterilecek olan konuların hangi sıradan itibaren kategoriden çekileceğini gösterir. Mesela haber kategorisine ait ilk konu hariç sonraki 4 konuyu göstermek isterseniz offset 1 yapacaksınız. 2. konudan sonraki konuları göstermek için de offset 2 olarak ayarlamanız gerek. Bunu istediğiniz gibi ayarlayabilmeniz mümkün. İsterseniz showposts yazan yere 1 yazarak kategoriye ait 1., 2., 3. yada 4. konuyu tek başına da gösterebilirsiniz.

Not: Bu kodu herhangi bir yere eklemeyin

<?php $CatPosts = new WP_Query("cat=14&showposts=4&offset=0"); while($CatPosts->have_posts()) : $CatPosts->the_post();?> 

Yazı fontlarının Montserrat fontu olarak görünmesi için alttaki kodu header.php dosyasında head etiketleri arasına ekleyin.

 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

İlk olarak alttaki kodu temanızın style.css dosyasına ekleyin

/*--------------------------------------------------------------------*/
:root{
  --background-dark: #2d3548;
  --text-light: rgba(255,255,255,0.6);
  --text-lighter: rgba(255,255,255,0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}
.hero-section{
  align-items: flex-start;

  display: flex;
  min-height: 100%;
  justify-content: center;
  padding: var(--spacing-s) var(--spacing-l);
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .card-grid{
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media(min-width: 960px){
  .card-grid{
    grid-template-columns: repeat(4, 1fr); 
  }
}

.card{
  list-style: none;
  position: relative;
}

.card:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card__background{
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear;
}

.card:hover .card__background{
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover > .card:not(:hover) .card__background{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.card__content{
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
}

.card__category{
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}

.card__heading{
  color: var(--text-lighter);
  font-size: 1.9rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.4;
  word-spacing: 100vw;
}
/*--------------------------------------------------------------------*/

Alttaki kodu da index.php, page.php yada single.php dosyalarından herhangi birine ekleyebilirsiniz. Hangi bölümde kullanmak isterseniz oraya ekleyin.

Sonuncu kodu normal eklediğimde hata verdiğinden dolayı bu şekilde eklemek zorunda kaldım. Sanırım temadan kaynaklı bir çakışma oluyor. Resim olarak eklememin bir anlamı olmazdı. Bu yüzden bu şekilde paylaşmak zorunda kaldım.

<section class=”hero-section”> <div class=”card-grid”> <?php $CatPosts = new WP_Query(“cat=14&showposts=4&offset=0″); while($CatPosts->have_posts()) : $CatPosts->the_post();?> <a class=”card” href=”<?php the_permalink(); ?>”> <div class=”card__background” style=”background-image: url(<?php the_post_thumbnail_url(‘thumbnail’); ?>)”></div> <div class=”card__content”> <p class=”card__category”><?php echo get_cat_name( $category_id = 14 );?></p> <h3 class=”card__heading”><?php the_title(); ?></h3> </div> </a> <?php endwhile; ?> <div> </section>

1
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-09-29 tarihinde yayınlandı,Toplam 5493 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...