WordPress 3.4'te Duyarlı Bir Başlık Oluşturma

Amongst all the new features and improvements that the recent WordPress 3.4 release has introduced, there is a hidden gem. Son WordPress 3.4 sürümünün sunduğu tüm yeni özellikler ve geliştirmeler arasında gizli bir mücevher var. Custom Header Image özelliği, WordPress tarafından bir süredir destekleniyordu, ancak daha önce sabit boyutları, duyarlı tasarım çağında çok fazla kullanım için çok hareketsiz hale getirdi.

Yeni sürüm bunu esnek hale getiriyor ve bu popüler seçenek için daha kolay ve daha temiz kodlar sunuyor. Tema geliştiricileri olarak artık mobil ziyaretçiler için optimizasyon ihtiyacını göz önünde bulundurarak daha da ilerleyebiliriz.

Önceden bir başlık resminin boyutları önceden tanımlanmış ve HEADER_IMAGE_HEIGHT ve HEADER_IMAGE_WIDTH sabitler ve yüklenen dosya bu kısıtlamalara uyacak şekilde kırpıldı. Ancak, 3.4 sürümünden beri, özel başlık resmi esnek genişlikleri ve yükseklikleri destekliyor ve bizi bu çirkin sabitlerden kurtarıyor. Kulağa ilginç geliyor, değil mi? Bakalım nasıl yapılabilir?

Ne elde edeceğiz?

Öncelikle, mevcut (ve geniş ölçüde tartışılan) duyarlı görüntü tekniklerinin hangisinin bize uygun olduğuna karar vermeliyiz. Sitenin markalaşması açısından önemini ve aynı zamanda bir post yapısından ya da işaretlemeden bağımsızlığını göz önünde bulundurarak, bu imaj için kendimize özel bir işaret oluşturabiliriz. Bu açıdan, “noscript” tekniği gerçekten ümit verici görünmektedir . Tekniği özetlemek için, aşağıdaki gibi çalışır:

Seçilen kesme noktaları için alternatif resim referanslarını,

Uygun CSS stili ve jQuery Picture'un çalışmasını sağlayan bir betik eşlik etmelidir. Bunun dışında, bir dizi önceden tanımlanmış başlık imgesine sahip olmak istiyoruz (Twenty Eleven temasına sahip olduğumuz gibi). Ayrıca, kullanıcıya kendi resmini yönetici paneline yükleme yeteneği sunmak istiyoruz. Resmin tam boyutlu bir sürümünün yüklendiğini varsayarak, başlık esnek boyutları ile birlikte yerleşik WordPress küçük resim desteği ile gerekli ara boyutları oluşturacağız. Özel başlığımız nihayetinde şöyle görünmelidir:

Yeterli konuşma, kodlara dalalım.

1. Adım: temanızla özel başlık kaydedin

$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg';$args = array('default-image'          => $default_url,'random-default'         => false,'width'                  => 1000,'height'                 => 300,'flex-height'            => true,'flex-width'             => true,'header-text'            => false,'default-text-color'     => '','uploads'                => true,'wp-head-callback'       => 'frl_header_image_style','admin-head-callback'    => 'frl_admin_header_image_style','admin-preview-callback' => 'frl_admin_header_image_markup',);add_theme_support('custom-header', $args);

Bu WordPress 3.4'te tanıtılan yeni bir kayıt kodudur. Bunun için tüm parametre kümesini görebilirsiniz. kodeks ama görevimiz için aşağıdakiler en önemlileridir:

• default-image - Temanın klasöründeki varsayılan resmin tam boyutuna URL
• width , height - temamız tarafından desteklenen maksimum değerler
• flex-height , flex-width - "true" olarak ayarlandığında, bu parametreler görüntünün esnek boyutlara sahip olmasını sağlar
• header-text - Temamızdaki görüntü üzerinde metin göstermeyeceğiz
• uploads - yöneticilerdeki yüklemeleri etkinleştir
• wp-head-callback - Tema başlığı bölümünde çağrılması gereken fonksiyon
• admin-head-callback - önizleme sayfası başlığı bölümünde çağrılması gereken işlev
• admin-preview-callback - Yönetici ekranında önizleme işaretlemesi üretme işlevi

Temanızda özel bir başlık resmi kullandıysanız ve tekniklerin nasıl karşılaştırıldığını merak ediyorsanız, burada eski sabitler ile yeni parametreler arasındaki eşdeğerlerin listesi (dizinin anahtarları):

HEADER_IMAGE        -> 'default-image'HEADER_IMAGE_WIDTH  -> 'width'HEADER_IMAGE_HEIGHT -> 'height'NO_HEADER_TEXT      -> 'header-text'HEADER_TEXTCOLOR    -> 'default-text-color'

2. Adım: Seçebileceğiniz varsayılan resimleri kaydedin

Örneğimizde, başlık için seçenekler olarak önceden tanımlanmış iki resim sunacağız ve bunların her birinin üç çeşidi olmalıdır: -large.jpg , -medium.jpg ve -thumb.jpg pencere genişliklerinin karşılık gelen aralığı için. En küçük boyut, yönetici arayüzünde küçük resim olarak da kullanılacaktır.

register_default_headers(array('city' => array('url' => '%s/_inc/img/city-large.jpg','thumbnail_url' => '%s/_inc/img/city-thumb.jpg','description' => 'City'),'forest' => array('url' => '%s/_inc/img/forest-large.jpg','thumbnail_url' => '%s/_inc/img/forest-thumb.jpg','description' => 'Forest')));

Kod oldukça açıklayıcıdır, dikkat gerektiren tek ayrıntı, görüntüler için doğru bir URL'dir: -large.jpg tam boy ve -thumb.jpg küçük resim için ( %s - otomatik olarak WordPress ile değiştirilecek aktif tema klasörü için bir yer tutucu).

3. Adım: ek resim boyutlarını kaydedin

add_image_size('header_medium', 600, 900, false);add_image_size('header_minimal', 430, 900, false);

Bu ek boyutların temamızla kaydedilmesi, WordPress'e, özel başlık için bir resim yüklerken her biri için bir varyant oluşturmasını bildirecektir. Uygun varyant, daha sonra adı kullanılarak elde edilebilir. Hile, oldukça geniş bir yükseklik değeri belirtmektir, bu sayede görüntü genişlikle yeniden boyutlandırılır ve en boy oranından elde edilecek yüksekliğini kaldırır.

Adım 4: ön uç için işaretleme

function frl_header_image_markup(){/* get full-size image */$custom_header = get_custom_header();$large = esc_url($custom_header->url);$mininal = $medium = '';/* get smaller sizes of image */if(isset($custom_header->attachment_id)){ //uploaded image$medium_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_medium', false);if(isset($medium_src[0]))$medium = esc_url($medium_src[0]);$minimal_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_minimal', false);if(isset($minimal_src[0]))$mininal = esc_url($minimal_src[0]);}else{ //default image$medium = esc_url(str_replace('-large', '-small', $custom_header->url));$mininal = esc_url(str_replace('-large', '-thumb', $custom_header->url));}/* fallback for some unexpected errors */if(empty($medium))$medium = $large;if(empty($mininal))$mininal = $large;?>

Yine, her şey basittir. İle frl_header_image_markup Fonksiyona cevap veren tekniklerimizin çalışması için gereken işaretlemeyi oluşturuyoruz. Buradaki en ilginç kısım, büyük, orta ve küçük eyaletler için resim URL'leri elde etmektir. WordPress 3.4 işlevi get_custom_header gerekli tüm verileri içeren özel bir başlık nesnesi döndürür. Eğer $custom_header uygun şekilde ayarlanmış attachment_id özellik, yüklenen bir resim ile uğraşıyoruz ve ara boyutlar kullanarak wp_get_attachment_image_src . Böyle bir özellik yoksa, varsayılan resimlerimizden biriyle ilgileniriz, böylece kendi adlandırma kurallarımıza göre ara boyutlar elde edebiliriz.

İle frl_header_image_style Görüntüyü duyarlı hale getiren CSS ve JavaScript'i enjekte ediyoruz. Bu işlev otomatik olarak çağrılacaktır çünkü bunu bir özel başlık kayıt parametresi olarak belirttik. Ama _markup Fonksiyon doğrudan temada çağrılmalıdır - belli ki içeride bir yerde header.php

Bu adımdan sonra, ilk varsayılan başlık resmimizi duyarlı bir şekilde görüntüledik.

5. Adım: yönetici önizlemesi için işaretleme

Görünüş -> Üstbilgi menüsünün altında artık bir ekran var, bu da önceden tanımlanmış seçeneklerden birini seçerek veya yeni bir resim yükleyerek özel başlık görüntüsünü değiştirmemize olanak tanıyor. Başlığın basit görünmesini sağlayacağız.

function frl_admin_header_image_markup() {$image = get_header_image();?>
#header-image {max-width: 1000px;max-height: 400px; }#header-image img {vertical-align: bottom;width: 100%;height: auto; }

Yönetici olarak, işaretlememize yalnızca bir resim boyutu (tam) kullanırız ve URL’yi get_header_image işlev ( frl_admin_header_image_markup bundan sorumludur). Ancak önizleme için uygun bir stil sunmalıyız ve bu da duyarlı davranışı temsil etsin. frl_admin_header_image_style bundan sorumludur). Her iki işlev otomatik olarak çağrılacaktır çünkü bunları özel başlık kayıt parametreleri olarak belirttik. Artık özel bir başlık resmi ayarlayarak mutlak özgürlüğün tadını çıkarabiliriz.

Uyarı kelimesi

Özgürlük ile sorumluluk gelir. Bir kullanıcıya özel görüntüler yükleme esnekliği vermek, resmin boyutu ve oranları üzerinde hiçbir kontrolümüz yoktur. Yüklenen bir resim sağladığımız genişlik ve yükseklik sınırlarını aşıyorsa, kırpılmalıdır. Ancak tüm bunlar Görünüm -> Başlık ekranı yerine yeni Canlı Tema Özelleştiricisi'nde gerçekleşirse , başlık resmi kırpılmayacaktır (en azından şimdilik). Canlı Tema Özelleştirici oldukça yeni bir özelliktir, bu yüzden gelecekteki gelişmeler muhtemelen olasıdır, ancak şu an için dikkatli olmalıyız.

Yüklenen bir görselin, tema tasarımımızdan daha küçük bir genişliğe sahip olması durumunda başka bir sorun ortaya çıkabilir. Kodumuz, tüm kabın genişliğini doldurmak için gerecek ve böylece resmin kalitesi zarar görebilir. Gerçek şu ki, doğası gereği, özelleştirilebilir bir şey bozulabilir. Kullanıcılarınız için sağlam kurallar sağlamak yardımcı olacaktır, ancak bir dereceye kadar, istedikleri gibi yapmalarına izin vermelisiniz.

Sonuç

Özetlemek gerekirse, artık özel bir başlık görüntüsünü desteklemek için yeniden WordPress 3.4'e eklenen yeni işlevleri uyguladık. Bir resmin boyutunu sadece tarayıcı genişliğine göre ayarlamakla kalmayıp aynı zamanda farklı genişlikler için farklı boyutlarda görüntüler de sunan “noscript” tekniğini kullanarak yanıt verdik. Temamızı iki önceden tanımlanmış varyantla sağlıyoruz, ancak herhangi bir resim bir yönetici arayüzü üzerinden yüklenebiliyor ve başlığımız hala yanıt verecek.

Bu makalede kullanılan kodu ve örnek görüntüleri indirebilirsiniz. buradan .


WordPress'te özel başlıklarla çalıştınız mı? 3.4 sürümünde hangi düzeltmeler WordPress ile çalışmayı etkiliyor? Aşağıdaki sohbete katılın.