Yazar: günlük sahibi

WordPress’te SEO Uyumlu Yazı Nasıl Yazılır?

SEO NEDİR?

Seo, Arama Motoru Optimizasyonu (SEO) anlamına gelmektedir. Yani demek oluyor ki internet sitelerinin google, yahoo, yandex, bing gibi arama platformlarında daha iyi sonuç göstermesi amacıyla planlı olarak yapılan işlerin tümüne verilen isimdir.

Eğer bir blogunuz / siteniz var ise ve içerik girişi yapıyorsanız bunların tamamını seo uyumlu yapmak zorundasınızdır. Seo uyumlu yazı yazmak zorundasınız. Aksi takdirde arama motorları içeriklerinizi olması gerektiği gibi indexleyemeyecek ve yazdığınız makaleleri ilgili kitlelerin çok azı görecek çoğunluğu göremeyecektir. İçerik üreten sitelerin neredeyse tamamına yakını artık wordpress alt yapısıyla çalışmakta bu nedenle wordpress sitelerde seo uyumlu yazı nasıl yazılır? sorusunu yazımızın başlığı yaptık.

WordPress’te SEO Uyumlu Yazı Nasıl Yazılır?

SEO, sitenizdeki YAZI sayısıyla doğru orantılı bir şekilde artan bir gelişim göstermektedir. Yazıların sayısı, değeri, özgün olup olmadığı özellikle Google tarafından en önemli kriterler olarak değerlendirilmektedir. Bu nedenle SEO, çok dikkat etmemiz  gereken bir konu ve gelecekte de bu böyle olacağa benziyor. En azından Google Seo kriterlerinde ciddi bir değişikliğe gidene kadar. Önceleri bildiğiniz üzere en güçlü backlinkleri alan , Google gibi arama motorlarının arama sonuç sayfalarında ilk sırada yer alıyordu. Google Panda güncellemesini yaptıktan sonra işler değişti içerik yani yazılar makaleler  backlinkten daha değerli  olmaya başladı. Bu yazımızda wordpress blog sitelerinde SEO uyumlu yazının nasıl yazıldığını örnekleri ile vermeye çalışacağız. Okumaya devam et WordPress’te SEO Uyumlu Yazı Nasıl Yazılır?

Bootstrap Sık Kullanılan CSS Class ve Anlamları

Bootstrap Classları ve Anlamları:

justify-content-center içeriği ortalamak için
no-gutters : sütunlar arası boşluk olmaması için
mb-5 : margin-bottom:5px anlamına gelir alttan 5px boşluk bırakır.
mb-lg-0 : büyük ekranlarda margin bottom 0 yapar.
col-md-6 : 6 sütunluk alan oluşturmak
img-fluid : görseli responsive yapmak için mutlaka img etiketleri içinde kullanılmalıdır.
h-100 : içerik yükseklik olarak tamamını kapsaması için
my-auto : y ekseninde margin’i otomatik olarak ayarlasın. (ortalamak)
mx-auto : x ekseni üzerinde ortalamak
rounded-circle : görseli yuvarlak yapmak
text-muted : yazıyı biraz gri yapmak
social-buttons : sosyal medyaları tanımlarken
list-inline-item : li etiketine tanımlanır, elemanları yanyana dizer.

— Harici CSS Özellikleri:

border-radius:100% : kenarlık çizgisinizi yuvarlak yapmak

Brackets Theme Background İmage Remove – Tema Arka Plan Resmini Kaldırmak

Brackets kod editörünün arka planında yer alan Brackets logosunu kaldırmak için

Help -> Extension Folder Show -> user

yada

Yardım -> Eklentiler Klasörünü Göster -> user

ardından backgroundimage klasöründe yer alan arka plan görselini silin ve yeniden başlatın.

Javascript ile Scroll’a göre CSS Class vermek

Navbar yapımında en çok kullanacağımız yapılardan biri de scrolll aşağı kaydırıldığında gerçekleşecek olaylar zinciridir. Javascript ile CSS vermek, Javascript ile Class vermek,

örnek classımızın içeriği de padding

 $(window).scroll(function(){
 if($(document).scrollTop() > 50) { 
  	$('nav').addClass('shrink');
 	 } else {
  		$('nav').removeClass('shrink');
  		}
})

ornek css

nav.shrink {
	padding: 0;
	background-color:#f74c3c!important;
}

* bu örneğimizde scrollTop 50 den büyük olduğunda shrink classı uygulanmaya başlayacaktır.

Şık Tasarımlar için CSS ile Parallax Efekt Vermek

Ekrandaki resmi birazcık karartarak ve Scrool aşağı kayarken resmin harici alanlarını kullanıcıya yansıtarak şık bir görünüm elde edebilirsiniz. Buna basit parallax efekt diyenler de var soranlara duyurulur 🙂

HTML Kodları:

    <section id="statement" class="section-box">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h4 class="text-black lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolor illo soluta nulla, <br>doloremque necessitatibus dolorem, suscipit omnis et maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h4>
                </div>
            </div>
            </div>
    </section>

Örnek css Kod:
(Aşağıda Örnek linear-gradient kullanımı da bulunmaktadır bu olmadan da parallax yapabilirsiniz.)

#statement {
	background: linear-gradient( rgba(20, 20, 20, .8), rgba(20,20,20, .8)),
    url("../img/ornekbg.jpg");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    background-size: cover;
}

Örnek Görünüm:

Google Font Kullanımı

https://fonts.google.com/ adresinde güzel fontlara rastlamak mümkün peki bunları projelerde nasıl kullanacağız?
bu adrese girdikten sonra kullanmak istediğimiz font/fontları + butonuna tıklayarak sepetimize ekliyoruz sağ tarafta hemnen beliriyor. Aşağıdaki görselden de anlayacağınız üzere 1 nolu bölümü kopyalayıp index.html yada index.php dosyamızda etiketinden önce yapıştırıyoruz. Eğer WordPress tema geliştiricisiyseniz header.php dosyasında etiketinden önce yapıştırmanız gerektiğini hatırlatayım.
Ardından 2 nolu alanı isterseniz body etiketine dilerseniz h1 h2 etiketlerine yada dilediğiniz başka bir etikeyin style.css dosyanızdaki css kodları arasına yapıştırabilirsiniz.

CSS Hover İşlemine Slow Efekti Vermek

Bootstrap ile yapılan yada diğer projelerde mutlaka bir linke yada dive hover uygularız. Hover işleminin tasarımda şık durması için slow efekti ile yani yavaşça gerçekleşmesi gerekir.
Bunun için hover tanımladığımız nesnenin direk kendisine css transition uygulamamız gerekir

Örnek CSS Transition kullanımı;

div:hover {
  width: 300px;
/*Yazılacak standar diğer kodlar*/
}
div {
 transition: all .5s ease-in-out;
}

Diğer transition efektleri:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Resimleri Responsive Yapmak (BOOTSRAP)

Webtasarım yapıyorsanız ve HTML CSS kodu yazıyorsanız Ekran çözünürlüğü değiştiğinde resimlerin ekrana göre tekrar boyutlanması sizin için önemli bir detaydır. Görsellerin otomatik boyutlanması için ekstradan css kodu yazmanıza gerek yok bootsrap kütüphanesini projenize dahil ettiyseniz kullanmanız gereken class img-fluid

örnek kod:

<img src="..." class="img-fluid" alt="Responsive image">

WordPress Çift Sütunlu Kategori Bileşeni Yapmak [ÖRNEK KODLAR]

WordPress için tema yaparken en çok karşılaştığımız konu bileşen yapmaktır. Wordpreste dinamik alanları tasarlama konusunda da aklan en çok gelen sidebar ve bileşen yapmaktır. Bileşen yapmak için mantığını kavramanız gerekir aşağıdaki örnek kodu inceleyerek Çift Sütunlu Kategori Bileşeni yapma konusunda bilgi sahibi olacaksınız hemen işe başlayabilirsiniz.

Okumaya devam et WordPress Çift Sütunlu Kategori Bileşeni Yapmak [ÖRNEK KODLAR]

Temel WordPress Kodları

Kod Günlüğümden merhabalar, WordPress için tema oluştururken yada html to wordpress (entegre) yaparken mutlaka lazım olacak wordpress kodlarını bir araya topladım
Header Çağırma Gösterme, Menü Oluşturma, Footer Çağırma Gösterme, WordPress Sayfa Karakter Kodlaması Tanımlaması, Blog Adı / Site Adı Gösterme vs. daha fazlasını aşağıda topladım yararlı olması dileği ile

Okumaya devam et Temel WordPress Kodları