Əlavə etmək üçün hörgüdən necə istifadə olunur Pinterest WordPress-də Grid stilini göndərin

Bu Josh Pollock tərəfindən göndərilən bir qonaqlıqdır

Pinterest Post Grid Views bir müddətdir WordPress blog indeks səhifələri üçün məşhur dizayn olmuşdur. Populyar sosial media saytının görünüşünü təqlid etdiyi üçün deyil, həm də ekranda məkandan ən yaxşı istifadə etməsi ilə məşhurdur. Bir WordPress blog indeksində, hər yazıdan əvvəlcədən görünmənin təbii olmalı olduğu ölçüdə olmasına imkan verir və əlavə yer buraxmır.

Bu dərslikdə, blogunuzun indeksinə, habelə mövzuya aid arxiv səhifələrinizə kaskadlı düzmə yaratmaq üçün məşhur Masonry JavaScript Kitabxanasından necə istifadə edəcəyinizi sizə göstərəcəyəm. Mobil optimallaşdırma və bunların necə həll ediləcəyini bilməli olduğunuz bəzi məsələlərə toxunacağam.

WordPress-də hörgü grid layoutunun görüntüsü

Qeyd: Bu WordPress mövzularını düzəldən rahat olanlar və HTML / CSS haqqında kifayət qədər məlumat sahibi olanlar üçün inkişaf etmiş bir səviyyədədir.

Keçdi 1: Mövzunuza lazımi kitabxanaları əlavə edin

Yeniləmək: WordPress 3.9 indi Masonry'nin son versiyası daxildir.

Bu kodu istifadə edərək əvvəlcə Masonry'yi mövzuya yükləməlisiniz:

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 hörgü yükləyir və onu temanın şablon sənədlərinə təqdim edir (WordPress-də JavaScripts və üslubları necə düzgün əlavə etmək barədə təlimatımıza baxın). Ayrıca jQuery'i də heç birinə asılılıq olaraq əlavə etmədiyimizi unutmayın. Masonry'nin üstünlüklərindən biri 3 bu jQuery tələb etmir, lakin onunla istifadə edilə bilər. Təcrübəmdə, jQuery olmadan Masonry başlatma daha etibarlıdır və həm səhifə yükləmə müddəti, həm də uyğunluq məsələlərində kömək edə biləcək jQuery yükləməsini atlamaq imkanı açır.

Keçdi 2: Javascript başlat

Aşağıdakı funksiya Masonluğu konfiqurasiya edir, onunla istifadə ediləcək qabları müəyyənləşdirir və eyni zamanda hər şeyin düzgün qaydada baş verdiyinə əmin olur. Masonluq, şəbəkəsini dinamik şəkildə tərtib etmək üçün səhifədəki elementlərin hər birinin ölçüsünü hesablamalıdır. Bir çox brauzerdə Masonry ilə rastlaşdığım bir problem, masonluğun elementlərin üst-üstə düşməsinə səbəb olan yavaş yükləmə şəkilləri ilə elementlərin hündürlüyünü səhv hesablamasıdır. Həll, masonluğun bütün şəkillər yüklənənə qədər hesablanmasına mane olmaq üçün imagesLoaded şəkillərindən istifadə etməkdir. Bu, lazımi ölçüdə olmasını təmin edir.

Bu başlanğıc skriptinin altbilgidə əmələ gətirəcəyi funksiya və fəaliyyətdir:

 if (! function_exists ('slug_masonry_init')):
 función slug_masonry_init () {?>
 
  php}
 // agregar a wp_footer
 add_action ('wp_footer', 'slug_masonry_init');
 terminara si; //! slug_masonry_init existe
 

Xüsusiyyət onlayn şərhlərlə addım-addım izah olunur. Javascript funksiyasının nə olduğu Masonry'a "hörgü-loop" adlı bir konteynerin içərisinə "hörgü giriş" sinif maddələri axtarmağı və yalnız şəkilləri yüklədikdən sonra şəbəkəni hesablamağı tapşırır. Xarici konteyneri sorğuSelektoru ilə, daxili isə elementSelector ilə tənzimləyirik.

Keçdi 2: Masonluq Döngəsi yaradın

Masonluq üçün HTML işarələməyi birbaşa bir şablona əlavə etmək əvəzinə, bunun üçün ayrıca şablon hissəsini yaradaq. "Content-masonry.php" adlı yeni bir fayl yaradın və mövzuya əlavə edin. Bu hörgü döngəsini istədiyiniz qədər müxtəlif şablonlara əlavə etməyə imkan verəcəkdir.

Yeni faylınıza aşağıda göstərilən kodu əlavə edəcəksiniz. İşarələmə, hər hansı bir məzmunun əvvəlcədən baxılması üçün ümumiyyətlə görəcəyinizə bənzəyir. Lazım olan hər hansı bir şəkildə dəyişdirə bilərsiniz, yalnız xarici elementin son addımda elementSelector olaraq təyin etdiyimiz "hörgü girişi" sinifinə sahib olduğundan əmin olun.

>

" title="">

Bu işarələmənin hər bir hissəsi üçün dərslər var, beləliklə mövzuya uyğun işarə əlavə edə bilərsiniz. .Masonry-girişinə gözəl, biraz yuvarlaq bir haşiyə əlavə etmək istəyirəm. Başqa bir yaxşı seçim .masonry-giriş üçün heç bir sərhədin olmaması, ancaq bir az kölgə verməkdir. Göndərmə eskizinin konteynerin kənarına qədər uzanması xüsusilə yaxşı görünür, bu hörgü kiçik eskizləri və dolmaları verərək edilə bilər 0 bütün istiqamətlərdə. Bütün bu üslubları temanın css qovluğunda masonry.css adlı bir fayla əlavə etməlisiniz.

Keçdi 3: Şablonlara hörgü döngəsini əlavə edin

İndi şablon hissəmiz var, istədiyiniz mövzunun istənilən şablonunda istifadə edə bilərsiniz. Siz onu index.php-ə əlavə edə bilərsiniz, ancaq kateqoriya faylları üçün istifadə edilməsini istəmirsinizsə, kateqoriya.php-yə əlavə edə bilərsiniz. Yalnız blogunuzun mesajlarını göstərmək üçün qurulduğu zaman mövzunun ana səhifəsində istifadə olunmasını istəyirsinizsə, onu home.php-də istifadə edərdiniz. Seçdiyiniz yerdə, döngənizi id "hörgü-loop" ilə konteynerə sarın və get_template_part () istifadə edərək şablon hissəsini döngəyə əlavə edin. Əvvəlcədən hörgü döngəsi sarmağına başlamağınızdan əmin olun (have_posts ()).

Məsələn, burada iyirmi üçün index.php-in əsas döngəsi:

 
     
     
         
     
 
     
 
 
     
 
 

Və burada hörgü döngəmizi istifadə etmək üçün dəyişdirilmişdir:

 
     
 
 
     
 
 

Keçdi 4: Hörgü elementlərinin cavab genişliklərini təyin edin

Hər hörgü əşyasının genişliyini təyin etməyin bir neçə yolu var. Döşəmə işə başladıqda bir sıra piksellərdən istifadə edərək eni təyin edə bilərsiniz. Cavablı mövzuları istifadə etdiyim üçün bunu etməkdə bir azarkeş deyiləm və kiçik ekranlarda bunu əldə etmək üçün bəzi mürəkkəb media sorğularını tələb edir. Cavab vermə planları üçün, ən yaxşısını, bir sıra istədiyiniz neçə maddəyə əsaslanaraq yüzdə bir nisbətlə .masry giriş üçün bir eni dəyərini təyin etmək olduğunu və Masonluğun sizin üçün riyaziyyatın qalan hissəsini etməsini təmin etdiyini gördüm.

Bütün bunlar, 100'ü temanınızı stil.css'də sadə bir giriş üçün təyin etmək istədiyiniz elementlərin sayına bölməkdir. Məsələn, hər cərgədə dörd element istəsəniz, masonry.css faylında edə bilərsiniz:

.masonry-giriş {eni: 25%}

Keçdi 5: mobil optimallaşdırma

Burda dayana bilərdik, amma son nəticənin kiçik telefon ekranlarında inanılmaz dərəcədə yaxşı işlədiyini düşünmürəm. Masaüstündeki yeni hörgü toru ilə temanın görünüşündən məmnun qaldıqdan sonra telefonunuzda yoxlayın. Telefonunuzun görünüşündən məmnun deyilsinizsə, bir az iş görməlisiniz.

Məzmun hörgü şablonunun hissəsinə əlavə etdiyimiz hər şey üçün bir telefon ekranında kifayət qədər yer olmadığını düşünürəm. İki yaxşı həll yolu telefon ifadəsini qısaltmaq və ya tamamilə atlamaqdır. Bunu etmək üçün theme.php funksiyalarına əlavə edə biləcəyiniz əlavə bir funksiyadır. Bu məsələlərin tabletlərdə problem olmadığını düşündüyüm üçün bu bölmədəki bütün nümunələrdə əla Mobble plaginindən istifadə edirəm, yalnız tabletlərdə deyil, telefonlarda dəyişiklik etmək üçün. Mobble istifadə etməzdən əvvəl aktiv olub olmadığını və lazım olduqda WordPress-də qurulan daha ümumi mobil aşkarlama xüsusiyyəti wp_is_mobile'ı çəkərək yoxlamışam.

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üyünüz kimi, uzun çıxarışın uzunluğunu və qısa çıxarışın uzunluğunu dəyişənlərdə saxlamağa başlayırıq, çünki bu dəyərləri iki dəfə istifadə edəcəyik və lazım olduqda onları bir yerdən dəyişdirmək istəyərik. Oradan, Mobble-nin is_phone () istifadə edə biləcəyimizi sınayırıq. Əgər belədirsə, biz telefonlar üçün qısa açıqlamanı və biz olmasaq uzun açıqlamanı təyin etdik. Bundan sonra eyni əsas işi edirik, ancaq bütün mobil cihazlara təsir edəcək wp_is_mobile istifadə edərək is_phone () istifadə edilə bilməz. İnşallah bu xüsusiyyətin digər hissəsi heç istifadə edilmir, ancaq hər halda ehtiyat nüsxəsinin olması xoşdur. Çıxarış uzunluğu məntiqi qurulduqdan sonra, funksiyanı excerpt_length filtrinə bağlamaq üçün aşağıya qayıdır.

Ekstraktı qısaltmaq bir seçimdir, ancaq sadə bir proseslə tamamilə aradan qaldıra bilərik. Budur məzmunun yeni bir versiyası, parçanın bütün hissəsi telefonlara buraxılmadı:

>

" title="">

" title="">
'; $excerpt .= the_excerpt(); $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; } } ?>