Tabii ki bu temayı da güzelleştirmenin (hızdan kesmeden) yolları mevcut.
Sizlerle başladığımız bu seride 7. bölüme geldik. Sizlerle beraber bu temayı baştan sona kadar güzelleştirmeyi hedefliyoruz
Düzenli olarak takip eden arkadaşlara da buradan teşekkür etmek istiyorum
Bu bölümümüzde Author Box ekleyeceğiz.
Before after yapmalık bir durum yok bu bölümde ancak olmazsa olmazımız olduğu için göstereyim gene de.
Before:
After:
Çok boş gözüktüğünün farkındayım kendi sitemde bu şekilde gözüküyor:
Farklı CSS kodları bulunduğu için bu sitede eklememiştim...
Şimdi dilerseniz yapımına geçelim
İlk olarak elements bölümünü açmamız gerekiyor
Görünüm > Generate Press bölümüne gelip Elements'i açalım. (Generate Press'i benden aldıysanız hali hazırda açıyorum)
Daha sonra Open Elements seçeneğine gidelim
Add News Element butonuna basalım, Hook'u seçelim ve aşağıdaki kodları ekleyelim.
<div class="author-box">
<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
<div class="author-links">
</div>
</div>
</div>Kodlarımızı ekledikten sonra Hook tipine generate_before_comments_container seçeneğini seçelim ve Execute PHP seçeneğini açalım.
Olması gereken görüntü:
Sonrasında Display Rules sayfasını açalım ve Location olarak Yazı'yı seçelim.
Olması gereken görüntü:
Daha sonrasında yayımlamamız yeterli.
Şimdi gelelim ikinci kısıma.
Görünüm > Özelleştir > Ek CSS kısmına gelip şu CSS kodlarını ekleyelim.
.author-box {
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 10px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
border-left: 3px solid #b11f24;
}
.author-box .avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
.author-description {
line-height: 1.6em
}
@media (max-width: 768px) {
}Bu kodları da ekledikten sonra güncelleyelim ve işlemlerimiz bitti.Profil fotoğrafınız yok ise, nasıl ekleyebileceğinize şu içeriğimde değinmiştim: https://www.r10.net/wordpress-temalari/3341575-generate-press-guzellestirme-serisi-2-9989-entry-meta-yazar-ve-icerik-metasi.html
Hayırlı olsun diyelim o zaman
Umuyorum işinize yarayan ilgi çekici bir konu olmuştur.
Ek olarak belirteyim bu CSS kodlarını https://www.wplogout.com/ üzerinden aldım, esinlenip düzenledim.
Ancak içiniz rahat edecek ise çaldım da diyebilirsiniz.
Gelecek bölümlerde sizin özellikle istediğiniz şurayı da güzelleştirelim, düzenleyelim dediğiniz yerler de var ise yorumlarda belirtebilirsiniz.
Şuan aklımdaki yerlerle beraber toplam 10 bölümü geçeceğiz diye umuyorum
Serinin diğer içerikleri:
- FAQ Bölümü Rank Math
- Entry Meta - Yazar ve İçerik Metası
- İçerik & Makale Gölgesi
- Alıntılar
- Navigasyon Barı
- H2 ve H3 Tagları
Şuradan da asıl içeriğe erişebilirsiniz: GeneratePress Teması Nasıl Özelleştirilir?
İyi forumlar dilerim esen kalın
