WordPress'te duyuru penceresi nasıl gösterilir?

WordPress için geliştirilen eklentileri incelemeye devam ediyoruz.

Bugün eski ve arada kaynayıp gitmiş eklentilerden biri olan Simple Notices eklentisini inceleyeceğiz. Kolay kullanımı ve renk seçenekleri ile göz dolduran bu eklenti yayınlanmasının üstünden yıllar geçmesine rağmen yeni yeni yaygınlaşıyor ve popülerleşiyor.

Duyuru Penceresi

Web sayfanızda yaptığınız yenilikleri veya etkinlikleri hızlıca ziyaretçilerinize bildirmek istiyorsanız Simple Notices eklentisi tam sizlik.

Eklenti aynı yazı ve sayfa ekleme panelleri gibi bir yönetim alanına sahip. Tarih, başlık ve bildiri olmak üzere 3 adet bilgiyi girdikten sonra duyurumuz istediğimiz arayüz ile kullanıcılara gözüküyor. Tahmin edebileceğiniz gibi ileriye dönük duyuruları da planlıyabiliyorsunuz. Örneğin 29 Ekim tarihi için “Cumhuriyet Bayramınız kutlu olsun” duyurusunu öncesinden atıyabiliyoruz.

Kurulum

Eklenti tamamıyla ücretsiz.

WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.

1. Dosyayı indirin ve zip içerisinden çıkarın.


2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,


3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : Simple Notices

Detaylar

Eklentiyi kurduktan sonra Wp-admin‘e giriyoruz ve sol kısımdaki Notices altından detayları görüntüleyebiliyoruz.

Ayrıca yeni duyuru eklerken panelin sağ tarafından duyuru penceresinin rengini ve “Logged-in users only” kısmından da duyurunun sadece üyelere görünmesini aktifleştirebiliyoruz.

Kapanış

Web sayfanız ile ilgili gelişmeleri günümüzde sosyal ağlar üzerinden yapıyoruz. Fakat bu tip duyuru pencereleri her zaman için daha fazla dikkat çekici olmuşlardır. Ayrıca kullanımları, sitenizi ziyaret eden kişiyi ikincil bir platforma bağlamaktan daha akıllıcadır.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.

WordPress'te duyuru penceresi nasıl gösterilir?

Photoshop ile Arkaplan Temizleme (Dekupe) ve Fırça Yapımı

Bu dersimizde Photoshop ile fotoğrafların arkaplanını temizliyoruz, daha sonra fırça oluşturuyoruz.

Orjinal Fotoğraf

Derste aşağıdaki görsel kullanılmıştır.

Video Dersler

Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.

Photoshop ile Arkaplan Temizleme (Dekupe) ve Fırça Yapımı

CSS ile üzerine gelince açılan kutucuklar oluşturun!

Web sayfanıza CSS desteği ile küçük bilgi kutucukları ekleyebilirsiniz. Overflow elemanının hidden değeriyle gizleyeceğimiz detaylı bilgi sadece onmouseover ile aktif olmakta. Hazırlayacağımız örnekte bu uygulamayı HTML5 ile listeye eklenen section elemanı ile birlikte kullanacağız. Fakat istek dahilinde bu etki div veya table öğeleri için de uygulanabilir.

Makalenin alt kısmından tasarımı canlı olarak test edebilirsiniz.

Nasıl hazırlanır?

Bu tasarımı hazırlamak için tek yapmamız gereken birkaç satır HTML ve CSS kodu yazmak. Overflow:hidden tanımlamasını CSS’in transition elemanı ile süsleyerek <section>‘ın detayında bulunan bilgiyi gizleyeceğiz.

HTML Kodları

Daha önce dediğimiz gibi section elemanı ile bir örnek hazırlayalım. Tasarımı genişletmek ve daha şık hale getirmek için biz bir adet span elemanı da kullanacağız.

<section>
<span>Adobewordpress.com ne yapar?</span>
Adobe dersleri, WordPress, SEO, HTML5 ve CSS3 gibi güncel konuları ele alan Türkçe interaktif eğitim merkezi.
</section>

Şimdi geçelim tasarıma.

CSS Kodları

Section elemanı için tanımlamalarımızı yapalım. 12 piksel büyüklüğündeki Tahoma yazı tipi ortalama olarak 15px civarında bir satır uzunluğuna sahip. Dolayısıyla max-height tanımlamamız ile section elemanını daraltıyoruz.

section 
max-height: 15px;
overflow: hidden;
background-color: #665847;
border-left:8px #3D362D solid;
width: 220px;
padding: 4px;
color: #FFFFFF;
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
-o-transition: max-height 1s ease;
transition: max-height 1s ease;
font:12px Tahoma;

Şimdi de section elemanının üzerine gelince olmasını istediğimiz değişikliği, yani height değerinin yükselişini belirtiyoruz.

section:hover max-height: 200px;

Ve son olarak span elemanımızı tasarlayalım.

spancolor:#FF9900; display:block; margin-bottom:5px;

İşlem bu kadar.

Kapanış

Bu tip küçük örnekleri paylaşmayı seviyoruz. Çoğu zaman direkt olarak işinize yaramasalar bile ilham verici tasarımlar oldukları aşikar. Sonuca şöyle bir göz atalım :

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.

CSS ile üzerine gelince açılan kutucuklar oluşturun!

Responsive Fotoğraf Galerisi

Bu dersimizde her türden ekran çözünürlüğüne uyumlu olarak çalışan bir fotoğraf galerisi tasarlayacağız. Hazırlayacak olduğumuz bu galeri, görsel ağırlıklı tasarımlar için ideal gözüküyor.

Nasıl yapılır?

Sayfanın küçültülmesi ve büyültülmesi de dahil tüm ölçütlendirme işlemlerinin anlık olarak uygulanması için jQuery desteğine ihtiyacımız var. Dolayısıyla ilk olarak web sayfanızın <head></head> alanına jQuery‘nin güncel versiyonunu eklemeyi unutmayın. jQuery 1.11.0′ın sıkıştırılmış halini kullanmak isterseniz aşağıdaki kod sizin için yeterli.

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

Şimdi sırasıyla kodlarımızı yazalım.

HTML kodları

Galerinin gözükmesini istediği yere, yani kısaca <body></body> içerisinde istediğiniz alana div elemanımızı ekleyelim. Galeri isimli bir class atanmış div ekleyerek işleme başlayın. Bu div elemanının içerisine de bol bol görsel ekleyin. Eğer hali hazırda önizleme yapmak için yeterli görseliniz yoksa aşağıdaki kodları direkt olarak kullanabilirsiniz. Aşağıda 14 adet, çeşitli boyutlar görseller mevcut.

<div class="galeri">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/12/Ruth-Steck.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/11/aw-kartvizit.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/Kinetic-Singapore.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/Esteban-Munoz.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/instagram-1977.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/Dreamer-theme.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/Kutztown-University.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2014/01/Adament.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/tilt-shift-blur.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-masana.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/genclige-hitabe.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-anha-queen-vmf.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/08/scriptfont-the-dreamer.jpg">
<img src="http://www.adobewordpress.com/wp-content/uploads/2013/07/photoshop-eskitme-efekti.jpg">
</div>

CSS kodları

Sırada CSS kodlarımız var. Gördüğünüz gibi sadece 2 satırlık bir kod kullanacağız. Eğer isterseniz .galeri classına tasarım oluşturabilirsiniz. Ayrıca bu kısımdaki padding tanımlamasını değiştirerek objelerin birbirlerine olan mesafelerini de düzenleyebilirsiniz.

.galeri img 
float: left;
padding: 0 2px 2px 0;

JavaScript kodları

Ve son olarak JS kodlarımızı ekliyoruz. Detaylandırarak devam edelim. Düzenlemek isteyebileceğiniz kısımları etiketler ile belirttim.

<script language="JavaScript">
function boyutGaleri()

 // Bir fotoğraf karesinin kabaca genişlik ve yükselik değeri
 var genislik = 400;

 // Eğer ne yaptığınızı bilmiyorsanız buradan aşağısını değiştirmeyin
 var kutuGenislik = $(".galeri").width();
 var MaxDeger = kutuGenislik / genislik;
 var imgs = $(".galeri img");
 var noFoto = imgs.length, OrtDeger, ratio, photo, row, rowPadding, i = 0;

 while (i < noFoto) 
 OrtDeger = rowPadding = 0;
 row = new Array();
 while (i < noFoto && OrtDeger < MaxDeger) 
 photo = $(imgs[i]);
 // genişliği resetle
 photo.width("");
 ratio = photo.width() / photo.height();
 rowPadding += yatayPad(photo);
 // eğer birinci öğe ise clear:left ekle
 if(OrtDeger == 0) photo.css("clear", "left"); else photo.css("clear", "none");
 OrtDeger += ratio;
 row.push(photo);
 i++;
 // eğer sadece 1 resim kaldıysa onu sıkıştır
 if(i == noFoto - 1) MaxDeger = 999;
 
 unitWidth = (kutuGenislik - rowPadding) / OrtDeger;

 row.forEach(function (elem) 
 elem.width(unitWidth * elem.width() / elem.height());
 );
 


function yatayPad(elem)

 var padding = 0;
 var left = elem.css("padding-left");
 var right = elem.css("padding-right");
 padding += parseInt(left ? left.replace("px", "") : 0);
 padding += parseInt(right ? right.replace("px", "") : 0);
 return padding;


$(window).load(boyutGaleri);
$(window).resize(boyutGaleri);
</script>

Kapanış

Bu galeri orjinal haliyle bile inanılmaz büyük görsel havuzuna alt yapı oluşturabilir. Eğer aklınızda böyle bir tasarım kullanmak varsa hiç düşünmeden bu tasarımı kullanabilirsiniz.

Galeri Justin Klemm‘e aittir. Kendisine hem bu kaliteli tasarımı hazırladığı için, hem de Türkçe olarak anlatmamıza müsade ettiği için teşekkürlerimizi iletiyoruz.

Bir sonraki yazımızda görüşmek üzere, hoşçakalın.

Responsive Fotoğraf Galerisi

Kolayca fotoğraflarınızın kalitesini arttırın!

Sadece birkaç saniye içerisinde üstteki örneğe benzer bir düzenleme yapmak ister misiniz?

Fotoğraf makinesi, telefon veya diğer cihazlarla çekilen fotoğrafların kalitesini arttırmak aslında sanıldığı kadar zor değil. Bu makalemizde 3 adımda fotoğraflarınızı nasıl daha ilgi çekici hale getirebileceğinizi anlatacağız.

Photoshop faktörü

İlk olarak fotoğraflarımızı Photoshop ile açıyoruz. Photoshop’a girdikten sonra File > Open (CTRL+O) alanına giderek bu işlemi yapabilirsiniz. Artık fotoğrafımızı düzenlemeye hazırız. Sırasıyla ilerleyelim.

1. Fotoğraftaki fazlalıklar nasıl kırpılır?

Photoshop’un Crop aracıyla bu işlemi yapabiliyoruz. Bu araca toolbardan veya C kısayol tuşuyla erişebilirsiniz.

Crop aracını seçtikten sonra çalışmamızı saran bir çerçeve gözükecektir. Bu çerçeve ile oynayarak istemediğimiz kısımları çalışma dışında bırakıyoruz.

Crop işlemini tamamlayınca ister ENTER tuşuna basın, isterseniz de Photoshop’un üst kısmında bulunan ✔ işaretini tıklayın.

2. Görüntü nasıl netleştirilir?

Photoshop’un Sharpen filtresi sayesinde fotoğraflarımızı netleştirebiliyoruz. Bu işlem için Filter > Sharpen menüsü altından size uygun filtreyi kullanabilirsiniz. Makalemizin devamında Unsharp Mask isimli filtreyi kullanacağız.

Amount değerini 100%’de tutup Radius ve Threshold üzerinde oynarak fotoğrafınıza uygun bir efekti verebilirsiniz. Veya 100-3-0 değerlerini kullanarak ortalama bir efekt uygulayabilirsiniz.

3. Parlaklık, karşıtlık ve renk yoğunluğunu nasıl düzeltiriz?

Photoshop fotoğrafınızın renk yoğunluğuna ve parlaklığına bakıp sizin için doğru filtreyi uygulayacaktır. Bu işlemi yapmak için sırasıyla aşağıdaki işlemleri yapıyoruz.

İlk olarak Image > Adjustment > Levels (CTRL+L) alanına gidelim. Açılan kısımdan Auto butonuna basalım.

Daha sonra Image > Adjustment > Curves (CTRL+M) alanına gidelim. Açılan kısımdan tekrar Auto butonuna basalım.

Sonuç

Sadece birkaç adım ile bu derece büyük bir kalite farkı elde ediyoruz. Sizler de kalitesini arttırdığınız fotoğrafları bu makale altında yayınlarsanız aramıza yeni katılanlara ilham vermiş olursunuz.

İyi çalışmalar.

Kolayca fotoğraflarınızın kalitesini arttırın!

Sitenize eklediğiniz YouTube videolarına hükmedin!

Bu makalemizde, web sayfalarında YouTube videolarına bol bol yer veren okuyucularımız için embed mantığını konuşacağız.

Web sayfalarına eklenmiş videoların otomatik olarak oynaması, istenen dilde altyazı oluşturulması, istenen süreden başlaması ve bildirilerin otomatik olarak açılması gibi özelliklerin nasıl aktif edildiğini anlatacağız.

İlk olarak YouTube’un bizlere sunduğu 3 ayrı paylaşım tipini tanımlayarak başlayalım.

YouTube Embed

An itibariyle 3 ayrı tanımlama ile web sayfalarımıza YouTube videoları ekleyebiliyoruz. Bunlardan en popüleri yenilenmiş yazılımıyla <iframe> tipi olan New embed code. YouTube bu kategori altında HTML5 video oynatıcıyı da duyuruyor ve ilgilenenlere buradan katılma şansı sağlıyor. İkinci embed tipimiz de Old Embed Code diye tanımlanan, <object> tanımlamasıyla başlayan ve sadece Flash üzerinden çalıştırılabilen uygulama.

Soru-cevap şeklinde devam edelim.

YouTube videosunu web sayfama nasıl eklerim?

1. Beğendiğiniz videonun alt kısmında bulunan Share alanını tıklıyoruz.


2. Açılan mini pencerede ‘Embed’ alanına geçiyoruz.


3. ‘Video size’ alanından istediğimiz ölçütlendirmeyi yapıyoruz.


4. ‘Show suggested videos when the video finishes’ alanını işaretlersek videomuz bittiğimizde ‘önerilen videolar’ isimli bir pencere açılır.


5. ‘Enable privacy-enhanced mode’ alanını aktifleştirirseniz, sayfanızdaki videoları oynatmayan kullanıcıların bilgileri YouTube tarafından kayıt altına alınmaz.


6. ‘Use old embed code’ kısmı ise yukarıda bahsettiğimiz paylaşım tiplerini seçtiğimiz kısım. Eğer Bu alanı aktifleştirirseniz YouTube size Flash tabanlı bir embed kodu tanımlar ve bu kod <object> elemanı ile başlar.

Web sayfamdaki videoların otomatik olarak oynamasını nasıl sağlarım?

Videoları sitemize eklemizi sağlayan embed kodunun sonuna, yani ID tanımlamasının hemen yanına ‘&autoplay=1′ yazarak bu işlemi yapabilirsiniz.

Örnek kullanım :

<object height="350" width="425">
<param name="movie" value="http://www.youtube.com/v/LUeT24saKNA&autoplay=1" />
<embed height="350" src="http://www.youtube.com/v/LUeT24saKNA&autoplay=1" type="application/x-shockwave-flash" width="425">
</embed>
</object>

Videonun istediğim saniyeden başlamasını nasıl sağlarım?

‘#t=’ tanımlaması sayesinde web sayfamıza eklediğimiz videoları istediğimiz saniyeden başlatabiliyoruz.

Aşağıdaki örnekte videoyu 1 dakika 10 saniye ileri sarılmış olarak başlatıyoruz.

<iframe ="" frameborder="0" height="315" src="http://www.youtube.com/embed/LUeT24saKNA#t=1m10s" width="420"></iframe>

Videonun caption veya altyazı desteğini nasıl açarım?

‘&cc_lang_pref=en&cc_load_policy=1′ tanımlaması ile web sayfanıza eklediğiniz videolara başlık ve altyazı desteği ekleyebilirsiniz. Tüm alt yazı ve dil desteklerini aşağıdaki bağlantıdan görebilirsiniz.

Codes for the Representation of Names of Languages

Kendi videolarımın web sayfalarında paylaşımını nasıl engellerim?

1. Video Manager alanına gidiyoruz.


2. Bu tanımlamayı yapmak istediğiniz videonun detayına gelip Edit linkini tıklıyoruz.


3. Açılan pencerede Advanced Settings alanına gidiyoruz.


4. Distribution Options altındaki Allow Embedding seçimini kaldırıyoruz.


5. Save Changes butonunu tıklayarak işlemi tamamlıyoruz.

Kapanış

YouTube’un paylaşım seçenekleri geniş. Ayrıca her geçen gün video oynatıcı daha da özgünleştirilebiliyor.

Adobewordpress’in video derslerini takip etmek için YouTube kanalımızı takip etmeyi unutmayın : http://www.youtube.com/adobewordpress

Konuyla alakalı sorularınızı yorum alanına bekliyoruz.

Sitenize eklediğiniz YouTube videolarına hükmedin!

WordPress'e yumuşak geçişli 'Yukarı Çık' buttonu ekleyin!

Ziyaretçilerinize, sitenizde daha kolay gezinme imkanı tanımak istiyorsanız ‘Yukarı çık’ buttonu olmazsa olmaz. Özellikle yükselik değeri fazla olan web sayfalarında ziyaretçinin hızlıca sitenin üst kısmına dönmesini sağlarsınız. jQuery desteği olmadan bu işlemi yaptığımızda geçişler daha keskin olabiliyor. Bu yüzden makalemizin devamında jQuery de yazılımımıza katkı sağlayacak.

Nasıl yapılır?

Yumuşak ‘Yukarı Çık’ buttonunu ister eklentiyle isterseniz de manuel yöntemle kurabilirsiniz. Tercih sizin. Adobewordpress olarak iki yolu da detaylandıracağız.

Eklenti ile yapımı

Bildiğiniz gibi WordPress büyük bir eklenti arşivine sahip. Gittikçe büyüyen bu arşiv size herşeyin kısayolunu sunuyor. Eğer makalemizin devamında kod satırları size yabancıysa Smooth page scroll to top isimli eklentiyi kurarak bu işlemi yapabilirsiniz.

Fakat WordPress üzerine kafa patlatan bir çok takipçimiz eklentilerden ziyade manuel yolu tercih ediyor.

Kurulum

Eklenti tamamıyla ücretsiz.

WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.

1. Dosyayı indirin ve zip içerisinden çıkarın.


2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,


3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : Smooth page scroll to top

Manuel yol ile yapımı

Yapmamız gereken işlemler gayet basit. Birkaç satır JavaScript, HTML ve CSS kodu işlemi tamamlayacak.

HTML

Temanızın bulunduğu dizine gidin ve footer.php’yi açın. Dosyanın içerisindeki </body> tanımlamasından öncesine aşağıdaki tek satırlık kodu yapıştırın.

<a href="#top" id="yukari-cik" title="Yukarı çık"></a>

Şimdi de aynı dizindeki function.php’yi açıyoruz ve aşağıdaki PHP kodunu ekliyoruz. Böylece script sadece ihtiyaç dahilinde çalışıyor.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/smoothscroll.js', array( 'jquery' ), '', true );

JavaScript

Şimdi aşağıdaki kodlardan yeni bir .js dosyası yaratıyoruz ve adını smoothscrool.js olarak tanımlıyoruz.

jQuery(document).ready(function($)
 $(window).scroll(function()
 if ($(this).scrollTop() < 200) 
 $('#yukari-cik') .fadeOut();
 else 
 $('#yukari-cik') .fadeIn();
 
 );
 $('#yukari-cik').on('click', function()
 $('html, body').animate(scrollTop:0, 'fast');
 return false;
 );
);

Bu dosyayı da ana dizinimize, yani function.php dosyasının olduğu dizine atalım.

CSS

Sıra geldi bu buttonun tasarımını oluşturmaya. CSS dosyamıza aşağıdaki kodları ekliyoruz.

#yukari-cik 
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
z-index:9999;
display:none;
background: url("yukari.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;


#yukari-cik:hover -webkit-transform: rotate(360deg) background: url('') no-repeat;}

Gördüğünüz gibi yukari.php isimli bir görsel kullandık.

Kapanış

Yumuşak geçişli ‘Yukarı çık’ buttonunun nasıl yapılacağına dair iki adet yöntem sunduk. Aslına bakarsanız yukarıdaki küçük kodlamaları yerlerine yerleştirmeniz eklentiyi kurmanızdan daha kısa sürede yapılabilir. Dolayısıyla hem performans açısından, hem de kurulum işlemi açısından sizlere ‘Manuel yolu’ öneriyoruz.

Bizden şimdilik bu kadar. Hoşçakalın.

WordPress'e yumuşak geçişli 'Yukarı Çık' buttonu ekleyin!