WordPress Etiket Yöntemiyle Manşet Oluşturma Yöntemi

WordPress Etiket Yöntemiyle Manşet Oluşturma Yöntemi
60

Merhaba bu yazımda sizlerle Türk kaynak bulunmadığı için etiket yöntemiyle  manşet oluşturacağız. Stil dosyalarından tutun, hiçbir işlem yapmadan kullanabiliceksiniz.

[bilgi]Atıyorum featured diye etiket girildiğinde anasayfada manşet olarak o yazıyı göstereceğiz. [/bilgi]

manstetiket

İlk olarak temanızın ana dizinine slider.php adında bir dosya oluşturalım.. Daha sonra index.php dosyasını açarak aşağıda ki kodu ekleyelim veya Slider’ın görünmesini istediğimiz yere ekliyoruz.

<?php get_template_part('slider'); ?>

Şimdi sıra geldi manşet için yazılması gereken kodlara. slider.php dosyasını açıyoruz. İlk olarak manşet için gereken bir divleri ve php döngüsünü oluşturuyoruz..

<div id="manset">
<?php $recent = new WP_Query(array( 'tag' => 'google', 'posts_per_page' => '1' )); while($recent->have_posts()) : $recent->the_post();?> <!-- Php döngüsü açıldı -->
<div class="manset-buyuk">
Büyük yazının içeriği burada
</div>
<?php endwhile; ?> <!-- Php döngüsünü kapatıyoruz -->

<?php $recent = new WP_Query(array( 'tag' => 'google', 'posts_per_page' => 4, 'offset' => 1 )); while($recent->have_posts()) : $recent->the_post();?> <!-- Php döngüsü açıldı -->
<div class="alt-haber">
küçük yazının içeriği burada
</div>
<?php endwhile; ?> <!-- Php döngüsünü kapatıyoruz -->
</div>

Şimdi kısaca olayı anlatayım.. Açtığımız ilk php döngüsünde google etiketi girdiğimiz örnekte gösterdiğim büyük resimli olan yazıyı çekiyoruz. İkincinde ise yine google etiketi girdiğimiz küçük resimli yazıları çekiyoruz.

Şimdi sıra geldi yazıları çekmeye.. İlk oalrak büyük yazının içeriği burada olarak adlandırdığımız yeri halledelim.. Aşağıda ki kodları büyük yazı ve küçük yazının içeriği burada olarak adlandırdığımız böyleye yapıştıralım.

<div class="block-image">

<div class="overlay">
<div class="post-meta">
Resmin içerisinde gözükecek olan içerik.
</div>
</div>
<!-- Öne çıkarılmış görseli çekiyoruz -->
<?php if(has_post_thumbnail()): ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'post'); ?>
Görsel kodları buraya
<?php endif; ?>

</div> <!-- Block-image -->

Şimdi de büyük yazının içeriği olarak adlandırdığımız alan da ki görsel kodları diye yazdığımız bölgede öne çıkarılmış görseli çekiyoruz..

<a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img itemprop="images" src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='495' height='275' /></a>

Büyük olanı hallettik sıra geldi küçük yazı alanı diye adlandırdığımız alan da ki görsel kodları diye yazdığımız alana öne çıkarılmış görseli çekelim..

<a href='<?php the_permalink(); ?>' title='<?php the_title(); ?>'><img itemprop="images" src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width='169' height='137' /></a>

Şimdide resim içerisinde gözükecek diye belirlediğimiz alanlara aşadağı ki kodları ekleyelim. Bu kodlar sayesinde yazı hakıında detayları ekliyoruz..

<h1 class="entry-title" itemprop="headline"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

<span class="author"><i class="fa fa-user"></i> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span>

<span class="entry-time"><span><time class="updated" datetime="<?php the_time('c'); ?>" itemprop="datePublished"><i class="fa fa-clock-o"></i> <?php the_time('j F Y'); ?> </time></span></span>

Bunlarda stil dosyası


.overlay {
position: absolute;
left: 0;
width:100%;
z-index:9999;
bottom: 0px;
background-image: -moz-linear-gradient( 90deg, rgb(0,0,0, 0.57) 0%, rgba(0,0,0,0) 100%);
background-image: -webkit-linear-gradient( 90deg, rgba(0, 0, 0, 0.57) 0%, rgba(0,0,0,0) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(0,0,0, 0.57) 0%, rgba(0,0,0,0) 100%);
transition: width .5s ease-in-out, background .3s ease;
}
.manset-buyuk, .alt-haber {
float:left;
}
.alt-haber {
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.alt-haber img {
float: left;
opacity: 1;
width:169px !important;
height:137px !important;
-moz-transition: opacity .4s;
-ms-transition: opacity .4s;
-webkit-transition: opacity .4s;
transition: opacity .4s;
}
#manset .post-meta a {
color:#fff!important;;
}
.manset-buyuk img {
width:465px!important;
height:275px!important;
}
#manset {
display:inline-block;
margin-left: 10px;
padding: 15px;
background: #fff;
margin-bottom: 20px;
}
.alt-haber .entry-title {
font-size: 14px;
}
.alt-haber .author, .alt-haber .entry-time {
display:none;
}
.alt-haber:hover .author, .alt-haber:hover .entry-time {
display:block;
}
.manset-buyuk .entry-title {
font-size: 28px;
text-transform: uppercase;
margin-bottom: 10px;
}
.manset-buyuk .entry-content {
margin-top: 5px;
line-height: 25px;
display:none;font-size: 16px;
}
.manset-buyuk:hover .entry-content {
display:block;
}
#manset .post-meta, #manset .post-meta a {
color: #fff;
text-align:center;
}

İşlem tamamlandı..

Yorum Yap

Yapına Yorumlar (4)

  1. herşey tamam oluyor ama stil kodlarıyla ilgili bir sıkıntı mevcut nereye ekleme yapmamız gerekiyor.

  2. Denemek istedim fakat çalışmadı. Bilginize