WordPress manşet eklentisi Cu3er Post Elements

Defterimin taslaklar bölümüne göz attığımda, Stefan Kovac tarafından oluşturulan ve kullanımı oldukça kolay olan flash manşet uygulaması Cu3er hakkında ayrıntılı bir yazı yazacağıma dair çok öncelerden eklediğim taslağı gördüm. Düşüncem, Cu3er’in nasıl bağımsız olarak uygulanacağını anlatıp birkaç tane de örnek yayınlamaktı. Fakat 24 saatin yetmezliği bu düşünceme de sirayet etti ve bir türlü bu isteğimi gerçekleştiremedim. Hal böyle oldu diye bu isteğimden hepten vazgeçmek yerine “Bari daha tembel işi de olsa Cu3er ile ilgili birşey yapayım” dedim ve Cu3er ile hazırlanmış bir WordPress manşet eklentisi olan Cu3er Post Elements’i hem tanıtıp hem de Türkçeleştirme kararı aldım.

Cu3er Post Elements, Cu3er uygulamasının bütün esnekliğine sahip bir WordPress eklentisi. Seçtiğiniz kategoriye / kategorilere ait yazıların içindeki resimleri manşet resmi olarak gösteren eklentiyi sitenizde kullanabilmek için birkaç basit adımı takip etmeniz gerekiyor. Sırasıyla bu adımları aşağıda listeliyorum:

1. İster Türkçe, ister orijinal dilinde aşağıdaki bağlantılardan kaydettiğiniz eklenti dosyasında yer alan cu3er-post-elements klasörünü sitenizin eklenti dizini olan wp-content/plugins/ dizinine yükleyin.

2. Sitenizin yönetim panelinden eklentiyi aktif ettikten sonra Ayarlar -> Cu3er Elements bağlantısını takip ederek Cu3er Post Elements Ayarları sayfasına gelip gerekli ayarları yapın.

Her ne kadar ayarlar sayfasında gerekli açıklamalar varsa da dikkat etmeniz gereken birkaç noktaya değinmek istiyorum:
– KATEGORI ID’LERI bölümüne bir veya birden çok kategori ID’si girebilirsiniz. Bu bölüme girmeniz gereken kategori ID numaralarını bulmak için Yönetim Paneli menüsünden Yazılar -> Kategoriler bağlantısını takip edip ID numarasını öğrenmek istediğiniz kategoriyi düzenleme sayfasına gelin. Adres satırında wp-admin/categories.php?action=edit&cat_ID=4 şeklinde bir adres olur. 4, bu kategorinin ID numarasıdır. Birden çok kategorinin yazılarını Cu3er uygulamasında göstermek isterseniz numaraları virgül ile 4,5 şeklinde ayırın.
– CU3ER GENIŞLIK ve CU3ER YÜKSEKLIK bölümlerine manşetinizin ebatlarını piksel cinsinden girmelisiniz.
– Zaman Sayacı Ayarları ve Başlık Ayarları bölümlerine gireceğiniz değerleri manşet boyutunuza göre belirlemelisiniz ki; hem zaman sayacı hem de başlık, manşetinizin istediğiniz yerine gelsin.
– Manşet uygulamasının üstünde bulunan ve bir önceki / bir sonraki manşete geçmeye yarayan okları eklentiyle beraber gelen birbirinden farklı oklardan seçebilirsiniz. Bunun için CU3ER OK TIPI bölümünde (Kullanılabilecekleri göster) metninin üzerine geldiğinizde görünecek olan 10 adet ok tipinden beğendiğinizin altındaki numarayı ilgili alana girmeniz yeterli.
3. Son olarak da flash manşetin görünmesini istediğiniz yere (Muhtemelen anasayfanızda görünmesini istersiniz. Eğer öyleyse temanızın index.php dosyasının uygun bir yerine) aşağıdaki kodu ekleyin.

if ( function_exists('install_cu3er') ) { install_cu3er(); }

Son olarak bana lazım olduğu için belki lazım olur düşüncesiyle bir ufak tüyo da vereyim:
Eğer manşet bölümünde görünmesini istediğiniz resimleri yazıya Özel Alan olarak eklemek isterseniz eklentinin config.php dosyasında küçük bir düzenleme yapmanız gerekiyor. Önce config.php dosyasının 76. satırında bulunan

preg_match_all( '||i', $post->post_content, $m );

satırını ister silin, ister önüne // koyup pasifize edin. Ardından

if( $m[ 1 ] ) $xml .= '' . $m[ 1 ][ 0 ] . '';

kodunun yerine aşağıdaki kodu ekleyin.

$xml .= '' . get_post_meta($post->ID, "cu3er", true) . '';

Artık manşetinizde, cu3er ismiyle tanımladığınız özel alana girdiğiniz resimler görüntülenecek.

Eklenti dosyalarının ister Türkçeleştirilmiş halini, ister orijinalini aşağıdaki bağlantılardan temin edebilirsiniz.

  Cu3er Post Elements 0.5.1 Türkçe (174,2 KiB)

  Cu3er Post Elements 0.5.1 İngilizce (251,9 KiB)

Cu3er flash manşet
Cu3er flash manşet

W3 doğrulaması, sık karşılaşılan hatalar ve çözümleri 1

Epey zamandır gerek iş yoğunluğundan, gerekse tembellikten dolayı fazla vakit almayan girişler haricinde yazı yazmadığımı ve faaliyette bulunmadığımı fark ettim. Yatarak geçireceğim Pazar günümün bir bölümünü değerlendirerek taslak olarak kaydettiğim ve vakit bulduğumda yazacağım konulardan birine değineyim dedim. Bu yazıda, çoğu web tasarımcısı ve kodlayıcısının hayali olan W3 standartlarına uygun kod yazabilmek için dikkat edilmesi gereken noktalara ve sıklıkla yapılan W3 hataları ile bu hataların ne şekilde çözülebileceğine değinmek istiyorum.

Bu yazıda değineceğim noktaların temel düzeyde HTML – CSS bilgisi gerektirdiğini belirtmekte yarar var.

Şimdi geçelim sıklıkla yapılan W3 doğrulamasından sınıfta kalmaya neden olan hatalara ve çözüm yollarına:

1. Dosya kodlaması ve karakter seti uyuşmazlığı
W3 doğrulamasından geçen HTML kodlaması yapabilmek için öncelikli olarak oluşturulacak kodların ve dosyaların bazı kriterlere uygun olması gerekiyor. Bunların başında da doğru karakter kodlaması kullanmak gelmektedir. Yani HTML dosyamızı (PHP, ASP vs. de olabilir) kod tanımlamasında belirttiğimiz karakter setine uygun kodlama ile kaydetmeliyiz. Kod tanımlamasını utf-8 olarak belirttiğimiz bir dosyayı ANSI dosya kodlaması ile kaydedersek henüz W3 doğrulamasına girmeden hata alırız. Bu nedenle karakter setini

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

olarak atadığımız bir HTML dosyasını kaydederken dosya kodlamasını da utf-8 olarak seçmemiz gerekmektedir.

Dosya karakter kodlaması

2. DOCTYPE kullanmamak veya yanlış DOCTYPE seçimi yapmak
Sıkça internette gezinen biri olarak bir hobim de gezdiğim sitelerin kodlama yapılarını incelemektir. Bazen öyle durumlarla karşılaşıyorum ki şaşırmamak elde değil. Öyle ki koca koca ajanslar bile yaptıkları kodlamalarda DOCTYPE kullanmaya gerek dahi görmüyor, kodladıkları sitelerin standartlara uyumluluğunu önemsemiyorlar. Genelde kamu sitelerinde sıklıkla karşılaşılan bu durumun profesyoneller tarafından da yapılıyor olması üzüntü verici bir durum olsa gerek.

DOCTYPE, bir sayfanın tarayıcılar tarafından hangi kural ve kriterlere göre görüntüleneceğini tanımlamaya yarar. Eğer DOCTYPE, hiç kullanılmazsa veya yanlış kullanılırsa farklı tarayıcıların o sayfa için farklı şekillerde davranmasına ve farklı görünümler ortaya çıkmasına neden olur. Aynı zamanda da W3 doğrulama hatasına sebep olur. Bu nedenle W3 uyumlu bir kodlama için mutlaka DOCTYPE kullanmak ve DOCTYPE seçimini de doğru bir şekilde yapmak gerekir. DOCTYPE kullanımı ve doğru DOCTYPE seçimi oldukça geniş bir kavram olduğu için şimdilik daha fazlasına girmek istemiyorum. Sadece günümüzde en çok kullanılan ve son trendlerin en uygun ve kolay şekilde uygulanabilmesi için gereken DOCTYPE’in XHTML 1.0 Transitional olduğunu belirtmekle yetineceğim. Kullanımı da aşağıdaki şekildedir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bu noktadan itibaren listemizdeki maddelerin, DOCTYPE olarak XHTML 1.0 Transitional seçildiğini varsayarak ele alacağımı dikkate almanızda yarar var.

3. Meta etiketlerinin ve HTML elemanlarının kapatılmaması
XHTML kodlama standartlarına göre birkaç istisnai durum haricinde açılan her HTML elemanının kapatılması zorunluluğu var. Hal böyleyken gerek eskiden kalma alışkanlıklarla, gerekse hazır olarak temin edilen kodlarla bu işlem ihmal edilebiliyor ve bunun sonucunda da birçok W3 doğrulama hatası ortaya çıkıyor. Kapatılması ihmal edilen kodların başında da meta etiketleri, satır atlatma (<br />), yatay çizgi (<hr />) ve resim (<img src=”resim.jpg” />) kodları gelmektedir.

4. Stil ve JavaScript kodlarına tip tanımlaması atamamak
Sıklıkla karşılaştığımız bir başka kodlama hatası da kodlama içinde kullanılan veya kodlamaya dâhil edilen stil ve JavaScript kodlarının veya dosyalarının tip tanımlamalarının yapılmamasıdır. Bu hatadan kurtulmak için kodlamamızda kullanacağımız stil ve JavaScript kodlarına mutlaka tip tanımlaması yapmak gerekmektedir.

Yanlış kullanım:

<style>a { color: #00f; }</style>
<script src="jquery.js"></script>

Doğru kullanım:

<style type="text/css">a { color: #00f; }</style>
<script type="text/javascript" src="jquery.js"></script>

5. Eksik & (ampersand) işareti kullanımı
Bağlantı parametrelerinde ayraç olarak kullanılan & (ampersand) işaretinin yanlış, daha doğrusu eksik olarak kullanılması da standartlara uygunsuzluk sorunu meydana getirir. Sıklıkla bağlantılarda karşımıza çıkan bu işaretin W3 doğrulama hatasına neden olmaması için sayfa kodlamasında kullanımı esnasında açılımı ile birlikte yazılması gerekiyor. Eğer elimizde ara.php?q=html&s=2 şeklinde bir bağlantı varsa ve bunu HTML kodlamamızda kullanacaksak & işaretini sonuna amp; de getirerek kullanmamız doğru olacaktır…

Yanlış kullanım:

<a href="ara.php?q=html&s=2">html</a>

Doğru kullanım:

<a href="ara.php?q=html&amp;s=2">html</a>

6. Birden fazla ID tanımlaması kullanmak
Bilindiği gibi CSS, kodlama tekniklerine gireli beri birçok şey değişti. Bu değişikliklerin başında da HTML sayfalarının saf stil kodlarından arî olarak kodlandıktan sonra hazırlanacak stil dosyaları ile biçimlendirilmeleri gelmektedir. Bu durum, kod karmaşasının önüne geçtiği gibi uzun vadede yapılacak değişiklik ve düzenlemelerin de tek bir stil dosyası içerisinde rahatlıkla yapılmasına olanak sağlıyor.

HTML elemanlarının stil dosyası ile biçimlendirilebilmeleri için her elemana stil tanımlamasının yapılması gereklidir. HTML elemanlarına stil tanımlaması yapmanın iki yolu vardır; class ve id kullanmak. Aslında ID tanımının icat ediliş amacı stil tanımlamasından ziyade

Asıl kullanım amacı biçimlendirmeden ziyade işaretleme olan ID’ler, zamanla stil biçimlendirme elemanı olarak da kullanılmaya başlandı. Fakat birden çok HTML elemanının aynı ID ile işaretlenmesi, ID kullanımının amacına ters olduğundan W3 standartlarına uymaz ve hata verir. Bu nedenle sayfa içinde birden çok kullanılması düşünülen stil tanımlamalarının ID şeklinde değil de class şeklinde tanımlanmasında yarar var.

Yanlış kullanım:

<div id="kutu">1. Kutu içeriği</div>
<div id="kutu">2. Kutu içeriği</div>

Doğru kullanım:

<div class="kutu">1. Kutu içeriği</div>
<div class="kutu">2. Kutu içeriği</div>

Sıklıkla karşılaşılan W3 hatalarının oldukça çeşitli olması tümünü bir yazıda anlatmaya olanak vermiyor. O nedenle bu konuyu bir yazı dizisi şeklinde yazmanın daha uygun olduğunu düşünüyor ve ilk yazıyı burada bitiriyorum. Serinin ikinci yazısında görüşmek üzere, hatasız kodlamalar…

WordPress Türkçe üye giriş eklentisi Sidebar Login

Bir kısmımızın sadece günlük yazmak amacı ile kullandığı WordPress zengin eklenti desteği ve kolay özelleştirilebilir özellikleri ile; haber sitelerinden portala, video sitelerinden resim galerilerine hatta dizin sitelerine kadar birçok farklı amaç için kullanılan bir yazılım oldu.

Üyelik sistemi aktif olan WordPress sitelerde üyelerinizin giriş yapabilmeleri için META bileşeni ile bir giriş bağlantısı eklenebiliyor. Fakat daha profesyonel bir görünüm isteyen sosyal site sahipleri bir bağlantı takibi ile giriş safyasına yönlendirmek yerine sitenin herhangi bir bölümünde giriş paneli olmasını isteyebilirler. Sidebar Login tam da bu amaç için yazılmış bir WordPress eklentisi.

Mike Jolley tarafından geliştirilen eklentinin WordPress Eklenti Dizininde yer alan son sürümü 2.2.7 için Türkçe dil dosyası oluşturup gerek sitede görünen bölümü, gerekse yönetim paneli kısmını Türkçeye çevirdim.

Eklentinin son sürümü için Türkçe dil dosyasını yazının sonunaki Sidebar Login Eklentisi Türkçe Dil Dosyası bağlantısından temin edebilirsiniz. Bu bağlantıdan kaydedeceğiniz sblogin-tr_TR.mo dosyasını eklentinizin içinde yer alan langs klasörüne göndermeniz eklentinin Türkçeleşmesi için yeterli olacaktır (Tabi WordPressiniz Türkçe ise).

Eğer eklentinin tamamını Türkçe olarak edinmek isterseniz yine yazının sonuna eklediğim Türkçe Sidebar Login Eklentisi bağlantısını kullanabilirsiniz.

Eğer kullandığınız tema bileşen (widget) destekli ise eklentiyi kurup aktifleştirdikten sonra Görünüm – Bileşenler menüsü altında artık Sidebar Login isminde bir bileşen daha belirecek. Bu bileşeni aktifleştirdiğinizde artık üyelerinizin giriş yapmaları için sitenizde bir giriş paneliniz olacak. Bu paneldeki bağlantılar sayesinde üye olmayanlar üye olabilecek, üyeler de oturum açabilecek veya unuttukları şifreler için hatırlatma bağlantısı ile şifrelerini geri alabilecekler.

Eklentiyi tam teşekküllü kullanabilmek için sitenizde üye kaydı özelliğinin açık olması gereklidir. Bu ayarı da AyarlarGenel bağlantısını takip ederek Üyelik => “İsteyen herkes kayıt olabilsin” seçeneğini aktif etmelisiniz.

Aktifleştirme işlemi sonrası eklentinin ayarlarını yapmak için AraçlarÜye Girişi bağlantısını takip etmeniz gerekiyor.

Aşağıdaki resimde görülen eklenti ayarları sayfasında Giriş Yönlenme URL’si kısmına üyeleriniz giriş yaptıklarında, Çıkış Yönlenme URL’si kısmına ise üyeleriniz çıkış yaptıklarında gitmelerini istediğiniz sayfa adreslerini yazabilirsiniz. Giriş yapanları admin paneline yönlendirebilir, çıkış yapanların ise özel olarak hazırlayacağınız bir teşekkür sayfasına gitmelerini veya sitenizin anasayfasına dönmelerini sağlayabilirsiniz.

Ayarlar bölümünde üyelerinizin üye olma ve şifre hatırlatma bağlantılarını görüp görmemelerini de ayarlayabilir, Üye Bağlantıları bölümüne giriş sonrası üyelerinizin görmelerini istediğiniz sayfaların bağlantılarını ekleyebilirsiniz. Eğer üyelerinize yazı ekleme yetkisi vermişseniz aşağıdaki bağlantıyı eklemeniz yararlı olacaktır.

<a href="/wp-admin/post-new.php">Yazı Ekle</a>

  Sidebar Login Eklentisi Türkçe Dil Dosyası (2.2.7) (2,7 KiB)

  Türkçe Sidebar Login Eklentisi (2.2.7) (9,0 KiB)

WordPress Türkçe üye giriş eklentisi Sidebar Login

WordPress Türkçe üye giriş eklentisi Sidebar Login