https://virgool.ir/feed/@khashayar.aryanmehr127fa2026-11-12 11:00:55https://files.virgool.ir/upload/users/2690198/avatar/avatar.pnghttps://virgool.ir/@khashayar.aryanmehr127https://virgool.ir/@khashayar.aryanmehr127/چگونه-یک-تم-بلاک-block-theme-وردپرس-بسازیم-eyrywxhlp32pسلام در این پست با هم یک تم بلاک کاملاً سفارشی از صفر خواهیم ساخت.ویرایشگر گوتنبرگ(Gutenberg editor)ویرایشگر جدید وردپرس، گوتنبرگ، به ما اجازه می دهد به صورت گرافیکی تم و صفحات سایت را ویرایش کنید.بسیار ساده است، اگر وردپرس نسخه ۵.۹ به بالا دارید به منوی Appearance>Editor بروید. اینجا می توانید با استفاده از Block ها صفحه خود را بسازید. در نسخه های پایین تر نیز با نصب افزونه Gutenberg می توانی این کار را انجام دهید. هر چند بهتر است وردپرس را به آخرین نسخه آپدیت کنید.صفحه ای که دیدید ویرایشگر گوتنبرگ است که از نسخه ۵.۹ جایگزین tinyMCE شده است. ویرایش پست ها و صفحات نیز از همین ویرایشگر استفاده می کنند. این یعنی اکنون ویرایش تم در وردپرس به آسانی ویرایش پست ها است!اما در این پست می خواهیم کمی جلوتر برویم و از صفر یک تم بسازیم.بریم بسازیم! Hello Worldیک پوشه تازه برای تم در آدرس `/wp-content/themes` بسازید. می توانید هر اسمی برای آن انتخاب کنید: مثلا xgutenberg . سپس پوشه تازه را با ویرایشگر خود باز کنید.فایل های زیر را در آن قرار دهید.index.php //خالی، این فایل پیشتر نقطه شروع تم بود، امّا حالا صرفاً باید باشد. شاید بعدها وردپرس کاملاً حذفش کندstyle.css مشخصات تم را در این فایل به فرمت استاندارد سربرگ style.css بنویسید/* Theme Name: X Gutenberg Block Theme Author: Khashayar Aryanmehr Description: A simple block theme Version: 1.0.0 Requires at least: 5.0 Tested up to: 6.2.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html Text Domain: xgberg */templates/index.htmlHello World!حالا وارد پیشخوان وردپرس شوید و از منو Appearance > Theme تم جدید خود را انتخاب و فعال کنید.حالا به صفحه اصلی سایت بروید و ببینید!همچنین به صفحه ویرایش تم بروید و ببینید!قالب(template) بسازیم!برای اینکه تم توسط گوتنبرگ پشتیبانی شود، باید همه چیز را به صورت بلاک قرار دهیم.فایل index.html را باز کنید و یک بلاک پاراگراف بسازید:<!-- wp:paragraph --> <p>Hello World! This is a wordpress paragraph block!</p> <!-- /wp:paragraph -->بعداً انواع بلاک را خواهیم شناخت.همین کار را با ویرایشگر گوتنبرگ نیز می توان انجام داد، امّا تغییراتی که در گوتنبرگ می دهیم روی فایل های تم ذخیره نمی شوند، بلکه در دیتابیس ذخیره می شوند، که می توانیم آن ها را اکسپورت کنیم و در فایل های تم قرار دهیم.همچنین می توانید تغییراتی که از طریق گوتنبرگ ثبت شده را درون ویرایشگر، از بخش قالب ها، Clear customization به حالت اصلی خود تم برگردانید!سلسله مراتب قالب ها(Template Hierarchy)در تم های کلاسیک وردپرس برای صفحات سایت نام های فایل های متناسب قالب تعریف شده است:صفحه پیش فرض: index.php صفحه خانه: home.php صفحه ویترین(Front page): front-page.php و ...تمام سلسله مراتب را می توانید در مستندات وردپرس ببینید.حالا در تم های بلاک نام صفحات همین ها است منتها با پسوند html .مثلاً:index.html home.html front-page.htmlبرای آزمایش فایل single.html را در templates بسازید و متن زیر را در آن بنویسید:<!-- wp:paragraph --> <p>This is the single post page template!</p> <!-- /wp:paragraph -->حالا اگر به بخش Posts در پیشخوان بروید و یک پست بسازید و آن را نمایش دهید صفحه زیر را خواهید دید!بعداً خواهیم دید چگونه اطلاعات واقعی پست را در قالب نمایش دهیم.با استفاده از Block theme generator می توانید ساختار اولیه تم خود را به سادگی بسازید.بلاک ها7یک بلاک در ساده ترین حالت به صورت زیر درون یک کامنت HTML استفاده می شود:<!-- prefix:block-name /--> مثلاً: <!-- wp:search /-->وردپرس این کامنت ها را به کد HTML مناسب تبدیل می کند.بلاک ها می توانند محتوای HTML دلخواه داشته باشند:<!-- wp:paragraph --> <p>Welcome to the world of blocks.</p> <!-- /wp:paragraph -->برای پیدا کردن کد بلاک های مورد نظر می توانید از دو روش زیر استفاده کنید:به Appearance>Editor یا صفحه ساخت پست جدید بروید. بلاک مورد نظر را پیدا کنید و از منوی گوشه همان بلاک Copy را بزنید. به همین راحتی.از رفرنس سایت fullsiteediting.com استفاده کنید: لینکمحتوای پویا (Dynamic content)بلاک های مختلفی برای نمایش محتوای پویا از پست ها و داده های دیگر از دیتابیس وجود دارد.بریم صفحه single.html را ویرایش کنیم تا اطلاعات پست را نمایش دهد:<!-- wp:post-title {"textColor":"luminous-vivid-orange"} /--> <!-- wp:post-content /-->به صفحه یک پست خاص بروید و نتیجه را ببینید:بعداً خواهیم دید که چگونه می توان یک بلاک دلخواه ساخت.منابع:https://fullsiteediting.com/courses/full-site-editing-for-theme-developers/https://www.youtube.com/watch?v=C088o0O7SncKhashayar AryanmehrKhashayar AryanmehrSun, 09 Jul 2023 12:02:56 +0330