Tüm tarayıcılarda saydamlık özelliğinin kullanılması

Daha önce birçok kez bu konuda bana e-posta geldi. Buraya yazmanın mantıklı olacağını düşündüm.

secici {
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=75); /* IE lt 8 */
    -ms-filter: "alpha(opacity=75)"; /* IE 8 */
    -khtml-opacity: .75; /* Safari 1.x */
    -moz-opacity: .75; /* FF lt 1.5, Netscape */
}

Günümüzdeki(27 Nisan 2012) durumu düşünürsek kodu aşağıdaki gibi kısaltabiliriz.

secici {
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=75); /* IE lt 8 */
    -ms-filter: "alpha(opacity=75)"; /* IE 8 */
}

Örneği görmek için tıklayınız. Kod aslında tek satır olması gerekir ki CSS 3 ile birlikte bu tek satır olacaktır. opacity: değer; tanımı ile halledeceğiz. Ama şu an yürürlükte olan tarayıcılar için yukarıdaki 5 satır kodu yazmalıyız. Bu kodu yazmak o kadar da sorun değil, ama eğer bu kodu yazdığınız sayfanızı W3C doğrulamasından geçirirseniz aşağıdaki gibi bir hata alacaksınız. donuklasma_val2 Bence W3C doğrulması çok önemli olmasada bazen şartlar doğrulama gerektirdiğinde(mesela müşteri istediğinde) bu sorunu çözmek için bir kaç yöntem var. Bu yöntemlerden biri javascript fonksiyonu hazırlayıp bu fonksiyon yardımı ile elemanlarımızı saydamlaştırma;

function donuklastirma(element, donukDeger){
    var oe = document.getElementById(element);
    // donuklastirma degeri
    oe.setAttribute("style", "opacity:"+ donukDeger +";")
    if (oe.style.setAttribute) // IE icin
    oe.style.setAttribute("filter", "alpha(opacity="+ donukDeger*100 +");")
}

Örneği görmek için tıklayınız. Diğer bir yöntemde ise ayrı bir css kodu yazıp bu kodu javascript ile ekleyebiliriz

<script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" media="screen" href="style/donuklastirma.css" />');</script>

Sorun: opacity tanımı kapsadığı elemanın içeriğini de etkiler bunu engellemek için Robert Nyman’ın bir çözümü var. http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ denemedim bir bakın isterseniz.

Kaynaklar

Categories CSS

:before ve :after Sözde Sınıflarının Kullanım Alanları

:before ve :after sözde sınıfları tanımlandığı elemanla ilişkili ve alt eleman olarak eklenir, isimlerinden de anlaşılacağı gibi içeriğin başına ve sonuna eklenirler. Kullanım alanlarını gördükçe ne kadar faydalı seçiciler olduğunu daha iyi anlayacağız.

Bu makalede özellikle kullanım alanlarına değineceğim. Daha önce bir çok sayfada kullandığım ve sitemde örneklerini verdiğim bu seçicileri önemine binaen daha detaylı anlatacağım. pseudo sınıfları ve pseudo elementleri yazımda anlatmıştım. Basit bir kullanımı var.

p.not:before { 
    content: "Not." 
}

Gelelim kullanım yerlerine, tek tek kullanım yerlerini inceleyelim.

İkon eklemek

:before yöntemi ikonların kullanımı için bence birebir çözüm oluşturuyor. Boostrap’in ikonları için kullandığı <i> veya <span> etiketi bana çok mantıklı gelmiyor. Zamanında :before ve :after desteği olmadığında <i> kullanmak mantıklı idi ama şimdi çok mantıklı bir kullanım değil bence.

Hazırladığımız ikon sprite resminden ilgili ikonu :before ile ekleyebiliriz. Sprite resimlerinde boşluk ayarlamak gibi işlerle uğraşmaya da gerek kalmaz.

a:before {
    content: '';
    width: 20px;
    height: 20px;
    background:url(images/sprite) 0 0 no-repeat;
}

Tanımlanan ikonları konumlandırmak bu yöntem ile çok kolay oluyor.

Aynı yöntemle yazı tipi ikolnarıda eklenebilir. Yazı tipi ikonları kullanırken content kısmına ilgili karakter konulur. https://fatihhayrioglu.com/font-face-yardimi-ile-ikon-eklemek-yeni-tl-sembolu-eklemek/

clearfix

Float uygulanmış elementleri tam kapsayamama sorunu halletmek içinde :before ve :after yardımı gerekir.

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
 
.clearfix:after {
    clear:both;
}

Bİr çok arayüz geliştiricinin hazır kod kütüphanesinde vardır bu kod. Şimdilerde CSS önişlemcilerinde mixin listesinin başında yer alır bu kod.

Çoklu kenar kullanımı

Daha önceki çoklu kenar oluşturmak yazımdaki örnekte görebileceğimiz gibi.

#cokluKenarCizgisi:before{
    border: 5px solid #06F;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

Kapsayıcı elemanın genişlik ve yüksekliğini alması için position:absolute tanımlanıp; left, right, top ve bottom değerleri sıfırlanmıştır.

CSS ile şekil eklemek

CSS ile üçgen yapmak yazımızdaki örneği inceleyelim.

.konusma-balonu:after{
  content: '';
  position:absolute;
  left: 30px;
  top:-15px;
  border-style: solid;
  border-width: 0 15px 15px 15px;;
  border-color: transparent transparent #40DBE5 transparent;  
}

.konusma-balonu:before{
  content: '';
  position:absolute;
  left: 29px;
  top:-16px;
  border-style: solid;
  border-width: 0 16px 16px 16px;;
  border-color: transparent transparent #6b5fb3 transparent;  
}

CSS ile oluşturulan ok :before ile, okun kenarçizgisi ise :after ile ekleniyor.

CSS ile şekil üretirken altıgen yapmak içinde :after yardımı ile çözümler mevcut. http://www.cssportal.com/css3-shapes/

Gölge çeşitleri eklemek

CSS3 box-shadow örnekleri yazısında ve diğer estetik gölge örneklerinde :before ve :after yardımı gerekmektedir. http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow bu sitedeki örnekler çok süper.

Sonuç

Yukarıda listelediğim ve listelemeyi unuttuğum(kaynaklarda var) işleri :before ve :after ile yapabiliriz. İşin mantığını anlatmak için yukarıdaki listeyi yazdım. Genel olarak mantığı kavradıktan sonra web sayfalarımızda gerektikçe bu sözde sınıfları kullanmak bizim elimizi güçlendirir.

Bazı durumlarda keşke bir kaç tane daha olsa kullansak dediğim oluyor 😀

Bu yazıyı özellikle Murat Çorlu‘ya ithaf ediyorum. 3 sene önce :before ve :after yazısı yazacaktı. Artık yazar bu göndermeden sonra 😀

Kalın sağlıcakla.

Categories CSS

Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım

Safari ve Google Chrome tarayıcıları her hangi bir metin girdi alanına(text input) odaklandığında bu elemanın etrafını bir şerit ile belirliyor.

Google Chrome Normal Hali

Google Chrome Odaklanmış Hali

Safari Normal Hali

Safari Odaklanmış Hali

Bu normalde güzel bir özellik, ancak biz eğer standart metin girdi alanı yerine kendi tasarladığımız bir metin girdi alanı koydu isek bu odaklanma çizgileri sorun çıkarıyor. Bir örnek yapalım.

En son projelerimden bonus.com.tr’de böyle bir sorun ile karşılaştığımda buna bir çözüm aradım. İlk kodum şöyle idi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background-color:#52c520;}

.aramaMetinKutusu{
	background:url(images/arama_zemini.gif) 0 0 no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusuOdak{
	background:url(images/arama_zemini.gif) 0 -31px no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusu input{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
}

.aramaMetinKutusuOdak input:focus{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
	background-color:#F6FFD4
}

</style>
</head>

<body>
<div class="aramaMetinKutusu">
    <input type="text" name="arama" onfocus="this.parentNode.className='aramaMetinKutusuOdak'" onblur="this.parentNode.className='aramaMetinKutusu'" />
</div>
</body>
</html>

Bu kodlarım Firefox ve IE’de sorunsuz çalıştı. Daha sonra sayfayı Google Chrome’da test ettiğimde aşağıdaki gibi bir sorun ile karşılaştım.

chrome_odak

Sorunun çözümünü araştırdığımda dış kenar çizgisini sıfırlamam gerektiğini gördüm.  

input{
	outline:0
}

tanımı bizi çözüme ulaştırdı.

Örnek kodu görmnek için tıklayınız.

Peki dış hat çizgisini kaldrımayalım demiştik şimdi ise kaldırdık, ne olacak şimdi? Burada odaklanma durumu için bir sınıf atayıp ona ayrı bir tanım yaptığımız için klavye kullananlar için sorun olmayacaktır.

WordPress Anasayfa ve Arka Sayfalarda Ayrı Tasarım Kullanmak

Merhaba arkadaşlar özellikle de WordPress tema geliştiricilerinin işlerine kesinlikle yarayacak bir konu sizlerle paylaşacağım. Özellikle de arkadaşlar portal temalarında fark etmişsinizdir anasayfada gelişmiş, birçok içeriğin listelendiği bir yapı vardır ancak anasayfanın altından ikinci sayfaya geçmek istediğinizde ise sizlere daha sade bir yapıyla içerikler listelenir. Burada tam olarak anlatmak istediğim şu;

http://burakisci.com/

Birde hemen ikinci sayfaya bakalım,

http://burakisci.com/page/2

Gördüğünüz gibi ikinci sayfaya geçtiğimizde tasarım değişti, çünkü arka sayfalar da anasayfada ki gibi gelişmiş bir sayfa yapısını kullanmaya gerek yoktur sadece içeriği göstermeniz yeterlidir. Bu özellik dediğim gibi genellikle portal temalarında işe yaramaktadır.

Şimdi gelelim bu yöntemi nasıl uygulayacağımıza.

Öncelikle arkadaşlar index.php’de ki kod yapımızı aşağıda ki gibi yapıyoruz;

1234567891011<?php get_header(); ?><?phpif ( $paged < 2 ) { include 'anasayfa.php';} elseif ( $paged > 1 ) { include 'arkasayfalar.php';} else {}?><?php get_sidebar(); ?><?php get_footer(); ?>

Kodlar da gördüğünüz şekilde iki tane .php dosyası yer alıyor. Öncelikle bir tane anasayfa.php dosyası oluşturuyoruz ve bu dosyaya anasayfada göstermek istediğimiz yapıya ait kodları ekliyoruz. Diğer bir dosyamız olan arkasayfalar.php dosyasına ise, arka sayfalarda göstermek istediğimiz yapının kodlarını ekliyoruz.

CSS ile Seçilen Metinlerin Rengini Değiştirmek

metin_secme_rengi

css-tricks.com sitesine her girdiğimde metinleri seçince çok hoş bir görüntü ile karşılaşıyorum. Bence çok güzel. Belkide standart renklerden bıktığım için farklı renkler bana hoş geliyor. Metinleri seçince ardalan rengini ve metin rengini değiştirebilmek çok güzel bence. Özelliğin tek kötü yanı Internet Explorer’un(8. sürüm dahil) desteğinin söz konusu olmaması.

Kodlama çok basit

::-moz-selection {
    background:#c00;
    color:#fff;
}
::selection {
    background:#c00;
    color:#fff;
}

Kodlamanın birinci kısmı(::-moz-selection) mozilla tabanlı yani Firefox için ikinci kısmı ise normal CSS 3 ile birlikte gelen koddur. Webkit tabanlı tarayıcılar ve Opera 9.5 bu kodu destekliyor.

Ayrıca diğer seçicilerede bunu uygulayabiliyoruz. Bağlantılar için farklı bir renk tanımlayalım mesela

a::-moz-selection {
    background:#1259C7;
    color:#fff;
}

a::selection {
    background:#1259C7;
    color:#fff;
}

Örnek olarak bu sitede herhangi bir metni seçince göreceksiniz.

Internet Explore desteklemiyor. Bunun haricinde Firefox 2, Safari, Opera 9.5 ve Google Chrome destekliyor.

Categories CSS

WordPress giriş seviye güvenlik önlemleri

Güzel bir uykudan kalktığınızda, içerik eklemek için veya kontrol amacıyla blogunuza girdiğinizde blogunuzun ortadan gittiğini düşünün. Çok korkunç olurdu değil mi? Blogunuzun hosting sağlayıcısı hacklendi ya da içeriklerinizin bir kısmı yanlışlıkla silindi, bu durumda ne yapardınız? Böyle durumlara hazırlıklı mısınız? Eğer öncesinden güvenlik önlemlerinizi aldıysanız sorun etmenize gerek yok, aksi taktirde şansınızın büyük olması lazım.

Wordpress Güvenlik

Hepimiz internette sürekli birileri ile görüşüyoruz, bazen de tartışmalar çıkıyor. Ülkemizde ne yazık ki öyle bir gruplar var ki birisiyle tartışınca ya da ondan istediğini alamayınca hemen onun bloguna zarar vermeye çalışıyorlar. Bu yüzden internet üzerinde görüştüğümüz kişilere dikkat etmeliyiz. Diğer yandan da ülkemizde ki çoğu hosting firmasının durumu orta da. Sürekli kesintiler, bağlantı sorunları, güvenlik açıkları… Aralarından yalnızda birkaç tane kaliteli firma sayabiliriz, diğer firmaları kullanan arkadaşlar ise sürekli bir tehlike içerisindeler, bloglarına ne zaman ne olacakları belli olmaz. Bu yüzden önlemlerimizi önceden almalıyız.

WordPress Güvenliği. Önlemek, Düzeltmekten İyidir!

İlk yapmanız gereken aslında blogunuza yapılabilecek her türlü hack girişimine karşı özellikle gerekli bazı dosya izinlerini ayarlamanız gerekiyor. Eğer kötü niyetli saldırıları nasıl önleyebileceğiniz konusunda bir fikriniz yoksa, size bilinen güvenlik açıklarını giderebilecek ve gelecekte ki saldırıları önleyerek blogunuzu daha güvenli hale getirecek birkaç eklentiden bahsedeyim.

  1. BulletProof Security Bu eklenti blogunuzu XSS, RFI, CRLF, Base64, kod enjeksiyon ve SQL enjeksiyon gibi çeşitli hack girişimlerine karşı blogunuzu korur. Acemi kullanıcılar için en iyi güvenliği sağlayacaktır.
  2. Theme Authenticity Checker Hemen hemen tüm hack girişimleri tema dosyalarına kötü niyetli kodlar eklenerek yapılır. Bu eklenti ise temanıza kötü niyetli kodlar eklenip eklenmediği konusunda denetimler yapar, kötü niyetli bir kod bulduğu zaman size raporlama yapar.
  3. AskApache Password Protect Çok iyi olduğunu düşündüğüm bir eklentidir. Eklenti kısaca şu işi yapar. Biliyorsunuz ki değiştirilme yapılmadıysa tüm WordPress sitelerin yönetici giriş paneli /wp-admin dizinindedir. Hack girişiminde bulunanlar bazen bu sayfadan şifrelerinizi deneme yanılma yolu ile ele geçirmeye çalışırlar. Bu eklenti ise /wp-admin dizinine ulaşabilmeniz için sizden ek bir şifre istiyor.

Kendinizi Her Zaman En Kötüsüne Hazırlayın

Aldığınız tüm önlemlere rağmen blogunuz yine de hacklenebilir, ancak blogunuz zevk için blog hackleyen kişiler yerine daha profesyonel kişiler tarafından hacklenecektir. Büyük ihtimal hacker sitenizi hacklemesi ile beraber tüm içeriğinizi de silecektir. Peki ya böyle bir duruma hazır mısınız?

Böyle durumlara hazır olmak için belirli aralıklarla blogunuzun yedeklerini almalısınız. Her zaman manuel olarak alınan yedekler daha iyidir ancak her zaman manuel olarak yedek alacak kadar vaktiniz yoksa bu işi sizler için otomatik olarak yapacak birkaç eklenti mevcut.

  1. WordPress Backup to Dropbox Dropbox hesabı olan her kişinin rahatlıkla kullanabileceği bir eklentidir. Eklentinin kullanımı için sadece yedekleme zamanlarını belirliyorsunuz, gerisini ise eklenti kendisi hallediyor. Yedekleri ise Dropbox hesabınızda sizler için saklıyor.
  2. XCloner Bu eklenti ile dosyalar, klasörler ve WordPress veritabanı yedekleme ve geri yükleme işlemlerini yapabilirsiniz. Sizin yerinize otomatik olarak yedeklerinizi alır. Öne çıkan özelliği ise tüm yedekleri tek bir dosyaya sıkıştırabilmesidir. Kötü olan özelliği ise yedekleri sizin sunucunuza yüklediği için kapasite sorunu oluşturabilir.

Yukarıda arkadaşlar sizlere bazı önerilerde bulundum. Eklentilerin kullanımları hakkında onları daha önce kullanmadığım için bilgim bulunmamaktadır.

Bazı Kategorilerde ki Yazıları Anasayfada Gizlemek

Çoğu arkadaşımız bazı kategorilere ekledikleri yazıları anasayfalarında göstermek istemeyebiliyorlar. Örneğin şuan da kullandığın temada sidebar kısmında son dinlediklerim ve son izlediklerim kategorilerine ait yazıları gösterirken, aynı yazıları anasayfa da göstermem saçmalık olurdu ya da bazı arkadaşlarımız sitelerine ekledikleri tanıtım yazılarını veya hit amaçlı makaleleri anasayfaların da göstermek istemeyebiliyorlar. İşte tüm bu durumlara çözüm getirecek bir yöntem paylaşacağım sizlerle.

Daha önceki yazılarda da belirttiğim gibi, bu tip konularda eklenti kullanmaktan kaçınıyorum. Hemen hemen tüm işlemlerimi kodlar ile halletmeye çalışıyorum çünkü eklentiler gereksiz yere sistemi yoruyorlar. İşte bazı kategorilerde göstermek istemediğimiz yazıları da functions.php dosyamıza ekleyeceğimiz birkaç satır kod ile, anasayfadan gizleyeceğiz.

Öncelikle arkadaşlar functions.php dosyamızı açıyoruz ve <?php ?> etiketleri arasına aşağıda ki kodları ekliyoruz. Kodlarda ki “-1123”, “-1181” gibi değerlerin yerlerine ansayfada yazılarını gizlemek istediğiniz kategorilerin ID numaralarını yazmanız gerekiyor. Kodda ki örneğe göre istediğiniz kadar değer girebilirsiniz.

function burakisciKAT($query) {if ($query->is_home) {if (!$query->get('cat'))  {$query->set('cat','-1123,-1181');}}return $query;}add_filter('pre_get_posts','burakisciKAT');

CSS ile Sekmeli(Tab) Menü Yapımı

Sekmeli menümüzü Doug Bowman’ın Sliding Doors tekniği ile yapacağız. Bu teknik bize esnek yapılı, yuvarlak kenarlı sekmeli menü yapma olanağı sağlar. Adım adım gidersek;

1.Adım Başlangıç olarak her zamanki gibi XHTML kodumuzu yazalım:

<ul>
	<li><a href="#">Ana Sayfa</a></li>
	<li><a href="#">Haberler</a></li>
	<li><a href="#">Ürünler</a></li>
</ul>

Tekniğin özeti şu menü oluşturmak için hazırlanan XHTML kodunda sırasız listeler(li) bir zemin resmi(sekme_sag_resim.gif) ve link elementine(a) bir zemin resmi(sekme_sol_resim.gif) atayarak esneklik sağlamak.

2. Adım Daha önceki menü örneklerinden de alışkın olduğumuz margin,padding ve liste imgelerini kaldırma işlemini yapalım:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 600px;
    float: left;
    border-bottom: 1px solid gray;
}

3. Adım Yukarıda bahsettiğimiz metodu uygulamak için iki adet resim hazırlamalıyız.

Bu resimlerin yüksekliklerinin uzun olmasının nedeni font boyutunun arttırılması(yakınlaştırma) durumunda iki satır olabilecek menülerde menü görünümünün bozulmaması içindir.

4. Adım Menüyü yatayda sıralamak için float:left tanımlaması yapıyoruz ve sağ zemin resmini(sekme_sag_resim.gif) uyguluyoruz:

ul li {
    float: left;
    background: url(images/sekme_sag_resim.gif) no-repeat top right;
}

5. Adım Daha önceki örneklerde gördüğümüz gibi tüm sekmeye link vermek için display:block tanımlaması yapıyoruz, sekmenin sol kısmını tamamlamak için zemin resmi olarak(sekme_sol_resim.gif) ekliyoruz, tüm sekmelerde aynı yüksekliği yakalamak için line-heighttanımlamasını yapıyoruz, text-decoration: none ile link alt çizgilerini kaldırıyoruz ve IE Mac ortamında sorun çıkarmaması için float:left ekliyoruz:

li a {
    background:url(images/sekme_sol_resim.gif) no-repeat left top;
    display: block;
    padding: 0 2em;
    line-height: 2.5em;
    text-decoration: none;
    float: left;
    color:#000;
}

6. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:

ul a:hover {
	color: #9D9C9C;
}

Sonuç: Kodumuzu çalıştırdığımızda aşağıdaki sonucu elde edeceğiz. Tab menüye bir çok örnek var resimli, resimsiz, resimli rollover gibi; internette aratarak bir çok örnek bulabilirsiniz.

WordPress Otomatik Öne Çıkarılmış Görsel Belirlemek

Genellikle portal, program indirme veya film izleme sitelerinde kullanılan; sizi büyük bir uğraştan kurtaran bir kodu sizlerle paylaşacağım.

Öncelikle arkadaşlar vereceğim kod ne işe yarıyor ondan bahsedeyim. Aşağıda ki kod sizi öne çıkarılmış görsel ekleme zorunluluğundan kurtarıyor, onun yerine yazıya eklediğiniz ilk resmi otomatik olarak öne çıkarılmış görsel olarak algılıyor.

Doğal olarak bu kodun bizim gibi blog sitelerinde kullanılması pek gerekli değil ancak günde onlarca yazı eklenen teknoloji, film vs. gibi sitelerde bu kod gerçekten kullanıcılara büyük bir zaman tasarrufu yaptırıyor. 

Oldukça basit şekilde kullanılabilen kodumuz hakkınızda aklınız da şöyle bir soru oluşmuş olabilir: “Peki ya yazıya resim eklemezsem ne öne çıkarılmış görsel olarak ne gösterilecek?“. Bu sorunun da cevabı aslında verdiğim kodda ki fonksiyonda gizlidir. Eğer yazınıza resim eklemediyseniz, wordpress öne çıkarılmış görsel olarak vereceğim kodda ayarlayacağınız resmi gösterecektir.

Kodumuz;

1234567891011121314151617181920function autoset_featured() {global $post;$already_has_thumb = has_post_thumbnail($post->ID);if (!$already_has_thumb)  {$attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );if ($attached_image) {foreach ($attached_image as $attachment_id => $attachment) {set_post_thumbnail($post->ID, $attachment_id);}} else {set_post_thumbnail($post->ID, '414');}}//end functionadd_action('the_post', 'autoset_featured');add_action('save_post', 'autoset_featured');add_action('draft_to_publish', 'autoset_featured');add_action('new_to_publish', 'autoset_featured');add_action('pending_to_publish', 'autoset_featured');add_action('future_to_publish', 'autoset_featured');

Verdiğim kodu functions.php dosyasında uygun gördüğünüz bir yere ekleyin. Varsayılan öne çıkarılmış görseli değiştirmek için “414” değeri yerine, belirlediğiniz resmin ID numarasını yazın.

WordPress Yorum Onay Bildirgeci Eklentisi

Birçok takipçimin sorduğu bir soru üzerinde bu eklentiyi sizlerle paylaşmak istedim. Gelen sorularda ise, siteme yaptıkları yorumlar onaylanınca kendilerine gelen teşekkür mailini nasıl gönderdiğim soruluyordu.

Yakup Gövler‘in hazırladığı ve bizlerle ücretsiz olarak paylaştığı WordPress Yorum Onay Bildirgeci Eklentisi sayesinde artık sitenize yorum yapan birinin yorumunu onayladığınızda o kişiye otomatik olarak bir teşekkür maili göndereceksiniz. Bu sayede yorum yaptığı için teşekkür alan ziyaretçinin blogunuza karşı olan ilgisi artıyor, diğer yandan da teşekkür mailinde ziyaretçinin yaptığı yorumun linki de yer aldığından ziyaretçilerin sitenizi tekrar ziyaret etme oranı artıyor.REKLAM

Size yorum yapan bir ziyaretçinin yorumunu onayladığınızda ona gidecek mail aşağıda ki gibi olacaktır.

wyob

Eklentiyi aşağıda ki butona tıklayarak indirebilirsiniz, eklentiyi indirdikten sonra kurup aktif etmeniz yeterli olacaktır. Başka hiçbir işlem yapmanıza gerek yoktur. Eklentinin çalışıp çalışmadığını kendi mail adresinizi kullanarak sitenize bir yorum yazıp, o yorumu onaylayarak anlayabilirsiniz.