New Post has been published on adobewordpress ~ güncel tasarım okulu

New Post has been published on http://www.adobewordpress.com/wordpresste-populer-konulari-gosterme-eklentisiz

WordPress’te Popüler Konuları Gösterme (Eklentisiz)

WordPress

sitenizde ziyaretçilerinizin en çok ilgi gösterdikleri yazıları eklenti kullanmadan listelemek mümkün. Bu işlem için loop içerisinde bulunan ve en çok yorum alan konuları

SQL‘den çekmek yeterli. Özetle, bu kodlama aynı zamanda en çok yorumlanan konuları da listelemeniz anlamına geliyor.

Hazırsanız başlayalım.

En çok yorumlanan konuları nasıl gösteririz?

İlk olarak temanızda bu listeyi göstermek istediğiniz alanı seçin. Temanızın bulunduğu dizindeki single.php, sidebar.php veya diğer dosyalardan listelemeyi yapmayı düşündüğünüzü açın ve aşağıdaki kodları ekleyin.

<h2>Popüler Konular</h2>
<ul>
    <?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
    foreach ($result as $post) 
        setup_postdata($post);
        $postid = $post->ID;
        $title = $post->post_title;
        $commentcount = $post->comment_count;
        if ($commentcount != 0)  ?>
            <li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
            <?php echo $title ?></a> <?php echo $commentcount ?></li>
    <?php   ?>
</ul>

SELECT sorgusunun sonundaki 5 rakamı, listelenecek konu sayısını belirtmekte. Bu alanı istediğiniz gibi değiştirebilirsiniz.

Yukarıdakine benzer bir sonuç elde edeceksiniz.

E-Ticaret SEO'yu Daha Etkili Kullanmak İçin 8 İpucu

Tüm yeni e-ticaret siteleri arama motorlarında ilk sayfada yer alan firmalarla rekabet içerisine girerler. Reklam bütçelerine ekstrada yük getirmeden SEO aracılığıyla marka bilinirliliğini artırmanın yollarını hedefleyen girişimciler için hazırladığımız makalemizi dikkate almanızı öneririz.

Web sayfalarımıza en çok trafiği getiren ve katkıda bulunan arama motoru kuşkusuz google. Fakat e-ticaret girişimcileri arama motorlarında başarılı olmak için SEO konusunu nasıl yürüteceklerini bilmiyorlar. Biz bu konuda başarılı olmanız için siz değerli okurlarımıza 8 ipucu paylaşacağız. Bunlar;

Uzun Kuyruklu Anahtar Kelimeler Kullanın

Uzun kuyruklu anahtar kelimeler hem ekonomik hem etkilidir. Mesela bir “elbise” kelimesi yerine “en yeni elbise modelleri” kelimesinin kullanılması “SEO” yerine “Kalıcı SEO Çalışması” kelimelerinin kullanılması satışın daha hızlı gerçekleşmesini sağlamakla beraber sizi ciddi bir ekonomik yükten kurtarır.

image

Ürün Görüntü Optimizasyonu

Arama motorları artık insanlara görsel aramalarda da kolaylık sunmaktadır. Bu sebepten dolayı resimlerinizi optimize etmeniz arama motorları tarafından daha iyi konumlarda yer almasına kolaylık sağlar. Bu konuda dikkat etmeniz gereken konu resimlerinizin isimleri ve alt etiketleridir.

Ürün Listeleme Sayfaları

Ürünlerinizi listeleyebileceğiniz platformlarla iletişim kurmanız ve buralarda yer almanız satışların, ziyaretçilerin ve ciroların artması konusunda katkı sağlayacaktır.

İçerik Optimizasyonu

İçerik arama motorlarının anahtar noktası gibi bir şeydir. E-Ticaret yazılımınızın içerik yönetim alanının gelişmiş olması, size bu imkanı sunması çok önemlidir. Ürünler ile ilgili blog yazıları yazmak ziyaretçi sayınızın artmasına buda hem satışların hem ciroların artmasına sebep olacaktır.

H1 ve H2 Etiketlerin Önemi

Başarılı bir SEO Planlaması için H1 ve H2 etiketlerin yeri çok ayrıdır. Genel olarak H1 etiketi ilgili sayfanın başlığını ve google aramalarıyla ilgili olduğunu belirler. Yukarıda bu ipucunun başlık H2’ye örnektir. Ara başlıklar diye adlandırabiliriz.

Çapa Metin Optimizasyonu

Bir sayfanın başka bir sayfaya bağlanmasında kullanılan anahtar kelime yapısı çapa metin konusunun tanımıdır. Örneğin; otomobil aksesuarları satan firmanın blog sayfasında çelik jant ile ilgili sayfaya yönlendirme yaparken kullanmış olduğu “çelik jant” anahtar kelimesi. Bu anahtar kelime aracılığıyla yönlendirmek yerine çelik jant modellerimizi görmek için burayı tıklayınız cümlesinde tıklayınız kısmına bağlantı vermemiz arama motorları için daha faydalı olmaktadır. Bunu deneyin farkını kısa sürede göreceksiniz.

Sayfa Yükleme Süresi

Modern Dünya yavaş olan hiç kimseyi sevmez. Bu internet sektöründe de artık böyle. İnsanlar geç yüklenen sayfaları sevmiyor ve bunun internet bağlantısından kaynaklanmadığını biliyor. E-ticaret sitelerinde sayfa hızınız çok önemli. Müşterileri kaçırmamak için sitenizi optimize ediniz. Bunun için kaynak isteyen arkadaşlar benimle iletişim kurabilir.

Google Analytics Veri Değerlendirilmesi

SEO vaka çalışmaları genellikle google’da toplanmıştır. Google Analytics ile ziyaretçilerinizin web sayfanızda ne kadar kaldığını, hangi sayfalarda, hangi içerikleri gezindiğini ve daha bir çok veriyi analiz edebilirsiniz. Unutmayın her şey bu tür analizlerle başlar. Eğer başarılı bir analiz yapabilirseniz başarı kaçınılmaz olur.

Değerli okurum e-ticaret seo ile ilgili yazdığım makalemi okumak için bu bağlantıya tıklayınız. Okumanızı kesinlikle öneririm.

New Post has been published on adobewordpress ~ güncel tasarım okulu

New Post has been published on http://www.adobewordpress.com/javascript-ile-rastgele-veri

JavaScript ile Rastgele Veri

Merhaba arkadaşlar. Bugün

JavaScript ile rastgele veri üreten bir döngü hazırlayacağız. Bu işlem için rasgele veri yayınlayan bir fonksiyon ve gösterilmesini istediğimiz kayıtları hazırlayacağız. Bunu hazırlarken Dave Rupert’ın eğlenceli örneği üzerinden gideceğiz.

Bir proje üzerine yoğun bir şekilde çalışırken sizi arayarak dışarı çağıran arkadaşlarınız artık sorun değil. Mazeret üretici hizmetinizde !


Nasıl yapılır?

İşlemlerimize JavaScript ile başlıyoruz. Daha sonrasında CSS ve HTML kodlarımızı da ekleyeceğiz. Aşağıdaki kodları <script></script> tagları içerisine eklemeniz yeterli olacaktır. Script’in html kodlarımızın en altında olması gerekiyor.

İlk olarak listelenmesi için verileri hazırlıyoruz. Bunları var mazaretler olan yaratıyoruz.

var mazaretler = [
'Saçımı yıkamam gerek.',
'Halam kasabada.',
'Halam çok hasta.',
'Patronum ondan haber beklememi söyledi.',
'Klimamı tamir etsin diye bir tamirci çağırdım.',
'Hava alanına bir arkadaşımı bırakmak zorundayım.',
'Geçen hafta bir kaza geçirdim ve trafiğe çıkmaya hazır değilim.',
'Daha önce orada yedim ve gıda zehirlenmesi geçirdim.',
'Kafam çok karışık. Daha sonra açıklarım.',
'Babam bir polis.',
'Ben bu şey için gönüllü değilim.',
'Hava biraz kötü galiba.',
'Daha önce ayağımı kesmiştim. Ayakkabı giyince içi kan ile doluyor.',
'Annem kuduz oldu.',
'Ben zaten sarhoşum. Siz keyfinize bakın.',
'Bu gece YouTube gecesi.',
'eBay\'da takip ettiğim bir açık arttırma var.'
];

Şimdi her yenilemede farklı mazeret çıkmasını sağlayan düğmeyi ve fonksiyonu oluşturuyoruz.

var bttn = document.getElementById('yenile');
var mazeret = document.getElementById('mazeret');
var rasgele = 0;

var mazeretbul = function(){
rasgele = Math.floor(Math.random()*mazaretler.length);
mazeret.innerHTML = mazaretler[rasgele];
};

mazeretbul();

bttn.addEventListener('click',function(e){
e.preventDefault();
mazeretbul();
});

Mazeretimizi block haline getirelim. Ve yazı rengi için yeşil ayarlayalım. İşte kullanacağımız tek satırlık CSS kodu :

#mazeret{display:block; color: green;}

Ve son olarak HTML kodları

Gelemem çünkü...
<span ></span>
<button >Mazeret Üret</button>

Örneğimiz hazır.

Kapanış

Web tasarımı üzerine araçlar hazırlarken anlaşılır örnekler seçmeye dikkat ediyoruz. Mazeret ölçer de gayet eğlenceli ve basit bir örnek. Dave amcanın bizler için hazırladığı bu küçük örnek için ona teşekkür ederiz. Bir sonraki makalemizde görüşmek üzere tabii bir mazeretiniz olmazsa…

New Post has been published on adobewordpress ~ güncel tasarım okulu

New Post has been published on http://www.adobewordpress.com/responsive-akordiyon-collapsible

Responsive Akordiyon (Collapsible)

Bu makalemizde hem metin hem de görsel içeriklerinizi şık bir şekilde sunmanızı sağlayan akordiyon tasarımı hazırlayacağız. Bu yapı açılabilir/kapanabilir (collapsible) diye de isimlendirilmekte.

HTML5 elemanlarını CSS3 ve jQuery desteğiyle şekillendireceğimiz bu tasarım aynı zamanda liquid yapıda. Yani tüm taşınabilir cihazlara (responsive design) uyum gösteriyor.

ÖRNEĞİ GÖRÜNTÜLE

HTML5, CSS3 ve jQuery ile Açılır/Kapanır Akordiyon

Akordiyon tasarımlar genellikle uzun makaleleri küçük bir alanda sunmak için kullanılmakta. Google’ın Material Design‘ı da bu yapıya benzer tasarımlarla UX tarafında devrimler yaşatıyorken biz de konuya değinmek istedik.

Çok önceleri bu konuya benzer, sadece görsel sunumu yapabileceğiniz bir tasarımı da sizlerle paylaşmıştık.

Sadece CSS ile Tab Mantığı Kullanarak Listeleme

Hazırsanız başlayalım.

HTML Kodları

İlk olarak bütün öğeleri çevreleyecek bir section oluşturalım. Bu öğeye de web sayfanızdaki diğer sectionlarla karışmasını önlemek için .aw-accordion classını verelim. İçerisine de one, two, three ve four olmak üzere 4 adet akordiyon ekleyelim. Daha sonra bu alanların hepsini CSS ve jQuery ile yönetiyor olacağız.

×Kapat Şuan hazırlayacağımız yapı makalelerin başında kullanılan resimleri otomatik olarak stilize edip tasarıma uyarlamakta. Ancak hiç resim kullanmadan, sadece içeriklerle de akordiyonu doldurabilirsiniz.

Tüm HTML kodlarımız şunlar :

<section class="aw-accordion">
    <div class="one">
        <h1>1.Başlık</h1>
        <span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
    </div>

    <div class="two">
        <h1>2.Başlık</h1>
        <span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
    </div>

    <div class="three">
        <h1>3.Başlık</h1>
        <span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
    </div>
    
    <div class="four">
        <h1>4.Başlık</h1>
        <span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
    </div>
</section>

Şimdi işe biraz stil katalım.

CSS Kodları

Başlangıç için .aw-accordion classını tanımladığımız sectionı düzenleyelim. Aslına bakarsanız section yapısının aşağıdaki genişlik tanımına ihtiyacı yok. Ancak hazırlayacağımız örneği özgünleştirirken alttaki kodu zaten yazacağınızı bildiğimiz için ekleme gereği duyduk.

section.aw-accordion
  width:100%; 

Şimdi akordiyonun 4 panelinde ortak olan özellikleri ekleyelim. Örneğin 23%’lük genişliği 1%’lik padding ile birleştirerek her öğeye 25% oranında toplam genişlik katabiliriz. Böylece 25×4=100%, yani tam ekran genişliğine erişiriz. Bu küçük matematik hesaplarına daha sonra jQuery tarafında da değineceğiz.

Ayrıca güzel bir transition ekleyelim. Akordiyonun üzerine gelindiğinde imlecin text işaretçisine dönüşmesini engellemek için de bir cursor tanımı yapabiliriz.

section.aw-accordion .one, 
section.aw-accordion .two, 
section.aw-accordion .three, 
section.aw-accordion .four
  font-size:14px;
  width:23%;
  float:left;
  height:230px;
  display:inline-block;
  z-index:1;
  position:relative;
  overflow:hidden;
  padding:1%;
  transition:all 200ms cubic-bezier(0.645, 0.575, 0.090, 1.000);
  cursor: default;

Şimdi, muhtemelen herkesin merak ettiği geçişli yazı (text gradient) efektine geliyoruz. Bu konuyu daha önce bol bol konuştuk. Adobewordpress takipçileri yazılara gradient uygulamayı çok iyi biliyorlar. Yeniler veya bilmeyenler için :

CSS ile Yazı Arka Planı : text-fill-color
CSS ile Yazılara Gradient Efekti

×Kapat Üstteki bağlantılar sadece bilgilendirme amaçlıdır.

Devam edelim. İşte kodlarımız :

section.aw-accordion .one span, 
section.aw-accordion .two span, 
section.aw-accordion .three span, 
section.aw-accordion .four span
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  height:100%;
  display:table;

Yazıların üzerlerine gelindiğinde gradient tasarımları gitmeli.

section.aw-accordion .one:hover span,
section.aw-accordion .two:hover span,
section.aw-accordion .three:hover span,
section.aw-accordion .four:hover span
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

Şimdi herbir akordiyon öğesinin rengini belirleyelim.

section.aw-accordion .one
  background-color:#3498db;
  border-radius:10px 0 0 10px;


section.aw-accordion .two
  background-color:#e74c3c;


section.aw-accordion .three
  background-color:#1abc9c;


section.aw-accordion .four
  background-color:#f1c40f;
  border-radius:0 10px 10px 0;

Üzerlerine gelindiğinde, eğer içerik uzunsa scroll gözükmeli.

section.aw-accordion .one:hover, 
section.aw-accordion .two:hover, 
section.aw-accordion .three:hover, 
section.aw-accordion .four:hover
  overflow-y: auto;

Şimdi de tasarımımıza özel bir scrollbar çubuğu hazırlayalım.

section.aw-accordion div::-webkit-scrollbar   
    width: 12px;  
  
section.aw-accordion div::-webkit-scrollbar-track   
    background-color: rgba(1, 1, 1, .1);
  
section.aw-accordion div::-webkit-scrollbar-thumb   
    background-color: rgba(1, 1, 1, .2);
  
section.aw-accordion div::-webkit-scrollbar-thumb:hover   
    background-color: rgba(1, 1, 1, .3);
  

Akordiyon resimlerini ve başlıklarını düzeltelim.

section.aw-accordion div img
  float:left; 
  margin:0 10px 0 0;
  border:3px solid rgba(255, 255, 255, .2);
  box-shadow:0 0 15px rgba(1, 1, 1, .1);
  -webkit-box-shadow:0 0 15px rgba(1, 1, 1, .1);
  -moz-box-shadow:0 0 15px rgba(1, 1, 1, .1);
  width:150px;


section.aw-accordion div img,
section.aw-accordion div h1
  opacity:.3; 
  transition:all .3s


section.aw-accordion div:hover img,
section.aw-accordion div:hover h1
  opacity:1;


section.aw-accordion div h1
  margin:0 0 5px;
  font-weight:300; 
  color:white;

1024 ve 768 piksel altındaki cihazlara özel responsive tasarımlar oluşturalım.

@media (max-width:1024px)
  section.aw-accordion .one,
  section.aw-accordion .two,
  section.aw-accordion .three,
  section.aw-accordion .four
    font-size:12px;
  

  section.aw-accordion div img
    width:100px;
  

  section.aw-accordion div h1
    font-size:120%
  


@media (max-width:768px)
  section.aw-accordion div img
    width:60px;
  

  section.aw-accordion div h1
    font-size:100%
  

Tasarımımız hazır. Şimdi işe biraz fonksiyonelite katalım.

jQuery Kodları

İşin jQuery tarafında da farenin akordiyon üzerindeki hareketini takip edeceğiz. Genişlikleri de bu şekilde yöneteceğiz. Ayrıca hover edilen bir akordiyonun scroll ile aşağı inmesi halinde her mouseout aşamasında scrollTop konumunu işleyeceğiz. İşte jQuery kodlarımız.

$( "section.aw-accordion div" ).mouseover(function() 
  $(this).css('width','50%');
  $(this).siblings('div').css('width','14%');
);

Üzerine gelinen öğeyi 50% genişliğe çekiyoruz. Sağ ve soldan 1% değerdeki padding bize toplamda 52% oranında genişlik vermekte. Geriye kalan 48% lik oranıda 16%(her biri 14% olan akordiyonları %2 şer padding ile büyütüyoruz) genişliğinde 3’e bölüyoruz.

Bu kadar!

Kapanış

Birçok Adobewordpress takipçisinden derslerde Türkçe terimler kullanmadığımız için tepkiler almaktayız. Yine benzer oranda yabancı takipçimiz de niye İngilizce hazırlamadığımız yönünde şikayetlerini bildirmekte. Özellikle video derslerimiz için.

İngilizce içerik üretmek gibi radikal kararı almayı henüz düşünmüyoruz. Ancak tanımlarımızın İngilizce olması, Adobe derslerinin İngilizce dili ayarlanmış programlarla sürdürülüyor olması herkesin faydasına. Hem sizlerin teknik dile aşina olmanızı hem de yabancı takipçilerimizin süreci anlamasını sağlıyor.

Bu makalemizde de yabancı terimler geçtiği için fikirlerimizi sizlerle paylaşmak istedik. Anlayışınız için teşekkürler.

Text
Photo
Quote
Link
Chat
Audio
Video