آشنایی با الگوهای بلاک وردپرس: آنها چیست و چگونه از آنها استفاده کنیم

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

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

یک مثال یک الگوی بلوک فراخوانی برای اقدام (CTA) است بیست و بیست موضوع. این شامل بلوک‌های عنوان، پاراگراف و دکمه‌ها است که می‌توانید آن‌ها را سفارشی کنید، از رنگ پس‌زمینه گرفته تا اندازه متن و تراز.

بلوک الگوها در مقابل الگوهای همگام‌سازی شده

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

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

فرض کنید می خواهید یک دکمه CTA را در پست های خود درج کنید. استفاده را در نظر بگیرید:

• الگوی منظم – برای کپی کردن طرح اصلی اما شخصی سازی محتوای CTA برای هر پست.
• الگوی همگام سازی شده – برای افزودن دقیقا همان CTA برای همه پست ها. برای به‌روزرسانی خودکار همه نمونه‌ها، فقط باید یک بار بلوک CTA را ویرایش کنید.

علاوه بر این، کاربران می توانند الگوهای بلوک را در دایرکتوری Pattern ثبت کنند یا آنها را در یک افزونه یا یک موضوع قرار دهند. این الگوهای از پیش ساخته شده گزینه های طراحی بیشتری را هنگام ایجاد پست یا به شما ارائه می دهند page طرح بندی ها

چرا از الگوهای بلاک وردپرس استفاده کنیم؟

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

زمان کارآمد

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

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

نگاه حرفه ای

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

قابلیت استفاده مجدد

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

سفارشی سازی

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

دسته بندی الگوهای بلوک وردپرس

ویرایشگر بلوک دارای دسته بندی های متعددی برای سازماندهی الگوهای بلوک وردپرس است. در زیر شش دسته الگوی پیش فرض در وردپرس آورده شده است.

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

سرصفحه ها

هدر به قسمت بالای سایت اشاره دارد pageکه معمولا لوگو، عنوان، منوهای پیمایش و دکمه جستجوی وب سایت را نمایش می دهد. این دسته الگوی بلوک دارای شش گزینه پیش فرض با اهداف و سبک های مختلف است.

متن

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

این الگو معمولاً شامل پاراگراف ها، رسانه ها و دیگر انواع محتوا است. الگوی متن برای ایجاد محتوای بصری جذاب تر مفید است روی شما page. برخی از نمونه ها نقل قول و تصویر در رنگ ثابت با توضیحات هستند روی سمت.

فراخوانی برای اقدام

Call to Action به کاربران وردپرس کمک می کند تا پیوندهای جلب توجه را به محتوای خود اضافه کنند. می‌توانید از این الگو برای راه‌اندازی یک اقدام خاص از سوی بازدیدکنندگان، مانند ثبت‌نام برای خدمات یا خرید یک محصول، استفاده کنید.

آلبوم عکس

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

نوشته ها

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

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

برای استفاده از الگوهای بلوک، مراحل زیر را دنبال کنید:

1. ویرایشگر وردپرس را باز کرده و کلیک کنید روی درج کننده بلوک را تغییر دهید → الگوها.
2. شما باید لیستی از دسته های مختلف را ببینید، مانند ویژه، دکمه ها، و آلبوم عکس. کلیک کردن روی آنها پانل دیگری را باز می کنند که در آن می توانید نمونه های الگو را ببینید.

3. برای دیدن تعداد بیشتری از آنها به پایین بروید یا روی آن کلیک کنید همه الگوها را کاوش کنید را فشار دهید تا پیش نمایش های بزرگ را در یک پنجره بازشو ببینید. در نهایت، مورد دلخواه خود را انتخاب کنید.

4. الگوی بلوک را بکشید و رها کنید یا روی آن کلیک کنید تا آن را وارد کنید page یا پست کنید
5. پس از وارد کردن الگو، کلیک کنید روی بلوکی که می‌خواهید آن را سفارشی کنید تا محتوا را تغییر دهید یا گزینه‌های سفارشی‌سازی را بررسی کنید روی پنل سمت راست
6. کلیک روی جعبه گروه برای شخصی سازی الگو، مانند تنظیم ابعاد آن یا افزودن حاشیه.
7. به تعداد مورد نیاز الگو اضافه کنید یا با کلیک راست روی کادر گروه و انتخاب سه نقطه عمودی، آنها را از پست خود حذف کنید. برداشتن.

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

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

بازدید کنید دایرکتوری الگوهای وردپرس

این کتابخانه رایگان بلوک به کاربران امکان می دهد الگوهای بلوک را در جامعه وردپرس بیابند و به اشتراک بگذارند. به وب سایت بروید و الگوها را جستجو کنید – آنها را بر اساس مشاهده کنید روی دسته بندی ها یا مرتب سازی گزینه ها بر اساس تاریخ یا محبوبیت.

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

از طرف دیگر، مستقیماً با نگه داشتن ماوس روی الگو و ضربه زدن به آن از آن استفاده کنید کپی 🀄 دکمه، و چسباندن آن به پست خود یا page.

یک قالب وردپرس که الگوهای بلوک را ارائه می دهد پیدا کنید

بسیاری از تم های وردپرس شامل الگوهای بلاک خود هستند. به طور معمول، این الگوها با زیبایی شناسی موضوع مطابقت دارند و دسترسی به آنها در ویرایشگر وردپرس امکان پذیر است.

برخی از تم های رایگان وردپرس با سبک های بلوک سفارشی عبارتند از:

• بیست و بیست
• بیست و بیست و یک
• آجری
• نالدی

یک پلاگین نصب کنید

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

روش ایجاد الگوهای بلاک سفارشی وردپرس

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

با استفاده از ویرایشگر بلاک

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

سفارشی کردن یک بلوک یا گروهی از بلوک ها را شروع کنید و انتخاب کنید ایجاد الگو از منوی نوار ابزار بلوک. پاپ آپ ایجاد الگو ظاهر می شود که در آن می توانید الگو را نامگذاری کنید و الگوی بلوک را به چندین دسته یا دسته های جدید اختصاص دهید.

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

یک الگوی بلوک از طریق کتابخانه الگو ایجاد کنید

راه دیگر برای ایجاد الگوی بلوک این است که به دایرکتوری Pattern بروید و کلیک کنید روی را الگوی جدید ایجاد کنید ارتباط دادن.

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

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

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

روش ایجاد دستی الگوهای بلوک

علاوه بر نصب افزونه و بازدید از کتابخانه Pattern، کاربران می توانند الگوهای جدید بلوک وردپرس را به صورت دستی بسازند و با سفارشی کردن آن به تم اضافه کنند. functions.php فایل.

الگوهای خود را ایجاد کنید روی یک پست یا page ویرایشگر، سپس به ویرایشگر کد حالت را با انتخاب سه نقطه عمودی در گوشه سمت راست بالا. همه کدها را کپی کرده و در یک ویرایشگر متن ساده مانند Notepad قرار دهید.

بعد، به داشبورد وردپرس بروید، کلیک کنید ظاهر → ویرایشگر فایل تم، و پیدا کنید functions.php فایل.

Theme File Editor” class=”wp-image-74092″ data-lazy-srcset=”https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2022/12/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor.webp 1024w,https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2022/12/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor-300×141.webp 300w,https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2022/12/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor-150×70.webp 150w,https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2022/12/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor-768×361.webp 768w” data-lazy-sizes=”(max-width: 1024px) 100vw, 1024px” data-lazy-src=”https://rasanegar.com/blog/wp-content/uploads/2023/12/1703841749_380_آشنایی-با-الگوهای-بلاک-وردپرس-آنها-چیست-و-چگونه-از.webp.webp”> Theme File Editor” class=”wp-image-74092″ srcset=”https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2022/12/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor.webp 1024w,https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2022/12/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor-300×141.webp 300w,https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2022/12/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor-150×70.webp 150w,https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2022/12/The-functions.php-file-within-the-Appearance-menu-Theme-File-Editor-768×361.webp 768w” sizes=”(max-width: 1024px) 100vw, 1024px”>

کد زیر را در انتهای فایل کپی و پیست کنید.

function function_name() {
  register_block_pattern(
    'slug',
    array(
        'title' => __( 'your pattern title', 'text-domain' ),
        'description' => _x( 'your pattern description', 'Block pattern description', 'text-domain' ),
        'content' => ‘your block content code’,
    )
);
}
add_action( 'init', 'function_name' );

عنوان الگو و متغیرهای توضیحات را با خود مشخص کنید و متن خود را جایگزین کنید block content code با کد Notepad اطمینان حاصل کنید که نقل قول های تکی اطراف متن را در جای خود رها می کنید. در نهایت بر روی به روز رسانی فایل دکمه ذخیره تغییرات

نتایج را با ایجاد یک جدید ببینید page و کلیک کردن درج کننده بلوک را تغییر دهید → الگوها برگه کلیک روی منوی کشویی را انتخاب کنید دستهبندی نشده. در اینجا باید الگوی بلوک سفارشی جدید خود را ببینید.

روش صادرات و واردات الگوهای بلوک

هنگام مدیریت چندین وب سایت وردپرس، می توانید الگوهای بلوک سفارشی را به راحتی صادر و وارد کنید تا آنها را در دسترس قرار دهید روی همه سایت ها این باعث صرفه جویی در وقت شما می شود زیرا نیازی به ایجاد مجدد الگوی سفارشی به صورت دستی ندارید روی هر سایت

برای صادر کردن یک الگوی سفارشی، کتابخانه الگو را در ویرایشگر سایت با کلیک کردن باز کنید روی نماد وردپرس یا وب سایت در گوشه بالا سمت چپ و انتخاب کنید الگوها. الگوی صادراتی را پیدا کنید، روی آن کلیک کنید اقدامات را فشار دهید (نماد بیضی) در زیر تصویر کوچک الگو برای باز کردن منوی کشویی، و انتخاب کنید صادرات به عنوان JSON.

سپس مرورگر شما اعلان دانلود را برای ذخیره فایل JSON باز می کند روی کامپیوتر شما.

هنگامی که فایل های JSON الگوها را دارید، می توانید آنها را به سایت های وردپرس دیگر وارد کنید. کتابخانه الگو را باز کنید و روی آن کلیک کنید ایجاد الگو دکمه (نماد به علاوه). انتخاب کنید وارد کردن الگو از JSON، و از شما خواسته می شود که یک فایل JSON را از رایانه محلی خود انتخاب کنید. فایل JSON الگو را پیدا کنید و آن را آپلود کنید.

روش حذف الگوی بلوک از وردپرس

می توانید با کپی و جایگذاری این کد، الگوی بلوکی را که ثبت کرده اید حذف یا لغو ثبت کنید روی شما functions.php فایل:

function unregister_my_patterns() {
  unregister_block_pattern('your pattern title');
}

add_action( 'init', 'unregister_my_patterns' );

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

همچنین می توان الگوهای بلوک هسته وردپرس را با استفاده از هسته به عنوان پیشوند و ذکر نام الگو حذف کرد، مانند:

unregister_block_pattern( 'core/Pricing table' );

اگر می خواهید تمام الگوهای بلوک پیش فرض را حذف کنید، از کد زیر استفاده کنید:

remove_theme_support( 'core-block-patterns' );

نتیجه

الگوی بلوک یک طرح از پیش طراحی شده متشکل از یک یا چند بلوک است که به کاربران کمک می کند تا وب سایت های وردپرسی را سریع و آسان ایجاد کنند.

می‌توانید الگوهای بلوک پیش‌فرض وردپرس را در ویرایشگر بلاک پیدا کنید و آنها را در خود وارد کنید page یا پست کنید اگر گزینه های بیشتری می خواهید، از دایرکتوری Pattern دیدن کنید، افزونه ای مانند نصب کنید Redux، یا مضامین وردپرس را جستجو کنید که چندین الگو را ارائه می دهند.

همچنین این امکان وجود دارد که الگوهای بلاک وردپرس خود را با استفاده از بلوک مایستر افزونه یا یک ویرایشگر در کتابخانه الگو. از طرف دیگر، با قرار دادن کد در خود، یک الگوی بلوک جدید طراحی کنید functions.php فایل. اکنون متوجه شدید که الگوی بلاک وردپرس چیست، وقت آن است که از آن برای سرعت بخشیدن به طراحی وب سایت خود استفاده کنید process. موفق باشید!