WordPress'te Pinterest Tarzı Gönderi Izgarası Eklemek İçin Masonry Nasıl Kullanılır

Bu, Josh Pollock'un konuk yazısıdır

Pinterest benzeri gönderi küçük resimlerinin ızgara görünümü bir süredir WordPress blog indeks sayfaları için popüler bir tasarım olmuştur. Popüler olmasının nedeni sadece popüler sosyal medya sitesinin görünümünü taklit etmesi değil, aynı zamanda ekrandaki alanı en iyi şekilde kullanmasıdır. Bir WordPress blog indeksinde, her gönderi önizlemesinin ekstra boşluk bırakmadan doğal olarak ihtiyaç duyduğu boyutta olmasına izin verir.

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

Not: Bu, WordPress temalarını düzenlemekte 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 Masonry'yi temanıza şu kodu kullanarak 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, masonry'yi yükler ve temanızın şablon dosyalarında kullanılabilir hale getirir (JavaScript ve Stilleri WordPress'e Doğru Şekilde Ekleme 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 sayfa yükleme süreleri ve uyumluluk sorunları ile yardımcı olabilecek jQuery yüklemesini atlama olasılığını açar.

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

Bu sonraki fonksiyon Masonry'yi kurar, onunla kullanılacak kapsayıcıları tanımlar ve ayrıca her şeyin doğru sırada olmasını sağlar. Masonry, ızgarasını dinamik olarak düzenlemek için sayfadaki her bir öğenin boyutunu hesaplamalıdır. Masonry ile birçok tarayıcıda karşılaştığım bir sorun, Masonry'nin yavaş yüklenen resimlere sahip öğelerin yüksekliğini yanlış hesaplaması, bu da ü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, doğru boyutlandırmayı sağlar.

Bu, sayfa altbilgisinde başlatma betiğini çıktılayacak fonksiyon 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 fonksiyonu, Masonry'ye "masonry-loop" kimliğine sahip bir kapsayıcı içindeki "masonry-entry" sınıfına sahip öğeleri araması ve yalnızca resimler yüklendikten sonra ızgarayı hesaplaması talimatını verir. Dış kapsayıcıyı querySelector ile, iç kapsayıcıyı ise itemSelector ile ayarladık.

Adım 2: Masonry Döngüsü Oluşturma

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ır.

Yeni dosyanıza aşağıda gösterilen kodu ekleyeceksiniz. İşaretleme, normalde herhangi bir içerik önizlemesi için göreceğiniz şeye benzer. İstediğiniz gibi değiştirebilirsiniz, yalnızca 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 işaretleme, her bir parçası için sınıflara sahiptir, böylece temanıza uyacak şekilde işaretleme ekleyebilirsiniz. .masonry-entry'ye hoş, hafif yuvarlak bir kenarlık eklemeyi seviyorum. Başka bir güzel seçenek ise .masonry-entry için kenarlık olmaması, ancak hafif bir gölge verilmesidir. Bu, gönderi küçük resmi kapsayıcının kenarına kadar uzandığında özellikle iyi görünür; bu, .masonry-thumbnail'e her yönde 0 kenar boşluğu ve dolgu verilerek başarılabilir. Tüm bu stilleri temanızın css dizinindeki masonry.css adlı bir dosyaya eklemek isteyeceksiniz.

Adım 3: Şablonlara Masonry Döngüsü Ekle

Şablon parçamızı oluşturduğumuza göre, onu temanızdaki herhangi bir şablonda istediğiniz gibi kullanabilirsiniz. index.php'ye ekleyebilirsiniz, ancak kategori arşivleri için kullanılmasını istemiyorsanız category.php'ye eklemeyin. Yalnızca temanızın ana sayfasında, blog gönderilerini gösterecek şekilde ayarlandığında kullanılmasını istiyorsanız, home.php'yi kullanırsınız. Nereye seçerseniz seçin, döngünüzü "masonry-loop" kimliğine sahip bir kapsayıcıya sarmalısınız ve get_template_part() kullanarak şablon parçasını döngüye eklemelisiniz. while (have_posts() ) başlamadan önce masonry döngüsü kapsayıcısını başlattığınızdan emin olun.

Örneğin, twentythirteen'in index.php dosyasındaki ana döngü şöyledir:

<?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 işte Masonry döngümüzü kullanacak şekilde değiştirilmiş hali:

<?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: Masonry Öğelerinin Duyarlı Genişliklerini Ayarlayın

Her bir Masonry öğesinin genişliğini ayarlamanın birkaç yolu vardır. Masonry'yi başlatırken genişliği piksel cinsinden bir sayıyla ayarlayabilirsiniz. Bunu yapmaktan hoşlanmıyorum çünkü duyarlı temalar kullanıyorum ve küçük ekranlarda işleri doğru yapmak için bazı karmaşık medya sorguları gerektiriyor. Duyarlı tasarımlar için, .masonry-entry için bir genişlik değeri belirlemenin en iyi şey olduğunu gördüm, satırda kaç öğe istediğinize bağlı olarak bir yüzdeyle ve gerisini Masonry'nin sizin için hesaplamasına izin verin.

Tüm bu, yüzü, stil.css dosyanızda basit bir girişle yüzdeyi ayarlamak istediğiniz öğe sayısına bölmeyi gerektirir. Örneğin, her satırda dört öğe istiyorsanız, masonry.css dosyanızda şunu yapabilirsiniz:

.masonry-entry{width:25%}

Adım 5: Mobil Optimizasyon

Burada durabiliriz, ancak küçük telefon ekranlarında sonuçların inanılmaz derecede iyi çalışmadığını düşünüyorum. Yeni Masonry ızgaranızla temanızın masaüstünde nasıl göründüğünden memnun kaldığınızda, telefonunuzda da kontrol edin. Telefonunuzda nasıl göründüğünden memnun değilseniz, biraz çalışma yapmanız gerekecektir.

Bir telefon ekranında içerik-masonry şablon parçamıza eklediğimiz her şey için yeterli alan olmadığını düşünüyorum. Size sunulan iki iyi çözüm, telefonlar için alıntıyı kısaltmak veya tamamen atlamaktır. Bunu yapmak için temanızın functions.php dosyasına ekleyebileceğiniz ek bir işlev aşağıdadır. Bu sorunların tabletlerde bir sorun olduğunu düşünmediğim için, bu bölümde yalnızca telefonlarda değişiklik yapmak, tabletlerde değil, harika bir eklenti olan Mobble kullanıyorum. Ayrıca Mobble'ın aktif olup olmadığını kontrol ediyorum ve gerekirse WordPress'e yerleşik olan 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şkenlere kaydederek başlıyoruz, çünkü bu değerleri iki kez kullanacağız ve ileride ihtiyaç duymamız halinde bunları tek bir yerden değiştirebilmek istiyoruz. Oradan Mobble'ın is_phone() fonksiyonunu kullanıp kullanamayacağımızı test ediyoruz. Eğer kullanabiliyorsak, telefonlar için kısa alıntıyı, kullanamıyorsak uzun alıntıyı ayarlıyoruz. Bundan sonra, is_phone() kullanılamıyorsa, wp_is_mobile kullanarak aynı temel şeyi yapıyoruz, bu da tüm mobil cihazları etkileyecektir. Umarım bu fonksiyonun else kısmı asla kullanılmaz, ancak her ihtimale karşı bir yedek bulundurmak iyidir. Alıntı uzunluğu mantığı ayarlandıktan sonra, fonksiyonu excerpt_length filtresine bağlamak kalıyor.

Alıntıyı kısaltmak bir seçenektir, ancak basit bir işlemle tamamen ortadan kaldırabiliriz. İşte içeriğin yeni bir versiyonu-masonry, telefonlarda tüm alıntı kısmı atlanmış olarak:

<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 telefon/mobil cihazda olmadığımızı test ediyoruz ve eğer öyleyse döngümüzün alıntı kısmını döndürüyoruz. Telefon/mobil cihazdaysak hiçbir şey yapmıyoruz.

Yapmak isteyebileceğiniz bir diğer şey, mobil cihazlarda bir satırdaki öğe sayısını azaltan Masonry öğelerinin genişliğini artırmaktır. Bunu yapmak için, cihaz algılamasına dayalı 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ğlı olacaktır. Bu durumda, masonry stillerinizi ayrı tutmak isteyebileceğiniz masonry.css'yi kullanıyorum. Eğer bunu kullanmazsanız, zaten kayıtlı başka bir stil sayfasının tanıtıcısını 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ı kuyruğa ekler ve ardından şimdiye kadar çok tanıdık olması gereken mantığı kullanarak bir genişlik değeri ayarlar. Bundan sonra, {$width} ile normal görünen bir CSS'ye genişlik değerini geçirerek $custom_css değişkenini oluştururuz. Ardından, Masonry stil sayfası kullanıldığında WordPress'e başlıkta satır içi stillerimizi yazdırmasını söylemek için wp_add_inline_style'ı kullanırız ve ardından tüm fonksiyonu wp_enqueue_scripts'e bağlarız ve işimiz biter.

Masonry stillerini mevcut bir stil sayfasına birleştirmeyi seçtiyseniz, satır içi stillerinizin dahil edilmemesi için o stil sayfasının tanıtıcısını wp_add_inline_style ile kullandığınızdan emin olun. Genellikle Masonry'yi yalnızca gerektiğinde eklenmesini sağlayan bir koşullu ifadeye sarmaladığım için wp_add_inline_style kullanmayı tercih ederim. Örneğin, Masonry'yi yalnızca blog dizin ve arşiv sayfalarımda kullanıyorsam şunu yapardım:

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

Bu son birkaç örnek, beyninizde başka fikirler uyandırmalıdır. Örneğin, mobil bir cihazda Masonry'yi tamamen atlamak için benzer bir mantık kullanabilirsiniz. Ayrıca wp_add_inline_style() daha az kullanılan ancak çok yardımcı bir fonksiyondur, çünkü herhangi bir koşula bağlı olarak farklı stiller belirlemenizi programatik olarak sağlar. Bu, yalnızca cihaz algılamasına değil, aynı zamanda hangi şablonun kullanıldığına veya kullanıcının oturum açıp açmadığına bağlı olarak herhangi bir öğenin stilini kökten değiştirmenize olanak tanır.

Umarı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 fikre yeni dokunuşlar yapma zamanı. WordPress temasında Masonry kullanmak için bulduğunuz harika yolları yorumlarda bize gösterin.

WordPress ile çok yönlü bir kişi olan Josh Pollock, WordPress hakkında yazıyor, tema geliştirme yapıyor, Pods Framework için topluluk yöneticiliği yapıyor ve sürdürülebilir tasarım için açık kaynak çözümlerini savunuyor.