آموزش قرار دادن عکس و ساخت گالری تصاویر در ویرایشگر گوتنبرگ وردپرس

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

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

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

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

  • تصویر
  • گالری
  • رسانه و متن
  • رویه
  • تصویر درونی

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

آموزش قرار دادن عکس در ویرایشگر گوتنبرگ وردپرس

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

آموزش بلوک تصویر

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

بلوک خالی تصویر به صورت زیر برای شما باز می شود.

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

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

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

و سپس تصویر انتخاب شده را در مکان مورد نظر خود پیست یا رها کنید.

 وردپرس تصویر را به صورت خودکار در کتابخانه رسانه آپلود کرده و می توانید آن را ویرایش کنید.

با اضافه شدن تصویر در بلوک، یک نوار ابزار در بالای تصویر ظاهر می شود.

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

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

شما می توانید سه گزینه برای تغییر چینش بلوک تصویر خود انتخاب کنید:

  • چپ چین
  • میان چین
  • راست چین

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

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

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

نقطه های آبی در لبه تصویر به شما امکان تغییر اندازه تصویر را می دهد.

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

در این باکس می توانید تصویر خود را در یک زبانه تازه باز کرده و تگ های تصویر را تنظیم کنید.

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

آموزش بلوک رسانه و متن

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

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

بلوک رویه

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

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

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

در حال حاضر ویرایشگر گوتنبرگ دارای بلوک جاسازی ها برای وب سایت های شبکه های مجازی اینستاگرام و Flickr است.

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

به عنوان مثال اگر بخواهید یک عکس اینستاگرام به سایت خود اضافه کنید می توانید به راحتی بلوک اینستاگرام را به ویرایشگر پست خود اضافه کرده و URL پستی که می خواهید در سایت منتشر کنید را وارد کنید.

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

بلوک تصویر درونی

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

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

تصویر مورد نظر خود را انتخاب و وارد کنید. تصویر در متن شما اضافه می شود و می توانید ابعاد آن را با استفاده از نقطه های اطراف تصویر تنظیم کنید.

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

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

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

ابتدا بلوک گالری را انتخاب کنید.

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

قرار دادن عکس در وردپرس و ساخت گالری تصاویر

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

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

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

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

قرار دادن دو عکس در کنار یکدیگر در ویرایشگر گوتنبرگ وردپرس

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

در ویرایشگر گوتنبرگ ساده ترین راه برای قرار دادن دو عکس در کنار یکدیگر استفاده از بلوک گالری و اضافه کردن دو تصویر در این بلوک است.

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

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

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

امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.

درباره ی مینا قدسی

مطلب پیشنهادی

ویرایش CSS در وردپرس باSimple Custom CSS و Simple Custom CSS and JS

ویرایش CSS در وردپرس با افزونه و به صورت دستی

اگر می خواهید قسمت هایی از ظاهر وب سایت وردپرس خود را تغییر دهید اما …

۲ دیدگاه

  1. ویرایشگر جدید وردپرس (ویرایشگر گوتنبرگ) خیلی سخت شده…

دیدگاهتان را بنویسید

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