admin, Author at Alaoğlu Tasarım | Fikirlerinizi Tasarlar | Web Tasarım & Grafik Tasarım Hizmetleri | Sayfa 2 / 3

Bootstrap Navbar’a Alt Menü Ekleme (Multi Level)

Bootstrap‘in mobil destekli menü sistemi Navbar varsayılan haliyle (3.0 versiyonu itibariyle) sadece tek bir alt menüyü desteklemekte. Bir dizinden fazla dallanan bir menünüz varsa Bootstrap’in Navbar yapısı sizin ihtiyacınızı karşılamayacaktır.

Bugün sizlere Bootstrap’in Navbar menü yapısına çoklu alt menüdesteğinin nasıl ekleneceğini anlatacağız.

Bootstrap Navbar’a çoklu alt menü nasıl eklenir?

Birlikte basit bir menü örneği oluşturalım. Aşağıdaki kod bütünü klasik bir Bootstrap Navbar‘ın alt menü ile işlenmiş halidir.

HTML Kodları

<div class="navbar navbar-default"role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle"data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      <a class="navbar-brand"href="#">Adobewordpress.com</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Navbar Level <b class="caret"></b></a>
          <ul class="dropdown-menu multi-level">
            <li class="dropdown-submenu">
              <a href="#" class="dropdown-toggle"data-toggle="dropdown">Alt Menü #1</a>
              <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Alt Menü #2</a>
                  <ul class="dropdown-menu">
                    <li class="dropdown-submenu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Alt Menü #3</a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Alt Menü #</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

Sırada CSS kodlarımız var. Alt menülerimizi görünür kılacağız.


CSS Kodları

.dropdown-submenu {
    positionrelative;
}
 
.dropdown-submenu>.dropdown-menu {
    top0;
    left100%;
    margin-top-6px;
    margin-left-1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
 
.dropdown-submenu:hover>.dropdown-menu {
    displayblock;
}
 
.dropdown-submenu>a:after {
    displayblock;
    content" ";
    floatright;
    width0;
    height0;
    border-colortransparent;
    border-stylesolid;
    border-width5px 0 5px 5px;
    border-left-color#ccc;
    margin-top5px;
    margin-right-10px;
}
 
.dropdown-submenu:hover>a:after {
    border-left-color#fff;
}
 
.dropdown-submenu.pull-left {
    floatnone;
}
 
.dropdown-submenu.pull-left>.dropdown-menu {
    left-100%;
    margin-left10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

Böylece menünün seviyeler halinde kırılmasını sağlamış oluyoruz.

Bootstrap’e Sol Menü Eklemek

Bootstrap 3‘ün en hissedilen eksikliklerinden birisi sol menü tasarımının olmaması. Ancak bu yapıyı kütüphaneye katan onlarca ek geliştirme internette dolaşmakta. Bu tasarımların en iyilerinden birisi de David Miller tarafından geliştirilmiş Simple Sidebar isimli çalışma.

Bu makalemizde sizlerle birlikte “Bootstrap’e nasıl sol menü eklenir?” sorusuna cevap arayacağız.

Bootstrap’e nasıl sol menü eklenir?

David’in GitHub üzerinden blackrockdigital kullanıcı adıyla yayınladığı Simple Sidebar‘ın çalışma prensibi gayet basit. Birkaç satır CSS kodundan oluşan ek bir JavaScript geliştirmesine ihtiyaç duymuyor.

İlk olarak projemizde bulunan bootstrap.css’in altına simple-slider.cssdosyasını eklememiz gerekiyor.

<link href="css/simple-sidebar.css"rel="stylesheet">

Şimdi yapmamız gereken şey ise sayfamızı #wrapper id’sine sahip bir elemanın içerisine almak. Sayfa içeriklerimiz ise #page-content-wrapper id’sine sahip bir başka elemanın içerisinde yer alacak. Daha açıklayıcı olmak için bir örnek hazırlayalım :

HTML Kodları

<!-- STATIC LAYOUT ENDS -->
<div id="wrapper">
 
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Bootstrap Sol Menu
                </a>
            </li>
            <li>
                <a href="#">Link #1</a>
            </li>
            <li>
                <a href="#">Link #2</a>
            </li>
            <li>
                <a href="#">Link #3</a>
            </li>
            <li>
                <a href="#">Link #4</a>
            </li>
            <li>
                <a href="#">Link #5</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->
 
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Simple Sidebar</h1>
                    <p>Tüm sayfa içeriklerinin <code>#page-content-wrapper</code> içerisinde olmasına dikkat ediniz.</p>
                    <a href="#menu-toggle"class="btn btn-default" id="menu-toggle">Menü Aç/Kapa</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->
 
</div>
<!-- /#wrapper -->

jQuery Kodları (Opsiyonel)

Eğer sizde üstteki örnekteki Menü Aç/Kapa butonunun fonksiyonel olarak çalışmasını istiyorsanız aşağıdaki jQuery kodlarını kullanabilirsiniz.

$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");

 

});

iPhone Mesajlar Ekranı

Bugün sizlerle birlikte çok şık ve eğlenceli bir mesaj panosu tasarımıyapacağız.

iPhone‘un şık ve kullanışlı mesajlaşma ekranı hem sadeliği hem de kolay kullanılabilir olması sebebiyle izini sürebileceğimiz başarılı tasarımlardan birisi. Peki bu yapıyı web ortamına nasıl aktaracağız? HTML5 ve CSS3‘ün güçlendirilmiş yeni teknikleri ve jQuery‘nin fonksiyonelitesiyle bu iş sandığınız kadar zor olmayabilir.

HTML5, CSS3 ve jQuery ile “iPhone Mesajlar Ekranı” nasıl yapılır?

Kendinizi geliştirmek ve web tasarımının her noktasına temas etmek istiyorsanız doğru makaleyi okumaktasınız.

Bu yazımızda CSS, HTML ve JavaScript‘in gücünü bir arada kullanacağız. İlk olarak HTML ile iskeletimizi çıkaracağız, hemen arkasından da bu iskelete CSS ile tasarım giydireceğiz. Sonrasında da yapının çalışmasını sağlamak için JavaScript kodlarımızı ekleyeceğiz.

HTML Kodları

Aşağıdaki kod örnekte kullandığımız yapıyı barındırmakta. Yani içerisinde 5 örnek statik mesaj bulunuyor. Tek tek araya girip kodları bölmektense eklediğimiz yorum satırlarıyla ilgili satırların ne yaptıklarını sizinle paylaşacağız.

<!-- Çerçevemiz chat classına sahip bir form öğesi -->
<form class="chat">
  <!-- Aşağıdaki span sayesinde yeni mesaj gönderirken yüklenme barı oluşturacağız -->
  <span></span
  <!-- Artık mesajlarımızı göstereceğimiz ilk ekranı tanımlayalım. Adobewordpress id'sine sahip elemanda dikey scroll desteğini ileride CSS tarafında ekleyeceğiz -->
  <div class="messages" id="adobewordpress">
    <!-- Mesaj örneği BAŞLANGIÇ -->
    <div class="message">
      <div class="myMessage">
        <p>It looks beautiful!</p>
        <date>08.03.2016  14:30:7</date>
      </div>
    </div>
    <!-- Mesaj örneği Bitiş -->
    <div class="message">
      <div class="fromThem">
        <p>It looks like the iPhone message box.</p>
        <date>08.03.2016  14:31:22</date>
      </div>
    </div>
    <div class="message">
      <div class="myMessage">
        <p>Yep, is this design responsive?</p>
        <date>08.03.2016  14:33:32</date>
      </div>
    </div>
    <div class="message">
      <div class="myMessage">
        <p>By the way when I hover on my message it shows date.</p>
        <date>08.03.2016  14:36:4</date>
      </div>
    </div>
    <div class="message">
      <div class="fromThem">
        <p>Yes, this is completely responsive.</p>
        <date>08.03.2016  14:37:12</date>
      </div>
    </div>
  </div>
  <!-- Yeni mesaj eklememizi sağlayan form öğlerini de ekleyelim -->
  <input type="text" placeholder="Your message">
  <input type="submit" value="Send">
</form>

Sırada bu iskelete tasarım giydirmek var.


CSS Kodları

İşin en zevkli kısmına geldik. iPhone bu ekranda 3 tip renk kullanıyor. Yeşil, gri ve beyaz. Bu renklerimizi üstte tanımladığımız iskelete ekleyeceğiz.

İlk satırımızda Google Web Fonts üzerinden Open Sans yazı tipini çağıralım.

Ama başlangıçta form.chat içerisinde her şeye box-sizing ve transitiontanımlayalım. Buradaki * tüm öğeleri seçmemizi sağlıyor.

form.chat *{
  transition:all .5s;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

Genel iskeletimizi tasarlayalım. Fare imlecini normalleştirelim. Öğeyi içine koyulduğu relative yapının şeklini alacak (responsive) hale getirelim. Daha sonra da gerçekçiliği arttırmak için yazıların seçilebilir özelliklerini kaldıralım.

form.chat {
  margin:0;
  cursor:default;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  -webkit-touch-callout: none/* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;   
}

Yeni mesaj gönderildiğinde üst kısımda yüklenecek spinner‘ı tanımlayalım. En son animasyonu da yazacağız.

form.chat span.spinner{
  -moz-animation: loading-bar 21;
  -webkit-animation: loading-bar 21;
  animation: loading-bar 21;
  displayblock;
  height2px;
  background-color#00e34d;
  transition: width 0.2s;
  position:absolute;
  top:0left:0right:0;
  z-index:4
}

Mesaj listesinin uzaması halinde çıkacak scroll bar‘ın stilini yönetelim.

form.chat ::-webkit-scrollbar {width3pxheight:1px;transition:all .5s}
form.chat ::-webkit-scrollbar-track {background-colorwhite;}
form.chat ::-webkit-scrollbar-thumb {
  background-color#bec4c8
  border-radius:3px;
}

Her bir mesaj tasarımını stabil hale getirelim. Yatay taşan kısımları yok edelim. Dikeyleri ise scroll ile gösterelim. En alta da form öğelerini ayrıştırmak için küçük bir border koyalım.

form.chat .messages{
  display:block;
  overflow-x: hidden;
  overflow-y: scroll;
  position:relative;
  height:90%;
  width:100%;
  padding:2% 3%;
  border-bottom:1px solid #ecf0f1;
}

Şimdi mesajların çerçevesi içerisinde barının birim mesaj stilini yönetelim. Kenarlarına küçük bir padding verdikten sonra içlerindeki paragrafların marginlerini silelim. Uzun mesajlar yazılır diye de break-word kullanarak doğru kesme işlemleri yapalım.

form.chat .message{
  display:block;
  width:99%;
  padding:0.5%;
}
 
form.chat .message p{
  margin:0;
}
 
form.chat .myMessage,
form.chat .fromThem {
  max-width50%;
  word-wrap: break-word;
  margin-bottom20px;
}

Mesajların üzerine gelindiğinde alacakları stili tanımlayalım. Tabii bu tanımlar büyük ekranlar için. Mobil cihazda ileride tanımlayacağımız responsive stiller aktif olacak.

form.chat .message:hover .myMessage{
  transform: translateX(-130px);
}
 
form.chat .message:hover .fromThem{
  transform: translateX(130px);
}
 
form.chat .message:hover date {
  opacity: 1;
}

Şimdi normal mesaj stilini atayalım.

form.chat .myMessage,.fromThem{
  positionrelative;
  padding10px 20px;
  colorwhite;
  border-radius: 25px;
  clearboth;
  font400 15px 'Open Sans'sans-serif;
}
 
form.chat .myMessage {
  background#00e34d;
  color:white;
  float:right;
  clear:both;
}

Sırada mesaj kutucuklarının yanındaki küçük ok benzeri işaretçileri eklemek var. CSS’in before ve after selectorleriyle bu iş çok basit.

form.chat .myMessage:before {
  content"";
  positionabsolute;
  z-index1;
  bottom-2px;
  right-7px;
  height19px;
  border-right20px solid #00e34d;
  border-bottom-left-radius: 16px 14px;
  -webkit-transform: translate(0-2px);
  transform: translate(0-2px);
}
 
form.chat .myMessage:after {
  content"";
  positionabsolute;
  z-index1;
  bottom-2px;
  right-56px;
  width26px;
  height20px;
  backgroundwhite;
  border-bottom-left-radius: 10px;
  -webkit-transform: translate(-30px-2px);
  transform: translate(-30px-2px);
}
 
form.chat .fromThem {
  background#E5E5EA;
  colorblack;
  floatleft;
  clear:both;
}
form.chat .fromThem:before {
  content"";
  positionabsolute;
  z-index2;
  bottom-2px;
  left-7px;
  height19px;
  border-left20px solid #E5E5EA;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0-2px);
  transform: translate(0-2px);
}
 
form.chat .fromThem:after {
  content"";
  positionabsolute;
  z-index3;
  bottom-2px;
  left4px;
  width26px;
  height20px;
  backgroundwhite;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px-2px);
  transform: translate(-30px-2px);
}

Tarih gösterdiğimiz alanları da hazırlayalım.

form.chat date {
  position:absolute;
  top10px;
  font-size:14px;
  white-space:nowrap;
  vertical-align:middle;
  color#8b8b90;
  opacity: 0;
  z-index:4;
}
 
form.chat .myMessage date {
  left105%;
}
 
form.chat .fromThem date {
  right105%;
}

Form öğelerimizi şekillendirelim. Yanyana duran bir text inputumuz ve submit butonumuz olacak.

form.chat input{
  font400 13px 'Open Sans'sans-serif;
  border:0;
  padding:0 15px;
  height:10%;
  outline:0;
}
 
form.chat input[type='text']{
  width:73%;
  float:left;
}
 
form.chat input[type='submit']{
  width:23%;
  background:transparent;
  color:#00E34D;
  font-weight:700;
  text-align:right;
  float:right;
}

Sırada tasarımımızı responsive kılacak media satırlarımız var. Böylece büyük ekranlarda mesajın sağında gözüken tarih bilgileri mesajın üstüne taşınmış oluyor.

@media (max-width768px){
  form.chat .myMessage,.fromThem{
    font-size:12px;
  }
  
form.chat .message:hover .myMessage{
    transform: translateY(18px);
    -webkit-transform: translateY(18px);
  }
 
  form.chat .message:hover .fromThem{
    transform: translateY(18px);
    -webkit-transform: translateY(18px);
  }
  
  form.chat .myMessage date,form.chat .fromThem date {
    top-20px;
    left:auto;
    right:0;
    font-size:12px;
  }
  
  form.chat .myMessage,
  form.chat .fromThem {
    max-width80%;
  }
}

Son olarak CSS ile tanımlayacağımız spinner animasyonunuhazırlayalım.

@-moz-keyframes loading-bar {
  0% {
    width0%;
  }
  90% {
    width90%;
  }
  100% {
    width100%;
  }
}
 
@-webkit-keyframes loading-bar {
  0% {
    width0%;
  }
  90% {
    width90%;
  }
  100% {
    width100%;
  }
}
 
@keyframes loading-bar {
  0% {
    width0%;
  }
  90% {
    width90%;
  }
  100% {
    width100%;
  }
}

Bu kadar. Son olarak JavaScript kodlarımızı ekleyelim.

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript"src="http://code.jquery.com/jquery-latest.min.js"></script>

Burada yapacağımız işlem yeni mesaj gönderildiğinde eklenen mesajı ekrana eklemek ve yukarıdaki spinner’ı çalıştırmak. Bunun yanında da son mesajın gözükür olması için scroll’u otomatik olarak en alta çekmek.

Yine kod içerisinde yorum satırlarıyla süreci anlatıyor olacağız.

/* Adobewordpress id'sine sahip öğenin scrollunu en alta çekmemizi sağlayan fonksiyonumuz */
function scrollDown(){
  var focusBottom = document.getElementById("adobewordpress");
  focusBottom.scrollTop = focusBottom.scrollHeight;
}
 
/* Eğer mesaj yazıldıktan sonra submit düğmesine değil de ENTER tuşuna basılırsa formun iletilmesini sağlayalım */
$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $('form.chat input[type="submit"]').click();
    }
});
/* Form kullanılırsa çalışacak temel click fonksiyonu */
$('form.chat input[type="submit"]').click(function(event){
  event.preventDefault(); // Sayfanın yeniden yüklenmesini engelleyelim.
  var message = $('form.chat input[type="text"]').val(); // Yazılan mesajı message değişkenine kaydedelim
  if( $('form.chat input[type="text"]').val()) { // Eğer mesaj yazılmışsa
    var d = new Date(); // Mesaj yazılma tarihini gösterelim
    var clock = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    var month = d.getMonth()+1;
    var day = d.getDate();
    var currentDate = 
        ((''+day).length<2 ? '0' '') + day + '.' +
        ((''+month).length<2 ? '0' '') + month + '.' +
        d.getFullYear() +'&nbsp;&nbsp;'+ clock;
    /* Aşağıda mesajı ve yazılma tarihini panoya ekliyoruz */
    $('form.chat div.messages').append('

+message+'

+currentDate+'

);

    setTimeout(function() {
      $('form.chat > span').addClass('spinner'); // Yukarıdaki yeşil bar (spinner) aktif olur
    }, 100);
    setTimeout(function() {
      $('form.chat > span').removeClass('spinner'); // Spinner kapanır
    }, 2000);
  }
  $('form.chat input[type="text"]').val(''); // Mesaj yazdığımız input'un value değeri sıfırlanır
  scrollDown(); // Pano ekranı aşağı kaydırılır
});

Bitirmeden Önce

Tasarladığımız arayüz içerisine koyulan herhangi bir öğenin şeklini alabilecek şekilde kullanıma hazır. İster örnek ekranda yaptığımız gibi bir iPhone ekranı içerisine sıkıştırın, isterseniz de boş bir HTML ekranına yerleştirerek telefonunuz veya herhangi bir akıllı cihazla keyfini sürün.

Fareyle Birlikte Hareket Eden Arkaplan Resmi

JavaScript ile fare hareketlerini takip etmek çok kolay. Geçtiğimiz sene bu fonksiyonu kullanarak fare pozisyonuna göre hareket eden yazı arka planı hazırlamıştık.

Bugün sizlerle birlikte yepyeni bir örnek, fare pozisyonuna göre dinamik bir şekilde hareket eden arkaplan resmi hazırlayacağız.

Fareyle bir hareket eden arkaplan resmi nasıl yapılır?

İlk aşamada ihtiyacımız olan tek şey arkaplanı kullanacağımız bir eleman.

HTML Kodları

Daha önce de dediğimiz gibi ihtiyacımız olacak tek şey sıradan bir div elemanı.

<div class="dinamik-background"></div>

Şimdi sırada CSS kodlarımız var.


CSS Kodları

CSS kodlarımız ile bu yapıyı ekranımıza yerleşecek şekilde boyutlandıralım.

body,html{
div.dinamik-background{
    background:url('http://www.alaoglutasarim.com/duvar-kagitlari/wallpaper-307.jpg'-25px -50px;
    background-size: calc(100% 50px);
    width1280px;
    height720px;
}

Görselinizin boyutuna göre piksel veya yüzde bazlı boyutlandırma yapabilirsiniz.

JavaScript Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript"src="http://code.jquery.com/jquery-latest.min.js"></script>

Yapımızı document.ready içerisine aldıktan sonra işleme başlıyoruz.

$(document).ready(function() {
    var seviye = 25;
    var yukseklik = seviye / $(window).height();
    var genislik = seviye / $(window).width();
    $("body").mousemove(function(e){
        var sayfaX = e.pageX - ($(window).width() / 2);
        var sayfaY = e.pageY - ($(window).height() / 2);
        var yenidegerX = genislik * sayfaX * -1 - 25;
        var yenidegerY = yukseklik * sayfaY * -1 - 50;
        $('div.dinamik-background').css("background-position", yenidegerX+"px     "+yenidegerY+"px");
    });
});

Üstteki kod içerisinde yorum satırı olarak bıraktığımız iki tane selector tanımı mevcut. Şimdi biraz bu tanımları açalım.

  • Selector 1 : Fare hangi alanda oynadığında arkaplan resminin konumunu dinamik olarak değiştirmek istersiniz? Bu alana o elemanı yazıyoruz. Örneğin şuanki haliyle ilerlerseniz ekranın body içerisinde herhangi bir yerde imleç yer değiştirirse resim hareket özelliği kazacaktır.
  • Selector 2 : Arkaplan resminin nereye uygulanacağını belirtiyoruz.

Böylece çalışmamız bitmiş oluyor.

CSS ile Açılıp Kapanabilen Haber Kutucukları

Bugün sizlerle birlikte görsel ve metinlerinizi bir arada şık bir şekilde sergilemenizi sağlayacak haber kutucukları tasarlayacağız. Mobil cihaz desteği de bulunan bu tasarım Material Design ruhunu da taşımaktadır.

CSS ile animasyon ile açılıp kapanabilen haber linkleri nasıl oluşturulur?

Görsellerimizi dinamik olarak atıyabileceğimiz bir haber özeti kutucuğu yapmak için CSS’in birçok özelliğini kullanacağız. Ancak şık ve göze hoş gelen bir görüntü yaratmak için küçük animasyonlara ve renk geçişlerine yer vermemiz gerekiyor. İlk olarak HTML kodlarımızı yazarak başlayalım.


HTML Kodları

Öğemizi bir section elemanı üzerinden hazırlayalım. İçerisine kolay yönetebileceğimiz ek bir div elemanı ekleyerek perdeleme ve ek işlevlerimizi tamamlayalım. Onun içerisinde başlıkları koyacağımız bir h2, makale özetini yazacağımız bir

p

ve detay butonunu barındıracak bir a bulunmalı.

<section class="panel" style="background-image:url(haber_resmi.jpg)">
    <div>
        <h2>Haber Başlığı</h2>
        <p>Haberin kısa özetini bu alanda göstereceğiz. Bu kısım, metin uzarsa otomatik olarak scrollbar çıkacak şekilde tasarlanmalı. Hemen altına da detaylara giden bir buton koymalıyız.
        </p>
        <a href="#">Devamını Oku</a>
    </div>
</section>

Üstteki panel.section öğemize inline olarak background yani haber resminizi ekleyebilirsiniz.


CSS Kodları

Uzun kod satırlarımızı burada barındıracağız. Gözünüz korkmasın. Olabildiğince detaylı ve açıklayıcı bir şekilde ilerleyeceğiz. İlk olarak Google Web Fonts üzerinden seçtiğimiz yazıtipini CSS dosyamıza ekleyelim. Daha sonra da section öğemizi tanımlayalım.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,100&subset=latin,latin-ext);

Artık Roboto yazıtipini kullanabiliriz. Şimdi gelelim section.panel‘i tanımlamaya. Inline olarak dizilebilen, statik bir yüksekliğe sahip ve geçiş efektleri barındıran bir öğeye ihtiyacımız var. Alt kısma biraz gölge ekleyerek materyal yapımızı oluşturabiliriz.

section.panel {
  display: inline-block;
  background-size100% 100%;
  background-positioncenter center;
  height300px;
  positionrelative;
  overflowhidden;
  transition: background .5s;
  z-index1;
  floatleft;
  -moz-box-shadow: 3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow: 0 5px 10px 2px rgba(1110.1);
  width19.5%;
  margin0 .25% 10px;
}

Şimdi aynı panel öğesi için bir :after tanımı yaparak üzerine 0.5 alpha kanalı barındıran bir siyah perde atalım.

section.panel:after {
  background-color: rgba(1110.5);
  positionabsolute;
  top0;
  right0;
  left0;
  bottom0;
  z-index2;
  content'';
  transition: background .5s;
}    

Panelin üzerine gelindiğinde ya da mobilde tıklandığında arkaplan rengi ve pozisyonu değişmeli.

section.panel:hover {
  background-size120% 120%;
  background-positioncenter 100%;
}

Perdemizinde rengini aktif olduğunda biraz açalım.

section.panel:hover:after {
  background-color: rgba(1110.3);
}

Şimdi section içerisine koyacağımız div öğesini tasarlayalım. Neye ihtiyacımız var? Öncelikle yine geçiş animasyonları için  transitionkullanalım. Daha yüksek bir z-index kullanarak öğeyi diğer öğelerin üstüne taşıyalım. Yüksekliği tam sağlaması için 100% değeri verelim. En önemlisi de normal durumda gözükmemesi için onu ekranın dışına taşıyacak top:100% tanımını yapalım. Tabii bir öğenin pozisyonlama ve hiyerarşi kodlarını çalıştırması için bir position tanımına da ihtiyacı olacak.

section.panel > div {
  positionrelative;
  top100%;
  background-color#FFF;
  height100%;
  transition: top .5s, opacity .5s;
  z-index3;
  color#212121;
  font300 14px Roboto, sans-serif;
  padding10px;
}

Üstüne gelindiğinde de onu görünebilir bir yere taşıyalım.

section.panel:hover > div {
  top30%;
}

Şimdi biraz hızlanalım. Sırasıyla h2, p ve a elemanlarımızın tasarımlarımızı hazırlayalım.

section.panel > div > h2 {
  text-aligncenter;
  color#FFF;
  positionabsolute;
  top-173px;
  left0;
  right0;
  font300 18px Roboto, sans-serif;
  text-shadow1px 1px 5px rgba(1110.7);
  transition: top .5s;
}
 
section.panel > div > p {
  positionrelative;
  max-height140px;
  overflowauto;
  padding-right10px;
  line-height20px;
  margin0;
}
 
section.panel > div a {
  margin-top5px;
  border1px solid #212121;
  displayblock;
  text-decorationnone;
  text-aligncenter;
  color#212121;
  font-weight400;
  transition: background .5s color .5s;
  padding10px 5px;
}

Köşeleri border-radius ile biraz yuvarlayalım.

section.panel,
section.panel > div a {
  border-radius: 5px;
}

Linkin üzerine gelindiğinde renkleri ters çevirmeye ne dersiniz?

section.panel > div a:hover {
  background-color#212121;
  color#FFF;
}

Yazılarımızın uzaması halinde çıkacak olan scrollbar elemanına webkit tarayıcılarına özel bir tasarım çizelim.

section.panel > div > p::-webkit-scrollbar {
  width3px;
  height1px;
  transition: all .5s;
}
 
section.panel > div > p::-webkit-scrollbar-track {
  background-color#FFF;
}
 
section.panel > div > p::-webkit-scrollbar-thumb {
  background-color#9e9e9e;
}
 
section.panel > div > p::-webkit-scrollbar-thumb:hover {
  background-color#5677fc;
}
 
section.panel > div > p::-webkit-scrollbar-thumb:active {
  background-color#3f51b5;
}

Haber başlıklarımızın aktif olduğunda resmin üzerine taşınsın.

section.panel:hover > div > h2 {
  top-73px;
}

Şimdi 1200px‘in altındaki cihazlar için tasarımımızı hazırlayalım.

@media (max-width1200px) {
  section.panel {
    width32%;
    margin0 0.6% 10px 0.6%;
  }
}

Cep telefonlarında ise öğeler tek sıra halinde dizilebilir.

@media (max-width992px) {
  section.panel {
    width100%;
    margin-bottom10px;
  }
}

Bu kadar.

Php Dersleri ~ Değişkenler

Php Dersleri ~ Değişkenler

Php Dersleri adlı paylaşımlarımızın ikinci paylaşımı olan ” Php’de Değişkenler “ yazımızla sizlerleyiz. Bu yazımızda Php ‘nin yapı taşlarından biri olan Değişkenlerden bahsedeceğiz.

Değişkenleri Php ‘de bilgileri depolayan alanlar olarak düşünebiliriz. Tanımlanırken başlarına $ işareti alırlar.

Örneklerle Değişkenler

<?php 
$metin "AlaogluTasarim Php Dersleri"//Değer olarak bir metin girildiği için "" arasına yazıldı. 
$sayi = 10; //Atanan değer sayı olduğu için tırnak arasına almaya gerek yoktur. 
echo $metin//echo ile $metin değişkenine atanan değeri ekrana yazdırıyoruz. 
echo "<br>"//"<br>"; ile iki değişken değerini alt alta yazdırıyoruz. 
echo $sayi//$sayi değişkenine atanan değeri ekrana yazdırıyoruz. 
?>

Değişken adı tanımlarken dikkat etmemiz gerekenler,

  1. Değişken tanımlaması $ ile başlar ve sonrasında değişkene atanacak isim eklenir.
  2. Değişken adı başlarken ya ingilizce harfler ile yada _ ile başlar. örnek : $sarkisozu , $_sarkisozu, $sarki_sozu
  3. Değişken adları sayı ile başlayamaz
  4. Değişken adları büyük ve küçük harfe duyarlıdır.

Php’de Değişkenleri daha iyi anlayabilmeniz için çeşitli örneklerle devam edelim.

<?php 
$text "AlaogluTasarim"
echo "Php dersleri $text"
?>

Bu kodların çıktısı aşağıdaki gibi olacaktır.
Php dersleri AdobeWordpress

Yukarıdaki örneğin daha farklı bir yazımı ise,

<?php 
$text "AlaogluTasarim"
echo "Php dersleri " $text 
?>

Şimdi başka bir örneği inceleyelim,

<?php 
$sayi1=5; 
$sayi2=3; 
echo $sayi1+$sayi2// $sayi1 ve $sayi2 değişkenlerinin toplamını ekrana yazdırıyoruz. 
?>

Değişken adı tanımlarken dikkat etmemiz gerekenler,

  1. Değişken tanımlaması $ ile başlar ve sonrasında değişkene atanacak isim eklenir.
  2. Değişken adı başlarken ya ingilizce harfler ile yada _ ile başlar. örnek : $sarkisozu , $_sarkisozu, $sarki_sozu
  3. Değişken adları sayı ile başlayamaz
  4. Değişken adları büyük ve küçük harfe duyarlıdır.

Php’de Değişkenleri daha iyi anlayabilmeniz için çeşitli örneklerle devam edelim.

<?php 
$text "AlaogluTasarim"
echo "Php dersleri $text"
?>

Bu kodların çıktısı aşağıdaki gibi olacaktır.
Php dersleri AlaogluTasarim

Yukarıdaki örneğin daha farklı bir yazımı ise,

<?php 
$text "AlaogluTasarim"
echo "Php dersleri " $text 
?>

Şimdi başka bir örneği inceleyelim,

<?php 
$sayi1=5; 
$sayi2=3; 
echo $sayi1+$sayi2// $sayi1 ve $sayi2 değişkenlerinin toplamını ekrana yazdırıyoruz. 
?>

Bu kodların çıktısı 8 olacaktır.


Değişkenler hakkında bilmeniz gereken diğer bir bilgi ise kendilerine atanan son değeri taşıdıklarıdır. Bunu bir örnek ile anlatmak gerekirse,

<?php 
$isim="alaoglu"
$isim="Batuhan"
echo $isim; ?>

Yukarıdaki kodlar ekrana Batuhan ismini yazdıracaktır.

Bu da ilginizi çekebilir  Yönetici Sayfanıza Başka IP Erişemesin 

Gördüğünüz gibi $isim değişkenine iki değer atanmış olsa da ekrana son atanan değeri yansıtıyor.

Son olarak ise tanımladığınız bir değişkeni silmek için unset komutunu kullanıyoruz. Bunun için ise,

<?php 
$isim "Alaoglu"
unset($isim); ?>
 

Php Dersleri ~ Operatörler

Php dersleri paylaşım serimizin bu paylaşımı Operatörler olacaktır. Operatörler değişkenler ve değerlerde işlem yapmak için kullanılırlar.

Aşağıda php de kullanılan operatörleri, açıklamaları ve örnekleriyle detaylı şekilde inceleyelim.

Aritmetik Operatörler :

Php de toplama, çıkarma, çarpma gibi işlemleri yapabilmek için aritmetik operatörleri kullanırız.

  Operatör İsim Örnek Sonuç
1 + Toplama $a+$b $a ile $b değişkeninin toplamını hesaplar
2 Çıkarma  $a-$b  $b değişkenini $a dan çıkarır
3 * Çarpma  $a*$b  $a ile $b değişkeni çarpar
4 / Bölme  $a/$b  $b değişkenini $a ya böler
5 % Mod  $a%$b  $a / $b den kalanı hesaplar

Aritmetik operatörleri daha iyi anlamanız için örneklerle anlatalım.

$a=10;
$b=3;
echo $a+$b//ekrana 13 değerini yazdırır
echo "<br>";
echo $a-$b//ekrana 7 değerini yazdırır
echo "<br>";
echo $a*$b//ekrana 30 değerini yazdırır
echo "<br>";
echo $a/$b//ekrana 3.3333 değerini yazdırır
echo "<br>";
echo $a%$b//ekrana 1 değerini yazdırır
echo "<br>";

Atama Operatörleri :

Bir değişkene bir değer atamak için sayısal değerlerle birlikte kullanılan operatörlerdir.

  Operatör İsim Örnek Sonuç
1 += Toplama $c+=$a $c=$c+$a işlemini yapar
2 -= Çıkarma $c-=$a $c=$c-$a işlemini yapar
3 *= Çarpma $c*=$a $c=$c*$a işlemini yapar
4 /= Bölme $c/=$a $c=$c/$a işlemini yapar
5 %= Mod $c%=$a $c=$c%$a işlemini yapar

Atama operatörleri ile ilgili örnekler için aşağıya göz atabilirsiniz.

<?php
 
$a=10;
$a+=20;
echo $a;
echo "<br>";
$a-=5;
echo $a;
echo "<br>";
$a*=3;
echo $a;
echo "<br>";
$a/=3;
echo $a;
echo "<br>";
$a%=3;
echo $a;
 
?>

Karşılaştırma Operatörleri :

İki farklı değişken değerini karşılaştırmak için kullanılır.

  Operatör İsim Örnek Sonuç
1 == Eşittir $a==$b a eşit b sorgusunu yapar
2 != Eşit değildir $a!=$b a eşit değil b sorgusunu yapar
3 > Büyüktür $a>$b a büyük b sorgusunu yapar
4 < Küçüktür $a<$b a küçük b sorgusunu yapar
5 >= Büyük Eşit $a>=$b a büyük eşit b sorgusunu yapar
6 <= Küçük Eşit $a<=$b a küçük eşit b sorgusunu yapar
Bu da ilginizi çekebilir  Inline ne demektir?

 

<?php
 
$a=10;
 $b=20;
 var_dump($a == $b);
 echo "<br>";
 var_dump($a != $b);
 echo "<br>";
 var_dump($a>$b);
 echo "<br>";
 var_dump($a $b);
 echo "<br>";
 var_dump($a >= $b);
 echo "<br>";
 var_dump($a <= $b);
 
?>

Arttırma ve Azaltma Operatörleri :

Değişken değerlerini arttırıp, azaltmak için kullanılır.

  Operatör İsim Örnek Sonuç
1 ++$a Arttırma ++$a $a değerini 1 arttırır
2 $a++ Arttırma $a++ $a dan sonra gelen değeri 1 arttırır
3 –$a Azaltma –$a $a değerini 1 azaltır
4 $a– Azaltma $a– $a dan sonra gelen değeri 1 azaltır

 

&amp;amp;amp;amp;lt;?php
 
$a=10;
 echo $a++;
 echo "<br>";
 echo ++$a;
 echo "<br>";
 echo $a--;
 echo "<br>";
 echo --$a;
 
?>

Mantıksal Operatörler :

Koşullu ifadeler üzerinde işlem yaparken kullanılır.

  Operatör İsim Örnek Sonuç
1 and ve $a and $b $a ve $b değeri aynı anda ise true
2 or veya $a or $b $a veya $b değerlerinden biri ise true
3 ! değil !$a $a değeri false ise true
4 && ve $a&&$b $a ve $b değeri aynı anda ise true
5 || veya $a||$b $a veya $b değerlerinden biri ise true

 

<?php
 
$a=10;
 $b=5;
 if($a==10 and $b==5){
 echo "Doğru";
 }
 echo "<br>";
 if($a==4 or $b==7)
 echo "Doğru";
 else {echo "False";
 }
 echo "<br>";
 if($a==10 && $b==5){
 echo "Doğru";
 }
 echo "<br>";
 if($a==4 || $b==7)
 echo "Doğru";
 else {echo "False";
 }
 echo "<br>";
 if($a!=$b){
 echo "Doğru";
 }
 
?>

Bir sonraki paylaşımımız olan If Else Kontrol Yapısı adlı paylaşımımız da görüşmek üzere.

PHP Dersleri – PHP’ye Giriş

Php dersleri başlıklı yazı dizimizin ilk dersi olan ” Php’ye Giriş Yapıyoruz” adlı yazımızla sizlerleyiz. Bu yazımız da php hakkında genel bir bilgi verip, yerel sunucuda php uygulamaları nasıl çalıştırılır sorusunun cevabını ve son olarak ilk php kodumuzu yazıp paylaşımı tamamlayacağız.


PHP Nasıl Kurulur?

Php günümüzün en yaygın web tabanlı programlama dillerinden biri olup ilk açılımı Personel Home Page olan Php ‘nin açılımı artık PHP: Hypertext Preprocessor olarak değişmiştir. Php 1994 yılında Rasmus Lerdorf tarafından geliştirilmiş olup günümüzde Php 7 versionu ile hala gelişimini sürdürmektedir.

Uygulamalı Php derslerine geçebilmek için ilk olarak Xampp ve Notepad++ kurulumlarını yapıyoruz.

AdobeWordpress Php Dersleri

Bu yazımızı ” Xampp ile Yerel Sunucuda Php Çalıştırma ” okuyarak yerel sunucuda php uygulamalarını çalıştırabilir sonrasında buradanNotepad++ programını indirip ilk kodumuzu yazabiliriz.

Notepad++ açıp sayfamızı C:/xampp/htdocs klasörü içine ilkders.php olarak kaydediyoruz.


İlk PHP kodlamamız

Şimdi gelin ekrana Php Derslerimize Başlıyoruz. yazdıralım,

<?php echo "Php Derslerimize Başlıyoruz." ?>

Dosyayı kaydedip localhost/ilkders.php yazıp sayfayı görüntülediğimiz de ekrana Php Derslerimize Başlıyoruz. yazısı gelecektir. Kodlardan da anlaşıldı gibi php kodları <?php  ?> tagları arasına yazılır ve echokomutu ile ekrana istediğimiz yazıyı yazdırabiliriz.

Bitirmeden Önce

Böylece PHP kategorimizdeki ilk dersimizin sonuna gelmiş bulunuyoruz. Konuyla alakalı sorularınızı yorum alanında bize iletebilirsiniz.

İyi çalışmalar.

 

Woocommerce İçin 25 İpucu ve Püf Noktası

WordPress e-ticaret site sahipleri için Woocommerce ipuçları ve püf noktalarını liste halinde sıraladım.  Aslında burada listelediğim ipuçları ve püf noklarının çoğu destek konusunda bana ulaşan woocommerce kullanıcılarından gelenler diyebilirim. Umarım işine yarayacak bilgiler bulabilirsiniz.

Önemli: Aşağıdaki düzenlemelerden herhangi birini uygulamadan önce yedeklerinizi alınız.

 

Orderby alanını kaldırmak mı istiyorsunuz?

Kodu functions.php dosyasına ekleyiniz.


remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

 

Yorum tabını kaldırmak ve sadece ürün açıklaması tabının kalmasını isterseniz, style dosyanıza ekleyiniz.


.woocommerce .woocommerce-tabs ul.tabs {display:none !important}

 

Ürünleriniz için ürün video tabı isterseniz güzel bir eklenti: WooCommerce ürün video tabı

Toplu alımlarda indirim uygulamak istemezmisiniz

Toplu ürün alımlarında sepet sayfasında indirim uygulayabileceğiniz güzel bir eklenti: WooCommerce Bulk Discount

Satmadığınız ürünleri gizleyin

Mağazanıza girdiğiniz ama şuan satışa sunmak istemediğiniz ürünleri gizleyebilirsiniz, silmenize gerek yok.

ürün gizle

Ürün açıklama tabını çoğaltabilirsiniz.

Kodu functions.php dosyasına ekleyiniz.


add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
 

$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Custom description callback
 

return $tabs;
}

 

İstemediğiniz ürün kategorilerini mağaza sayfasında göstermeyin

Kodu functions.php dosyasına ekleyiniz.


add_action( 'pre_get_posts', 'custom_pre_get_posts_query' );
function custom_pre_get_posts_query( $q ) {
if ( ! $q->is_main_query() ) return;
if ( ! $q->is_post_type_archive() ) return;
if ( ! is_admin() ) {
$q->set( 'tax_query', array(array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => array( 'PUT YOUR CATEGORY HERE' ), // Don't display products in the membership category on the shop page . For multiple category , separate it with comma.
'operator' => 'NOT IN'
)));
}
remove_action( 'pre_get_posts', 'custom_pre_get_posts_query' );
}

 

Benzer ürünlerin kaç kolonda kaç adet listeleneceğini belirleyin

functions.php dosyasına ekleyiniz.


// Redefine woocommerce_output_related_products()
function woocommerce_output_related_products() {
woocommerce_related_products(4,2); // Display 4 products in rows of 2
}

 

Ürün kategorileri yanındaki ürün sayılarını kaldırabilirsiniz.

style.css dosyasına ekleyiniz.


.count {display:none !important}

 

Ödemesi alınan siparişleri otomatik onaylayın

Ödeme işlemi başarılı olan siparişlerin otomatik olarak onaylanması için functions.php dosyasına ekleyiniz.


/**
* Auto Complete all WooCommerce orders.
* Add to theme functions.php file
*/

add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );
function custom_woocommerce_auto_complete_order( $order_id ) {
    global $woocommerce;

    if ( !$order_id )
        return;
    $order = new WC_Order( $order_id );
    $order->update_status( 'completed' );
}

 

Ürün detay sayfasında sepete ekle yazısını değiştirin

kodu functions dosyası ekleyiniz


add_filter( 'add_to_cart_text', 'woo_custom_cart_button_text' );                                // < 2.1
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );    // 2.1 +

function woo_custom_cart_button_text() {

        return __( 'My Button Text', 'woocommerce' );

}

 

Mağaza sayfasında sepete ekle yazısını değiştirin

kodu functions dosyası ekleyiniz



add_filter( 'add_to_cart_text', 'woo_custom_cart_button_text' );                        // < 2.1
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text' );    // 2.1 +
 
function woo_custom_cart_button_text() {
 
        return __( 'My Button Text', 'woocommerce' );
 
}

 

Checkout sayfasını geliştirmek mi istiyorsunuz?

Bu eklenti fazlasıyla işinizi görecektir: WooCommerce Checkout Manager

Woocommerce breadcrumbs kaldırmak


add_action( 'init', 'jk_remove_wc_breadcrumbs' );
function jk_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

 

Menü barında sepeti göstermek

Basit bir eklenti ile menü barında sepet bilgilerini gösterebilirsiniz. WooCommerce Menu Cart

Para birimi sembolünü değiştirmek için  functions dosyasına ekleyiniz ve kendinize göre düzenleyiniz..


add_filter( 'woocommerce_currencies', 'add_my_currency' );
function add_my_currency( $currencies ) {
$currencies['ABC'] = __( 'Currency name', 'woocommerce' );
return $currencies;
}
add_filter('woocommerce_currency_symbol', 'add_my_currency_symbol', 10, 2);
function add_my_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case 'ABC': $currency_symbol = '$'; break;
}
return $currency_symbol;
}

 

Stokta yok yazısını istediğiniz yazı ile değiştirin


add_filter('woocommerce_get_availability', 'availability_filter_func');
function availability_filter_func($availability)
{
$availability['availability'] = str_ireplace('Out of stock', 'Sold', $availability['availability']);
return $availability;
}

 

Funtions dosyasına ekleyeceğiniz bu kod ile mağaza sayfasında ürün listelemelerini fiyata, tarihe ve isme göre otomatik olarak yapabilirsiniz.


add_filter('woocommerce_default_catalog_orderby', 'custom_default_catalog_orderby');
function custom_default_catalog_orderby() {
return 'date'; // Can also use title and price
}

 

Mağaza sayfasında ürün kolon sayısını belirleyin


* WooCommerce Extra Feature
* --------------------------
*
* Change product columns number on shop pages
*
*/
function woo_product_columns_frontend() {
global $woocommerce;
// Default Value also used for categories and sub_categories
$columns = 4;
// Product List
if ( is_product_category() ) :
$columns = 4;
endif;
//Related Products
if ( is_product() ) :
$columns = 2;
endif;
 //Cross Sells
if ( is_checkout() ) :
$columns = 4;
endif;
return $columns;
}
add_filter('loop_shop_columns', 'woo_product_columns_frontend');

 

Ücretsiz kargo aktif ise diğer kargo seçeneklerini gizleyin


/**
 * woocommerce_package_rates is a 2.1+ hook
 */
add_filter( 'woocommerce_package_rates', 'hide_shipping_when_free_is_available', 10, 2 );
 
/**
 * Hide shipping rates when free shipping is available
 *
 * @param array $rates Array of rates found for the package
 * @param array $package The package array/object being shipped
 * @return array of modified rates
 */
function hide_shipping_when_free_is_available( $rates, $package ) {
 	
 	// Only modify rates if free_shipping is present
  	if ( isset( $rates['free_shipping'] ) ) {
  	
  		// To unset a single rate/method, do the following. This example unsets flat_rate shipping
  		unset( $rates['flat_rate'] );
  		
  		// To unset all methods except for free_shipping, do the following
  		$free_shipping          = $rates['free_shipping'];
  		$rates                  = array();
  		$rates['free_shipping'] = $free_shipping;
	}
	
	return $rates;
}

 

Anasayfada breadcrumbs gizlemek için style dosyasına ekletiniz.


.home .breadcrumb { display:none; }

 

Kategori sayfasında kategori resmini gösterme


add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
    if ( is_product_category() ){
	    global $wp_query;
	    $cat = $wp_query->get_queried_object();
	    $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
	    $image = wp_get_attachment_url( $thumbnail_id );
	    if ( $image ) {
		    echo '' . $cat->name . '';
		}
	}
}

 

WordPress Güncellemelerinin Önemi ve Virüslerden Korunma

Virüslerden Korunmaya WordPress Güncellemelerini Zamanında Yaparak Başlayabilirsiniz

WordPress güncellemelerinin önemi çok fazla ancak yeterli derecede dikkat edilmiyor malesef. WordPress site sahiplerinin büyük bir bölümü ne yazık ki güncellemelerini yapmıyor yada sitenin bozulmasından korkup  yapmak istemiyor. Ancak güncellemelerin bir çoğu yeni bir özellik için gelmiyor, güvenlik açıklarını kapatmak için geliyor, galiba insanlar bunun farkında değil.

wordpress güncellemelerinin önemi

WordPress’in çok fazla hacklenen, güvenliği zayıf bir platform olarak bilinmesinin nedeni, güncellemelerin yapılmamasından kaynaklı açıkların sebep olduğu kötü itibar. Malesef güncellemeleri yapmıyorsak hack ve virüs tehditlerinde wordpress’ i suçlayamayız.  Bu tar sorunlar yaşayan ve benden yardım isteyen müşterilerimin sorduğu ilk soru; Virüslerden korunmak için ne gibi güvenlik önlemleri almalıyız? Basit bir cevap veriyorum: Lütfen güncellemelerinizi zamanında yapınız. Bunu yaparsanız zaten %90 güvenlik önleminizi almışsınız demektir. Geriye kalan %10 luk dilim ise yine basit bir kaç dosya yolu ve kullanıcı ip kısıtlaması ile alınabilecek önlemlerdir.

Ben tüm wordpress sitelerimde düzenli olarak güncellemeleri yapıyorum çünkü güvenlik için ne kadar önemli olduklarının farkındayım.

Geçen günlerde wordpress in büyük güncellemelerinden biri olan 4.7.3 güncellemesi geldi. Bu tarz büyük güncellemeleri önemli olduğundan dolayı wordpress otomatik olarak günceller. ancak bazı sunucularda bunu otomatik yapamaz ve o güncellemeyi sizin yapmanız gerekir.  4.7.3 güncellemesinden bir kaç gün sonra hack, virüs şikayetleri gelmeye başladı doğal olarak. Virüs content injection dediğimiz içeriklerimizde düzenleme yapma iznine sahip olan bir virüs çeşidiydi. Bu tarz virüsler siteleri google tarafından hacklenmiş site yada warez site olarak göstermesine neden oluyor.

%100 Hackten korunma yöntemi yoktur!

Siteleri hacklenen insanlar gelip destek istediklerinde bir daha bu tarz bir sorun yaşamamak için %100 garanti istiyorlar. Malesef bu tarz bir garanti yok.  İnternetin çalışma doğasında garanti diye birşey yoktur, hele ki hack ve virüs konusunda imkansız. Biz sadece önlem alabiliriz, hack ve virüs tehdidini minimuma indirebiliriz.

Peki bu tehditleri minimuma nasıl indirebiliriz. Öncelikle daha önceden paylaştığım wordpress siteler için güvenlik eklentileri başlıklı yazıya göz atabilirsiniz.

Güçlü, gerçekten güçlü şifreler kullanın: Gerçekten den kastım, isminizi, soyisminizi, doğum tarihinizi şifrelerinize dahil etmeyin. Size önerim otomatik şifre oluşturucuları kullanmanız. Buradan üretilen şifreleri bir şifre saklama programına kaydedebilirsiniz.

Güncellemeri zamanında yapın: Güncellemelerin bir sebep yüzünden geldiğini unutmayın. Ve sık sık güncellemerinizi yapın.

Sitenizi güvenlik için kontrol edin: Kök dizindeki dosya okuma ve yazma izinlerini kontrol edin ve gerekli olan ayarları yapın. Dizindeki dosyaları tarayıcılardan girildiğinde gizleyin. .htaccess dosyasında wp-admin sayfası için ip kısıtlamaları getirebilirsiniz. Wp-admin kullanıcı adını admin olarak kullanmaktan vazgeçin.

Ek olarak: Bilmediğiniz eklenti ve temaları kolayca sitenize kurmayın. Özellikle ücretli tema ve eklentilerin ücretsiz (warez) versiyonlarını kesinlikle kullanmayın. Unutmayın, bir site size ücretli eklenti veya temayı ücretsiz sunuyorsa bir kazancı veya amacı vardır. Burada sizler için daha önce yazdığım wordpress sitemizini nasıl daha güvenli hale getirebiliriz yazısında az önce bahsettiğim basit önlemlerin örnekleri mevcut.

Risk hiçbir zaman hiçbir yerde ve konuda sıfır değildir. Sadece bu risklerin gerçekleşme şansını azaltabiliriz. Yukarıda sıraladığım 4 başlığı uygularsanız sitenizin hacklenme riskini minimuma indirebilirsiniz.

Web Tasarımcılar Web Tasarım Trendlerini Takip Etmeli mi?

Freelance web tasarımcı olarak web tasarım trendlerini, nasıl ortaya çıktıklarını ve web tasarımcılar olarak bu trendleri takip etmeli mi? / ne kadar takip etmeli? Kısaca özetlemeye çalışacağım.

Web Tasarım Trendleri Nasıl Ortaya Çıkıyor?

Trendler genellikle yıllık yada birkaç yıllık periyotlarda değişiyor. Bazı zamanlar trend sadece estetik ağırlıklı örneğin flat tasarımlar bazende foksiyonel tasarımlar, uzun akışlı tasarımlar gibi. Bu trendler sürekli değişiyor çünkü, tasarımcılar sürekli kendilerini geliştiriyor ve tasarım konusunda farklı arayışlara giriyorlar, bir kısım tasarımcının fikirleri birbirlerinden aldıkları ilhamla orta çıkan tasarımlar yavaş yavaş diğer tasarımcıları etkiliyor ve kullanıcılar tarafından da beğeniliyorsa trend olarak karşımıza çıkıyor.

Tasarımcılar Olarak Bizler Trendleri Takip Etmeli miyiz?

Bazı web tasarımcılar arasında büyük farklar vardır. Bazı web tasarımcılar açık fikirli olmadıklarından yada farklı tasarımlar denemekten korktuklarında ortaya birbirine benzer tasarımlar çıkmakta. Örneğin dünyanın en büyük tema satış platformu themeforest da herhangi bir anahtar kelime ile temaları filtrelediğinizde hemen hemen çoğu temanın birbirine ne kadar çok benzediğini göreceksiniz.  Bazen birebir kopya tasarımlara dahi denk geliyorum, bu konuda themeforest ın katı kabul politikasın nasıl bu tasarımlara izin verdiğine şaşıyorum.

Şu sıralar trend flow design olarak tabir ettiğimiz uzun akışlı ve full ekran tasarımlardır. Neden bu tasarımlar harici tasarımlar bulamıyorum dedğinizi duyar gibiyim.

Sebebi; Biz kullanıcıların ziyaret ettiğimiz sitelerdeki içerikleri filtreleme alışkanlığı. alışkanlıklarımız zamanla değişti, artık ziyaretçiler hızlı bir şekilde siteye girip gerekli bilgiyi alıp çıkmak istiyor. Şuan bu yazıyı herkesin okumayacağını biliyorum, bazıları sadece göz atacak, çok küçük bir kısım (gerçekten bu yazı ilgisini çekenler) tamamnı okuyacaktır. Şuan ki tasarımlarda büyük resimler, renkli butonlar daha az içerik ile karşılaşmamızın sebebi budur. Kullanıcıya karşılama sayfasında kısa ve net bilgi verilirken mümkün olduğunca fazla resim, video ve görsel obje kullanılıyor. Tabi bu tasarımlar beraberinde yukarıda bahsettiğim gibi birbirine oldukça benzer tasarımları getiriyor. Tasarımcılar olarak trendleri takip etmeliyiz ancak zaten var olan tasarımları tekrar tekrar sunmak yerine amacına en iyi nasıl hizmet edebilir bunu düşünmeliyiz.

Bir Trend den Daha Fazlası

Düz tasarımlar şuan hiç kuşku yok ki en sık kullanılan tasarımlardır. Bu tasarım trendi uzun süre etkili olacak gibi, özellikle mobil uyumluluk ve kullanılabilirlik düşünüldüğünde kolay kolay vazgeçemeyeceğimiz bir trend.

Google Dostu Web Tasarım – Top 5 Püf Noktası

Web site tasarımı sadece web tasarım değildir. Her site bir amaç için açılıyor, kimi kurumsal kimliğini tanıtma, kimi gelir elde etmek kimide hedef kitlelere yazdıklarını ulaştırmak hedefiyle hayatına başlıyor. Google dostu web tasarım bu amaçlara uygun web siteleri tasarlamaktır.

Genelde ziyaretçilerimizin büyük bir kısmı organik aramalardan gelir. En maliyetsiz ziyaretçi çekme yoludur organik aramalar. Peki organik aramalarda hedef anahtar kelimelerde üst sıralarda olmak için ne tür tasarıma ihtiyacınız var? Google dostu tasarıma ihtiyacınız var.

Peki Google dostu web tasarım nedir?

Google dostu web tasarım, Google tarafından web tasarımcılara önerilen standartlara uygun tasarlanan tasarımlardır. Bu standartlar ne kadar yakalanırsa web tasarım o kadar google dostu olacaktır.  Tabi burada teker teker bu standartları listeyemeyiz ancak size en önemli tasarıma özgü 5 faktörden bahsedeceğim.

1- Responsive, Mobil Uyumlu Tasarım

2015 Nisan da Google mobil kullanıcıları hedefleyen bir algoritma güncellemesi yaptı. Şuan bu güncellemenin sadece mobil aramaları etkilediği görünüyor ancak edindiğim tecrübelere göre Google bu güncellemeyi genel arama sonuçlarında da uygulayacak. Bu yüzden sitenizin, tasarımınızın responsive olmasına dikkat ediniz. Değilse bir an önce responsive tasarıma geçiniz. sadece Google arama sonuçları için değil, potansiyel mobil ziyaretçi sayısını artırmak için.

2- Link Yapısı

Sayfa yada yazılarınızı oluşturken başlıklarda kesinlikle konuyla ilgili anahtar kelimeler kullanmaya özen gösterin. Aynı şekilde kalıcı bağlantılarınızın (URL) okunabilir yeterli uzunlukta ve anahtar kelimeler barındırdığından emin olun.

Örneğin:

http://www.siteismi.com/category/123/?id=6355893

yerine

http://www.siteismi.com/kategori-ismi/sayfa-basliği

gibi olamalı.

3- Sayfa Açılış Hızı

Google ın en fazla önem verdiği bir başka faktör de sayfa açılış hızlarıdır. https://developers.google.com/speed/pagespeed/insights/?hl=tr   adresinden site hızınız için bir optimizasyona ihtiyacı olup olmadığını sorgulayabilirsiniz.

4- Site İçi Link Yapısı

Biliyoruz ki linkler Google algoritması için son derece önemli. Çoğu kişi sadece backlinklere yoğunlaşıyor ancak site içi linklemeyi es geçiyor. Anahtar kelimelerinizden diğer uygun site içi sayfalara link vermeyi ihmal etmeyin, Ancak her zaman olduğu gibi buradada aşırı linklemeden kaçının. Olası penaltı nedenlerinden biride gereğinden fazla doğallıktan uzak site içi link yapısıdır.

5- Sitede Geçirilen Süre

Çok çok önemli bir konu. Ziyaretçileri sitemizde ne kadar fazla tutarsak seo açısından o kadar başarılı oluruz. SEO da bir noktaya gelen siteler içerik üretmeyi bıraksın, backlink  çalışması yapmasın ancak sitede ziyaretçilerini tutmayı başardıkları sürece arama sonuçlarında bir kayıp yaşamayacaklarını düşünüyorum. Önceleri içerik kraldır tanımını gördüğümde kaliteli blog yazısı yazmaktan bahsedildiğini düşünürdüm ancak e-ticaret siteleri, kurumsal siteler yada blog harici sitelerde bunun çok fazla işe yaramadığını gördüm. Bu tarz sitelerde kaliteli içerik üretmek ziyaretçilerin bu sitelere ne için geldiklerini iyi analiz edip istedikleri bilgiyi içeriği vermektir.

Web Tasarımcı Seçerken Dikkat Etmeniz Gereken 5 Şey

Bu hafta ki blog yazısında sizlere freelance web tasarımcı seçerken göz önünde bulundurmanız gereken 5 başlığı hatırlatacağım. Doğru tasarımcı ile çalışmadığınızda zaman & para kaybı yanında güven sorunuda yaşayabilirsiniz.  Eski tecrübelerinden dolayı yeni bir projeye başlayacağımız müşterilerimin ne kadar ince eleyip sık dokuduğunu görüyorım, haklılarda, tekrar yanlış karar vermekten korkuyorlar. İşte bu noktada dikkat etmeniz gereken en önemli başlıkları listelemeye çalıştım.

Tasarımcının Portföy’ ü Yeterli mi?

Bir tasarımcının işini iyi yapıp yapmadığını anlamanın en iyi yolu referanslarına bakmaktır. Hatta referans sahipleri ile görüşmektir. Çalışmalarında hazır materyaller mi kullanıyor yoksa özgün mü çalışıyor, tasarım becerisi ne derecede, kodlama bilgisi aynı şekilde. Tüm bunlar hakkında bilgi sahibi olmadan projenizi teslim etmemelisiniz.

Tasarım Becerisi

Web tasarımcı iyi bir kodlama bilgisine sahip olduğu kadar tasarım becerisinede sahip olmalıdır. Çoğu yazılımcı tasarımda anlamaz ve çoğu tasarımcıda yazılımdan anlamaz, bu ikisinide iyi yapanlarada web tasarımcı denir. Çalışacağınız tasarımcının tasarımda ki yeteneklerini referanslarından inceleyebilirsiniz ancak dikkat etmeniz gereken nokta referans verdiği çalışmalar hazır şablonlar mı yoksa özgün çalışmalar mı? Şu sıralar hazır şablon sitelerden geçilmiyor malesef.

İyi Bir Zaman Yönetimine Sahip mi?

Zaman web tasarım sürecinde en önemli başlıklardan biridir. Bitmek bilmeyen projeler iki tarafında canını sıkar. Çalışacağınız web tasarımcının yine referanslarından önceki müşterilerine ulaşıp zaman yönetimi konusunda yeterli olup olmadığını öğrenebilirsiniz. Uzayan projeler hiçbir zaman işe yaramaz, genelde çöp olurlar. Ayrıca uzayan proje demek ek masraflar demek. Çalışmaya karar verdiğiniz tasarımcıyla kesinlikle iş teslim tarihi konusunda net olun. Gerekirse sözleşme yapın ve teslim tarihini aşan çalışma için projeyi iptal edebilme hakkınızı ekleyin.

Projeniz İçin İstekli mi?

Evet en önemli başlık diyebilirim. Projeniz için görüştüğünüz tasarımcının işi almak için ne kadar istekli olduğunu görmeniz gerekir. Telefon, mail yada yüz yüze görüştüğünüz tasarımcı sizinle çalışma konusunda ne kadar istekli? İşe sadece para olarak mı bakıyor yoksa düzgün bir iş ortaya koymak, severek yaptığı işine yeni bir referans ekleme düşüncesiyle mi hareket ediyor? Bunu kolaylıkla anlayabilirsiniz. Önce paradan bahseden para için çalışıyordur. Web tasarımcı para dan önce projeniz için farklı çözümler sunmalı, önerilerde bulunmalı ve bunlara göre size farklı bütçeler çıkarmalıdır.

Fiyat Konusunda Makul mü?

Ortamala bir proje için teklif almaya başladığınızda aynı çalışma için 250 – 5000 TL arasında teklifler ile karşılaşabilirsiniz ve kafanız haklı olarak karışabilir. Nasıl bu kadar uçurum olabilir?  Sebebi şu şekilde çalışanlar;

  1. Hazır ücretli bir şablonu warez sitelerden indirip kuranlar ve parasını aldıktan sonra hiç birşeye dokunmayanlar,
  2. Hazır ücretli şablonu satın alıp kulumunu yapıp teslim edenler,
  3. Hazır ücretli şablonu satın alıp kurup müşterinin isteklerine göre düzenleyenler
  4. Müşterinin istediği çalışmayı wordpress gibi alt yapıları kullanarak özgün tasarım ve yazılım ile tamamlayanlar
  5. Çıkardığı tasarımı sıfırdan kodlayarak (içerik yönetim sistemi dahil) yada kendi oluşturduğu yazılımla yapanlar

Dikkat etmeniz gereken ve elemeniz gereken teklifler ilk 2 gruptakilerdir.  Diğer aldığınız teklifler arasında belirttiğim çalışma türlerin,de göz önüne alarak bir değerlendirme yapabilirsiniz.

Doğru web tasarımcıyı bulabilmeniz dileğiyle..

WordPress.com Business Artık 3. Parti Tema ve Eklentileri Destekliyor!

WordPress.com bildiğiniz gibi yıllardır kullanıcılara ücretsiz hosting ve alan adı hizmeti sunuyor. Ancak sadece wordpress tarafından yayınlanmış temaları ve eklentileri kullanabilme imkanımız vardı. WordPress.com sitesinde yayınlanan son blog yazısında bu konuda radikal bir değişiklik yaptıklarını ve artık 3.parti tema ve eklentileri desteklediklerini duyurdular.

Yıllardır automattic ekosistemi dışında ki binlerce faydalı eklentiyi kullanamayan kullanıcılar artık yoast, marketplace ve eticaret eklentileri gibi diledikleri eklentiler ile sitelerini geliştirebilecekler, gerçekten büyük bir güncelleme olduğunu söyleyebilirim.

wordpress 3.parti tema ve eklentileri destekliyor

Bu değişiklik ile wordpress.com business  kullanıcıları themeforest gibi marketlerden satın aldıkları eklenti ve temaları kullanabilecekler

WordPress.com’ un şimdiye kadar 3.parti tema ve eklentilere karşı oluşunun sebebi güvenlik açığı potansiyeli olan birçok tema ve eklentinin varlığı idi. Olası bir güvenlik açığı automattic ekosisteminde büyük soruna yol açabilir. Sanıyorum Automattic bu sorunu engellemenin bir yolunu buldu ki bu tarz büyük bir karar verdi.

Malesef bu özellik tüm kullanıcılar için geçerli değil. Sadece Business hesabı olan kullacılar bu özelliklerden yararlanabiliyor.

 

WordPress E-Ticaret Nedir?

WordPress E-Ticaret Nedir?

WordPress E-Ticaret ( Woocommerce ) şu sıralar oldukça revaçta olan bir e-ticaret platformudur. Online satış yapmak isteyen küçük ve orta ölçekli firmalar yada e-ticaretdeneyimine en az maliyetle başlamak isteyenler için  en iyi seçenek şuan wordpress e ticaret. Sınırsız sayıda ücretli ve ücretsiz eklenti seçenekleri ile geliştirilebilir yapısı, açık kaynak kodları ile yine online mağazasını geliştirmek isteyenler için en uygun seçenek .

WordPress E ticaret ‘in en önemli 2 avantajı

  • Bir fikriniz mi var? Gereksiz paralar harcamadan bir kaç adımda ile online mağazanızı açabilirsiniz.
  • Websitenizi dilediğiniz gibi özelleştirebilirsiniz. Sitenizin bütün kontrolü sizde olur.

WordPress E-Ticaret Sitesi Kurmak

WordPress E-Ticaret için Uygun mu? Güvenilir mi?

Şuan dünya genelindeki eticaret sitelerinin %30 gibi büyük bir kısmı woocommerce altyapısını kullanıyor ve bu oran her geçen gün artıyor. Sanırım bu oran bile wordpress’in online satış için uygun olduğunu gösterir. WordPress woocommerce, güçlü e ticaret sitelerinin altyapısı olarak kullanılabilecek kapasitede.

 

Bir E-ticaret sitesi kurmak mı istiyorsunuz? Wordpress’ i denemelisiniz. İnsanlar genelde wordpress’ i e ticaret için yetersiz görüyor. Bunun birinci sebebi wordpress in bir blog servisi olarak ortaya çıkması, ikinci sebebi güvenlik konusunda yetersiz kalacağının düşünülmesi ve üçüncü sebepte, binlerce ürünü kaldırabilecek bir altyapısnın olmadığı kanaati.

Öncelikle wordpress, bir blog servisi olarak ortaya çıkmış olabilir ancak şuan wordpress ile yapılamayacak bir site yok, bunun en büyük sebebi wordpress in açık kaynak kod yapısı sayesinde her gün binlerce yazılımcı ve geliştirici tarafından geliştiriliyor olması, yine bu sayede güvenlik konusunda sık sık gelen güncelleştirmeler ile açıkların anında kapatılması sağlanıyor, tabi güncelleştirmeleri yapmayan kullanıcıların  daha sonra siteye virüs bulaştı diye sızlanmaları da wordpress de güvenlik konusundaki teredütlerin ana sebebi. Son olarak, wordpress 10.000 lerce ürünü kaldırabilirmi? Bunu neden soruyorlar bilmiyorum ama, evet, kaldırabilir, 15.000 ürününü wordpress altyapısı ile satan bir müşterim vardı ve sorunsuz şekilde stok entegrasyonu dahil yapabiliyordu.

WordPress eticaret altyapısı için en çok kullanılan eklenti,  wordpress den ayrılan woocommerceekibinin geliştirdiği wordpress ile son derece uyumlu bir eticaret eklentisidir. Woocommerce ekibinin geliştirdiği e-ticaret eklentilerine göz atarak bile woocommerce ile wordpress eticarette neler  yapabileceğinizi görebilirsiniz. Çok kaliteli ücretli eklentileri sayesinde çok farklı konseptlerde eticaret siteleri tasarlanabiliyor.

E-Ticaret Projenizde Woocommerce Kullanmak İçin 5 Neden

1- Ücretsiz

Şuan e-ticaret hizmetini woocommerce dan daha uygun alabileceğiniz bir e-ticaret platformu yok. WordPress ücretsiz, woocommerce e ticaret eklentisi ücretsiz tek yapmanız gereken ücretli yada ücretsiz bir tema bulup içeriğinizi girip satışa başlamak.

2- Geniş Esneklik

WordPress in açık kaynak kodlu olmasının en büyük avantajı dilediğimiz gibi kodlara müdahale edebiliyor olmamız. Ancak sadece teknik bilgisi olanlar değil, hiçbir kodlama bilgisi olmayan kullanıcılar dahi kolaylıkla ürünlerini ekleyebilir, kategorize edebilir, indirimli ürünlerini, öne çıkan ürünlerini kolaylıkla ayarlayabilir, ürün seçeneklerini tanımlayabilir, online mağazasını eklentilerle geliştirebilir.

3- E-Ticaretten Fazlası

Kurumsal yada blog sitenizle tam entegre bir e ticaret sitesi için woocommerce en iyi seçenek. Dilediğiniz zaman kurumsal sitenize yada blog sitenize bir eticaret sayfası entegre edebilir aynı şekilde eticaret sitenize dilediğiniz zaman bir blog yada kurumsal site entegre edebilirsiniz. Tüm bunlar woocommerce ‘in wordpress ile olan sorunsuz entegresi sayesinde kolaylıkla yapılabiliyor.

4- Kullanıcı Dostu

WordPress şuan tüm dünyada ki tüm içerik yönetim sistemleri içerisinde en çok kullanılan CMS dir. Bu oran %51 gibi büyük bir farktır. Bunun sebebi tabiki wordpress ‘in kullanıcı dostu arayüzüdür.

5- Geniş Özelleştirme Seçenekleri

WordPress in sunduğu sınırsız tema ve eklenti seçenekleri ve bu temalarda bulunan tema ayarları ile teknik bilgiye ihtiyacı olmadan mağazanızı kolaylıkla kendinize özel düzenleyebilirsiniz.

 

WordPress E-Ticaret de Ödeme Seçenekleri

Woocommerce de banka havalesi, kapıda ödeme ve paypal ödeme seçenekleri hazır geliyor. Ancak kredi kartı ile paypal harici sanalpos ile ödeme almak için kullanabileceğiniz 3 farklı ödeme metodu mevcut.

Woocommerce Payu

 

Woocommerce Payu eklentisi ile payu den alacağınız API Key kullanılarak sitenize payu ödeme sistemini entegre edebilirsiniz. Ancak Payu eklentisi şuan site içerisinde ödeme almanıza olanak sağlamıyor malesef, kullanıcılar, payunun ortak ödeme sayfasına yönlenerek ödeme yapabiliyor. Payu ile tüm bankalara sahip olabiliyorsunuz, yıllık 900 TL gibi bir ücret ödemeniz gerekiyor artı her bir işlem için belirli bir komisyon oranı mevcut.

Payu eklentisini https://www.payu.com.tr/ adresinden satın alabilirsiniz.

Woocommerce İyzico

 

İyzico tıpkı Payu gibi tüm bankaları tek bir pakette size sunan yerli bir ödeme sistemi. İyzico woocommerce ile tam uyumlu ücretsiz sunulan bir eklentisi mevcut, iyziconun sitesinden indirebileceğiniz bu eklentiye yine iyzicodan aldığınız API Key’ i girerek hemen kullanabilirsiniz. İyzicoda Payu da olduğu gibi yıllık bir ücret yok, sadece işlem başına komisyon almakta ancak bu komisyon oranı Payu nun komisyon oranından biraz fazla. Bu iki ödeme yöntemini komisyon oranları ve payuda olan yıllık ücret ‘i göz önüne alarak kıyaslayabilirsiniz.

Woocommerce Sanal Pos Entegrasyonu

WordPress online mağazası için sadece bir yada iki bankanın sanal posunu kullanmak isteyenler genelde özel sanal pos entegrasyonu talep ediyorlar. Bankanın özel sanal pos’ u komisyon oranı olarak iyzico ve payu’nun komisyon oranlarından çok daha düşük olduğundan da çoğu kişi doğal olarak özel sanal pos’ u entegre etmek istiyor. Ancak şuan ülkemizde bu hizmeti profesyonel olarak sunan yok malesef. Genel olarak en büyük sorun güncelleme desteği sunuyor olmamaları.

Woocommerce Xml Entegrasyonu (woocommerce toplu ürün ekleme)

Woocommerce da xml ile toplu ürün aktarımı var ancak bu işlem basit bir içe ve dışa aktar işlemleri ile yapılmakta. Woocommerce da bir ürün girdikten sonra bunu xml olarak dışa aktarıp mevcut xml şablonunu bozmadan ilk satırdaki kodları çoğaltarak ürünler girilebilir

 Wordpress E-Ticaret Temaları

Ortağımla beraber wordpress e-ticaret temaları satışı yaptığımız sitemiz wpmod.com,wordpress tabanlı alışveriş sitesi kurmak isteyenlerin hazır türkçe wordpress e-ticaret temalarını satın alıp ürünlerini girerek satışa başlayabilmeleri için hizmet veriyor. Wpmodyada Themeforest gibi sitelerden alacağınız temalarla yada özel olarak yaptıracağınız tasarımile işinizi e-ticarete en az maliyetle taşıyabilirsiniz.

WordPress E-Ticaret Eklentileri

WordPress woocommerce için yazılan binlerce kaliteli ücretli ve ücretsiz eklentiler ile alışveriş sitenizi dilediğiniz gibi geliştirebilir, analiz edebilir,  gelişmiş marketing çalışmaları yapabilirsiniz.

Woocommerce resmi sitesinde ve codecanyon sitesinden oldukça kaliteli eklentiler bulabilirsiniz, hatta ara sıra bu sitelere göz atarak online mağazanızı nasıl daha iyi geliştirebileceğinize dair yeni fikirler edinebilirsiniz.

Son olarak;

Küçük ve orta ölçekli bir firma yada e-ticarete yeni atılmak isteyenler için woocommerce fazlasıyla yeterlidir ve güvenilirdir. Bir host, domain ve wordpress e-ticaret teması ile hemen bugün sizde online mağazanızı açabilir ürünlerinizi internet üzerinden satmaya başlayabilirsiniz. Yazının ilk kısımlarında paylaştığım linkler ile yabancı ve türkçe tema yapımcılarından mobil uyumlu, hızlı arayüze sahip temiz kodlanmış temalar satın alabilir yada özel olarak benim gibi freelance web tasarımcılara wordpress e-ticaret sitesi için teklif isteyebilirsiniz..

Web Tasarım Hizmeti

Web Tasarım Hizmeti

Günümüzde, internette görünür ve saygın olmak isteyen firma ve kurumsal şirketler kendilerini tanıtabileceği, misyon ve vizyonlarını müşterilerine anlatabileceği, kurumsal yüzlerini yansıtabileceği temiz ve anlaşılır web sitelerine ihtiyaç duymakta. Aynı şekilde ürünlerini, online dünyanın sunduğu herkese ulaşabilme potansiyelini kullanarak pazarlamak isteyenler için hedef kitlelerine özgü e-ticaret sitelerine ihtiyaçları vardır.

Her web sitesi farklı amaçlar için tasarlanıyor olsa da farklı tasarımlara sahip olsa da, tüm web sitelerinde olması gereken, istenilen  bazı şeyler vardır. Sitenin hedef kitleye uygun tasarımı, mobil uyumlu olması, hızlı açılış sayfalarına sahip olması, web standartlarına ve seo uyumlu kodlanmış olmasıdır. Web tasarımı sadece tasarım değil tüm bu ihtiyaçlara cevap verebilecek şekilde tasarlanıp kodlanmasıdır.

Freelance olarak sunduğum web tasarım hizmetini tüm bu yukarda saydığım ihtiyaçları göz önüne alarak sunuyorum.. Amacım, müşterilerime hizmetlerini en iyi şekilde sunmalarını sağlamaktır.

Kurumsal Web Site Tasarımı

Firmaların kurumsal yüzlerini sunabileceği,  kendilerini ve hizmetlerini tanıtabileceği, kullanıcı dostu, responsive ve seo uyumlu web siteleri tasarlıyorum. Firmaların, kurumsal kimliklerini en iyi yansıtabileceği web siteleri, fonksiyonel özelliklerden uzak, basit, temiz ve mesajı net sunabilen tasarımlara sahip olması gerekir. Kurumsal kimlik, sanal dünyada firmaların güven ve kalitesini sunması bakımından oldukça önemlidir.

Günümüze Uygun Web Tasarım dan Ne Beklenir?

Günümüze uygun, son trend web site tasarımında şu 3 ana başlık olmazsa olmazdır.

  • Kullanıcı deneyimine uygun tasarıma sahip olması
  • Mobil uyumluluk ( kullanıcı deneyiminin bir örneği )
  • Hızlı yüklenen sayfalara ve iyi optimize edilmiş kod yapısına sahip olması

a- Kullanıcı Deneyimi

Web tasarım da dikkat edilmesi gereken başlıca konu kullanıcı deneyimidir. Kullanıcıların aradıkları hizmet veya ürünleri en kolay yoldan nasıl sunabilirim, verilmek istenen mesajı nasıl iletebilirim düşüncesiyle tasarlanmalıdır.

b- Mobil Uyumluluk

Mobil çağda, mobil uyumlu olmayan sitelerin artık bir şansı yok.  Arama sonuçlarında responsive olmayan sitelerin sıralaması her geçen gün eriyor. Her responsive site de %100 mobil uyumlu değil malesef, farklı kodlama ile yapılan responsive çalışmalar herzaman tam mobil uyumluluk sağlamayabiliyor. Sorunsuz bir mobil kodlama için Bootstrap standartlarını kullanmalıyız.

c- Site Hızı ve optimize edilmiş kodlama

Mobil uyumluluk kadar Google ın büyük önem verdiği diğer bir konu site hızıdır. Google ziyaretçileri ağır açılan sayfalara göndermek istemiyor ve haliyle ne kadar iyi optimize edilmişte olsa başarılı siteleri hız konusunda cezalandırabiliyor. Web tasarımının başından sonuna tüm aşamalarında site hızı dikkatlice düşünülerek karar verilmelidir. Kullanılan grafik ve resim uzantılarının seçiminden kodlamaya kadar her işlemi acaba site hızına etkisi olur mu düşüncesiyle yapmak gerekir.

SEO Hizmeti – Arama Motoru Optimizasyonu

SEO Hizmeti – Arama Motoru Optimizasyonu

Arama motoru optimizasyonu, sitelerin botlar tarafından kolaylıkla ve doğru bir şekilde taranmasına imkan veren teknik çalışmalardır. Seo çalışması site içi (on-page) ve site dışı (off-page) olmak üzere ikiye ayrılır. Bir site tasarlanırken seo uyumlu kodlanmasının önemi bu yüzdendir. Tasarımı yapan grafikerin de bu konuda bilgi sahibi olmasının gerekliliği bu yüzdendir.

Doğru bir seo çalışması tasarımla başlar.  Kullanılacak grafiklerden doğru kodlamaya kadar her noktada sitenin hem kullanıcılar için hemde arama motorları için işlevselliği düşünülmelidir.

Site İçi SEO (On-Page SEO)

Site içi seo çalışması kısaca teknik seo çalışmalarıdır. Sitenin arama motorları tarafından kolay ve doğru okunmasını sağlamaktır. Google ın sıralama faktörünü belirleyen 200 sinyalden, site içi kriterlerin uygulandığından emin olmaktır. Varsa eksikliklerin düzenlenmesidir. Site içi seo çalışmaları; robots.txt, w3c validate uyumluluğu, hx etiketlerin, sayfa başlıkları ve açıklamaların, içeriklerin özgünlüğü, anahtar kelime yerleşimleri, site hızı gibi birçok farklı sinyalin kontrol edilmesidir.

Site Dışı SEO (Off-Page SEO)

Site dışı seo çalışmasının da birçok farklı tekniği vardır, bunların başında backlink ve sosyal medya kullanımı vardır. Backlink çalışması site dışı seo nun önemli bir başlığıdır ve sıralamada önemli rol oynamaktadır. Ancak backlink çalışması çok fazla suistimal edilen bir çalışma olduğundan arama motorları tarafından tespit edilmesi durumunda ciddi derecede cezalandırılmaktadır. Backlink çalışması doğal yollardan yapılmalıdır. Link satın alarak yapılan backlink hizmeti çok tehlikelidir. Sosyal medya kanalları da backlink kazanmak için uygun bir yol olsada yanlış ve doğal olmayan yollardan yapıldığı takdirde sonuçları hüsran olabilir. Sosyal medya, marka bilinirliği, ürün satışı veya siteye ziyaretçi göndermek için oldukça etkili kullanabileceğimiz mecradır. Farklı sosyal medya kanallarını ve tekniklerini kullanarak sitemiz için doğal backlinker kazanabiliriz. Diğer bir site dışı seo çalışması içe adwords gibi reklam yönetimleridir.

SEO ‘ ya İhtiyacınız mı Var?

Sitenizin SEO iyileştirmeleri yada kapsamlı SEO çalışması için fiyat teklifi alabilirsiniz. Web sitenizin SEO ihtiyacını analiz edip size bir yol haritası ile birlikte fiyat teklifimi sunabilirim.

PSD Tasarımı WordPress’ e Çevirme

PSD Tasarımı WordPress’ e Çevirme Hizmeti

Grafik tasarımcılar kendi yapmış oldukları psd tasarımları yada satın aldıkları psd tasarımları birebir şekilde Worpdress’ e dönüştermek isteyebiliyorlar. Bu noktada özel wordpress web tasarım hizmeti yanında  psd to wordpress  çalışması hizmetide vermekteyim.

Psd to WordPress

PSD to WordPress çalışması kaliteli yapılmadığı zaman grafik tasarım ne kadar iyi olursa olsun web sitesi eksik hayata geçiriliyor. WordPress her ne kadar kullanıcı ve seo dostu olsa da, html tasarımı barındırıyor içinde, bu nedenle wordpress sitenin başarısı doğru yazılan html kodlamadan geliyor.

PSD tasarımı öncelikle SEO ve Mobil uyumlu olarak HTML5 standartlarında hmtl’ e dökmek gerekiyor. Html kodlaması başarılı bir şekilde yapılan tasarım, minimum eklenti ve fonksiyon kullanılarak wordpress’ e entegre edilmelidir.

Psd to wordpress hizmetini online yada programlar ile sunan servisler var. Belki de denemişsinizdir, kesinlikle profesyonel olarak bu çalışmayı yapmak istiyorsanız uzak durabilirsiniz bu servislerden. Öncelikle html kodlaması web standartları dışında dökülüyor, en önemlisi kalıp kodlamalar ile tasarımı birebir html e dökememekte. WordPress entegrasyonu ise amatör olarak yine kalıp kodları kullanarak yapmakta ve sağlıklı bir entegrasyon sunmuyor.

PSD Tasarımınızı WordPress’ e Dönüştürelim

Yaptığınız tasarımı, yada satın aldığınız psd tasarımı wordpress ‘e dönüştürmek istiyorsanız, size profesyonel olarak bu hizmeti sunuyorum. Gönderdiğiniz tasarımın, birebir wordpress kodlanmış halini size teslim ediyorum. Tüm tarayıcı ve cihazlarda sorunsuz şekilde görüntülenen, SEO uygun temiz ve sade kodlama garantisi sunuyorum.

WordPress entegrasyonunu yaptığım tasarımı demo sunucuya size test etmeniz için aktarıyor ve siz memnun kalıncaya kadar düzenlemeler yapıyorum. Sizlerin memnuniyeti benim için önemli.

Freelance WordPress Web Tasarım

WordPress Web Tasarım

WordPress web tasarım şu sıralar en revaçta olan web tasarım trendlerinden. WordPress in kolay kullanılabilir ve sade tasarlanmış admin paneli ile hiç bir teknik bilgisi olmayanların dahi rahatlıkla kurumsal sitelerini tanıtmalarına, e-ticaret sahiplerinin ürünlerini kolayca ekleyip satmalarına olanak sağlıyor.  Wordpress in blog yapısından çıkıp bu denli gelişmesi ile neredeyse wordpress ile yapılamayacak bir proje yok diyebiliriz. Kolay kullanımı, seo dostu yapısı, uygun maliyeti ve geliştirmeye açık platformu sebebiyle müşterilerime freelance wordpress web tasarım hizmeti vermekteyim.

Dünyada en çok kullanılan içerik yönetim sistemi olan wordpress sahip olduğu esneklik, seo dostu yapısı ve binlerce ücretli ve ücretsiz eklentisiyle kullanıcılarına en uygun maliyetlerle profesyonel çözüm sunan tek platformdur.

WordPress de hangi hizmetleri veriyorum?

PSD to HTML to WordPress

Başlıktan anlayabileceğiniz gibi kendi yaptığım yada müşterinin verdiği psd tasarımını Seo ve mobil uyumlu olarak  bootstrap ile kodladıktan sonra WordPress entegresini yapıyorum. Psd tasarımlarınızı birebir wordpress altyapısına geçirebiliriz.

Özel WordPress Web Tasarımı

Müşterilerimin ihtiyaçlarına uygun özgün wordpress web siteleri tasarlıyorum. Tasarımdan Html’ e her aşamada müşterilerin isteklerine uygun siteyi ortaya çıkardıktan sonra wordpress entegresini yapıp geliştiriyorum. Size özel yapılan tasarım herzaman hazır temalardan avantajlıdır. Projenizin ihtiyaçlarına göre geliştirildiğinden ne fazla kod, eklenti kullanıyorsunuz nede ihtiyacınız olan özelliklerden mahrum kalıyorsunuz.

WordPress E-Ticaret

WordPress e-ticaret kullanan müşterilerime ihtiyaçları olan tüm çözümleri sağlamamın yanında (sanalpos, xml entegrasyon, fatura yazdırma, muhasebe programı vs.) özgün tasarıma sahip e-ticaret siteleride tasarlamaktayım. Sizde E-ticaret alt yapısı olarak wordpress de karar kılarsanız gelin sizin için nasıl bir e-ticaret platformu oluşturabiliriz konuşalım.

Hazır WordPress Tema Kurulumu

Hazır wordpress teması satın alıp teknik bilgisi olmayan müşterilerime kurulum hizmeti veriyorum. Themeforest, monstertemplete gibi hazır tema satışı yapan sitelerden aldığınız temaları demoda gördüğünüz gibi sitenize kurulumunu ve gerekli ayarlarını yapıp teslim ediyorum.

Güvenlik ve Güncelleme Desteği

Açık kaynak kodlu olması sebebiyle güncellemeleri düzenli yapılmadığı takdirde wordpress çok rahat hacklenebiliyor. Bu tarz sorun yaşamak istemeyen müşterilerim için sürekli veya tek seferlik güvenlik ve güncelleme desteği sağlıyorum.

WordPress Seo Optimizasyonu

WordPress her ne kadar seo dostu bir yapıda olsada, kurulan Seo eklenti ayarlarının doğru yapılmaması durumunda büyük zararlara sebebiyet verebiliyor. WordPress Seo ayarlarında yardımcı olduğum gibi On Page Seo olarak tabir ettiğimiz site içi Seo optimizasyonunda hizmet vermekteyim.

İstanbul ‘ da Freelance Web Tasarım

İstanbul ‘ da Freelance Web Tasarım

İstanbul da sekiz seneye aşkın web tasarım tecrübem ile müşterilerime freelance web tasarım hizmeti vermekteyim. Bu sürede serbest web tasarımcı olarak çalışmamın kendimi geliştirmemde epey katkısı olduğunu söyleyebilirim. Homeofis çalışıyor olsam da çalışma disiplinine dikkat ederek tam zamanlı bir çalışma periyodum mevcut.

Kurumsal ve bireysel müşterilerime kendilerini ve firmalarını tanıtıcı siteler ile en uygun maliyetlerle online satış yapabilecekleri profesyonel e-ticaret siteleri tasarlıyor ve destek veriyorum. E-ticaret sektöründe tam zamanlı çalıştığım zamanlarda edinmiş olduğum tecrübeleri, müşterilerimin ihtiyaçları doğrultusunda kullanarak onlara en uygun çözümleri  sunuyorum.

Seo çalışması tasarımdan başlar tezine inanarak seo uyumlu tasarımlar çıkarmak için mobil uyumlu, sade kod yapısına sahip, Schema Markup, Bootstrap, Html5 ve Css3  gibi güncel kod yapılarını kullanmaktayım.

WordPress tabanlı özel tasarımlar yaptığım gibi, wordrpess site sahiplerine her konuda wordpress destek hizmeti sunuyorum.

Sizinde hayata geçirmek istediğiniz bir projeniz varsa, iletişim sayfasından talep formunu doldurarak bana ulaşabilirsiniz.

Tıkla Hemen Ara!