Buradasın: Ana Sayfa / , / Wordpress Görsel Boyutlarına Yenisini Ekleyin

WordPress Görsel Boyutlarına Yenisini Ekleyin

Yazar: Sir Pavlow Tarih: 15 Haziran 2010

Uzun bir aradan sonra, yazılarıma devam etme kararı verdim, ihtiyaçlar doğrultusun da ortaya çıkan düzenlemeleri bloğumdan paylaşacağım, bu sayede, benzer durumda ki kullanıcılara yol gösterecek klavuzlar hazırlamak niyetindeyim. Yazılara başlamadan önce bloğumu elden geçirdim, gerek görsellik olsun gerek işlevsellik olsun bir düzenleme yaptım. WordPress ve Drupal için özel çözümler geliştiriyorum ve bu aşamada bazı etkenleri plugin olarak yayınlayacağım bazılarını ise “WordPress Hack” ve “Drupal Hack” adı altında toparlayıp multilanguage anlatım seçenekleri ile uluslararası bloglarımda yayınlayacağım. Bunlardan birtanesi de WordPress Görsel Boyutları‘na yeni bir boyut seçeneği eklemek.

WordPress ile gelen ve medya ayarları altında bulunan Görsel Boyutları bilindiği üzere Thumbnail Orta ve Büyük olmak üzere 3 farklı boyutlandırma seçeneği içeriyor. Bu yazım biraz tutorial havasında olacak ve mevcut olan üç görsel seçeneğe nasıl ekstra seçenekler ekleyebileceğimizi gösterecek. Tutorial seviyesi olarak bir değer belirlememiz gerekirse advanced olarak nitelendirebileceğimiz bir  tutorial.

Bu yazıda değişiklik yapılan dosyaların yedeğini almanız kendi menfaatinize olacaktır, oluşacak bir hataya karşı yedekten geri yükleme yaparak ilk haline alabilirsiniz.

WordPress’i kurduğunuz zaman standart gelen görsel boyutları aşağıda görüldüğü gibi “Küçük Resim Boyutu“, “Orta Resim” ve “Büyük Resim“, olmak üzere 3 adet standart boyuta izin vermektedir. Biz bu yazıda buna bir adet daha ekleyeceğiz.

Wordpress Görsel Boyutları

Değişiklik Yapılacak Dosyalar

  • wp-admin/options-media.php
  • wp-admin/options.php
  • wp-admin/includes/image-edit.php
  • wp-admin/includes/image.php
  • wp-admin/includes/media.php
  • wp-includes/formatting.php
  • wp-includes/media.php

Burada yapacağımız değişiklikler mevcut kurulumu etkileyecektir, eğer her yeni kurulumda etkin olmasını istiyorsanız değiştirmemiz gereken bir kaç dosya daha bulunmakta ben bu yazıda onlara değinmeyeceğim.

1. Adım wp-admin/options-media.php
İlk adım olarak wp-admin/options-media.php dosyası içerisine aşağıdaki kod bloğunda belirtilen kodları buluyoruz,

Kodu Görüntüle PHP
1
2
3
4
5
6
7
8
9
10
11
12

<table class="form-table">
<tr valign="top">
<th scope="row"><?php _e('Thumbnail size') ?></th>
<td>
<label for="thumbnail_size_w"><?php _e('Width'); ?></label>
<input name="thumbnail_size_w" type="text" id="thumbnail_size_w" value="<?php form_option('thumbnail_size_w'); ?>" class="small-text" />
<label for="thumbnail_size_h"><?php _e('Height'); ?></label>
<input name="thumbnail_size_h" type="text" id="thumbnail_size_h" value="<?php form_option('thumbnail_size_h'); ?>" class="small-text" /><br />
<input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked('1', get_option('thumbnail_crop')); ?>/>
<label for="thumbnail_crop"><?php _e('Crop thumbnail to exact dimensions (normally thumbnails are proportional)'); ?></label>
</td>
</tr>

ve bu kodların bitimine aşağıdaki kodları ekliyoruz.

Kodu Görüntüle PHP
1
2
3
4
5
6
7
8
9

<tr valign="top">
<th scope="row"><?php _e('Optimal size') ?></th>
<td><fieldset><legend class="screen-reader-text"><span><?php _e('Optimal size'); ?></span></legend>
<label for="optimal_size_w"><?php _e('Max Width'); ?></label>
<input name="optimal_size_w" type="text" id="optimal_size_w" value="<?php form_option('optimal_size_w'); ?>" class="small-text" />
<label for="optimal_size_h"><?php _e('Max Height'); ?></label>
<input name="optimal_size_h" type="text" id="optimal_size_h" value="<?php form_option('optimal_size_h'); ?>" class="small-text" />
</fieldset></td>
</tr>

Ekleme İşleminden sonra kodlar aşağıdaki gibi görünmelidir.

wp-admin/options-media.php- (Büyük Halini Görmek İçin Resme Tıklayın)


Bu eklemeden sonra Admin panelinde Ayarlar sekmesi altında ki Media bölümüne Optimal Boyut seçeneği eklenmiş olacaktır. Fakat henüz kullanıma hazır değil, sadece görsel olarak o seçeneği ekledik.

Görsel Boyutları-Optimal Boyut


2. Adım wp-admin/options.php
2. adımda wp-admin/options.php dosyası içerisinde aşağıdaki kod bloğunu buluyoruz,

Kodu Görüntüle PHP
1

	'media' => array( 'thumbnail_size_w', 'thumbnail_size_h', 'thumbnail_crop', 'medium_size_w', 'medium_size_h', 'large_size_w', 'large_size_h', 'image_default_size', 'image_default_align', 'image_default_link_type', 'embed_autourls', 'embed_size_w', 'embed_size_h' ),

ve kodlara optimal boyut için ‘optimal_size_w’, ‘optimal_size_h’, kodlarını ekliyoruz. Ekleme işleminden sonra aşağıdaki gibi görünmelidir.

Kodu Görüntüle PHP
1

	'media' => array( 'thumbnail_size_w', 'thumbnail_size_h', 'thumbnail_crop', 'optimal_size_w', 'optimal_size_h', 'medium_size_w', 'medium_size_h', 'large_size_w', 'large_size_h', 'image_default_size', 'image_default_align', 'image_default_link_type', 'embed_autourls', 'embed_size_w', 'embed_size_h' ),

wp-admin/options.php Ekleme sonrası genel görünüm - (Büyük Halini Görmek İçin Resme Tıklayın)


3. Adım wp-includes/formatting.php
3. Adımda formatting.php dosyasını düzenleyeceğiz bunun için editörünüz ile wp-includes/formatting.php dosyasını açıyoruz, dosya içerisinde aşağıdaki kodları buluyoruz,

Kodu Görüntüle PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function sanitize_option($option, $value) {
 
	switch ($option) {
		case 'admin_email':
			$value = sanitize_email($value);
			break;
 
		case 'thumbnail_size_w':
		case 'thumbnail_size_h':
		case 'medium_size_w':
		case 'medium_size_h':
		case 'large_size_w':
		case 'large_size_h':
		case 'embed_size_h':

kodlarda belirtilen switch case yapısına optimal size seçeneğimizin genişlik-w(width) ve yükseklik-h(height) seçeneklerini ekliyoruz. Ekleme sonrası aşağıdaki gibi bir yapıya sahip olmalısınız.

Kodu Görüntüle PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function sanitize_option($option, $value) {
 
	switch ($option) {
		case 'admin_email':
			$value = sanitize_email($value);
			break;
 
		case 'thumbnail_size_w':
		case 'thumbnail_size_h':
		case 'optimal_size_w':
		case 'optimal_size_h':
		case 'medium_size_w':
		case 'medium_size_h':
		case 'large_size_w':
		case 'large_size_h':
		case 'embed_size_h':
		case 'default_post_edit_rows':
		case 'mailserver_port':
		case 'comment_max_links':
		case 'page_on_front':
		case 'rss_excerpt_length':
		case 'default_category':
		case 'default_email_category':
		case 'default_link_category':
		case 'close_comments_days_old':
		case 'comments_per_page':
		case 'thread_comments_depth':
		case 'users_can_register':
			$value = absint( $value );
			break;

4. Adım wp-includes/media.php
Bu adımda media.php dosyasında,

Kodu Görüntüle PHP
1
2
3
4
5

elseif ( $size == 'medium' ) {
	$max_width = intval(get_option('medium_size_w'));
	$max_height = intval(get_option('medium_size_h'));
	// if no width is set, default to the theme content width if available
}

kodlarını buluyoruz, aşağıdaki gibi görünmesi gerekiyor,

wp-includes/media.php- (Büyük Halini Görmek İçin Resime Tıklayın)

Optimal Boyut için aşağıdaki gerekli kodları yukarıda bulduğumuz kodların hemen öncesine ekliyoruz.

Kodu Görüntüle PHP
1
2
3
4

elseif ( $size == 'optimal' ) {
	$max_width = intval(get_option('optimal_size_w'));
	$max_height = intval(get_option('optimal_size_h'));
}

ekleme sonrası dosyanız aşağıdaki gibi görünmelidir.

wp-includes/media.php- (Büyük Halini Görmek İçin Resime Tıklayın)

5. Adım wp-admin/includes/image-edit.php
image-edit.php dosyası içerisinde değişiklik yapacağımız 2 alan bulunuyor öncelikli olarak dosya içerisinde “medium” kelimesini arayarak ulaşabilirsiniz, ilk değişiklik yapmamız gereken kod bloğu;

Kodu Görüntüle PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$parts = pathinfo($file);
$suffix = time() . rand(100, 999);
$default_sizes = apply_filters( 'intermediate_image_sizes', array('large', 'medium',  'thumbnail') );
 
if ( isset($backup_sizes['full-orig']) &amp;&amp; is_array($backup_sizes['full-orig']) ) {
	$data = $backup_sizes['full-orig'];
 
	if ( $parts['basename'] != $data['file'] ) {
		if ( defined('IMAGE_EDIT_OVERWRITE') &amp;&amp; IMAGE_EDIT_OVERWRITE ) {
			// delete only if it's edited image
			if ( preg_match('/-e[0-9]{13}\./', $parts['basename']) ) {
				$delpath = apply_filters('wp_delete_file', $file);
				@unlink($delpath);
			}
		} else {
			$backup_sizes["full-$suffix"] = array('width' =&gt; $meta['width'], 'height' =&gt; $meta['height'], 'file' =&gt; $parts['basename']);
		}
	}

yukarıdaki kodlar içerisinde (‘large’, ‘medium’, ‘thumbnail’) alanına optimal seçeneğini ekliyoruz ve ekleme sonrası kodlarımız aşağıdaki gibi görünmelidir.

Kodu Görüntüle PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$parts = pathinfo($file);
$suffix = time() . rand(100, 999);
$default_sizes = apply_filters( 'intermediate_image_sizes', array('large', 'medium', 'optimal', 'thumbnail') );
 
if ( isset($backup_sizes['full-orig']) &amp;&amp; is_array($backup_sizes['full-orig']) ) {
	$data = $backup_sizes['full-orig'];
 
	if ( $parts['basename'] != $data['file'] ) {
		if ( defined('IMAGE_EDIT_OVERWRITE') &amp;&amp; IMAGE_EDIT_OVERWRITE ) {
			// delete only if it's edited image
			if ( preg_match('/-e[0-9]{13}\./', $parts['basename']) ) {
				$delpath = apply_filters('wp_delete_file', $file);
				@unlink($delpath);
			}
		} else {
			$backup_sizes["full-$suffix"] = array('width' =&gt; $meta['width'], 'height' =&gt; $meta['height'], 'file' =&gt; $parts['basename']);
		}
	}

değişiklik yapacağımız bir diğer alan ise;

Kodu Görüntüle PHP
1
2
3
4
5

if ( $success &amp;&amp; ('nothumb' == $target || 'all' == $target) ) {
	$sizes = apply_filters( 'intermediate_image_sizes', array('large', 'medium',  'thumbnail') );
	if ( 'nothumb' == $target )
		$sizes = array_diff( $sizes, array('thumbnail') );
}

yukarıdaki kodda görülen array(‘large’, ‘medium’, ‘thumbnail’) bölümüdür. Bu alana da optimal seçeneğimizi ekliyoruz ve aşağıdaki gibi bir koda sahip oluyoruz.

Kodu Görüntüle PHP
1
2
3
4
5

if ( $success &amp;&amp; ('nothumb' == $target || 'all' == $target) ) {
	$sizes = apply_filters( 'intermediate_image_sizes', array('large', 'medium', 'optimal', 'thumbnail') );
	if ( 'nothumb' == $target )
		$sizes = array_diff( $sizes, array('thumbnail') );
}

6. Adım wp-admin/includes/image.php

wp-admin/includes/image.php- (Büyük Halini Görmek İçin Resme Tıklayın)

Bir diğer değişiklik yapacağımız dosyamız image.php, Resimde görünen kodların içerisindeki;

Kodu Görüntüle PHP
1

$temp_sizes = array('thumbnail', 'medium', 'large'); // Standard sizes

kodu arayıp array(‘thumbnail’, ‘medium’, ‘large’) dizi içerisine optimal seçeneğimizi dahil ediyoruz. Kod satırımız aşağıdaki gibi görünmelidir.

Kodu Görüntüle PHP
1

$temp_sizes = array('thumbnail', 'optimal', 'medium', 'large'); // Standard sizes

7. Adım wp-admin/includes/media.php
Son değişiklik yapacağımız dosya ise wp-admin/includes/media.php, dosya içerisinde aşağıdaki kodları arıyoruz ve;

Kodu Görüntüle PHP
1
2
3
4

function image_size_input_fields( $post, $check = '' ) {
 
		// get a list of the actual pixel dimensions of each possible intermediate version of this image
		$size_names = array('thumbnail' =&gt; __('Thumbnail'), 'medium' =&gt; __('Medium'), 'large' =&gt; __('Large'), 'full' =&gt; __('Full size'));

bu kodların içerisine optimal seçeneğimiz için ‘optimal’ => __(‘Optimal’), ibaresini ekliyoruz. Kodlarımızın aşağıdaki gibi görülmesi gerekmektedir.

Kodu Görüntüle PHP
1
2
3
4

function image_size_input_fields( $post, $check = '' ) {
 
		// get a list of the actual pixel dimensions of each possible intermediate version of this image
		$size_names = array('thumbnail' =&gt; __('Thumbnail'), 'optimal' =&gt; __('Optimal'), 'medium' =&gt; __('Medium'), 'large' =&gt; __('Large'), 'full' =&gt; __('Full size'));

Eğer bütün işlemleri adım adım ve eksiksiz yaptıysanız, Admin panelinde Optimal Size olarak eklediğimiz alana değer girip kaydettiğinizde database üzerinde options tablosunda gerekli alanlar eklenerek kaydedilecektir. Database üzerinde gerekli alanları kontrol ediniz aşağıdaki alanlar eklenmiş olmalıdır.

Wordpress Optimal Alanları- (Büyük Halini Görmek İçin Resme Tıklayın)

Artık resim eklerken seçenekler içerisinde eklediğimiz alana ait seçenek görünecektir.

Görsel Ekleme Seçenekleri- (Büyük Halini Görmek İçin Resme Tıklayın)

Farklı kullanım amaçları için ihtiyaç doğrultusunda yaptığım değişiklikleri bloğum üzerinden paylaşmaya devam edeceğim. Yorumlarınızla ve iletişim forumu aracılığı ile ihtiyaçlarınızı iletirseniz sizin için araştırmalarını ve uygulamalarını yapmaya çalışırım.

Kategori ,

Pavlow Vinelli, (Bilg. Müh. - Bilg. Kontrol Eğt.)

Yazılım Geliştirme, Elektronik Ticaret, İnternet Reklamcılığı, Arama Motoru Optimizasyonu, ERP, SAP ve Pazarlama alanlarında yıllardır yapmış olduğu çalışmaların, birikimi olan tecrübe ve eğitim ile sektörde, PR, Pazarlama, İnternet Reklamcılığı, SEO, Yazılım Geliştirme-Algoritma Kurgulama, Arge Çalışmaları, ERP ve SAP gibi alanlarda danışmanlık hizmetleri yürütmektedir.

Yazı dizisindeki yazılar

  • Wordpress Görsel Boyutlarına Yenisini Ekleyin

2 Yorum

  1. Gökhan
    Gökhan
    13 Şubat 2011 - 5:45 |

    Yazı için teşekkür ederim. Ancak değişiklik yapılan dosyaları yazının altına ekleseydiniz daha iyi olurdu.

    CevaplaCevapla
  2. Sir Pavlow
    Sir Pavlow
    13 Şubat 2011 - 6:31 |

    haklisiniz gokhan bey bundan sonraki duzenlemelerde o sekilde yaparim. Ilginiz ve oneriniz icin cok tesekkur ederim.

    CevaplaCevapla

Yorum Yazın

« »

Takip Et

Ana Sponsor

Sponsorlar

HostGator
BlueHost
Glob@at
ThinkHost
  • cengiz: hem asal hem palondromik sayılardan sonsuz tane yoktur ispatını yaparım
  • selek258: pardon yanlıs oldu bende soru sorcam cevaplayan olur mu acaba?
  • selek258: bende soru sorcan cevaplayan olurmu acaba?
  • selver: merhaba ben fotoğrf çekmeyi çok seviyorum ve profesynl bir fotoğraf makinesi almak istiyorum ne tavsiye...
  • Sir Pavlow: phpmyadmin veya kullandığınız her hangi bir SQL erişim arayüsü ile aşağıdaki queryleri eskiul ve yeniurl...

Giriş yap



Ziyaretçilerin Okudukları…

Twitter'dan Takip Et

Yazarkafe