Eğer wordpress kurulumu ile ilgili sıkıntı yaşayan arkaşlar varsa konu altından yorum yazarak belirtebilirler.

Benzer Yazılar :
Localhosta WordPress Kurma

Fontların birçok kullanım alanı vardır. Bizim işimiz web tasarımda ve yapacağımız wordpress temalarda kullanmak olduğu için bunun üzerine eğileceğiz. Fontlar CSS yapılandırılmasında önemli yer alır. Örnek vermek gerekirse şu anda gezindiğiniz sayfadaki yazıların hemen hepsinin bir font yapısı vardır. Bu yüzden yazıların okunaklı ve tasarıma uygun düşmesi için ayrıca bazı özerk yerdeki yazılarımızın diğer yerlerden farklı olduğunu belli etmek için font yapılarını kullanırız. Bu konumuzda elimizden geldiği kadar sizlere font yapısı hakkında geniş bilgiler sunmaya çalışacağız.

Font yapılarının sayısı bir hayli fazladır, fakat ne yazık ki, tamamını dilediğimiz gibi kullanamıyoruz. Bunun nedeni CSS de kullanılan font ailesinin bazılarının, bilgisayar işletim sisteminde yüklü olmayışıdır. Örneğin fontumuzun ismi a olsun bu fontumuz Windows işletim sisteminde yüklü iken Linux işletim sisteminde yüklü olmayabilir veya tam tersi de olabilir. Eğer yaptığınız tasarımda mutlaka kullanmak istediğiniz bir font varsa ve işletim sistemlerinde yüklü değilse veya emin değilseniz en pratik çözüm yolu bu fontu resim yoluyla vermektir. Bu pratikliği html de kolayca yapabiliriz fakat WordPress de durum biraz daha farklı olacaktır özellikle sürekli kullanılan alanlarda Konu başlıkları, H1, H2… gibi etiketlerde resim çözümü yetersiz kalacaktır. Bu sorunlardan kurtulabilmek için en temel kabul edilen bazı fontları font-family CSS komutumuzda belirteceğiz.
Örneklere geçmeden kısaca en temel kullanılan yapı olan serif ve sans-serif fontlarından bahsedeceğiz. Serif fontlar şekil olarak yazıların uçlarında tırnak vardır ve kolay okunulduğu söylenmektedir bu sebeple daha çok gazete, roman gibi metinlerde tercih edilmiştir. Sans-serif ise harflerin uç kısımları biraz daha keskindir daha modern bir yapısı vardır daha çok bilgisayar, tasarım, reklamcılık gibi çağdaş alanlarda son dönemlerde kullanım alanı artmıştır.
Aşağıdaki resimden farklarına bakabilirsiniz.

Serif ve sans-serif en yaygın kullanılan aşağıdaki font yapılarıyla kullanılır.
Serif fontlar

Sans-serif Fontlar

Serif ve sans-serif yanısıra başka bir font yapısı olan monospace vardır. Monospace font yapısındaki tüm karekterlerin uzunluğu aynıdır çok sık kullanılmamakla beraber dipnot olarak düşelim.

Font Ailesi (font-family)

Örneğin sitemizdeki h1 için font ailesi belirleyeceksek style.css dosyamızı açarak dilediğimiz font ailesini aşağıdaki örnekteki gibi belirleyebiliriz.

h1 {
font-family : verdana, sans-serif;
}
h2 {
font-family: Times New Roman, serif;
}

Önceden bahsettiğim üzere bazı fontlar algılanmayabilir bu yüzden bir font ailesine birden fazla font atayabiliriz. İlk olan font kabul edilir eğer ilk font yoksa diğerine bakılır bu şekilde yüklü font bulunana kadar devam eder.
Örnek

#menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Bu örneğimizde tarayıcı ilk olarak Verdana fontuna bakar bulamazsa Arial fontuna bakar ve bu sırada gider.

Font Stil (font-style)

3 çeşit ile ele alırız.
Normal : yazı normal gösterilir
İtalic : yazı eğik şekilde gösterilir
Oblique : italik yazıya benzer, fakat daha az desteklenir.
Örnek

#siteslogani {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-style:normal;
}

Font Boyutu (font-size)

Font boyutunda genel tercih edilen 3 yöntem vardır. Bunlardan ilki px cisinden belirtmektir.

.p {
font-size:16px;
}

Em ile font boyutunu belirlemek.
Bazı ie sorunlarından kaynaklı geliştirilen boyutlandırma birimi em dir. Son dönemlerde kullanımı yaygınlaşmıştır. Px ile karşılaştırılacak olursa 1em=16px dir.

.p{
font-size:1em;
}

% ile font boyutunu belirlemek.
Ekran çözünürlüğü problemini ortadan kaldırmak için geliştirilmiştir. Örneğin bazı bilgisayar çözünürlüğü 800px iken bazılarının çözünürlüğü 1024px bu yüzden px ile boyutlandırma yaparsak ya ekrana sığmayacaktır yada ekrana göre çok küçük kalacaktır. Bu tip problemleri % ile boyutlandırma yaparak çözmüş oluruz.

body {
font-size:%100;
}

Font rengini belirlemek (color)

Bunun için color komutu kullanılır.

body {font-family:  Tahoma, Verdana, Helvetica, sans-serif;  font-size:1em; font-style:normal; color:#333;}

şeklinde kullanılabilir.

Font Ağırlığı belirlemek (font-weight)

Font ağırlığı için genel kullanılan komutlar bold, normal komutlarıdır.

 h2 {font-weight:bold;}

Fontların Kullanılan işletim sistemlerindeki yaygınlığı için bu websitesinin ziyaret edebilirsiniz http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

Bazı renklerin genel manada kabul gören taşıdıkları manaları vardır. Bizde site içeriğinden yola çıkarak en uyumlu rengi çıkarabiliriz. Örneğin duygusal manada karamsarlığın, umutsuzluğun ağır bastığı renk siyahtır fakat kulanılan yere göre gücü simgeler. Tutku, aşk gibi duygusal ifadelerin rengi olarak kırmızı kabul edilir. Beyaz saflıktır, temizliktir. Sarı başağa benzer olgunluktur, bolluktur. Mavi gökyüzüne benzer enginlik ve bilginliktir. Lacivert otoriteyi belirler. Pembe renk ise neşeyi, güveni ve rahatlılığı sembol eder.

Bilindiği üzere renk seçimi çok önemlidir aynı zamanda seçtiğimiz ana rengin uyumlu olabileceği renkleri seçmek ve bu renkleri tasarımda göze hitap edecek şekilde dağıtmak genel manada tasarım için can noktasıdır. Renk uyumunu tek tek konrol etmek deneme yanılma yöntemi izlemek bizlere zaman kaybettirebilir bunun yerine renk uyumunu gösteren kaliteli siteler bizlere zaman kazandırabilir. Aşağıdaki linklerden birbirine uyumlu renkleri bulabilirsiniz.

Renk Karıştırıcıları

Kuler (Adobe) Masaüstünüze kurmak isterseniz bu bağlantıyı takip edin Adobe AIR
Online Color Scheme Generator
Color Scheme Designer
Color Blender (Renk Karıştırıcı)
Hazır CSS Şablonu üzerinde renk uyarlamaları
Renk Uyarlamaları
Renk HTML ve CSS Kodları
Html Color Codes
Masaüstü Renk Programları
Colorpic
Color Cop

şeklinde index.php dosyanıza ilave edebilirsiniz.

WordPress Manşet 1

Tıkla ve İndir

WordPress Manşet 2

Tıkla ve İndir

WordPress Manşet 3

Tıkla ve İndir

WordPress Manşet 4

Tıkla ve İndir

WordPress Manşet 5

Tıkla ve İndir

WordPress Manşet 6

Tıkla ve İndir

WordPress Manşet 7

Tıkla ve İndir

WordPress Manşet 8

Tıkla ve İndir

WordPress Manşet 9

Tıkla ve İndir

WordPress Manşet 10

Tıkla ve İndir

WordPress Manşet 11

Tıkla ve İndir

Notepad++ programını çalıştırınız ve ardından türkçeye çevirmek istediğiniz wordpress tema dosyasını açınız.

Yukarıdaki resimde gördüğünüz gibi çevirisini yapmak istediğiniz tema dosyasının program yardımıyla Biçim menüsünden Dönüştür (UTF-8 without bom) şeklinde dönüştürürseniz sorununuz ortadan kalkacaktır.
Eğer elinizdeki tema dosyası türkçe karekter sorunlu ise yine aynı şekilde (UTF-8 without bom) şeklinde dönüştürülür ve ardından manuel olarak hatalı yerler düzeltilip ardından kaydedilebilir.

İlk olarak bu adresten http://tr.wordpress.org/ wordpress dosyayı indiriniz. zipli dosyadan wordpress klasörünü çıkarıp bir kenarda bekletiniz.
PHP dosyaların çalışabilmesi için sunucuya ihtiyac vardır. Bu nedenle php, apache ve mysql kurmak gerekmektedir. Bunları hazır paket şeklinde kurabileceğiniz programlar vardır. Burada xampp localhost programına göre yapacağız bu adresten http://www.apachefriends.org/en/xampp-windows.html .exe uzantılı dosyayı indirip ardından kurulumunu bitiriniz. Bu programı kurmayı bilmiyorsanız google‘dan yardım alabilirsiniz.

1-) xampp kontrol panelini çalıştırınız.

2-)Apache ve mysql Start butonuna basınız.

3-) MySql Admin butonuna basınız. Tarayıcıda açılan bu sayfa bir kenarda beklesin. (6. kısımda yararlanacağız.)

4-) xampp kontrol panelinizdeki sağ sütunda yer alan Explore butonuna basınız. Bu yöntem sizi otomatik olarak C:\xampp klasörüne götürecektir. Şimdi yapmamız gereken C:\xampp klasörü içerisinde bulunan htdocs klasörüne girmek yani C:\xampp\htdocs burası bizim ftp dizinimizdir çalıştırmak istediğimiz scriptlerin dosyalarını buraya atarız şimdi C:\xampp\htdocs klasörü içerisinde yeni bir wordpress dosyası oluşturalım ve tüm wp dosyalarımızı bu oluşturduğumuz wordpress dosyasına atalım.

5-) Şimdi tarayıcımızı açalım ve ardından http://localhost/wordpress/ yazıp enter yapalım otomatik wordpress kurulum başlayacaktır.

6-) Database bilgilerini isteyen ekran gelecektir.

Yukarıdaki gibi ekran geldiğinde mysql’a bağlanıp database oluşturmamız gerekecek. Daha önceden açtığımız bu sayfadan http://localhost/phpmyadmin/ wordpress isimli bir database oluşturalım ve mysql ile alakalı işlerimiz şimdilik bitsin.

Şimdi tekrar kuruluma geri dönelim ve gerekli bilgileri dolduralım.

Veritabanı adı : oluşturduğumuz veritabanını yazacağız wordpress olarak oluşturmuştuk.

Kullanıcı adı : root

Parola : root’a şifre atamadığımız için boş bırakıyoruz.

diğerleri aynı kalıp Gönder butonuna basarak kuruluma devam ediyoruz.

7-) Bundan sonraki adımlar klasik wordpress kurulumu olduğu için anlatmaya gerek duymuyorum. Konu ile alakalı takıldığınız yerleri yorum kısmından sorabilirsiniz.

Bunun sorunun çözümü için yapılması gerekenleri aşağıda sıraladık.
1. Ftp’den “public_html/wp-content/plugins/google-sitemap-generator” dizini içerisindeki sitemap.xsl dosyasını açınız.

<?xml version="1.0" encoding="UTF-8"?>

kodunun altına
aşağıdaki kodu ilave ediniz.

<?xml-stylesheet type="text/xsl" href="product-list.xslt" ?>

işlemleri bitirdikten sonra kaydet yapıp tekrar ftp’de aynı dizine atınız ve üzerine yazdırınız.

Şimdi gelelim 2. kısımdaki düzenlemeye .htaccess dosyasını açınız ve aşağıdaki kodu sona ekleyiniz.

AddType application/xml .xsl

Yukarıdaki kodu ekledikten sonra kaydedip public_html içine atınız.
Artık Stylesheet yüklenmesinde hata: XSLT-Stylesheet için belirtilen bir XML-MIME-Türü yok:XML Sitemap sorununuz çözülecektir.

2.9.x sürümünden sonra dikkatinizi çeken bir özellik vardır “Admin” panelinden yazdığımız yazılara thumbnail  (küçük resim) ekleme özelliği fakat her temada gözükmeyebilir. Bu yüzden yapmamız gereken temamıza bunu ekleyebilmek ve kullanıcıların bu özelliği kullanabilmesini sağlamaktır.

Sadece yazılarda thumbnail özelliğinin olmasını isterseniz temanızın functions.php dosyasına aşağıdaki kodu ekleyiniz.

add_theme_support( 'post-thumbnails' );

Eğer temanızda hem yazılarda hem de sayfalarda thumbnail özelliğinin gözükmesini dilerseniz aşağıdaki şekilde kodları functions.php dosyasına ilave ediniz.

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

ve ya

1
2

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Yazılar için ekler
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Sayfalar için ekler

Yukarıdaki bahsettiklerimiz ile yazı veya sayfa iletilerimize thumbnail ekleme olanağı verdik.

Bir sonraki adımda küçük resimleri boyutlandırmamız gerekecek. Burada iki seçeneğiniz var : box-resizing (kutu boyutlandırma) ve hard-cropping (sabit kırpma). Kutuğu yeniden boyutlandırmada (box-resizing) siz genişlik ve yükseklik parametreleri belirttiğiniz kutunun içine oturana kadar resim orantılı bir şekilde küçülür (bozulmadan). Örneğin 100×50 boyutlarındaki resim 50×50 kutu içerisinde 50×25 olarak yeniden boyutlanabilecektir. Buradaki fayda tüm görüntüyü gösterir. Dezavantajı üretilen görüntü her zaman aynı boyutta değildir. Bazen genişlik sınırlı olacak, ve bazen de yükseklik sınırlı olacak. Belirli bir genişlik görüntüleri sınırlamak isterseniz, fakat uzunluğu dikkate almazsanız, sabit bir genişlik belirlersiniz ve uzunluğa çok büyük bir değer verebilirsiniz.
İlgili kodun kullanım şekli aşağıdaki gibidir.

set_post_thumbnail_size( 50, 50 ); // 50 pixels genişlik  50 pixels uzunluk, kutu boyutlandırma modu

İkinci seçeneğimiz sabit kırpma. Bu özelliğimizin en büyük faydası orantı bozulmadan otomatik olarak resimin boyutlanmasıdır burada yukarıdaki anlattığımız gibi genişliğin taşması yüksekliğin taşması, eksik çıkması gibi sorunlarla karşılaşmayız resim oranını koruyarak belli bir kalıba girer ve küçülür. Dezavantajı ise büyük resimler küçültüldüğünde, en boy oranının orantısını koruyarak küçüldüğü için küçük resimler çok bulanık ve anlaşılmaz çıkabilir.
Kullanımı

set_post_thumbnail_size( 50, 50, true ); // 50 pixels genişlik 50 pixels uzunluk, Sabit kırpma modu

Şimdi sıra geldi temada thumbnail nerede kullanmak isterseniz oraya aşağıdaki kodu yerleştirmek kısmına.

<?php the_post_thumbnail( 'thumbnail' ); ?>

Klasik bir index.php içerisine yukarıdaki kodu atıp test edelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
		<?php the_post_thumbnail( 'thumbnail' ); ?>
 
		<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 
		<div class="entry-summary">
			<?the_excerpt(); ?>
		</div>
 
	</div>
 
<?php endwhile; endif; ?>

Yukarıdaki örneğimizde yazıya ait küçük resimi ana sayfada gösterdik.

Thumbnail yerine medium (orta boy), large(büyük boy), full (tamamı) resimlerde ilave edebilirsiniz. İlgili kodları aşağıdan takip ediniz.
Orta boy resimler için

<?php the_post_thumbnail( 'medium' ); ?>

Büyük boy resimler için

<?php the_post_thumbnail('large'); ?>

Resimin tamamı için

<?php the_post_thumbnail( 'full' ); ?>

Kodlarını kullanabilirsiniz.

Burada resim için kendimiz çözünürlükte belirleyebiliriz.

1

<?php the_post_thumbnail( array(100,100) ); ?>//100 genişlik 100 uzunluk atadık

Şimdi sıra geldi resimlere alt, title, align gibi tanımlamalar vermeye bunun için array komutunu kullanacağız birkaç tane örnek verilmiştir.
İlk örneğimizde thumbnailimiz 200×200 pixel boyutunda ve resmimiz sola dayalı olsun

<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>

İkinci örneğimizde resim boyutumuz medium, sola dayalı ve alt tanımı yapalım

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>

Bunlara Resim title girmek isterseniz

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>

İşin özeti sıralama aşağıdaki gibi olmalı $size yerine boyut, $attr yerine resim özellikleri (class, alt, title gibi)

<?php the_post_thumbnail( $size, $attr ); ?>

Eğer konu içerisinde resim yoksa

,

Biz yukarıdaki örneklerde resim varsa dilediğimiz yerde gösterdik şimdi varsayımdan gidelim ve konu içerisine resim yüklenmemişse onun yerine varsayılan bir resim ekleyelim aşağıdaki kodları takip ediniz.

1
2
3
4
5
6

<?php
	if ( has_post_thumbnail() )
		the_post_thumbnail( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

Yukarıda kodların anlamı eğer resim varsa dilediğimiz yerde thumbnail şeklinde verecektir. Resim yoksa varsayılan olarak belirleyeceğimiz bir resmi verir.
Dikkat edilmesi gereken

has_post_thumbnail()

mutlaka döngü içerisinde olmalı koşul komutunda (if else ) kullanılmalı.

Anasayfada thumbnail farklı değer vermek single.php’de farklı değer vermek

önce functions.php dosyamızı düzenleyelim

1
2
3

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size

home.php ya da index.php dosyası içerisinde aşağıdaki kodu kullanalım (döngü içinde olmalı)

<?php the_post_thumbnail(); ?>

single.php dosyasında ise aşağıdaki kodu kullanalım (döngü içinde olmalı)

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

burada functions.php dosyasından single-post-thumbnail değerlerini alacaktır.

Yazı Resmi id alma

Belki kendinize özel bir script yazabilirsiniz veya özel alan ve bunun yanısıra kullanıcıların kendi resimlerinide yüklemesini isteyebilirsiniz. Yazı içerisindeki resmin id yakalayabilirsiniz ve kullanabilirsiniz.
Aşağıdaki kodu ilave etmeniz gerekmektedir.

$image_id = get_post_thumbnail_id();

Örnek kullanımı

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
 
$args = array(
	'post_type' => 'attachment',
	'numberposts' => -1,
	'post_status' => null,
	'post_parent' => $post->ID,
	'exclude' => get_post_thumbnail_id()
	); 
$attachments = get_posts($args);
if ($attachments) {
	foreach ($attachments as $attachment) {
		echo apply_filters('the_title', $attachment->post_title);
		the_attachment_link($attachment->ID, false);
	}
}
 
?>

Yararlanılan kaynaklar :

http://codex.wordpress.org/Template_Tags/get_post_thumbnail_id

http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail

http://codex.wordpress.org/Function_Reference/has_post_thumbnail

http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature

http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

http://www.kremalicious.com/2009/12/wordpress-post-thumbnails/

Tavsiye Eklentiler :

http://wordpress.org/extend/plugins/regenerate-thumbnails/

http://wordpress.org/extend/plugins/get-the-image/

Tavsiye temalar (incelenmesi için):

http://themehybrid.com/themes/hybrid

http://wordpress.org/extend/themes/twentyten