Shop Around Web Site Tasarımı

Simple Solution Web Site Tasarımı

Simple Type Web Site Tasarımı

Smart WebDesign Web Site Tasarımı

WordPress Tema Önizleme Eklentisi – WordPress Theme Demo Bar

  • Eklentiler
  • Savaş Dersim Çelik
  • Perşembe Ağustos 27th, 2015
  • 888 Görüntülenme
  • Wordpres, PHP, HTML, CSS
  • Responsive

Çoğu tema geliştiricisi tarafından kullanılan ve birden fazla temayı sergilemekte kullanılan tema önizleme eklentisi.

Söylediğimiz gibi eğer birden fazla temaya sahipseniz ve bu temalarınızı tek bir link üzerinden kullanıcılarınıza görüntülemek isterseniz kullanacağınız eklentilerden bir tanesidir theme demo bar eklentisi, herhangi bir kod veya herhangi bir programlama dili bilmenize gerek yok, kurulumu ve kullanımı gayet basit olan eklenti sayesinde 10’larca temayı tek bir wordpress sitesi üzerinde görüntüleyebileceğiz.

Eklentinin Kurulumu
  • İlk olarak wordpress admin panelimizde Eklentiler > Yeni Ekle Sekmesine giriyoruz.
  • Eklentilerde Ara kısmına eklentimizina adını yazıyoruz ve arıyoruz. Eklenti adı : Wordpress Theme Demo Bar
  • Eklentimiz karşımıza geldiğinde şimdi kur buttonuna tıklayarak kurulum işlemine başlıyoruz.
  • Son olarak eklentimizi aktif hale getiriyoruz.

Wordpress Tema Önizleme Eklentisi - WordPress Theme Demo Bar 1

 

Eklentinin Kullanımı
  • Eklentiyi kullanabilmek için wordpress admin panelinizde Ayarlar > WP Theme Demo Bar bölümüne girmeniz gerekmektedir.

Wordpress Tema Önizleme Eklentisi - WordPress Theme Demo Bar 2

  • Usage : Kısmı ilgilendirmeyen kısım bu kısım ile ilgili herhangi birşey yapmanıza gerek yoktur, zaten yapacak birşeyde yoktur.
  • Look & Feel : Bu kısım demo barı ( Ön izleme Barı ) düzenleyebileceğimiz alandır bu alanda bir kaç düzenleme yapacağız konun ilerleyen bölümlerinde bu alandaki düzenlemeleri okuyabilirsiniz.
  • Plugin Options : Bu alanda ise eklenti ile ilgili gerekli ayarlamaları yapabileceğiniz alandır burada demo barı, indirme butonunu, kaynak buttonunu vs gibi bir çok alanı gizleyebilir veya görüntüleyebilirsiniz konun devamında bu alanında kullanımına bakacağız.
  • All Themes & Stats : Bu alanda yüklü tüm temelarımızı görüntüleyebilir ve bu temalar ile ilgili gerekli demo linklerini alarak kullanabiliriz.
  • Individual Theme Settings : Bu alanda eğer kullanıcılarımıza paylaşacağımız temanın bir kaynak, indirme, satış linki mevcut ise bu alandan girebiliriz.
  • Custom Output Formats : Bu alanda bizim yapacağımız herhangi bir ayar vs yoktur, herhangi bir değişiklik yapmayın.
  • Plugin Support & Extra  : Bu alanda bizim yapacağımız herhangi bir ayar vs yoktur, herhangi bir değişiklik yapmayın.
Look & Feel Bölümü Ayarları

Bu kısım demo barı ( Ön izleme Barı ) düzenleyebileceğimiz alandır bu alanda bir kaç düzenleme yapacağız.

  • Custom CSS : Bu alanda eğer demo barı kendimize göre düzenlemek istersek bu alana kendi css kodlarımı eklememiz yeterli olacaktır. Eğer webinyo.com’un kullandığı css’i kullanmak isterseniz aşağıdaki kodu bu alana eklemeniz yeterli.
/*the main demo bar (div)*/
/*set the position of demo bar at plugin page > Look & Feel*/
#wpthemedemobar {
  position:absolute;
  /*top:0px;*/
  left:0px;
  width:100%;
  height:70px;
  padding:0px;
  margin:0px;
  background-color:#f1f1f1;
  border-bottom:1px solid #cccccc;
  color:#444444;
  font-weight: bold;
  font-family: tahoma;
  font-size: 11px;
  text-align:center;
  z-index:100;
}

.wpthemedemobar_wrapper {
  width:100%;
  position:relative;
  padding-top:7px;
}

/*currently not in used (a)*/
#wpthemedemobar a,#wpthemedemobar a:link,#wpthemedemobar a:visited {
  color:#444444;
  font-weight: bold;
  font-family: tahoma;
  font-size: 11px;
}
  
/*the theme's name (span)*/
.wptdb_themename {
  border-bottom:1px solid #cccccc;
}
  
/*the left content including close button and etc (div)*/
.wptdb_left {
  position:absolute;
  top:10px;
  left:5px;
}

/*the images in the left content including close button and etc (img)*/
.wptdb_left img {
  margin-right:4px;
}
  
/*the "currently previewing theme (previewed x times)" part (div)*/
.wptdb_current {
  margin:0 auto; 
  text-align:center;
}
  
/*the text : previewed x times (span)*/
.wptdb_popularity { 
  color:#888888;
  font-weight:normal
}

/*quick jump area (div)*/
.wptdb_jumpbar_wrapper {
  position:absolute;
  top:10px;
  right:15px;
}

/*quick jump : select menu (select)*/
.wptdb_jumpbar_select { 
  background-color:#f1f1f1;
  border:1px solid #cccccc;
  font-size:11px;
  font-weight:bold;
  font-family:tahoma;
  color:#333333;
  vertical-align:top;
  margin-top:3px;
   height: 44px;
}

/*quick jump : select menu > option (option)*/
.wptdb_jumpbar_select option {
  padding:1px;
}

/*quick jump (input type=button)*/
#wpthemedemobar .wptdb_jumpbar_preview_button {
  background-color:#2885B7;
  border:1px solid #cccccc;
  font:bold 11px tahoma;
  color:#fff;
  margin-left:5px;
  padding:4px;
  padding-left:9px;
  padding-right:9px;
  -moz-border-radius:5px;
  height: 44px;
}


/* qTip - Tooltip script */
div#wptdb_qTip {
 padding: 6px;
 border: 1px solid #cccccc;
 display: none;
 background: #fff;
 color: #333333;
 font: 11px Verdana, Arial, sans-serif;
 text-align: left;
 position: absolute;
 z-index: 1000;
}
  • Custom Image : Eğer download, kaynak, satın al veya kapat buttonlarının resimlerini değiştirmek istersek burada alanlara kendi resimlerimizi eklememiz yeterli olacaktır.
  • Eğer webinyo.com’un kullandığı resimleri kullanmak isterseniz resim linkleri aşağıda yer almaktadır.
http://webinyo.org/wordpress/kapat.png
http://webinyo.org/wordpress/kaynak.png
http://webinyo.org/wordpress/hemenIndir.png
  • Height of Demo Bar : Demo barının yüksekliğini ayarlayabileceğiniz alan.
  • Position of Demo Bar : Demo Barın yerini ayarlayabileceğiniz kısım sitenin üstünde veya altında yer alabilir.

Wordpress Tema Önizleme Eklentisi - WordPress Theme Demo Bar 3

 

Plugin Options Bölümü Ayarları

Bu alanda demo bar’da görüntülenmesini istemediğimiz bazı özellikleri gizleyebilir veya görüntüleybiliriz. Bu alanda herhangi bir değişiklik yapmanıza gerek yoktur aslında.

  • Hide Demo Bar? : Demo Barı gizlemek istermisiniz diye soruyor eğer gizlerseniz temo tasarımlarınız üzerinde bar çıkmayacak. ( Tavsiye : İşaretlemeyin )
  • Hide “Select Theme” Drop-down in Demo Bar? : Demo barda sağ alanda yer alan diğer temaları listeleyen kısımı gizlemek istermisiniz. ( Tavsiye : İşaretlemeyin )
  • Show Parent Theme name? (if exist) : Temanın adını göstermek isterseniz işaretleyin ( Tavsiye : İşaretlemeyin )
  • Hide “Close” Button on Demo Bar? : Demo Barı kapat buttonunu gizlemek isterseniz işaretleyin. ( Tavsiye : İşaretlemeyin )
  • Hide “Theme Info/Download/Buy” Button? : Demo Bar üzerindeki Hakkında,İndir,Satın Al butonlarını gizlemek isterseniz işaretleyin. ( Tavsiye : İşaretlemeyin )
  • Do you have any Private Themes? Hide them : Eğer görüntülenmesini istemediğiniz tema var ise bu alandan temalarınızı seçebilirsiniz.

Wordpress Tema Önizleme Eklentisi - WordPress Theme Demo Bar 4

 

All Themes & Stats Bölümü Ayarları

Bu alanda temalarınız ile ilgili gerekli demo linklerini bulabilir ve ziyaretcileriniz ile paylaşabilirsiniz. herhangi bir ayar vs işlem yoktur.

Wordpress Tema Önizleme Eklentisi - WordPress Theme Demo Bar 5

 

Individual Theme Settings Bölümü Ayarları

Bu alanda mevcut temalarımıza İndirme , hakkında, Satın al butonlarına linkler ekleyebiliriz. Bu işlemi Add New Settings bölümünden yapabilirsiniz.

  • Select a Theme : Temanızı Seçin.
  • URL to Theme Info Page : Tema ile ilgili hakkında ( kaynak ) linki mevcut ise bu alana ekleyebilirsiniz.
  • URL to Download Page : Bu kısımda ister download ister buy seçeneklerinden bir tanesini seçerek linki hemen sağında bulunan boşluğa girmeniz yeterli
  • Son olarak ADD buttonuna tıklayın ve bitti.

 

Yorumlar

Henüz hiç yorum yapılmamış.

Benzer İçerikler