t’infection.com’da kullandığımız kod renklendirici eklenti oldukça eskiydi ve geçtiğimiz günlerde bunu değiştirmeye karar verdim. Bu işlem için SyntaxHighlighter Evolved eklentisini kullandım. Bu yazımızda bu eklentiyi ve kullanımını sizlere kısaca anlatmaya çalışacağım.

Öncelikle söylemeliyim ki bu tür eklentiler, Asp, Php, Xhtml, Css gibi kodları gönderilerimiz içinde daha derli toplu bir şekilde göstermeye yarıyor. SyntaxHighlighter Evolved eklentisini de kullanan birçok site mevcut. Eklenti hem Wordpress’in son sürümüyle uyumlu hem de oldukça kolay bir kullanımı var. Hemen kurulum ve kullanıma geçelim.

Kurulum ve Kullanım
Eklentimizi Wordpress Eklenti bölümünden indiriyoruz. Daha sonra gelen paketi açıyoruz. Paketten çıkan syntaxhighlighter isimli dizini FTP yardımıyla sitemizde wp-content/plugins dizinine atıyoruz.

Bu aşamadan sonra sitemizin Yönetim Panelinden eklenti alanına geliyor ve SyntaxHighlighter Evolved eklentisini aktifleştiriyoruz.

Dilerseniz Yönetim Paneli/Ayarlar bölümünden SyntaxHighlighter kısmına gelebilir ve eklentinizin bir takım ayarlarını değiştirebilirsiniz. Bu alanda satır sayısı, satır numaraları, tema seçimi gibi ayarlarını bu alanda belirleyebiliyorsunuz.

Eklentimizin kullanımı ise oldukça basit. Hangi dilde kod betiği gösterecekseniz bunu küçük harflerle köşeli parantezler içine yazıyorsunuz.

[ css].ornek {color:#333}[/css]

şeklinde bir kullanım ile gönderimizde Css kodlarımızı rahatlıkla gösterebiliyoruz. Aynı şekilde Php, Xhtml, Javascript gibi kodlarımızı da gösterebiliriz. Zaten eklentinin ayarlar sayfasında aşağıda bir takım örnek kullanımlar mevcut. Bunlar da işinize oldukça yarayacaktır.

Ben bu eklentiyi kısa bir zamandır kullanıyorum ve sizlere de tavsiye ediyorum. Umarım sizler için faydalı olmuştur.

Farklı tarih gösterimleriyle birlikte blogumuzun görünümünü de büyük oranda değiştirebilir ve farklılık katabiliriz. Bu makalemizde örnek olarak Wordpress tabanlı bir blog üzerinde bir tarih alanı oluşturacak ve bunu görüntüleyeceğiz.

Öncelikle ilk adım olarak tarih alanımızın görüneceği Xhtml, Php kod bileşenini yazalım ve açıklayalım. Bu kodu index.php içerisinde gönderi başlığınızdan önce görünmesini istediğiniz bir alana ekleyin.

[HTML]

[/HTML]
Yukarıdaki kodda gördüğünüz üzere tarih isimli bir div sınıfı oluşturduk. Bu div içerisinde “tarih-gun” isimli sınıfa Wordpress’in the_time fonksiyonundan yararlanarak günü gösteren Php kodunu (< ?php the_time(d); ?>) yazdık ve etiketimizi kapattık. Sonra aynı şekilde “tarih-ay” isimli sınıfta da < ?php the_time(M); ?> kodunu kullanarak ayın 3 harfli kısaltmasını yazdık. Daha sonra açtığımız etiketleri sırasıyla kapattık ve işin Xhtml, Php bölümünü bitirdik. Sıra geldi Css’ye, yani en sevdiğim kısma :)

Sırasıyla tarih, tarih-gun ve tarih-ay isimli sınıflarımızı style.css dosyasında tanımlıyoruz.
[HTML]
.tarih {
width:48px;
height:48px;
background:#fff url(tariharkaplan.gif) no-repeat;
display:inline;
float:left;
}

.tarih-gun {
font:bold 14px/24px Arial, Verdana, sans-serif;
color:#333;
text-align:center;
}

.tarih-ay {
font:bold 16px/24px Arial, Verdana, sans-serif;
color:#fff;
text-align:center;
}
[/HTML]
Css kodlarında ise önce tarih alanını tanımladık. Bir arkaplan resmi belirledik. Bu alan 48*48 piksel genişliğinde olacak ve arkaplan resmimiz de aynı boyutta. Bu resmi ben Photoshop’ta önceden oluşturup uygulamamızda kullandım. Makalemizin sonunda örnek resmi alabilirsiniz.

Sonrasında tarih-gun alanında arkaplan resmimize uygun olarak #333 renginde ve Arial yazıtipinde, 14 piksel boyutunda bir yazıtipi belirledik. Text-align:center parametresi ile yazılan değerin alanın ortasında yer almasını istedik. Tarih-ay bölümünde ise sadece yazıtipimizin rengi ve boyutunu değiştirdik. Dikkat ederseniz 48 piksellik arkaplan resmimizde iki ayrı alan olan tarih-ay ve tarih-gun içindeki yazıtipimizde 24 piksellik bir alan yüksekliği belirledik. (font:bold 16px/24px Arial, Verdana, sans-serif; kodunda gördüğünüz gibi)

Yukarıda yer alan kodları index.php içinde tarih alanımızın görünmesini istediğimiz yere ekleyerek tamamlayalım. Gördüğünüz gibi Wordpress’in the_time fonksiyonu oldukça esnek bir yapıda ve bu özellikleri farklı farklı kullanarak değişik görüntüler elde edebiliriz.

.sl, .sl a {
text-decoration:none; color:#F91364; background:#fff; padding:2px 2px 2px 2px; font-weight:normal;
}
.sl:hover {
text-decoration:none; color:#fff; background:#F91364; padding:2px 2px 2px 2px; font-weight:normal;
}

Yukarıdaki kodu temanızın stil dosyasına ekleyin. Daha sonra oluşturduğunuz Wordpress gönderisinde herhangi bir bağlantı ekledikten sonra Görsel alanından gönderinin kodlarını gördüğünüz HTML bölümüne gelin. Burada link içine class=”sl” kodunu ekledikten sonra yazınızı yayınlayın. Bağlantı karakterinin değiştiğini göreceksiniz. Kodları yazarak gösterirsek bağlantınız şu şekilde olmalı:

<a href="http://www.google.com" class="sl">Google</a>

Değerleri kendinize göre değiştirerek siz de farklı bağlantı görünümleri kullanabilirsiniz. (Sanıyorum bu konu bana iletişim formu aracılığıyla sorulmuştu, o yüzden yazma ihtiyacı hissettim, umarım faydalı olmuştur)

Eklentinin kurulumu da oldukça basit. Eklentiyi Wordpress.org eklenti dizininden indirip wp-content/plugins bölümüne klasör olarak atın. Daha sonra yönetim panelinizden eklentiyi aktifleştirin. Panel ayarlar bölümünde eklentinin kaç gün önceki yazılara bu uyarıyı ekleyeceğini belirten ayarları (ve tabi uyarılar için geçerli olan renk ayarlarını) yaptıktan sonra kullanmaya başlayın. Dilerseniz görünmesini istediğiniz uyarı mesajının metnini de değiştirebilirsiniz. Herhangi bir kod eklemenize veya fazla işleme gerek olmadan eklentiyi kullanabilirsiniz.

Ali’nin eklentiyle ilgili yazmış olduğu gönderiye da buradan ulaşabilirsiniz. Bu eklentiyi bizlere kazandırdığı için Ali’ye teşekkürlerimi sunuyorum.

Bu yazımızda sizlere Ext Core Menu bileşeni kullanarak Wordpress sitelerimizde kategorilerimizi bu menü ile nasıl göstereceğimizi anlatacağım. Bir nevi Ext Core Menu’yü Wordpress tabanlı sitemize entegre edeceğiz ve böylelikle kategorilerimizin açılır bir menü ile görünmesini sağlayacağız. Öncelikle ExtJs sayfasına gidiyor ve Ext Core uygulama dosyasını indiriyoruz. Bu dosyayı indirdikten sonra sadece kullanacağımız menü değil diğer Ext Core uygulamalarının örnekleri de size geliyor. Ancak biz bu uygulamalar içinden sadece Menu klasörü içindekini kullanacağız.

Paket içinde bulunan Ext-Core.js dosyasını kullandığımız Wordpress temasının içine atalım. Examples >> Menu dizini içine girerek burada bulunan menu.js, menu.css dosyalarını da kullandığımız Wordpress temasının içine atalım. Images klasörü içindeki resimleri de kendi temamızın Images dosyasına atalım. (Şayet böyle bir dosyanız yoksa Images klasörünü olduğu gibi tema klasörünüzün içine atın)  Böylelikle menümüzü çalıştıracak olan tüm dosyaları Wordpress temamıza atmış oluyoruz. Bundan sonra tema dosyalarımızda değişiklik yaparak menüyü çalıştıracağız.

Bu aşamadan sonra yapacağımız şey çok basit. Şimdi kullandığınız temanın header.php dosyasını bir editör ile açın. Aşağıda yer alan kodları HEAD etiketi içine bir yere atıp kaydedin.

[PHP]

[/PHP]

Şimdi ise açılır menümüzün görünmesini istediğiniz yere aşağıdaki kodları yazın ve kaydedin.

[PHP]

< ?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

[/PHP]

Bu şekilde dosyaları kaydettikten sonra kategorilerinizin menü yardımıyla Kategori >> Alt Kategori >> Alt Alt Kategori şeklinde görünecek.

Dilerseniz menünün stillerinde değişiklik yaparak menünüze bambaşka bir görüntü katabilirsiniz. Umarım sizler için faydalı olmuştur. ]]> http://www.t-infection.com/ext-core-ile-kategorileri-acilir-menu-seklinde-gosterme/feed/ 16 http://www.t-infection.com/13-guzel-wordpress-galeri-sitesi/ http://www.t-infection.com/13-guzel-wordpress-galeri-sitesi/#comments Sun, 05 Jul 2009 12:30:07 +0000 webthese http://www.t-infection.com/?p=810 Wordpress tabanlı olan ve birbirinden güzel sitelerin derlendiği galeri/gösterim (showcase) sitelerin derlendiği bir yazı. Wordpress tabanlı sitesi olup ilham almak isteyenler için birebir.