كيفية استخدام الماسونية لإضافة Pinterest Style Post Grid في ووردبريس

كان عرض المنشورات على شكل شبكة Pinterest تصميمًا شائعًا لصفحات فهرس مدونة  ووردبريس لفترة من الوقت. إنه شائع ليس فقط لأنه يحاكي مظهر موقع التواصل الاجتماعي الشهير ، ولكن أيضًا لأنه يحقق أفضل استخدام للمساحة على الشاشة. في فهرس مدونة  ووردبريس ، يسمح لكل معاينة منشور أن تكون بالحجم الذي تحتاجه بشكل طبيعي ، دون ترك مساحة إضافية.

في هذا البرنامج التعليمي ، سأوضح لك كيفية استخدام مكتبة Masonry JavaScript Library لإنشاء تخطيطات شبكة متتالية لفهرس مدونتك ، بالإضافة إلى صفحات أرشفة لموضوعك. سأتناول بعض المشكلات التي تحتاج إلى مراعاتها لتحسين الأجهزة المحمولة وكيفية حلها.

لقطة من Masonry Grid Layout في  ووردبريس

ملاحظة: هذا برنامج تعليمي ذو مستوى متقدم لأولئك الذين يشعرون بالراحة عند تحرير سمات  ووردبريس ولديهم معرفة كافية بـ HTML / CSS.

الخطوة 1: أضف المكتبات الضرورية إلى الموضوع الخاص بك

التحديث : يتضمن  ووردبريس 3.9 الآن أحدث إصدار من Masonry.

تحتاج أولاً إلى تحميل Masonry في قالبك ، باستخدام هذا الكود:

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

يقوم هذا الرمز ببساطة بتحميل البناء وإتاحته لملفات قالب القالب الخاص بك (انظر دليلنا حول كيفية إضافة JavaScripts وأنماط بشكل صحيح في  ووردبريس ). لاحظ أيضًا أننا لا نضيف jQuery كعنصر تبعية لأيٍّ منهما. من مزايا Masonry 3 أنها لا تتطلب jQuery ، ولكن يمكن استخدامها معها. من واقع خبرتي ، فإن تهيئة Masonry بدون jQuery أكثر موثوقية ، ويفتح إمكانية تخطي تحميل jQuery ، والذي يمكن أن يساعد في كل من أوقات تحميل الصفحة ومشكلات التوافق.

الخطوة 2: تهيئة Javascript

تقوم هذه الوظيفة التالية بإعداد Masonry ، وتحديد الحاويات التي سيتم استخدامها معها ، كما تتأكد من حدوث كل شيء بالترتيب الصحيح. يحتاج الماسوني إلى حساب حجم كل عنصر على الصفحة من أجل تخطيط شبكته ديناميكيًا. إحدى المشكلات التي واجهتها مع Masonry في العديد من المتصفحات هي أن Masonry سيخطئ في تقدير ارتفاع العناصر ذات الصور البطيئة التحميل ، مما يؤدي إلى تداخل العناصر. الحل هو استخدام imagesLoaded لمنع Masonry من حساب التخطيط حتى يتم تحميل جميع الصور. هذا يضمن الحجم المناسب.

هذه هي الوظيفة والإجراء الذي سينتج نص التهيئة في تذييل الصفحة:

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

يتم شرح الوظيفة خطوة بخطوة مع التعليقات المضمنة. ما تفعله وظيفة Javascript هو إخبار Masonry بالبحث داخل حاوية مع المعرف “masonry-loop” للعناصر ذات الفئة “masonry-entry” وحساب الشبكة فقط بعد تحميل الصور. قمنا بتعيين الحاوية الخارجية مع محدد الاستعلام والداخلي مع محدد العناصر.

الخطوة 3: إنشاء حلقة البناء

بدلاً من إضافة ترميز HTML للبناء مباشرة إلى قالب ، سنقوم بإنشاء جزء قالب منفصل له. أنشئ ملفًا جديدًا يسمى “content-masonry.php” وأضفه إلى قالبك. سيسمح لك ذلك بإضافة حلقة Masonry إلى أي عدد تريده من القوالب المختلفة.

في ملفك الجديد ، ستضيف الرمز الموضح أدناه. الترميز مشابه لما تراه عادةً في معاينة أي محتوى. يمكنك تعديله بأي طريقة تريدها ، فقط تأكد من أن العنصر الخارجي لديه فئة “masonry-entry” التي قمنا بتعيينها كـ itemSelector في الخطوة الأخيرة.

<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-->

يحتوي هذا الترميز على فئات لكل جزء من أجزائه حتى تتمكن من إضافة ترميز لمطابقة المظهر الخاص بك. أحب إضافة حد لطيف مدور قليلاً إلى .masonry-entry. خيار لطيف آخر هو عدم وجود حدود لدخول الماسونية ، ولكن لإعطائها ظلًا خفيفًا. يبدو هذا جيدًا بشكل خاص عندما تمتد الصورة المصغرة للمنشور بالكامل إلى حدود الحاوية ، والتي يمكن تحقيقها عن طريق إعطاء هوامش. ستحتاج إلى إضافة كل هذه الأنماط في ملف يسمى masonry.css في دليل css الخاص بالقالب.

الخطوة 4: إضافة حلقة البناء إلى القوالب

الآن بعد أن أصبح لدينا جزء القالب الخاص بنا ، يمكنك استخدامه في أي قالب في المظهر الذي تريده. يمكنك إضافته إلى index.php ، لكن ليس category.php إذا كنت لا تريد استخدامه لأرشيف الفئات. إذا كنت تريد استخدامه فقط على الصفحة الرئيسية لموضوعك ، فعند تعيينه لإظهار منشورات المدونة ، يمكنك استخدامه في home.php. أينما تختار كل ما عليك فعله هو لف الحلقة الخاصة بك في حاوية بالمعرف “masonry-loop” وإضافة جزء القالب إلى الحلقة باستخدام get_template_part (). تأكد من بدء تشغيل حاوية حلقة البناء من قبل أثناء (have_posts ()).

على سبيل المثال ، هذه هي الحلقة الرئيسية من ملف index.php.

<?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; ?>

وهنا يتم تعديله لاستخدام حلقة الماسونية الخاصة بنا:

<?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; ?>

الخطوة 5: تعيين عروض مستجيبة لعناصر البناء

هناك عدة طرق يمكنك من خلالها ضبط عرض كل عنصر من عناصر البناء. يمكنك ضبط العرض باستخدام عدد من البكسل عند تهيئة الماسونية. لست من محبي القيام بذلك لأنني أستخدم سمات سريعة الاستجابة وتتطلب بعض استعلامات الوسائط المعقدة للحصول على الأشياء بشكل صحيح على الشاشات الصغيرة. بالنسبة للتصميمات سريعة الاستجابة ، وجدت أن أفضل ما يجب فعله هو تعيين قيمة عرض لـ.

كل هذا يتطلب قسمة 100 على عدد العناصر التي تريدها لتعيين النسبة المئوية في إدخال بسيط في style.css لموضوعك. على سبيل المثال ، إذا كنت تريد أربعة عناصر في كل صف ، فيمكنك القيام بذلك في ملف masonry.css الخاص بك:

.masonry-entry{width:25%}

الخطوة 6: تحسين الهاتف المحمول

يمكننا التوقف هنا ، لكنني لا أعتقد أن النتيجة النهائية تعمل بشكل جيد للغاية على شاشات الهواتف الصغيرة. بمجرد أن تصبح سعيدًا بكيفية ظهور المظهر الخاص بك مع شبكة الماسونية الجديدة على سطح المكتب ، قم بفحصها على هاتفك. إذا لم تكن راضيًا عن شكله على هاتفك ، فستحتاج إلى القيام ببعض العمل.

لا أعتقد أن هناك مساحة كافية على شاشة الهاتف لكل شيء أضفناه إلى جزء قالب بناء المحتوى الخاص بنا. هناك حلان جيدان متاحان لك وهما اختصار المقتطف للهواتف أو تخطيه تمامًا. إليك وظيفة إضافية يمكنك إضافتها إلى وظائف القالب الخاص بك. php للقيام بذلك. نظرًا لأنني لا أعتقد أن هذه المشكلات تمثل مشكلة على الأجهزة اللوحية ، فأنا أستخدم مكونًا إضافيًا رائعًا Mobble في جميع الأمثلة في هذا القسم لإجراء التغييرات فقط على الهواتف ، وليس الأجهزة اللوحية. أنا أيضًا أتحقق لمعرفة ما إذا كان Mobble نشطًا قبل استخدامه ، وإذا لزم الأمر الرجوع إلى وظيفة الكشف عن الأجهزة المحمولة الأكثر عمومية wp_is_mobile المضمنة في  ووردبريس.

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

كما ترى ، نبدأ بتخزين طول المقتطف الطويل وطول المقتطف القصير في المتغيرات ، لأننا سنستخدم هذه القيم مرتين ونريد أن نتمكن من تغييرها من مكان واحد إذا احتجنا إلى ذلك لاحقًا. من هناك نختبر ما إذا كان بإمكاننا استخدام is_phone () Mobble. إذا كان الأمر كذلك ، قمنا بتعيين المقتطف القصير للهواتف والمقتطف الطويل إذا لم نفعل ذلك. بعد ذلك نقوم بنفس الشيء الأساسي ، ولكن باستخدام wp_is_mobile ، والذي سيؤثر على جميع الأجهزة المحمولة ، إذا تعذر استخدام is_phone (). نأمل ألا يتم استخدام الجزء الآخر من هذه الوظيفة مطلقًا ، ولكن من الجيد أن يكون لديك نسخة احتياطية في حالة حدوث ذلك. بمجرد تعيين منطق طول المقتطف ، يبدأ فقط في ربط الوظيفة بمرشح excerpt_length.

يعد تقصير المقتطف أحد الخيارات ، ولكن يمكننا أيضًا التخلص منه تمامًا بعملية بسيطة. فيما يلي نسخة جديدة من بناء المحتوى ، مع جزء المقتطف بأكمله على الهواتف:

<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-->

هذه المرة نجري اختبارًا لمعرفة ما إذا كنا لسنا على هاتف / جهاز محمول وإذا كان الأمر كذلك فإننا نعيد الجزء المقتطف من الحلقة الخاصة بنا. إذا كنا على هاتف / جهاز محمول ، فلا نفعل شيئًا.

شيء آخر قد ترغب في القيام به هو زيادة عرض عناصر الماسونية ، مما يقلل من العدد في صف واحد ، على الأجهزة المحمولة. للقيام بذلك ، سنضيف نمطًا مضمّنًا مختلفًا إلى الرأس استنادًا إلى اكتشاف الجهاز. نظرًا لأن هذه الوظيفة تستخدم wp_add_inline_styles ، فستعتمد على ورقة أنماط معينة. في هذه الحالة ، أستخدم masonry.css ، وهو ما قد ترغب فيه ، للحفاظ على أنماط البناء منفصلة. إذا لم ينتهي بك الأمر باستخدام ذلك ، يمكنك استخدام المقبض من ورقة أنماط أخرى مسجلة بالفعل.

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

تقوم هذه الوظيفة بإدخال ورقة الأنماط المخصصة ، ثم تقوم بتعيين قيمة للعرض باستخدام ما يجب أن يكون الآن منطقًا مألوفًا للغاية. بعد ذلك ، أنشأنا المتغير custom_css $ عن طريق تمرير قيمة العرض إلى بت CSS ذي المظهر العادي مع {$ width}. بعد ذلك نستخدم wp_add_inline_style لإخبار  ووردبريس بطباعة الأنماط المضمنة الخاصة بنا في الرأس كلما تم استخدام ورقة أنماط Masonry ثم ربطنا الوظيفة بأكملها بـ wp_enqueue_scripts وقد انتهينا.

إذا اخترت دمج أنماط الماسونية في ورقة أنماط موجودة ، فتأكد من استخدام مقبض ورقة الأنماط هذه مع wp_add_inline_style وإلا فلن يتم تضمين الأنماط المضمنة. أحب استخدام wp_add_inline_style لأنني أقوم عمومًا بلف خطاف الحركة لإدراج الماسونية في قائمة شرطية بحيث تتم إضافتها فقط عند الحاجة. على سبيل المثال ، إذا كنت أستخدم Masonry فقط في فهرس مدونتي وصفحات الأرشيف ، فسأفعل هذا:

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

يجب أن تفتح هذه الأمثلة القليلة الأخيرة بعض الأفكار الأخرى في عقلك. على سبيل المثال ، يمكنك استخدام منطق مماثل لتخطي الماسونية تمامًا على جهاز محمول. أيضًا wp_add_inline_style () هي وظيفة أقل استخدامًا ولكنها مفيدة جدًا لأنها تتيح لك تعيين أنماط مختلفة برمجيًا بناءً على أي نوع من الشروط الشرطية. يمكن أن يسمح لك بتغيير نمط أي عنصر بشكل جذري لا يعتمد فقط على اكتشاف الجهاز ، ولكن يمكن أيضًا أن تستند التغييرات إلى القالب الذي يتم استخدامه ، أو حتى إذا كان المستخدم قد قام بتسجيل الدخول أم لا.

أتمنى أن ترى هذه التغييرات المختلفة التي أجريها كفرصة للإبداع. كانت أعمال البناء وأنظمة الشبكات المتتالية المماثلة شائعة منذ فترة حتى الآن ، لذا فقد حان الوقت لبعض التقلبات الجديدة في هذه الفكرة الشائعة. أظهر لنا في التعليقات الطرق الرائعة التي توصلت إليها لاستخدام الماسونية في قالب  ووردبريس.

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..