Kategori: Wordpress

Merhaba arkadaşlar bugün sizlere baharat v1 temasının yapımı sırasında araştırdığım ve yapımını öğrendiğim wordpress resimli son yazılar bileşeni yapımını anlatacağım.Öncelikle son yazılar bileşeni ne işimize yarar bundan bahsedeyim , özellikle tek konu üzerine kurulu sitelerde ziyaretçiler arama motorları üzerinden geleceğinden sitenizde ki daha güncel son yazıları göremeyeceklerdir.Bizde bu durumu önlemek için bugüne kadar sidebarın uygun bir yerine son yazılar bileşenini koyardık fakat zamanla anladığım ve istatistikler ile desteklediğim fikrim sayesinde WordPress'in bize sunduğu son yazılar bileşeninin sadece yazıdan ibaret olduğu için fazla dikkat çekmediğini bunun yerine daha görsel bir bileşen kullanmam gerektiğini anladım.Bu yüzden bende son yazıları gösterebileceğim daha görsel ve ayrıntılı bir bileşen aramaya başladım.Başlangıç için baharat v1 temasında kullanmakta olduğum şekilde bir bileşen yaptım fakat bu bileşeni biraz daha geliştirdim ve ilerleyen temalarımda kullanmayı düşünüyorum.Aşağıda vereceğim kod sayesinde görsel bir son yazılar bileşeni ortaya çıkacaktır başlangıç için bileşende sadece konunun öne çıkarılmış görseli ve konu başlığı yer alıyor.Ben size isteğinize göre bunlara ek olarak konunun okunma sayısı , konuya yapılan yorum sayısı veya konunun kategorisi gibi eklemeler yapmanızı öneririm.

<?php
                            $the_query = new WP_Query('showposts=5&orderby=post_date&order=desc');  
                            while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class=bilesenicerik>
<div class=sonyaziresim><a href="<?php the_permalink('') ?>" title="<?php the_title(''); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail(array(64,64));} else {}?></a></div>
<div class=sonyaziadi><a href="<?php the_permalink('') ?>" title="<?php the_title(''); ?>"><?php the_title(''); ?></a></div>
</div>
<div class=temizlik></div>
							<?php endwhile; ?>
                            <?php wp_reset_query(); ?>

Yukarıda ki kod sayesinde son yazılarınızı resimli olarak gösterebileceksiniz.Kodu geliştirmek ve görselleştirmek size kalmış.Baharat v1 temasını kullanan arkadaşlarımız zaten bu bileşenden faydalanabiliyorlar kullanmayan arkadaşlar ise yukarıda ki kodu kullanabilirler.Benim verdiğim class değerlerine CSS ile özellikler eklerseniz istediğiniz görünümü elde edebilirsiniz.İsteyen arkadaşlarımız Baharat v1 temasını indirerek bu classların CSS özelliklerine bakabilirler.

Merhaba arkadaşlar bu dersimde sizlere wordpress blogunuzda ki kategori listelenmesini nasıl çift sütunlu yapabileceğinizi göstereceğim.Özellikle on ve üzeri yani siterinde çok fazla kategori bulunan arkadaşlarımızın işine yaracağını düşündüğüm kategorileri çift sütunlu gösterme yöntemini gelin beraber inceleyelim.Bu konuyu araştırmaya sitemde ki kategori sayısının artması sonucu başlamıştım ne yazık ki alt alta on dört tane kategori hiç güzel görünüm oluşturmuyordu bende birkaç site de görmem üzerine çift sütunlu kategori yapılışını araştırmaya başlamıştım.Bulduğum sonuçlar ile çift sütunlu kategori alanı yapımını ilk defa Baharat V1 teması ile uygulama başlamıştım ve temayı sizlerle paylaşmıştım.Şimdi temamı kullanmayan ama kategorilerini çift sütunlu olarak göstermek isteyen arkadaşlar için kategorilerini çift sütunlu göstermelerini sağlayacak kodu paylaşıyorum.

Öncelikle arkadaşlar aşağıda ki CSS kodlarını CSS dosyanızın içerisine ekleyin , kodlarda ki 150px olan genişlikleri kendi sidebarınızın genişliğine göre ayarlarsanız daha güzel bir görünüm elde edersiniz.

.right {float:left; width:140px;} .left {float:left; width:140px;}

Yukarıda ki kodları CSS dosyanıza ekledikten sonra aşağıda ki kodu da çift sutunlu kategori bileşeninizi nerede göstermek istiyorsanız oraya ekleyin.

<div class=ciftsutun>
<div class=bilesenbaslik><strong>Kategoriler</strong></div>
<div class=kategoriicerik><?php
$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i=0;$i<$cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>
<ul class="left"> 
<?php echo $cat_left;?>
</ul>
<ul class="right"> 
<?php echo $cat_right;?>
</ul></div>
<div class="temizlik"></div>
</div>

İşte bu kadar kolay arkadaşlar , hayırlı kullanımlar dilerim.

Merhaba arkadaşlar araya bayramın da girmesiyle beraber yayınlamamın geciktiği Buis Portfolyo temasını sonunda sizlerle paylaşıyorum.Tema yaklışık bir hafta önce bitse de araya bayram tatili girince yayınlamam biraz gecikti tabii ki de.WordPress portfolyo teması olarak hazırlanan temada sade , şık ve hızlı bir yapı kullanılmaya çalışılmıştır.Kendimce ortaya güzel bir tema çıkardığımı düşünüyorum.Tabii ki temayı kodlarken bana birçok arkadaşımız yardımcı oldu.Onlara buradan tekrar teşekkürlerimi iletiyorum.İlk defa bu tema ile birlikte tam anlamıyla jQuery kullandığım için , jQuery ile çok iyi şeyler yapamadım fakat jQuery konusunda kendimi geliştirdikçe daha güzel işler çıkaracağıma inanıyorum.Tüm resimleri optimize edilmiş ve kod hataları giderilmiş olarak size sunulan tema da öne çıkarılmış görsel kullanma zorunluluğunuz mevcuttur.Belirlediğiniz öne çıkarılmış görseller konu içerisi de dahil olmak üzere temanın birçok yerinde görüntülenebilecek.

Buis Portfolyo Özellikleri 

• Sade ve şık görünümünün yanında sizlere hızlı bir tema sunar.
• Temada hiçbir kodlama hatası bulunmamaktadır.
• Tema da birçok özelliği ayarlayabileceğiniz bir tema paneli bulunmaktadır.
• "WP-Limit Post" ve "WP-Pagenavi" eklentileri temaya entegre edilerek , hız konusunda tasarruf sağlanmıştır.
• Logonuzu ayarlayana kadar hoş bir görünüme sahip Buis Portfolyo logosu gözükecektir.
• Tema da font-face kullanılmıştır.
• Internet Explorer ile uyumlu hale getirilmiştir.
• Header kısmında sağ tarafta sosyal profil linklerinizin yer alacağı bir alan bulunmaktadır.
• Bir portfolyo temasına yakışmayacağını düşündüğümden reklam alanlarına yer verilmemiştir.
• Tema da sade ve şık görünüme sahip bir yorum sistemi kullanılmıştır.
• Anasayfa da ki resimlerin üstüne geldiğiniz de resim kararak konu başlığı gözükür.
• Temaya dahil edilmiş üç tane bileşen bulunmaktadır.
• İlk bileşen "Kimim Ben?" bileşenidir , bu bileşenden kendiniz hakkında bilgiler verebilirsiniz yönetimini tema panelinden gerçekleştiriyorsunuz.
• İkinci bileşenimiz "Yeteneklerim Neler?" bileşenidir , bu bileşende ise yeteneklerimizi yazıp 1 ile 5 arasında bir derecede yıldız veriyoruz bu bileşenin yönetimi de tema panelinden gerçekleştirilmektedir.
• Üçüncü ve son bileşenimiz "Son Çalışmalarım Neler?" bileşenidir, bu bileşen ile portfolyonuza eklenen son beş çalışma görsel olarak bazı ayrıntılarıyla listelenirler.
• Yukarı da bahsi geçen üç bileşeninde tema da görülüp görülmemesini tema panelinden ayarlayabilirsiniz.
• Yukarıda bahsi geçen üç bileşenin haricinde temanıza istediğiniz kadar bileşen ekleyebilirsiniz yani tema bileşen desteklidir.
• Temaya güzellik katan en önemli özelliklerden biri ise "Mini Yazılar" kısmıdır.Anasayfa , kategori sayfaları , arşiv sayfaları ve arama sonuçlarının bulunduğu sayfalarda yer alan bu bölümde tema panelinden belirttiğiniz twitter hesabının son 5 adet tweeti gözükür.Bu sayede bu sayfalar sürekli güncel gözükür.
• Tema da yazıların içerisinde de öne çıkarılmış görsel gözükmektedir.

Buis Portfolyo Önerilen Ayarlar

• Arkadaşlar öne çıkarılmış görseller de sorun yaşamak istemiyorsanuz "Ayarlar>Ortam Ayarları" bölümünden büyük resim boyutunu 600×300 ,orta boyutu 180×100 ,  küçük resim boyutunu ise 50×50 yapınız.Bu sayede görünümler de sorun yaşamazsınız.Ayrıca yazınıza öne çıkarılmış görselinizi atmadan önce büyük resim boyutuna göre net bir şekilde ayarlayın.
• Arkadaşlar tema beraberinde bir tane eklentinin kullanımını gerektiriyor.Yazıların okunma sayılarını göstermek amaçlı "WP-PostViews" eklentisini kurunuz , bunun dışında başka eklentilere gerek yoktur.
• Daha önceden "WP-Pagenavi" eklentisi kullanıyorsanız bu eklentiyi etkisiz hale getirmelisiniz.
• Önerilen logo boyutu 131×35'dir.
• Eğer aktif olarak twitter kullanmıyorsanız "Mini Yazılar" bileşenini tema panelinden kapatmanızı öneririm çünkü bu kısım tema da sorgu sayısını arttırdığı için yavaşlamaya neden olabiliyor.
• Buraya dikkat arkadaşlar eğer anasayfanızın hoş bir görünüme sahip olmasını istiyorsanız wordpress yönetim panelinizden "ayarlar > okuma" sayfasından "En fazla gösterilecek blog sayfası adedi" yazan kısmı 9 veya 12 yapınız.

Arkadaşlar sizlere elimden geldiğince bu gibi temalar yapıp sunmaya devam edeceğim , henüz işin başlarında olduğum için amatörce hatalarım olabilir ancak her şeye rağmen güzel ortaya güzel bir temanın çıktığını düşünüyorum.Emeğimin karşılığı olarak linkimi kaldırmazsanız sevinirim.Temada hiçbir şekilde şifreli bir alan yoktur , iyi kullanımlar dilerim.Tema hakkında ki yorumlarınızı ve V2 sürümünde görmek istediklerinizi yazarsanız sevinirim…

Önemli not arkadaşlar demo olarak vereceğim adrese tam olarak içerik eklemediğim için anasayfası pek hoş gözükmeyebilir ancak site de en az 9 tane içerik olduğu taktirde anasayfa oldukça hoş bir görünüme sahip olacaktır.

Canlı Önizleme | İndir