آیلین وب

فهرست مطالب

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

قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

ساده ترین راه برای به قرار دادن تصاویر در کنار هم در وردپرس استفاده از ویرایشگر گوتنبرگ وردپرس است. ویرایشگر گوتنبرگ دارای یک بلوک ویژه به نام “گالری” (Gallery) است که به شما امکان نمایش تصاویر را در سطرها و ستون ها می دهد.

ابتدا، برای باز کردن ویرایشگر محتوا باید یک پست یا صفحه جدید ایجاد کنید یا صفحه موجود را ویرایش کنید. پس از ورود به مدیریت وردپرس، روی نماد (+) کلیک کنید تا یک بلوک جدید اضافه کنید.

Put Images in WordPress 1 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

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

Put Images in WordPress 2 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

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

همان طور که مشاهده می کنید ما 2 تصویر به بخش گالری خود اضافه کرده ایم. وردپرس به طور خودکار آنها را در کنار هم قرار داده است.

Put Images in WordPress 3 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

اگر بخواهیم 3 تصویر در کنار هم قرار بدهیم باید چه کنیم؟ اگر یک تصویر سوم اضافه کنید، وردپرس اندازه تصاویر قبلی را تغییر می دهد تا هر 3 تصویر در کنار هم قرار گیرد:

Put Images in WordPress 4 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

اگر تصویر چهارم را بارگذاری کنید، وردپرس آن را در زیر تصاویر دیگر قرار می دهد.

Put Images in WordPress 5 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

می توانید تعداد تصاویری را که وردپرس باید در کنار هم در یک ستون بگذارد تغییر دهید. چگونه؟ ابتدا روی گالری کلیک کنید. در سمت راست صفحه، تنظیمات گالری را مشاهده می کنید.

Put Images in WordPress 6 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

می توانید تعداد ستون ها را در عددی بین 1 تا 4 تنظیم کنید. به عنوان مثال ، اگر می خواهید دو تصویر در کنار هم داشته باشید و دو تصویر دیگر در زیر آن ها باشد، می توانید ستون ها را روی 2 تنظیم کنید.

Put Images in WordPress 7 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

به همین سادگی!

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

Put Images in WordPress 8 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

در تصویر زیر یک نمونه از قرار دادن تصاویر در کنار هم در وردپرس مشاهده می کنید:

Put Images in WordPress 9 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

ساخت گالری تصاویر در وردپرس با افزونه Envira Gallery

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

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

ابتدا باید افزونه Envira Gallery را نصب و فعال کنید. در مرحله بعدی، به Envira Gallery و سپس Add New در داشبورد وردپرس خود بروید.

Put Images in WordPress10 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

برای ساخت گالری تصاویر با افزونه Envira Gallery به گالری خود عنوانی بدهید. نام این گالری را “گالری نمونه” (Example Gallery) می گذاریم. حالا تصاویری را که می خواهید استفاده کنید بارگذاری کنید.

می توانید تصاویرتان را در کادر بارگذاری بکشید و رها کنید یا از یکی از دکمه های Select Files استفاده کنید.

Put Images in WordPress 11 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

ترتیب نمایش تصاویر پس از بارگذاری مطابق عکس زیر است:

Put Images in WordPress 12 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

بهتر است به تصاویر خود عنوان و متن جایگزین (alt) بدهید. در این صورت وقتی کاربر ماوس را روی هر تصویر قرار می دهد، عنوان زیر تصویر شما ظاهر می شود.

عنوان هر تصویر زیر آن نمایش داده می شود.

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

Put Images in WordPress 13 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

هم چنین می توانید عنوان هر تصویر را تغییر دهید. به طور پیش فرض عنوان هر تصویر همان نام فایل است.

متن جایگزین alt را نیز زیر کادر عنوان تصویر وارد کنید. این کار ساده برای سئو سایت وردپرس شما بسیار مفید است. اگر عنوان تصویر توصیف خوبی برای عکس تان است از همان برای متن جایگزین استفاده کنید.

Put Images in WordPress 14 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

پس از مراحل بالا، قبل از بستن پنجره تنظیمات عنوان تصاویر، بر روی دکمه Save Metadata کلیک کنید.

Put Images in WordPress 15 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

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

Put Images in WordPress 16 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

حالا یک پست یا صفحه را ویرایش کنید یا یک پست جدید ایجاد کنید. در داخل ویرایشگر محتوا، برای افزودن هر بلوکی به پست خود (+) را انتخاب و بلوک Envira Gallery را انتخاب کنید. این گزینه در بخش Common Blocks نیز وجود دارد. نوار جستجو نیز می توانید عنوان Envira Gallery را وارد کنید.

Put Images in WordPress 17 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

برای انتخاب گالری خود، روی منوی کشویی کلیک کنید تا لیست گالری هایی که ساخته اید نمایان شود. حالا گالری موردنظرتان را انتخاب کنید.

Put Images in WordPress 18 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

مطابق تصویر زیر گالری قسمتی از صفحه پست تان نمایش داده ی شود.

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

Put Images in WordPress 19 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

ما گالری خود را طوری تنظیم کردیم که همیشه در دو ستون نمایش داده شود. حاشیه بین تصاویر را هم اضافه کردیم. به همین راحتی ساخت گالری در وردپرس با افزونه Envira Gallery انجام می شود.

Put Images in WordPress 20 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

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

Put Images in WordPress 21 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

اگر می خواهید تصاویر بیشتری به گالری خود اضافه کنید، می توانید به Envira Gallery و سپس All Galleries در داشبورد وردپرس بروید. برای ویرایش، کافی ست بر روی نام گالری خود کلیک کنید.

Put Images in WordPress 22 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

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

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

بعد از نصب افزونه دکمه “افزودن گالری” (Add Gallery) را در بالای ویرایشگر کلاسیک قرار می گیرد که می توانید برای افزودن یک گالری به پست خود از آن استفاده کنید.

Put Images in WordPress 23 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

هم چنین می توانید با کلیک روی دکمه “افزودن رسانه” (Add Media) و سپس “ایجاد گالری” (Add Media) یک گالری جدید ایجاد کنید.

Put Images in WordPress 24 - قرار دادن تصاویر در کنار هم در وردپرس با ویرایشگر گوتنبرگ

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب داغ
نیاز به کمک دارید؟ پیام بدید
اسکرول به بالا