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

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

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

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

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

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

بدون مقدمه، بیایید شروع کنیم زیرا چیزهای زیادی برای یادگیری وجود دارد.

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

سپس به این دلیل که چرا ما اینجا هستیم 

به هر حال بلوک ها چیست؟

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

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

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

درست مانند یک صفحه ساز که مستقیماً در وردپرس ادغام شده است.

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

پس بیایید به بهترین بخش مقاله امروز برسیم. بیایید یاد بگیریم که چگونه یک بلوک ساده ایجاد کنیم. می توانید این کار را به صورت دستی یا با استفاده از افزونه هایی مانند بلوک های سفارشی جنسیس (BlockLab سابق)، بلوک های تنبل ou ACF. ایجاد بلوک های سفارشی کمی فنی است، بنابراین برای اهداف مقاله امروز، از یک افزونه استفاده خواهیم کرد.

نحوه ایجاد یک بلوک سفارشی (با استفاده از Genesis Custom Blocks)

رفتن به مسیر پلاگین آسان تر است زیرا ایجاد بلوک های سفارشی گوتنبرگ از ابتدا نیاز به درک خوب HTML، CSS، PHP و مهمتر از همه جاوا اسکریپت دارد. شما همچنین باید React را درک کنید.

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

Genesis Custom Blocks را نصب کنید

وارد داشبورد مدیریت وردپرس خود شوید و به آن بروید برنامه های افزودنی> افزودن، همانطور که در زیر نشان داده شده است.

سپس وارد کنید " بلوک های سفارشی جنسیس در کادر جستجوی کلمه کلیدی و کلیک سور لو بوتون نصب در حال حاضر

بعد از آن، فعال کردن افزونه برای شروع

بعد، بیایید یک بلوک سفارشی جدید ایجاد کنیم. برای اهداف تصویری، بیایید یک فراخوان سفارشی برای اقدام (CTA) ایجاد کنیم که به انتهای هر مقاله ای که منتشر می کنیم اضافه می کنیم. بهترین بخش این است که می توانید از بلوک ها استفاده مجدد کنید تا شما را از ایجاد بارها و بارها همان بلوک ها نجات دهد.

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

این شما را به صفحه زیر می برد که در آن همه گزینه ها برای ایجاد یک بلوک سفارشی (در مورد ما، یک CTA) را خواهید یافت:

در اینجا چند کلمه برای توضیح آنچه در تصویر بالا می بینید وجود دارد. از بالا شروع کنید، آن را دارید.

حوزه اصلی ویرایش:

• سازنده - احتمالاً زمان زیادی را در اینجا صرف طراحی بلوک سفارشی خود خواهید کرد. را سازنده به شما امکان می دهد عنوان، فیلدها، اسلاگ، کلمات کلیدی، دسته بندی و پیش نمایش بلوک سفارشی خود را اضافه کنید. شما یاد خواهید گرفت که چگونه فیلدها را اضافه کنید.
• ویرایشگر الگو – پس از طراحی بلوک سفارشی خود (یعنی افزودن فیلدهای مختلف)، باید یک قالب بلوک (خواندن، اضافه کردن کد) در آن ایجاد کنید. ویرایشگر مدل. وقتی CTA را طراحی می کنیم بیشتر یاد خواهیم گرفت.
• پیش نمایش ویرایشگر – این امکان را به شما می دهد تا بلوک سفارشی را در ویرایشگر بلوک وردپرس پیش نمایش کنید.
• پیش نمایش جلویی - در اینجا می توانید پیش نمایشی را مشاهده کنید که بلوک سفارشی در وب سایت شما چگونه به نظر می رسد.
• EditorField - فیلدهایی را در قسمت ویرایش اصلی یک پست یا صفحه نشان می دهد (می دانید، درست مانند پست های معمولی خود در ویرایشگر وردپرس)
• InspectorField – فیلد را در نوار کناری سمت راست زیر Block Inspector نمایش می دهد.

گزینه های نوار کناری

• یواش یواش و بیهوده وقت گذراندن - بر اساس عنوانی که به بلوک سفارشی خود می دهید به طور خودکار پر می شود. این در هنگام ایجاد مدل بلوک مهم است.
• شمایل – این گزینه به شما امکان می دهد یک نماد به بلوک سفارشی خود اضافه کنید.
• دسته بندی - به شما امکان می دهد یک دسته را به بلوک سفارشی خود اختصاص دهید. می‌توانید بلوک سفارشی خود را با استفاده از یکی از دسته‌های داخلی طبقه‌بندی کنید، یا می‌توانید یک دسته کاملاً جدید ایجاد کنید.
• کلید واژه ها - حداکثر سه کلمه کلیدی مرتبط را به بلوک سفارشی خود اضافه کنید تا افراد بتوانند به راحتی آن را در انتخابگر بلوک پیدا کنند.
• به جای رندر در محل، فیلدهای بلوک را به صورت مودال باز کنید - اگر می خواهید فیلدها را به صورت مدال باز کنید، فعال کنید. اگر یک بلوک سفارشی با فیلدهای زیاد دارید، این کار مفید است.
• نوع پست - کادر(ها) را علامت بزنید تا بلاک سفارشی شما در هر نوع پست نمایش داده شود. به عنوان مثال، اگر تیک Posts را بردارید، بلوک در هیچ پستی ظاهر نمی شود.

یک بلوک سفارشی ایجاد کنید

اکنون که درک بهتری از رابط کاربری و کارهایی که هر قسمت انجام می دهد دارید، بیایید دست به کار شویم.

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

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

به آن، بیایید چند فیلد را به بلوک سفارشی خود اضافه کنیم. برای مثال بلوک CTA خود، فقط سه فیلد را به ترتیب زیر اضافه می کنیم: یک تصویر، مقداری متن و یک فیلد فایل که به افراد امکان می دهد کتاب الکترونیکی را دانلود کنند.

دفعات بازدید: 5 WooCommerce پلاگین برای ویرایش محصولات خود را به صورت فله

اضافه کردن فیلدهای بلوکی

در بخش فیلدهای ویرایشگرروی کلیک کنید نماد پلاس (+). برای اضافه کردن فیلد اول مطابق شکل زیر.

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

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

تغییر به ویرایشگر الگو > نشانه گذاری

در اینجا ما طراحی خواهیم کرد که بلوک سفارشی ما در وب سایت شما چگونه به نظر می رسد. ویرایشگر مدل HTML، CSS و فیلد اسلاگ را می پذیرد (که باید بین 2 براکت قرار دهید). اگر نیاز به استفاده از زبان PHP دارید، می توانید قالب را با استفاده از آن ایجاد کنید روش مدل سازی پی اچ پی

نگران نباشید، آسان است.

Dans ویرایشگر مدل، زیر برگه نشانه گذاری، کد زیر را اضافه کنید:

<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>

همانطور که کد خود را می نویسید، متوجه آن خواهید شد ویرایشگر مدل slugs فیلد تکمیل خودکار (به عنوان مثال {{image-field}}) برای شما.

سپس به بخش بروید CSS برای اضافه کردن استایل های ساده با کد زیر:

.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}

.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;

}

شما می توانید این سبک ها را به دلخواه شخصی سازی کنید،

با کلیک بر روی انتشار :

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

سپس، بلوک سفارشی خود را به دلخواه پر کنید و پیام خود را ارسال کنید:

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

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

سایر منابع پیشنهادی

همچنین شما را به مشاوره ressources برای اینکه مالکیت و کنترل بیشتری بر وب سایت و وبلاگ خود داشته باشید.

• 10 پلاگین وردپرس وابسته برای ایجاد یک برنامه
• نحوه اضافه کردن چندین ستون در وردپرس
• نحوه اضافه کردن چندین ستون در وردپرس
• نحوه استفاده از زمینه های مختلف در وردپرس
• Elementor: چگونه یک انیمیشن در شناور ایجاد کنیم

نتیجه

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

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

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...