WordPress’te Pinterest Stili Yazı Izgarası Eklemek için Masonry Nasıl Kullanılır

Bu yazı Josh Pollock tarafından yazılmıştır

Yazıların Pinterest benzeri ızgara görüntüsü bir süredir WordPress blog dizin sayfaları için popüler bir tasarım olmuştur. Sadece popüler sosyal medya sitesinin görünümünü taklit ettiği için değil, aynı zamanda ekrandaki alanı en iyi şekilde kullandığı için de popülerdir. Bir WordPress blog dizininde, her bir yazı önizlemesinin fazladan boşluk bırakmadan doğal olarak olması gereken boyutta olmasını sağlar.

Bu eğitimde, blog dizininiz için basamaklı ızgara düzenleri ve temanız için arşiv sayfaları oluşturmak üzere popüler Masonry JavaScript Kütüphanesini nasıl kullanacağınızı göstereceğim. Mobil optimizasyon için göz önünde bulundurmanız gereken birkaç sorunu ve bunları nasıl çözeceğinizi ele alacağım.

Not: Bu, WordPress temalarını düzenleme konusunda rahat hisseden ve yeterli HTML/CSS bilgisine sahip olanlar için ileri düzey bir eğitimdir.

Adım 1: Temanıza Gerekli Kütüphaneleri Ekleyin

Güncelleme: WordPress 3.9 artık Masonry’nin en son sürümünü içeriyor.

Öncelikle bu kodu kullanarak Masonry’yi temanıza yüklemeniz gerekir:

if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
    wp_enqueue_script('masonry');
    wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists

Bu kod basitçe masonry’yi yükler ve temanızın şablon dosyalarında kullanılabilir hale getirir ( WordPress’te JavaScripts ve Styles‘ın nasıl düzgün bir şekilde ekleneceğine ilişkin kılavuzumuza bakın). Ayrıca her ikisi için de jQuery’yi bağımlılık olarak eklemediğimizi unutmayın. Masonry 3’ün avantajlarından biri jQuery gerektirmemesi, ancak onunla birlikte kullanılabilmesidir. Deneyimlerime göre, Masonry’yi jQuery olmadan başlatmak daha güvenilirdir ve hem sayfa yükleme sürelerine hem de uyumluluk sorunlarına yardımcı olabilecek jQuery’yi yüklemeyi atlama olasılığını açar.

Adım 2: Javascript’i Başlatın

Sıradaki fonksiyon Masonry’yi kurar, onunla birlikte kullanılacak konteynerleri tanımlar ve ayrıca her şeyin doğru sırada gerçekleşmesini sağlar. Masonry’nin ızgarasını dinamik olarak düzenleyebilmesi için sayfadaki her bir öğenin boyutunu hesaplaması gerekir. Birçok tarayıcıda Masonry ile karşılaştığım bir sorun, Masonry’nin yavaş yüklenen görüntülere sahip öğelerin yüksekliğini yanlış hesaplaması ve üst üste binen öğelere yol açmasıdır. Çözüm, tüm resimler yüklenene kadar Masonry’nin düzeni hesaplamasını önlemek için imagesLoaded kullanmaktır. Bu, düzgün boyutlandırma sağlar.

Bu, sayfa altbilgisinde başlatma komut dosyasının çıktısını alacak işlev ve eylemdir:

if ( ! function_exists( 'slug_masonry_init' )) :
function slug_masonry_init() { ?>
<script>
    //set the container that Masonry will be inside of in a var
    var container = document.querySelector('#masonry-loop');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
            itemSelector: '.masonry-entry'
        });
    });
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
endif; // ! slug_masonry_init exists

Fonksiyon satır içi yorumlarla adım adım açıklanmıştır. Javascript fonksiyonunun yaptığı şey, Masonry’ye “masonry-entry” sınıfına sahip öğeler için “masonry-loop” id’sine sahip bir konteynerin içine bakmasını ve ızgarayı yalnızca görüntüler yüklendikten sonra hesaplamasını söylemektir. Dış konteyneri querySelector ve iç konteyneri itemSelector ile ayarlıyoruz.

Adım 2: Duvar Döngüsü Oluşturun

Masonry için HTML işaretlemesini doğrudan bir şablona eklemek yerine, bunun için ayrı bir şablon parçası oluşturacağız. “content-masonry.php” adında yeni bir dosya oluşturun ve temanıza ekleyin. Bu, Masonry döngüsünü istediğiniz kadar farklı şablona eklemenize olanak tanıyacaktır.

Yeni dosyanıza aşağıda gösterilen kodu ekleyeceksiniz. Biçimlendirme, normalde herhangi bir içerik önizlemesi için göreceğinize benzer. İstediğiniz şekilde değiştirebilirsiniz, sadece en dıştaki öğenin son adımda itemSelector olarak ayarladığımız “masonry-entry” sınıfına sahip olduğundan emin olun.

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <div class="masonry-post-excerpt">
            <?php the_excerpt(); ?>
        </div><!--.masonry-post-excerpt-->
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Bu biçimlendirmenin her bir parçası için sınıflar vardır, böylece temanıza uygun biçimlendirme ekleyebilirsiniz. Ben .masonry-entry’ye hoş, hafif yuvarlak bir kenarlık eklemeyi seviyorum. Bir başka güzel seçenek de .masonry-entry için kenarlık kullanmamak ama hafif bir gölge vermek. Bu, özellikle yazı küçük resmi kabın sınırına kadar uzandığında iyi görünür; bu da .masonry-thumbnail kenar boşlukları ve dolguları her yönde 0 verilerek gerçekleştirilebilir. Tüm bu stilleri temanızın css dizinindeki masonry.css adlı bir dosyaya eklemek isteyeceksiniz.

Adım 3: Şablonlara Duvar Döngüsü Ekleyin

Artık şablon parçamız olduğuna göre bunu temanızdaki istediğiniz herhangi bir şablonda kullanabilirsiniz. Kategori arşivleri için kullanılmasını istemiyorsanız index.php’ye ekleyebilirsiniz, ancak category.php’ye eklemeyebilirsiniz. Yalnızca temanızın ana sayfasında, blog yazılarını gösterecek şekilde ayarlandığında kullanılmasını istiyorsanız, home.php’de kullanırsınız. Nereyi seçerseniz seçin yapmanız gereken tek şey döngüyü “masonry-loop” kimliğine sahip bir konteynere sarmak ve get_template_part() kullanarak şablon kısmını döngüye eklemektir. Masonry loop konteynerini while (have_posts() )’dan önce başlattığınızdan emin olun.

Örneğin, burada twentythirteen’in index.php dosyasındaki ana döngü yer almaktadır:

<?php if ( have_posts() ) : ?>

    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>

    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Ve burada Duvarcılık döngümüzü kullanmak için değiştirilmiştir:

<?php if ( have_posts() ) : ?>
<div id="masonry-loop">
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'masonry' ?>
    <?php endwhile; ?>
</div><!--/#masonry-loop-->
    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Adım 4: Duvar Öğelerinin Duyarlı Genişliklerini Ayarlayın

Her bir Duvar öğesinin genişliğini ayarlamanın birkaç yolu vardır. Masonry’yi başlattığınızda genişliği bir piksel sayısı kullanarak ayarlayabilirsiniz. Duyarlı temalar kullandığımdan ve küçük ekranlarda işleri doğru yapmak için bazı karmaşık medya sorguları gerektirdiğinden bunu yapmayı sevmiyorum. Duyarlı tasarımlar için yapılacak en iyi şeyin, bir satırda kaç öğe istediğinize bağlı olarak .masonry-entry için bir yüzde ile bir genişlik değeri ayarlamak ve Masonry’nin sizin için matematiğin geri kalanını yapmasına izin vermek olduğunu buldum.

Bunun için tek yapmanız gereken 100’ü temanızın style.css dosyasındaki basit bir girdide yüzdeyi ayarlamak istediğiniz öğe sayısına bölmektir. Örneğin, her satırda dört öğe istiyorsanız bunu masonry.css dosyanızda yapabilirsiniz:

.masonry-entry{width:25%}

Adım 5: Mobil Optimizasyon

Burada durabiliriz, ancak nihai sonucun küçük telefon ekranlarında inanılmaz derecede iyi çalıştığını düşünmüyorum. Temanızın masaüstünüzde yeni Masonry ızgarasıyla nasıl göründüğünden memnun olduğunuzda, telefonunuzda kontrol edin. Telefonunuzda nasıl göründüğünden memnun değilseniz, küçük bir çalışma yapmanız gerekecektir.

İçerik-masonluk şablonu bölümümüze eklediğimiz her şey için bir telefonun ekranında yeterli yer olduğunu sanmıyorum. Kullanabileceğiniz iki iyi çözüm, telefonlar için alıntıyı kısaltmak veya tamamen atlamaktır. İşte bunu yapmak için temanızın functions.php’sine ekleyebileceğiniz ekstra bir fonksiyon. Bu sorunların tabletlerde bir sorun olduğunu düşünmediğim için, bu bölümdeki tüm örneklerde değişiklikleri tabletlerde değil yalnızca telefonlarda yapmak için harika bir eklenti olan Mobble ‘ı kullanıyorum. Ayrıca Mobble’ı kullanmadan önce aktif olup olmadığını kontrol ediyorum ve gerekirse WordPress’te yerleşik olarak bulunan daha genel mobil algılama işlevi wp_is_mobile’a geri dönüyorum.

if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
    //set the shorter length once
    $short = 10;
    //set long length once
    $long = 55;
    //if we can only set short excerpt for phones, else short for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            return $short;
        }
        else {
            return $long;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            return $short;
        }
        else {
            return $long;
        }
    }
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists

Gördüğünüz gibi, uzun alıntı uzunluğunu ve kısa alıntı uzunluğunu değişkenlerde saklayarak başlıyoruz, çünkü bu değerleri iki kez kullanacağız ve daha sonra ihtiyacımız olursa bunları tek bir yerden değiştirebilmek istiyoruz. Buradan Mobble’ın is_phone() fonksiyonunu kullanıp kullanamayacağımızı test ediyoruz. Eğer öyleyse telefonlar için kısa alıntıyı, değilsek uzun alıntıyı ayarlıyoruz. Bundan sonra aynı temel şeyi yapıyoruz, ancak is_phone() kullanılamazsa tüm mobil cihazları etkileyecek olan wp_is_mobile’ı kullanıyoruz. Umarım bu fonksiyonun else kısmı hiçbir zaman kullanılmaz, ancak her ihtimale karşı bir yedeğe sahip olmak iyidir. Alıntı uzunluğu mantığı ayarlandıktan sonra geriye sadece fonksiyonu excerpt_length filtresine bağlamak kalıyor.

Alıntıyı kısaltmak bir seçenektir, ancak basit bir işlemle bunu tamamen ortadan kaldırabiliriz. İşte content-masonry’nin telefonlarda tüm alıntı kısmı çıkarılmış yeni bir sürümü:

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <?php 
            //put the excerpt markup in variable so we don't have to repeat it multiple times.
            $excerpt = '<div class="masonry-post-excerpt">';
            $excerpt .= the_excerpt();
            $excerpt .= '</div><!--.masonry-post-excerpt-->';
//if we can only skip for phones, else skip for all mobile devices
            if (function_exists( 'is_phone') {
                if ( ! is_phone() ) {
                    echo $excerpt;
                }
            }
            else {
                if ( ! wp_is_mobile() ) {
                    echo $excerpt;
                }
            }
        ?>
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Bu sefer bir telefon/mobil cihazda olup olmadığımızı test ediyoruz ve eğer öyleyse döngümüzün alıntı kısmını döndürüyoruz. Eğer bir telefon/ mobil cihazda isek hiçbir şey yapmıyoruz.

Yapmak isteyebileceğiniz bir başka şey de, mobil cihazlarda bir satırdaki sayıyı azaltan Masonry öğelerinin genişliğini artırmaktır. Bunu yapmak için, cihaz algılamasına bağlı olarak başlığa farklı bir satır içi stil ekleyeceğiz. Bu işlev wp_add_inline_styles kullandığından, belirli bir stil sayfasına bağımlı olacaktır. Bu durumda ben masonry.css kullanıyorum, siz de duvar stillerinizi ayrı tutmak isteyebilirsiniz. Bunu kullanmak istemezseniz, zaten kayıtlı olan başka bir stil sayfasındaki tutamacı kullanabilirsiniz.

if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
    //set the wide width
    $wide = '25%';
    //set narrow width
    $narrow = '50%';
    /**Determine value for $width**/
    //if we can only set narrow for phones, else narrow for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }
    }
    /**Output CSS for .masonry-entry with proper width**/
    $custom_css = ".masonry-entry{width: {$width};}";
    //You must use the handle of an already enqueued stylesheet here.
    wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists

Bu fonksiyon özel stil sayfasını çağırır ve ardından artık çok tanıdık gelmesi gereken mantığı kullanarak genişlik için bir değer belirler. Bundan sonra genişlik değerini {$width} ile normal görünümlü bir CSS parçasına aktararak $custom_css değişkenini oluşturuyoruz. Bundan sonra wp_add_inline_style kullanarak WordPress’e Masonry stil sayfası kullanıldığında satır içi stillerimizi başlığa yazdırmasını söylüyoruz ve ardından tüm işlevi wp_enqueue_scripts’e bağlıyoruz ve işimiz bitiyor.

Masonry stillerinizi mevcut bir stil sayfasında birleştirmeyi seçtiyseniz, bu stil sayfasının tutamacını wp_add_inline_style ile kullandığınızdan emin olun, aksi takdirde satır içi stilleriniz dahil edilmeyecektir. Ben wp_add_inline_style kullanmayı seviyorum çünkü genellikle Masonry’yi sıraya almak için eylem kancasını bir koşula bağlıyorum, böylece yalnızca gerektiğinde ekleniyor. Örneğin, Masonry’yi yalnızca blog dizinimde ve arşiv sayfalarımda kullanıyorsam bunu yaparım:

if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}

Bu son birkaç örnek beyninizde başka fikirlerin oluşmasını sağlayacaktır. Örneğin, benzer bir mantıkla mobil bir cihazda duvar yazılarını tamamen atlayabilirsiniz. Ayrıca wp_add_inline_style() daha az kullanılan ancak çok yararlı bir işlevdir, çünkü herhangi bir koşul türüne göre programlı olarak farklı stiller ayarlamanıza olanak tanır. Herhangi bir öğenin stilini yalnızca cihaz algılamasına göre değil, aynı zamanda hangi şablonun kullanıldığına ve hatta kullanıcının oturum açıp açmadığına göre de kökten değiştirmenize olanak tanıyabilir.

Umarım yaptığım bu farklı değişiklikleri yaratıcı olmak için bir fırsat olarak görürsünüz. Masonry ve benzeri basamaklı ızgara sistemleri bir süredir popüler, bu yüzden bu popüler fikir üzerinde bazı yeni değişiklikler yapmanın zamanı geldi. Bir WordPress temasında Masonry kullanmak için bulduğunuz harika yolları yorumlarda bize gösterin.

Çok amaçlı bir WordPress adamı olan Josh Pollock, WordPress hakkında yazıyor, tema geliştiriyor, Pods Framework için topluluk yöneticisi olarak hizmet veriyor ve sürdürülebilir tasarım için açık kaynaklı çözümleri savunuyor.