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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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