نحوه استفاده از سنگ تراشی برای افزودن شبکه ارسال سبک Pinterest در وردپرس

این یک پست مهمان توسط جاش پولاک است

مانند Pinterest نمایش شبکه ای پست ها مدتی است که یک طرح محبوب برای صفحات فهرست وبلاگ وردپرس است. این محبوبیت نه تنها به دلیل تقلید از ظاهر سایت محبوب رسانه های اجتماعی ، بلکه همچنین به دلیل استفاده بهینه از فضای صفحه. در فهرست وبلاگ وردپرس ، این امکان را می دهد تا هر پیش نمایش پست بدون نیاز به فضای اضافی ، به اندازه طبیعی خود نیاز داشته باشد.

در این آموزش ، من به شما نشان خواهم داد که چگونه از کتابخانه محبوب Masonry JavaScript برای ایجاد طرح بندی شبکه های آبشار برای فهرست وبلاگ خود و همچنین بایگانی صفحات برای موضوع خود استفاده کنید. من به چند مسئله که برای بهینه سازی تلفن همراه و چگونگی حل آنها باید در نظر بگیرید ، می پردازم.

Screenshot of Masonry Grid Layout in WordPress

توجه: این یک آموزش پیشرفته برای کسانی است که احساس راحتی در ویرایش مضامین وردپرس دارند و از دانش کافی HTML / CSS برخوردار هستند.

مرحله 1: کتابخانه های لازم را به موضوع خود اضافه کنید h4>

بروزرسانی : وردپرس 3.9 اکنون شامل آخرین نسخه Masonry است.

ابتدا باید Masonry را با استفاده از این کد در موضوع خود بارگیری کنید:

if (! function_exists ('slug_scripts_masonry')):
if (! is_admin ()):
تابع slug_scriptts_masonry () {
    wp_enqueue_script ("سنگ تراشی")؛
    wp_enqueue_style ("سنگ تراشی" ، get_template_directory_uri (). '/ css /')؛
}
add_action ('wp_enqueue_scriptts'، 'slug_scriptts_masonry')؛
endif //! is_admin ()
endif //! slug_scriptts_masonry موجود است

این کد به آسانی سنگ تراشی را بارگیری می کند و آن را در اختیار پرونده های قالب موضوع شما قرار می دهد (به راهنمای ما در مورد چگونگی نحوه استفاده صحیح مراجعه کنید افزودن JavaScript و سبک در وردپرس ). همچنین توجه داشته باشید که ما jQuery را به عنوان یک وابستگی برای هیچ یک اضافه نمی کنیم. یکی از مزایای Masonry 3 این است که به jQuery احتیاج ندارد اما می توان با آن استفاده کرد. از نظر من ، مقدماتی ساختن سنگ تراشی بدون jQuery قابل اطمینان تر است و امکان رد شدن از بارگیری jQuery را فراهم می کند ، که می تواند به هر دو زمان بارگیری صفحه و مشکلات سازگاری کمک کند.

مرحله 2: شروع Javascript h4>

این تابع بعدی Masonry را تنظیم می کند ، کانتینرهایی را که با آن استفاده می شوند تعریف می کند و همچنین اطمینان حاصل می کند که همه چیز به ترتیب صحیح اتفاق می افتد. برای چیدمان شبکه به صورت پویا ، سنگ تراشی باید اندازه هر یک از موارد صفحه را محاسبه کند. مشکلی که من در بسیاری از مرورگرها با Masonry مواجه شده ام این است که Masonry ارتفاع موارد را با تصاویر بارگیری آهسته اشتباه محاسبه می کند و منجر به همپوشانی موارد می شود. راه حل استفاده از imagesLoaded برای جلوگیری از محاسبه طرح Masonry تا بارگیری همه تصاویر است. این اندازه مناسب را تضمین می کند.

این عملکرد و عملی است که اسکریپت مقداردهی اولیه را در صفحه صفحه نمایش می دهد:

if (! function_exists ('slug_masonry_init')):
عملکرد slug_masonry_init () {؟>

تابع گام به گام با نظرات درون خطی توضیح داده می شود. کاری که تابع Javascript انجام می دهد این است که به Masonry می گوید در داخل ظرفی با شناسه "masonry-loop" برای مواردی با کلاس "masonry-entry" نگاه کند و شبکه را فقط پس از بارگیری تصاویر محاسبه کند. ظرف خارجی را با querySelector و قسمت داخلی را با itemSelector تنظیم می کنیم.

مرحله 2: ایجاد حلقه سنگ تراشی h4>

به جای افزودن نشانه گذاری HTML برای Masonry به طور مستقیم به الگویی ، ما می خواهیم یک قسمت الگوی جداگانه برای آن ایجاد کنیم. یک فایل جدید به نام "content-masonry.php" ایجاد کنید و آن را به موضوع خود اضافه کنید. با این کار می توانید حلقه Masonry را به تعداد دلخواه الگوهای مختلف اضافه کنید.

در پرونده جدید خود کدی را که در زیر نشان داده شده اضافه می کنید. علامت گذاری شبیه همان چیزی است که به طور معمول برای هر پیش نمایش محتوا مشاهده می کنید. به هر حال می توانید آن را اصلاح کنید ، فقط مطمئن شوید که بیرونی ترین عنصر کلاس "ورودی سنگ تراشی" را دارد که در مرحله آخر به عنوان itemSelector تنظیم کردیم.

این علامت گذاری برای هر قسمت از آن کلاس دارد بنابراین می توانید علامت گذاری را متناسب با موضوع خود اضافه کنید. من دوست دارم یک حاشیه خوب و کمی گرد به .masonry-entry اضافه کنم. گزینه خوب دیگر ، هیچ حاشیه ای برای ورود .masonry-entry نیست ، اما برای ایجاد یک سایه کوچک به آن است. هنگامی که تصویر بند انگشتی پست تا انتهای مرز ظرف گسترش می یابد ، به نظر خوب می رسد که با دادن حاشیه ها و مچاله های .masonry-thumbnail از 0 جهت به دست می آید. شما می خواهید همه این سبک ها را در پرونده ای به نام masonry.css در فهرست css موضوع خود اضافه کنید.

مرحله 3: حلقه سنگ تراشی را به الگوها اضافه کنید h4>

اکنون که قسمت الگوی خود را داریم ، می توانید از آن در هر الگویی در تم خود که دوست دارید استفاده کنید. اگر نمی خواهید از آن برای بایگانی دسته استفاده شود ، ممکن است آن را به index.php اضافه کنید ، اما category.php نه. اگر می خواهید فقط در صفحه اصلی طرح زمینه شما استفاده شود ، وقتی تنظیم شده است تا پست های وبلاگ را نشان دهد ، از آن در home.php استفاده می کنید. هر جایی که انتخاب کردید تمام کاری که باید انجام دهید این است که حلقه خود را در ظرفی با شناسه "masonry-loop" بپیچید و قسمت قالب را با استفاده از get_template_part () وارد حلقه کنید. حتماً ظرف حلقه سنگ تراشی را قبل از while (have_posts ()) شروع کنید.

به عنوان مثال ، در اینجا حلقه اصلی از 20ththirteen’s index.php آمده است:



    
    
        
    

    


    

و در اینجا برای استفاده از حلقه Masonry ما اصلاح شده است:


)

مرحله 4: تنظیم عرض پاسخگو از موارد سنگ تراشی h4>

روش های مختلفی وجود دارد که می توانید عرض هر مورد از سنگ تراشی را تنظیم کنید. می توانید هنگام ساخت اولیه Masonry ، عرض را با استفاده از تعدادی پیکسل تنظیم کنید. من طرفدار انجام این کار نیستم ، زیرا از مضامین پاسخگو استفاده می کنم و برای درست کردن کارها در صفحه های کوچک به برخی پرسش های رسانه پیچیده نیاز دارد. برای طراحی های پاسخگو ، بهترین کار این است که تعیین مقدار عرض برای .masonry-entry با درصد ، بر اساس تعداد موردی که در یک ردیف می خواهید ، تنظیم کنید و به Masonry اجازه دهید بقیه ریاضیات را برای شما انجام دهد.

تمام این موارد نیاز به تقسیم 100 مورد بر تعداد مواردی است که می خواهید درصد را در یک ورودی ساده در style.css قالب خود تنظیم کنید. به عنوان مثال ، اگر چهار مورد در هر ردیف می خواهید می توانید این کار را در پرونده masonry.css خود انجام دهید:

.masonry-entry{width:25٪}

مرحله 5: بهینه سازی تلفن همراه h4>

ما می توانیم در اینجا متوقف شویم ، اما فکر نمی کنم نتیجه نهایی در صفحه های کوچک تلفن به طرز باورنکردنی کار کند. هنگامی که از نحوه مشاهده طرح زمینه خود با شبکه جدید Masonry در دسک تاپ خود راضی بودید ، آن را در تلفن خود بررسی کنید. اگر از ظاهر تلفنتان راضی نیستید ، باید کمی کار کنید.

فکر نمی کنم فضای کافی برای صفحه نمایش تلفن برای همه مواردی که به قسمت الگوی محتوای سنگ تراشی خود اضافه کردیم وجود داشته باشد. دو راه حل خوب در دسترس شما این است که گزیده تلفن ها را کوتاه یا به طور کامل از آن صرف نظر کنید. در اینجا یک عملکرد اضافی وجود دارد که می توانید برای انجام آن به توابع theme.php طرح زمینه خود اضافه کنید. از آنجا که به نظر من این تبلت ها مشکلی ندارند ، من از یک افزونه عالی استفاده می کنم Mobble در تمام مثالهای این بخش فقط تغییرات را در تلفنها ایجاد کنید نه در رایانههای لوحی. من همچنین در حال بررسی هستم که آیا Mobble قبل از استفاده از آن فعال است یا خیر و در صورت لزوم دوباره به عملکرد تشخیص عمومی تلفن همراه wp_is_mobile که در وردپرس تعبیه شده است ، باز می گردم.

if (! function_exists ('slug_custom_excerpt_length')):
عملکرد slug_custom_excerpt_length (طول $) {
    // یک بار طول کوتاهتر را تنظیم کنید
    $ کوتاه = 10؛
    // یک بار طول طولانی را تنظیم کنید
    $ طولانی = 55؛
    // اگر فقط می توانیم گزیده ای کوتاه برای تلفن ها تنظیم کنیم ، دیگری کوتاه برای همه دستگاه های تلفن همراه است
    if (function_exists ('is_phone')) {
        if (is_phone ()) {
            بازگشت کوتاه $
        }
        دیگر {
            بازگشت طولانی مدت
        }
    }
    دیگر {
        if (wp_is_mobile ()) {
            بازگشت کوتاه $
        }
        دیگر {
            بازگشت طولانی مدت
        }
    }
}
add_filter ('excerpt_length'، 'slug_custom_excerpt_length'، 999)؛
endif //! slug_custom_excerpt_length وجود دارد

همانطور که مشاهده می کنید ما با ذخیره طول گزیده طولانی و کوتاه گزیده در متغیرها شروع می کنیم ، زیرا ما از این مقادیر دو بار استفاده خواهیم کرد و اگر بعداً بخواهیم می توانیم آنها را از یک مکان تغییر دهیم. از آنجا آزمایش می کنیم که آیا می توانیم از Mobble's is_phone استفاده کنیم (). در این صورت ، گزیده کوتاه را برای تلفن ها و گزیده بلند را که نداریم ، تنظیم می کنیم. پس از آن ما همان کار اساسی را انجام می دهیم ، اما با استفاده از wp_is_mobile ، که بر تمام دستگاه های تلفن همراه تأثیر می گذارد ، نمی توان استفاده کرد. امیدوارم قسمت دیگری از این عملکرد هرگز استفاده نشود ، اما تهیه یک نسخه پشتیبان برای هر مورد خوب است. پس از تنظیم منطق طول گزیده ، فقط به اتصال عملکرد به فیلتر excerpt_length برمی گردد.

کوتاه کردن گزیده یک گزینه است ، اما ما همچنین می توانیم آن را کاملاً با یک فرایند ساده از بین ببریم. در اینجا نسخه جدیدی از محتوا-سنگ تراشی وجود دارد که کل قسمت گزیده آن در تلفن ها جمع شده است:

>
'؛ $ excerpt. = the_excerpt ()؛ $ excerpt. = '
'؛ // اگر فقط می توانیم برای تلفن ها جست و خیز کنیم ، در غیر این صورت برای همه دستگاه های تلفن همراه رد شویم if (function_exists ('is_phone')) { if (! is_phone ()) { echo $ fragment؛ } } دیگر { اگر (! wp_is_mobile ()) { echo $ fragment؛ } } ؟>

این بار ما داریم آزمایش می کنیم تا ببینیم که آیا ما در دستگاه تلفن همراه نیستیم یا خیر و اگر چنین است ، قسمت منتخب حلقه خود را برمی گردانیم. اگر از تلفن یا دستگاه همراه استفاده می کنیم ، کاری انجام نمی دهیم.

یکی دیگر از مواردی که ممکن است بخواهید انجام دهید افزایش عرض موارد Masonry است که باعث کاهش تعداد پشت سر هم در دستگاه های تلفن همراه می شود. برای انجام این کار ، ما یک سبک درون خطی متفاوت را بر اساس تشخیص دستگاه به هدر اضافه خواهیم کرد. از آنجا که این تابع از سبک های wp_add_inline_ استفاده می کند ، به یک سبک سبک خاص وابسته خواهد بود. در این حالت من برای جدا نگه داشتن سبک های سنگ تراشی خود از masonry.css استفاده می کنم که شاید شما بخواهید. اگر در پایان استفاده نکردید می توانید از دسته سبک دیگری که قبلاً ثبت شده استفاده کنید.

if (! function_exists ('slug_masonry_styles')):
تابع slug_masonry_styles () {
    // عرض گسترده را تنظیم کنید
    $ wide = '25٪ '؛
    // عرض باریک را تنظیم کنید
    $ باریک = '50٪ '؛
    / ** تعیین مقدار عرض $ ** /
    // اگر فقط می توانیم برای تلفن ها باریک تنظیم کنیم ، برای همه دستگاه های تلفن همراه محدود است
    if (function_exists ('is_phone')) {
        if (is_phone ()) {
            عرض $ = $ باریک
        }
        دیگر {
            عرض $ = عرض $ ؛
        }
    }
    دیگر {
        if (wp_is_mobile ()) {
            عرض $ = $ باریک
        }
        دیگر {
            عرض $ = عرض $ ؛
        }
    }
    / ** خروجی CSS برای ورود .ماسونری با عرض مناسب ** /
    $ custom_css = ".masonry-entry {width: {$ width}؛}"؛
    // شما باید در اینجا از دسته شیوه نامه هایی که قبلاً متناسب شده اند استفاده کنید.
    wp_add_inline_style ("سنگ تراشی" ، $ custom_css)؛
}
add_action ('wp_enqueue_scriptts'، 'slug_masonry_styles')؛
endif //! slug_masonry_styles وجود دارد

این تابع صفحه سبک سفارشی را باز می کند ، و سپس با استفاده از منطقی که اکنون باید بسیار آشنا باشد ، مقداری برای عرض تعیین می کند. بعد از آن ما متغیر $ custom_css را با انتقال مقدار عرض به یک بیت CSS با ظاهری منظم با {$ width} ایجاد می کنیم. بعد از آن ما از wp_add_inline_style استفاده می کنیم تا به وردپرس بگوییم که سبک های درون خطی ما را هر زمان که از صفحه سبک Masonry استفاده می شود ، در هدر چاپ کنیم و سپس کل عملکرد را به wp_enqueue_script متصل کنیم و کار ما تمام شود.

اگر ترجیح داده اید سبک های سنگ تراشی خود را در یک صفحه سبک موجود ترکیب کنید ، حتماً از دسته آن سبک با wp_add_inline_style استفاده کنید در غیر این صورت سبک های داخلی شما شامل نمی شوند. من دوست دارم از wp_add_inline_style استفاده کنم ، زیرا من به طور کلی قلاب عمل را برای جاسازی ماسونری در یک شرط می پیچم بنابراین فقط در صورت لزوم اضافه می شود. به عنوان مثال اگر من فقط از Masonry در فهرست وبلاگ و صفحات بایگانی خود استفاده می کنم این کار را انجام می دهم:

if (is_home () || is_archive ()) {
    add_action ('wp_enqueue_scriptts'، 'slug_scriptts_masonry')؛
}

این چند مثال آخر باید برخی از ایده های دیگر را در مغز شما باز کند. به عنوان مثال ، می توانید از منطق مشابهی استفاده کنید تا به طور کلی از Masonry در یک دستگاه تلفن همراه رد شوید. همچنین wp_add_inline_style () عملکردی کمتر مورد استفاده و در عین حال بسیار مفید است زیرا به شما امکان می دهد سبک های مختلف را براساس هر نوع شرطی به صورت برنامه ریزی تنظیم کنید. این به شما این امکان را می دهد که سبک هر عنصر را نه تنها بر اساس تشخیص دستگاه تغییر دهید ، بلکه تغییرات همچنین می تواند بر اساس الگویی باشد که استفاده می شود ، یا حتی اگر کاربر به سیستم وارد شده باشد یا نه.

امیدوارم این تغییرات مختلفی را که ایجاد می کنم فرصتی برای خلاقیت ببینید. سنگ تراشی و سیستم های مشبک مشبک مشابه برای مدتی محبوب بوده اند ، بنابراین زمان آن برای برخی از پیچش های جدید در مورد این ایده محبوب است. در نظرات به ما نشان دهید که چه روشهای جالبی را برای استفاده از سنگ تراشی در قالب WordPress پیدا کرده اید.

یک مرد چند منظوره در وردپرس ، جاش پولاک در مورد وردپرس می نویسد ، توسعه تم را انجام می دهد ، به عنوان مدیر جامعه برای Pods Framework عمل می کند و از راه حل های منبع باز برای طراحی پایدار حمایت می کند.

منبع:
https://www.wpbeginner.com/wp-themes/how-to-use-masonry-to-add-pinterest-style-post-grid-in-wordpress/.

دیدگاهتان را بنویسید