Eklentisiz Timeline (WORDPRESS)

WordPress üzerinde Timeline eklemek için kolları sıvadım.

Yıllara göre gelişen olayları görsel olarak sıralayabileceğiniz yapıya Timeline deniyor.

Yani zaman çizgisi.

Önce eklenti ile bunu denedim. Böyle basit ve tek kullanımlık bir işlev için eklenti dosyaları sitenin tamamında yükleme yaptırdığından eklentiyi kaldırdım.

Sonra yazı içine Timeline eklemenin en basit yolunu buldum.

Yazının içindeyken kod kısmına şunu ekliyorsunuz.

<div class="timeline">
  <div class="containertimeline lefttimeline">
    <div class="contenttimeline">
      <h2>2020</h2>
      <p>Bu sene bombok geçti. Corona virüs dünyayı yaktı kavurdu. Allah belasını versin nasıl bir virüsse ölmedi gitti.</p>
    </div>
  </div>
  <div class="containertimeline righttimeline">
    <div class="contenttimeline">
      <h2>2016</h2>
      <p>Türkiye açısından bir boktan sene daha. Darbe vs ülke geri doğru gitti.</p>
    </div>
  </div>
  <div class="containertimeline lefttimeline">
    <div class="contenttimeline">
      <h2>2015</h2>
      <p>Bu senelerde gençtim güzeldim. Hey gidi günler ne çabuk geçiyor değilmi...</p>
    </div>
  </div>
  <div class="containertimeline righttimeline">
    <div class="contenttimeline">
      <h2>2012</h2>
      <p>Hoş geldin 2012. Bu senelerde mutluydum huzurluydum.</p>
    </div>
  </div>
  <div class="containertimeline lefttimeline">
    <div class="contenttimeline">
      <h2>2011</h2>
      <p>Evlendim işe başladım ve 1 çocuğum oldu!</p>
    </div>
  </div>
  <div class="containertimeline righttimeline">
    <div class="contenttimeline">
      <h2>2007</h2>
      <p>Askerden döndükten sonra iş arama dönemi.</p>
    </div>
  </div>
</div>

Daha sonra aşağıdaki css kodunu ekleyeceksiniz. Burada önemli olan husus css kodunu nereye ekleyeceğiniz.

Sadece 1 yazı için tüm kodu ek css üzerinden girip tüm sayfalarda css nin yükenmesini sağlamak gereksiz yük demek.

O yüzden sadece eklediğiniz yazıda çalışabilecek bir css kodunu eklemek için size önerim şu eklentiyi eklemeniz olacaktır.

WP Add Custom CSS

Bu eklentiyi indirdikten sonra time line kodlarını eklediğiniz yazı içinde en altta css ekllemek için alan belirecek.

Bu alana aşağıdaki css kodlarını girin.

/* 100numaraliadam Timeline */
.timeline {
  position: relative;
  margin: 0 auto;
  padding-top:50px;
  padding-bottom:300px;
  background-color:#eee;
-webkit-box-shadow: 0 0 30px 20px #FF0303;
  box-shadow: 0 0 8px 0px lightblue;
   font-family: Helvetica, sans-serif;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #daedf4;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;-webkit-box-shadow: 0 0 30px 20px #FF0303;
  box-shadow: 0 0 10px 0px #aaa;
   font-family: Helvetica, sans-serif;
}

/* Container around content */
.containertimeline {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  box-sizing: border-box;
}

/* The circles on the timeline */
.containertimeline::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: lightblue;
  border: 4px solid #ccc;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.lefttimeline {
  left: 0;
}

/* Place the container to the right */
.righttimeline {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.lefttimeline::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.righttimeline::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.righttimeline::after {
  left: -16px;
}

/* The actual content */
.contenttimeline {
  padding: 20px 30px;
  background-color: white;
  filter : drop-shadow(1px 5px 9px #ccc);
  position: relative;
  border-radius: 6px;
}

/* 600px den düşük ekranlarda aşağıdaki css ççalışır */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 15px;
  }
  
  /* Full-width containers */
  .containertimeline {
  width: 100%;
  padding-left: 48px;
  padding-right: 15px;
    zoom: 0.8;
    font-size:1.2em;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .containertimeline::before {
  left: 38px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .lefttimeline::after, .righttimeline::after {
  left: 1px;
    
  }
  
  /* Make all right containers behave like the left ones */
  .righttimeline {
  left: 0%;
  }
}

İşte bu kadar. Sizin yapacağınız tek şey Timeline girerken yazı kod içinden div üzerinden örnekteki gibi girmeniz olacaktır.

Bu arada css kodunu inceleyin. Temanıza göre değiştirilmesi gerekli renkeri vs değiştirebilirsiniz.

Css içinde “/* 600px den düşük ekranlarda aşağıdaki css çalışır */ “ kısmının altındaki kodlar cep telefonu tablet gibi ekranı düşük alanlar içindir.

Yani kodumuz cep telefonu tablet responsive uyumudur.

Kodun Çalışır Hallinin Canlı Örnek Görüntüsü: