آشنایی با ویرایشگر جدید قالب در وردپرس ۵.۸

ویژگی‌های وردپرس ۵.۸

وردپرس ۵.۸ قرار است در تاریخ ۲۰ ژوئیه منتشر شود. خیلی زود، بسیاری از کاربران طعم یکی از ویژگی‌های جدید مورد علاقه‌ی من را خواهند چشید: حالت ویرایش قالب.

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

نکته‌ی منفی ویژگی جدید در وردپرس ۵.۸ این است که کاربران به هدر، فوتر، نوار کناری یا سایر قسمت‌های قالب خود دست‌رسی نخواهند داشت. این یک صفحه‌ی سفید است که باید در آن از تمام ابزارهای طراحی خود برای ایجاد کل صفحه استفاده کنند.

با وجود این محدودیت‌ها، هدف ویرایش‌گر قالب‌ موجود در وردپرس ۵.۸ چیست؟

 

پاسخ: صفحات فرود

 

صفحه‌ی سفید خالی همیشه هم چیز بدی نیست. قطعاً دلیلی وجود دارد که همه‌ی بهترین پوسته‌ها، صفحات قالبی با نام‌های Blank ، Empty ، Canvas ، Open یا موارد مشابه دارند. بعضی اوقات کاربران می‌خواهند بر روی کل خروجی صفحه کنترل داشته باشند. وردپرس ۵.۸ این قابلیت را برای هر کاربر وردپرس به ارمغان می‌آورد.

ماه‌هاست که در حال ویرایش قالب‌ها هستم؛ اما این اتفاق همیشه در بافت یک پوسته‌ی بلوکی رخ می‌دهد. به عنوان بخشی از برنامه‌ی FSE Outreach، هم صفحه‌ی نمونه‌کارهای عکاسی و هم صفحه‌ی فرود WordCamp ساخته ام. علیرغم برخی مشکلات کوچک، به دلیل آن که این ویژگی تحقق‌پذیر بوده، این سفر را برای خودم ارزش‌مند ارزیابی می‌کنم. با این حال، بیش‌تر تست‌های من در مورد پوسته‌ی TT1 Blocks بوده است.

زمان آن رسیده بود که این تست را در دنیای واقعی و بر پوسته‌هایی انجام دهم که خیلی مورد استفاده قرار می گیرند.

آیا ویرایش‌گر قالب با پوسته‌ی من کار خواهد کرد؟

سؤالی که بسیاری از کاربران در ذهن خود خواهند داشت این خواهد بود: آیا این ویرایش‌گر قالب‌ جدید با پپوسته‌ی من کار می‌کند؟ پاسخ این است که بستگی دارد. به‌طور کلی، بله، تا حدی کار خواهد کرد. با این حال، از آن‌جا که طرح‌های قدیمی با در نظر گرفتن ویرایش‌گر قالب‌ ساخته نشده‌اند، همه‌ی تجربه‌ها یک‌سان نخواهند بود.

من واقعاً قصد داشتم تئوری کار کردن ویرایش‌گر قالب‌ با تمام پوسته‌ها را امتحان کنم. بنابراین، پوسته‌ی Twenty Fifteen را بارگذاری کردم، یکی از پوسته‌های پیش‌فرض مورد علاقه‌ی من در دهه‌ی گذشته است.

شاید هم بیش از حد عقب پریده باشم.

بک‌گراند پوسته Twenty Fifteen
پوسته‌ی Twenty Fifteen دارای پس‌زمینه‌ای دورنگ است که برای نوار کناری و محتوا طراحی شده است.

وقتی Twenty Fifteen ساخته شد ویرایش‌گر بلوک وجود نداشت. استفاده‌ی این پوسته از تکنیک جعبه سایه در پس‌زمینه‌ی صفحه به این معنی‌ست که روی کل صفحه دو ستون رنگی قرار دارد. تیم طراحی مجبور به استفاده از برخی از روش‌های هک برای ویرایش نوار کناری با اندازه‌ی مساوی و بک‌گراند محتوا بودند. یادش به‌خیر! روزهای خوب گذشته، قبل از این که برنامه‌نویسان به CSS flex-box و grid دست‌رسی داشته باشند.

این مدل مشکلات است که می‌تواند برخی از پوسته‌های قدیمی را محدود کند. در مورد Twenty Fifteen، می توانم پس زمینه را با یک بلوک Group یا Cover بالای آن پنهان کنم.

کاربران احتمالاً هنگام استفاده از پوسته‌های مدرن‌تر، یا حداقل از پوسته‌هایی که در دوران بلوک ساخته شده‌اند، نتایج بهتری می‌گیرند. حتی موضوعی به سادگی پشتیبانی از هم‌ترازی واید هم ماهیت WYSIWYG ویرایش‌گر قالب را تغییر می‌دهد. اگر یک پوسته از این فیچر پشتیبانی نکند، به این معنی‌ست که فرانت‌اند آن با ویرایش‌گر سازگار نیست.

سپس چند سال جلوتر پریدم. پوسته‌ی Twenty Nineteen اولین پوسته‌ی پیش‌فرض وردپرس برای پشتیبانی از بلوک‌ها بود. در مقایسه با سال‌های اینترنت، این پوسته قدیمی است اما عتیقه محسوب نمی‌شود.

ویرایش‌گر تمپلیت twenty nineteen
ویرایش‌گر در مقابل فرانت‌اند Twenty Nineteen

 

 

 

 

 

 

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

باز دو سال دیگر جلو پریدم و پوسته‌ی Twenty Twenty-One، جدیدترین پوسته‌ی پیش‌فرض وردپرس را فعال کردم.

ویرایشگر Twenty Twenty-One
ویرایش‌گر در برابر فرانت‌اند Twenty Twenty-One

ویرایش‌گر Twenty Twenty-One

 

 

 

 

 

 

ویرایش‌گر تقریباً خیلی نزدیک به چیزی است که در فرانت‌اند مشاهده می کنید. مشهودترین تفاوت‌ها ناهماهنگی گزینه‌ی بلوک Cover و حاشیه‌ی خاکستری روشن برای نوار ورودی سرچ در نمای ویرایش‌گر است.

زمان آن رسیده بود که ویرایش‌گر قالب را در تست «واقعی» قرار دهیم. من آخرین نسخه Eksell، یکی از پراستفاده‌ترین پوسته‌های بلوکی موجود، را فعال کردم.

فرانت‌اند eksell
ویرایش‌گر در برابر فرانت‌اند Eksell.

فرانت‌اند eksell

 

 

 

 

 

 

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

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

و البته آن فضای سفید زشت که پس‌زمینه مطالب را در بالای ویرایش‌گر نشان می دهد چیست؟ این فضا را به معنای واقعی کلمه در تمام پوسته‌ها خواهید دید. حقیقتاً نمی‌دانم که چرا تیم توسعه فکر کرده است که این امر باعث به‌وجود آمدن یک پوسته‌ی پیش‌فرض خوب می‌شود. تقریباً تمام طراحی‌های وب‌سایتی که در طول این سال‌ها بررسی کرده‌ام، گزینه‌ی المان <body> صفحه را به صفر رسانده است.

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

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

ویرایش‌گر در برابر فرانت‌اند سفارشی بلوک
ویرایش‌گر در برابر فرانت‌اند سفارشی بلوک

ویرایش‌گر در برابر فرانت‌اند سفارشی بلوک

 

 

 

 

 

 

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

و البته من پوسته‌های Twenty Nineteen ،Twenty Twenty-One و Eksell را انتخاب کردم زیرا توسط حرفه‌ای‌های صنعت ما طراحی شده و در چند سال گذشته منتشر شده بودند. هرکدام از آن‌ها به‌خوبی با ویرایش‌گر عمل می‌کنند اما چند مشکل جزئی دارند که راه رفع آن‌ها هم ساده و پیش پا افتاده است.

همه‌ی این‌ها به این معنی است که نتایج ممکن است خیلی متفاوت باشد – خیلی زیاد!

روش ایده‌آل برای استفاده از ویرایشگر قالب وردپرس ۵.۸

ترس من از ویرایش‌گر قالب وردپرس این است که کاربران شروع به ترکیب کردن محتوای خود مستقیماً در ویرایش‌گر کنند. این مسأله‌ای است که من در دور شماره ۷ برنامه FSE Outreach مطرح کردم. در نهایت، سؤال اصلی در مورد مرز بین محتوا و قالب است.

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

حالت جدید کمی اوضاع را مبهم می‌کند. از آن‌جا که کاربران برای تغییر قالب از داخل خود ویرایش‌گر پست / صفحه دست‌رسی مستقیم دارند، شک ندارم که بسیاری از افراد، محتوای کل صفحه را از داخل ویرایش‌گر قالب تولید می‌کنند.

حتی من هم همین اشتباه را مرتکب شدم و آن‌چه باید عموماً محتوا نامیده شود را در قالب‌های نمونه‌ی بالا قرار دادم. این کار صرفاً برای تصویرسازی بود.

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

توصیه‌ی من برای شروع این است که خیلی ساده فقط بلوک محتوای پست را به قالب اضافه کنید. این کار را می‌توانید از طریق اضافه‌کننده‌ی بلوک یا با پیست کردن در این قطعه کد انجام دهید:

<!– wp:post-content {“layout”:{“inherit”:true}} /–>

اگر فقط یک قالب وردپرس خالی (blank/empty) می‌خواهید، که همان چیزی‌ست که ویرایش‌گر در حال حاضر در آن به درد می‌خورد، شما دقیقاً به قالب نیاز دارید. می‌توانید به ویرایش‌گر صفحه بازگردید و خلاقیت خود را آزاد کنید.

تصویر زیر شروع یک صفحه‌ی فرود برای یک رمان‌نویس است که من آن را از قالب خالی ساخته‌ام:

صفحه فرود برای یک داستان‌نویس با بخش قهرمان ویژه و آخرین بخش کتاب

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

اگر می‌خواهید سایر المان‌های طرح‌بندی را اضافه کنید، می‌توانید آن‌ها را نیز فعال کنید. سعی کنید بلوک عنوان سایت ، تگ‌لاین سایت و ناوبری را زیر عنوان هدر با هم ترکیب کرده و مطابقت دهید. برای ایجاد یک «منطقه‌ی ابزار» در فوتر، یک بلوک ستون را همراه بلوک‌های دیگر بگیرید و رها کنید.

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

تا آن زمان، می‌توانیم بگیوییم که یک صفحه‌ساز لندینگ به عبارتی خوب و به عبارتی شگفت‌انگیز داریم.

(منبع: https://wptavern.com)