سفارشی سازی ویرایشگر گوتنبرگ با Atomic Blocks
ویرایشگر گوتنبرگ
با انتشار وردپرس ۵ مشکلاتی برای برخی از دوستان وردپرسی ایجاد شد. چرا که با باز کردن وردپرس 5 صفحه جدیدی به نام گوتنبرگ نمایش داده می شود. به دلیل تازگی این صفحه اغلب کاربران از استفاده از آن اجتناب کردند و به دنبال برگرداندن ویرایشگر قدیمی بودند، که این قابلیت فعلا در دسترس این دسته از کاربران می باشد. با وجود این، ما پیشنهاد می کنیم شما دوستان سریعتر خود را با این عضو جدید وردپرس وفق دهید. همچنین توسعهدهندگان وردپرس باید به سرعت به فکر گسترش این ویرایشگر برای کاربران باشند تا تمامی نیازهای آنها را رفع کنند، چراکه تنها تا سال ۲۰۲۱ استفاده از این امکان ممکن می باشد. در مطالب قبلی وی پی نگار ما به معرفی ویرایشگر گوتنبرگ و نحوه استفاده از آن پرداختیم. امروز قصد داریم افزونه ای را به شما معرفی کنیم که امکان سفارشی سازی ویرایشگر گوتنبرگ را به شما بدهد.
سفارشی سازی ویرایشگر گوتنبرگ
افزونه ای که به شما معرفی می کنیم، امکانات فوق العادهای را به گوتنبرگ می افزاید که میتوانید آنها را برای تولید یک محتوای جذاب و کاربرپسند بکار ببرید. با بکار بردن امکانات این افزونه میتوانیم امکان سفارشی سازی ویرایشگر گوتنبرگ را داشته باشیم.
پس برای آموزش نصب و استفاده از افزونه Atomic Blocks در ادامه با ما همراه باشید.
ویژگیهای طلایی افزونه
تعدادی از امکانات و ویژگیهای این افزونه شامل:
نصب افزونه Atomic Blocks
اولین کار برای نصب افزونه دانلود فایل افزونه از انتهای همین مطلب می باشد. بعد به پیشخوان وردپرس رفته و وارد بخش افزودن افزونهها شوید. دکمه “بارگذاری افزونه” را بزنید و فایلی که دانلود کردهاید را انتخاب کنید. پس از آپلود شدن افزونه، آن را فعال کنید. بعد از فعال شدن افزونه، به صفحه معرفی این افزونه منتقل خواهید شد.
آموزش استفاده از افزونه Atomic Blocks
وارد صفحه افزودن نوشته وردپرس شوید. در این صفحه ویرایشگر گوتنبرگ را مشاهده می کنید. بعد از نوشتن عنوان نوشته خود، روی علامت + کلیک کنید تا المانهای متفاوت گوتنبرگ نمایش داده شوند. حالا در پایین لیست المانها، گزینهای به نام Atomic Blocks ایجاد شده که مربوط به امکان سفارشی سازی ویرایشگر گوتنبرگ است. روی آن کلیک کنید تا المانهای مختلف و جذاب این افزونه را مشاهده کنید.
در این صفحه ۱۱ المان متفاوت را برای سفارشی سازی ویرایشگر گوتنبرگ، می بینیم. با کلیک روی هر کدام، به صفحه مقاله شما افزوده می شوند. در ادامه هر یک از این المانها را توضیح می دهیم.
Profile Box
این المان یک جعبه زیبا برای معرفی یک شخص که میتواند نویسنده مقاله باشد، می افزاید. روی آن کلیک کنید تا این المان به مقاله شما اضافه گردد.
روی بخش Add name کلیک کنید و نام شخص مورد نظر را وارد کنید. در قسمت Add title نیز عبارتی مثل سِمت این شخص را وارد کنید و در قسمت پایینی هم توضیحاتی در مورد این فرد یادداشت کنید. در سمت راست، با کلیک کردن روی عکس، میتوانید عکس شخص مورد نظر را نیز آپلود و اضافه کنید. در بالای جعبه نیز میتوانید متن این جعبه را به دلخواه راستچین، چپچین یا وسطچین نمایید. زمانی که این المان انتخاب شد، در سمت چپ گوتنبرگ در قسمت Block، گزینههایی برای شخصیسازی این المان وجود دارند که به آنها نیز میپردازیم.
Font Size: سایز فونت متن جعبه را مشخص کنید.
Avatar Shape: میتوانید شکل عکس این جعبه را مربعی یا دایرهای کنید.
Background Color: رنگ پس زمینه جعبه را تعیین کنید.
Text Color: رنگ متن جعبه را تعیین کنید.
Social Link Color: رنگ شبکههای اجتماعی که در زیر این جعبه قرار دارند را تعیین کنید.
Social Links: لینک شبکههای اجتماعی شخص مورد نظر را در هر قسمت وارد نمایید.
اکنون دوباره علامت + را بزنید تا المان بعدی را برای سفارشی سازی ویرایشگر گوتنبرگ، بیافزاییم.
Testimonial
با بکار بردن این المان میتوانید یک قسمت نقل قول زیبا به نوشته خود بیافزایید. روی آن کلیک کنید و اطلاعات لازم را وارد کنید.
عنوان، متن و متن دکمه را وارد نمایید و در بخش پایینی، آدرس سایت یا صفحهای که کاربر بعد از کلیک روی دکمه وارد آن میشود را وارد نمایید. در سمت چپ نیز تنظیمات این المان را مشاهده میکنید.
Text Options: سایز فونت عنوان و متن جعبه را مشخص کنید.
Text Color: رنگ متن را تعیین کنید.
Background Options: میتوانید جهت پسزمینه این جعبه یک عکس اختصاص دهید یا اینکه یک رنگ دیگر را بکار ببرید.
Button Options: در این بخش میتوانید مشخص کنید که لینک دکمه در صفحه جدید باز شود یا نه. همینطور سایز، شکل و رنگ دکمه هم از این قسمت قابل تغییر می باشد.
Button
با بکار بردن این المان، یک دکمه زیبا به نوشته خود بیافزایید. این هم میتواند یکی از گزینههای جالب در سفارشی سازی ویرایشگر گوتنبرگ باشد.
روی دکمه کلیک کنید و متن روی دکمه را بنویسید. در بخش پایینی هم لینک دکمه را وارد کرده و دکمه Apply را بزنید. در سمت راست در قسمت Block، تنظیمات بیشتر این المان را می توانید مشاهده کنید.
در این تنظیمات میتوانید مشخص کنید که لینک دکمه در صفحه جدید باز شود یا نه. همچنین سایز، شکل، رنگ دکمه و رنگ متن دکمه نیز قابل تغییر می باشند.
Drop Cap
این المان در زبان انگلیسی کاربرد دارد و اولین حرف کلمه را بزرگتر نمایش میدهد.
در صورتی که می خواهید یک متن انگلیسی در نوشته خود ایحاد کنید، میتوانید آن را با این المان آغاز کنید. از قسمت بالای این المان متن را چپ چین نمایید و متن خود را بنویسید. از قسمت Block در سمت راست، میتوانید سایز حرف بزرگ شده و نحوه نمایش آن را تغییر دهید.
Notice
این المان با ایجاد جعبه زیبا به شما این امکان را میدهدکه محتوایی را برای توجه بیشتر درون آن قرار دهید. کاربرد آن بیشتر برای هشدار دادن موضوعی به کاربران است اما لزوما تنها کاربرد آن محسوب نمیشود.
در بخش Notice Title، عنوان جعبه را وارد کنید و در قسمت پایینی هم متن مورد نظر خود را بنویسید. در قسمت Block در سمت راست تنظیمات بیشتر این المان را بررسی میکنیم.
Font Size: سایز فونت نوشتههای این جعبه را مشخص کنید.
Notice Display: در صورتی که روی Dismissable قرار دهید، کاربر میتواند با زدن دکمه ضربدر در کنار این جعبه آن را ببندد و نبیند و در صورتی که روی Always Show قرار دهید، همیشه برای کاربران قابل مشاهده می باشد. گزینههای بعدی مربوط به رنگبندی جعبه، عنوان و متن این المان جهت سفارشی سازی ویرایشگر گوتنبرگ می باشند.
Sharing
این المان به شما این امکان را میدهد تا دکمههای اشتراک گذاری در شبکه های اجتماعی را به راحتی به مقاله خود بیافزایید.
در سمت راست در بخش Block، به پیکربندی این المان میپردازیم.
در بخش بالایی مشخص میکنید، اشتراک گذاری در کدام یک از شبکههای اجتماعی فعال باشد. در بخش بعدی که Sharing Button Options نام دارد، تنظیمات اصلی المان قرار دارند.
Button Style: میتوانید مشخص کنید در دکمهها، نام یا لوگوی شبکههای اجتماعی یا هر دوی آنها نمایش داده شوند.
Button Shape: شکل دکمه را میتوانید بر اساس دلخواه خود عوض کنید.
Button Size: سایز نمایش دکمهها را مشخص کنید.
Button Color: رنگ دکمهها را میتوانید تغییر دهید. اگر Social Colors را انتخاب کنید، رنگ خود شبکههای اجتماعی روی دکمهها قرار خواهد گرفت.
Accordion
با بکار بردن این المان میتوانید یک لیست آکاردئونی جذاب ایجاد نمایید. این هم بخشی از مبحث سفارشی سازی ویرایشگر گوتنبرگ است.
در بخش طوسی رنگ، عنوان لیست آکاردئونی را وارد کنید و در قسمت پایین توضیحات را به صورت نوشته بیافزایید. فراموش نکنید که در قسمت توضیحات، میتوانید علاوه بر بکار بردن متن، از المانهای دیگر گوتنبرگ، حتی المانهای خود این افزونه استفاده کنید؛ مثلا به جای متن، یک دکمه زیبا قرار دهید یا از هر دو استفاده کنید. در قسمت Block یک مورد مهم وجود دارد.
در بخش Font Size، سایز فونت نوشته را مشخص کنید. در قسمت Open by default میتوانید مشخص کنید که لیست آکاردئونی به صورت پیش فرض باز باشد یا اینکه کاربر خودش با کلیک کردن، آن را باز کند.
Spacer
یک المان مهم که به شما امکان افزودن فضای خالی بین المانهای مختلف را میدهد.
در بخش Block، میتوانید مقدار فضای خالی را بر حسب پیکسل مشخص کنید. میتوانید تیک گزینه Add devider را هم بزنید تا یک خط جداکننده هم با طرح و رنگ دلخواه شما نمایش داده شود. اگر فکر میکنید دو قسمت از مقاله شما به یکدیگر زیادی نزدیک هستند و کاربر را سردرگم میکنند، از این المان استفاده کنید البته متاسفانه این المان فاصله را به صورت رنگی نمایش میدهد و در صورتی که میخواهید فاصله بین دو بخش محتوا سفید باشد و معلوم نباشد، باید از المان Spacer انحصاری گوتنبرگ استفاده کنید.
Container
این المان به ما امکان قسمتبندی مقاله مان را می دهد. مثلا در صورتی که یک بخش از مقاله شما متن و یک بخش دیگر شامل عکس باشد. در این صورتی شما میتوانید همه عکسها را در یک Container قرار دهید و فاصله آن را از متن کمی بیشتر کنید یا حتی پس زمینه خاصی به آن اختصاص دهید تا محتوای شما زیباتر به نظر برسد و منظمتر شود. در قسمت Block در سمت راست تنظیمات مهمی وجود دارد.
در این قسمت میتوانید Padding (فاصله داخلی) محتوای خود را از بالا، پایین، چپ و راست تنظیم کنید. همچنین Margin (فاصله خارجی) محتوای خود از بالا و پایین را میتوانید تغییر دهید. در منوی تنظیمات بعدی که Background Options نام دارد، میتوانید یک عکس یا رنگی خاص را به عنوان پس زمینه برای کل محتوای درون این کانتینر در نظر بگیرید.
Post Grid
این المان آخرین پستهای شما را به صورتی که شما دوست دارید، نمایش میدهد. در واقع با این عملیات بخشی از سفارشی سازی ویرایشگر گوتنبرگ بر عهده میگیرد.
در بخش بالایی این المان نحوه نمایش پست ها را به صورت پنجرهای یا لیستی انتخاب کنید.
در سمت راست در قسمت Block، به پیکربندی تنظیمات این المان میپردازیم.
Order by: نحوه نمایش پستها را مشخص کنید؛ از قدیم به جدید یا برعکس و یا به ترتیب حروف الفبا
Category: دستهبندی پستهایی که میخواهید نمایش داده شوند را مشخص کنید. برای نمایش پستهای همهی دسته بندیها، مقدار All را انتخاب کنید.
Numbers of items: تعداد پستهایی که می خواهید نمایش داده شود.
Columns: تعداد ستونها برای نمایش پستها را تعیین کنید.
Display Featured Image: تصویر شاخص نمایش داده شود یا خیر.
Featured Image Style: نحوه نمایش تصویر شاخص را تعیین کنید.
گزینههای بعدی به ترتیب برای نمایش یا عدم نمایش عنوان پست، نویسنده، تاریخ، خلاصه پست و عبارت بیشتر بخوانید زیر هر مقاله است، که به دلخواه میتوانید آن را تغییر دهید.
Customize Read More Link: میتوانید عبارت Continue Reading که شامل لینک مقاله است را با یک عبارت فارسی مثل “بیشتر بخوانید” جایگزین کنید.
درباره سحر امیرعباسیان
کارشناس مهندسی فناوری اطلاعات ، علاقه ی زیادی به طراحی وب دارم.
نوشته های بیشتر از سحر امیرعباسیانمطالب زیر را حتما بخوانید
افزونه و کد حذف فیلد آدرس از بخش نظرات وردپرس
1.61k بازدید
ایجاد پاپ آپ در وردپرس – افزونه Popup Builder
1.51k بازدید
نمایش رویدادها در وردپرس به صورت تایم لاین با افزونه Timeline Express
955 بازدید
ایجاد پروفایل کاربری در وردپرس با افزونه Profile Builder
1.02k بازدید
افزودن عکس پروفایل در وردپرس با افزونه User Profile Picture
795 بازدید
دیدگاهتان را بنویسید