wordpresstr
Administrator
- 125
- 13 Kas 2020
WordPress'te önceki / sonraki yazı gezintisi için küçük resimlerin nasıl kullanılacağı. Next_post_link ve previous_post_link işlevleri, yeni bir geliştiricinin kolayca açıp kapatabileceği yeterince basit bir küçük resim parametresine sahip değildir. Bu makalede, yazı küçük resimlerini WordPress'te önceki ve sonraki gönderi bağlantılarıyla nasıl kullanacağınızı göstereceğiz.
Nihai sonuç şöyle görünecektir:
Yapmanız gereken ilk şey, temanızın single.php dosyasını açmak ve aşağıdaki kodu büyük olasılıkla the_content () alanından sonra döngünün içine eklemektir:
Yapmanız gereken sonraki şey, style.css dosyanızı açmak ve aşağıdaki stilleri eklemek:
Temanızla eşleştirmek için stili değiştirmekten çekinmeyin. Çoğu zaman kullanıcılarımız kodu biçimlendirmekten hoşlanır, bu yüzden onların ince ayar yapmasını kolaylaştırır. Bu, kolayca özelleştirebilmeniz gereken temel stildir.
Küçük resim boyutunu değiştirmek istiyorsanız, diziyi (100,100) istediğiniz gibi değiştirin.
Nihai sonuç şöyle görünecektir:
Yapmanız gereken ilk şey, temanızın single.php dosyasını açmak ve aşağıdaki kodu büyük olasılıkla the_content () alanından sonra döngünün içine eklemektir:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="cooler-nav" class="navigation"> <?php $prevPost = get_previous_post(true); if($prevPost) {?> <div class="nav-box previous"> <?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?> <?php previous_post_link('%link',"$prevthumbnail <p>%title</p>", TRUE); ?> </div> <?php } $nextPost = get_next_post(true); if($nextPost) { ?> <div class="nav-box next" style="float:right;"> <?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); } ?> <?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?> </div> <?php } ?> </div><!--#cooler-nav div --> |
| 1 2 3 4 5 6 | #cooler-nav{clear: both; height: 100px; margin: 0 0 70px;} #cooler-nav .nav-box{background: #e9e9e9; padding: 10px;} #cooler-nav img{float: left; margin: 0 10px 0 0;} #cooler-nav p{margin: 0 10px; font-size: 12px; vertical-align: middle;} #cooler-nav .previous{float: left; vertical-align: middle; width: 250px; height: 100px;} #cooler-nav .next{float: right; width: 250px;} |
Temanızla eşleştirmek için stili değiştirmekten çekinmeyin. Çoğu zaman kullanıcılarımız kodu biçimlendirmekten hoşlanır, bu yüzden onların ince ayar yapmasını kolaylaştırır. Bu, kolayca özelleştirebilmeniz gereken temel stildir.
Küçük resim boyutunu değiştirmek istiyorsanız, diziyi (100,100) istediğiniz gibi değiştirin.