اضافه کردن تصاویر به محتوای پست ها و صفحات
این آموزش نحوه افزودن تصاویر به پستها و صفحات وردپرس را توضیح میدهد. کاربران می‌توانند تصاویر را مستقیماً از ویرایشگر محتوا یا از بخش رسانه در پنل ادمین آپلود کنند. همچنین، نحوه مدیریت پست‌های ضمیمه برای تصاویر و استفاده از داده‌های آنها در پست‌های مختلف بررسی میشود.
فهرست مطالب آموزش
مقدمه‌ای بر افزودن تصاویر در وردپرس
درست در اینجا همانطور که مشخص است یک پست جدید دارم که ساختم و آنرا منتشر هم کردم و در آن درباره یک خط تولید جدید در کمپانی و شرکت ساختگیم صحبت کردم. حالا میخواهم یکسری تصاویر به این پست اضافه کنم، چونکه همانطور که مشخص است، وقتی به صفحات اصلی سایت میروم با اینکه اطلاعات آن جالب است اما جذابیت بصری ندارد.
همچنین دارم درباره محصولات جدید صحبت میکنم. پس منطقی است که تصویرِ خود محصولات را هم به پست اضافه کنم.
روی کامپیوتر طهاکو من یک پوشه پر از تصاویر دارم که ویرایش کردم و فرمت آنها را برای استفاده در وب تنظیم کردم.
این هم بگویم در دوره ملزومات فتوشاپ طهاکو طریقه سفارشی سازی فرمتهای مناسب وب از اسناد تصویر بطور کامل بحث و مورد بررسی قرار گرفته. پس اگر در این مورد به اطلاعاتی نیاز داشتید به آن دوره آموزشی یک سری بزنید و حالا وقت آن است که این تصاویر را به شیوه‌های مختلف به پست خود اضافه کنم تا انتها این سرفصل آموزشی هم به همین کار میپردازیم.
آپلود تصاویر از ویرایشگر محتوا
تصاویر را مستقیماً از داخل ویرایشگر محتوا به پستها و صفحات اضافه میکنم، پس بر میگردم اینجا به قسمت مدیریت سایتم و ویرایشگر محتوا خود و حالا چند تا انتخاب دارید. میتوانید نشانگر ماوس یا کرسر را داخل ویرایشگر قرار بدهید و بعد پوشه چند لحظه پیش را باز کنید و هر تصویری که میخواهید را به داخل ویرایشگر درگ کنید تا پنجره “گذاشتن رسانه” یا add media بطور خودکار باز شود، اما مشکل این روش این است که ممکن است یادتان برود نشانگر را آنجایی که میخواهید قرار دهید و تصاویر در جاهای مختلف متن شما بطور رَندُم نمایش داده شوند.
پس کاری که معمولاً من انجام میدهم این است که اول به ویرایشگر میروم و جایی که میخواهم تصویر قرار بگیرد را پیدا میکنم.
در اینجا میخواهم یک تصویر به قبل یا بعد از این خط در مقاله خود اضافه کنم که نوشته “خط جدید تولید مکمل‌های ورزشی”.
نشانگر را اول آن میگذارم و یکبار اینتر را میزنم تا یک خط جدید ایجاد کنم و بعد روی دکمه “افزودن پرونده چند رسانه‌ای” یا در وردپرس لاتین Add Media را کلیک میکنم.
تا پنل “گذاشتن رسانه” یا insert media باز شود.
استفاده از بخش رسانه در پنل ادمین
بطورِ پیشفرض وردپرس همیشه این پنل را در حالت ” کتابخانه پرونده‌های چند رسانه‌ای” یا در وردپرس لاتین در media library باز میکند، که تمامی آیتمهای آپلود شده اخیر در وردپرستان را نشانتان میدهد. ما هنوز چیزی را اضافه نکردیم اما موقعی که سایتتان را ساختید؛ آیتمهای زیادی در اینجا خواهید داشت و ایده اصلی این است که اگر یک تصویر را یکبار آپلود کنید میتوانید همیشه برای بارها و بارها در صفحات مختلف از آن استفاده کنید و این میتواند دلیل نامگذاری این سربرگ به ” کتابخانه پرونده‌های چند رسانه‌ای” یا در وردپرس لاتین در media library باشد. من میخواهم یک فایل جدید آپلود کنم؛ پس سربرگ “بارگذاری پرونده‌ها” را میزنم.
و در وردپرس لاتین این سربرگ اسمش Upload Files است و باید آنرا انتخاب کنیم و روی “گزینش پرونده‌ها” یا Select Files کلیک کنیم تا file explorer سیستم عامل ما باز شود، یا میتوانم به پوشه تصاویر بروم؛ تصویر مورد نظر خود را بگیرم و در داخل پنجره insert media یا “گذاشتن رسانه” آنرا درگ و درآپ کنم.
به اینصورت؛ وقتی تصویر در سایت ما آپلود شد بر میگردم به تب “کتابخانه پرونده‌های چند رسانه‌ای” یا media library؛ و آنجا تصویر یا تصاویری که آپلود کردم هایلایت میشوند و بعد در سمت چپ تمام آن اطلاعات ضمیمه را هم میبینم.
مدیریت پست‌های ضمیمه برای تصاویر
در این بالا یک پیشنمایش از کل تصویر را به همراه اسم فایل میبینید و بعد هم تاریخ آپلود و سایز فایل و سایز فیزیکی را داریم.
یک دکمه “ویرایش تصویر” یا در وردپرس لاتین edit image را داریم اما از آن هیچ موقع استفاده نمیکنیم چونکه به خوبی کار نمیکند و حتماً قبل از آپلود کردن ویرایش را انجام بدهید.
همچنین میتوانید تصاویر را برایِ همیشه با این گزینه پاک کنید.
اینطوری کاملاً حذف میشود و دیگر در هیچ جایی از وردپرس دیده نمیشود.
در این پایین اطلاعاتی که در صفحه ضمیمه نشان داده میشود قرار دارند. وردپرس اینطوری تصاویر را ایندکس میکند.
با عنوان یا “نام” شروع میکنیم که میتوانیم تصویر را برای وردپرس توصیف کنیم و بعداً هم میتوانیم اینکار را انجام دهیم.
به اینصورت H+ Sport Products و بعد هم یک caption اختیاری داریم که در وردپرس فارسی باز هم “نام” تعریف شده؛ که در ویرایشگر و در صفحه اصلی سایت در زیر تصویر می‌آید.
بگذارید یک متن برای آن تایپ کنم و بعد هم متن جایگزین یا alternative را داریم که این خیلی جالب است، چون بسته به عملکرد تصویر فرق میکند. قانون ساده آن این است: اگر تصویر حاوی متن و داده‌های دیگر است که مهم است؛ متن جایگزین باید همان متن باشد؛ اگر تصویر دارای رابطه اطلاعاتی با محتوا مقاله است مثلاً عکس یک شخص؛ متن جایگزین باید تصویر را توصیف کند که منظور از متن جایگزین هم همین است.
اگر عکس یک لینک به یک صفحه دیگر دارد، متنی جایگزین باید مقصد لینک را توصیف کند و اگر عکس کاملاً تزئینی است و هیچ عملکردی متوجه آن نیست، این فیلد باید خالی گذاشته شود.
مدیریت پست‌های ضمیمه برای تصاویر
در این مورد من از متن جایگزین برای توصیف چیزی که در عکس است استفاده میکنم، تا کسی که از مرورگرِ text-to-speech استفاده میکند و همچنین Google، متوجه شود چه چیزی در عکس است. پس من برای آن این متن یعنی H+ sport products including vitamin waters, protein bars, and supplements را تعریف میکنم.
آخرین فیلد یعنی “توضیح” یا description به صفحه ضمیمه شما متصل میشود. پس اگر میخواهید به صفحه ضمیمه لینک بدهید و تمتان هم از آن پشتیبانی میکند میتوانید HTML را به این فیلد توضیحات اضافه کنید تا افرادی که به سایتتان می‌آیند و این تصویر را میبینند، اطلاعات بیشتری درباره این محصول بدست بیاورند.
بهینه‌سازی تصاویر برای وب‌سایت
در اکثرِ موارد از این فیلد استفاده نخواهید کرد، اما بعضی وقتها ممکن است، بخواهید از این صفحه ضمیمه استفاده کنید و باید این را پر کنید.
وقتی تمامی اطلاعات متا برای تصویری که آنرا آپلود کردید را کامل کردید، وقت آن است که تصمیم بگیرد چطور تصویر را در زمینه و محتوا پست خود نمایش بدهید.
این کارها در قسمت ” تنظیمات نمایش پیوست” یا در وردپرس لاتین در قسمتی با نامِ attachment display settings انجام میشود.
اول نحوه تراز شدن تصویر را انتخاب میکنید، از این منو کشویی left “چپ”، “میانه” center، right “راست” یا “هیچکدام” یا همان none، را انتخاب میکنید و من “میانه” یا center را انتخاب میکنم و بعد از قسمت “پیوند به” انتخاب میکنیم که تصویر را به چی میخواهیم لینک کنیم.
افزودن توضیحات و متن جایگزین
میتوانیم به “تصویر رسانه‌ای” لینک کنیم که تصویر با سایزِ اصلی است و با آن تصویر را در یک پنجره پاپ‌آپ باز میکنیم.
میتوانید به “پوسته پیوستها” یا در وردپرس لاتین به attachment page لینک دهید که شما را به صفحه ضمیمه میبرد.
میتوانید با “نشانی دلخواه” به یک URL لینک دهید و با آن تصویر را به سایت خودتان یا سایت دیگر لینک کنید.
یا میتوانید “هیچکدام” یا none را انتخاب کنید که کلاً لینک را حذف میکند.
من “تصویر رسانه‌ای” یا در وردپرس لاتین گزینه media file را انتخاب میکنم و لینک در این پایین ظاهر میشود.
در نهایت باید اندازه تصویر را مشخص کنم.
بسته به سایز تصویری که آپلود کردید گزینه‌های مختلفی را در اینجا خواهیم داشت در این مورد عرض تصویرِ من 1000 پیکسل بود که از اندازه کامل، کوچکتر بود، اما یک thumbnail مربع و یک اندازه “میانه” یا medium دارم.
من اندازه “میانه” یا medium را انتخاب میکنم و روی “گذاشتن در نوشته” یا Insert Into Post کلیک میکنم.
و حالا تصویر بهمراه caption در پست من ظاهر میشود.
نکات سازماندهی کتابخانه رسانه‌ای
وقتی تصویر اضافه شد، میتوانم طریقه نمایش در پست خود را با کلیک روی آن ویرایش کنم.
پس اگر روی تصویر کلیک کنم، این پاپ‌آپ باز میشود که یکسری ابزار به من میدهد که میتوانم چیدمان تصویر را به “چپ چین”، “وسطچین” و “راستچین” و یا “بدون چینش” تغییر بدهم که این عملکرد چیدمانِ قبلی را حذف میکند و تصویر را در راستا متنها نشان میدهد.
من اینرا با “چپچین” تنظیم میکنم و بعد اگر بخواهم تصویر را حذف کنم میتوانم “حذف” یا Remove را بزنم یا برای ویرایش بیشتر روی دکمه “ویرایش” یا Edit کلیک میکنم.
به یک پنجره متفاوت میروم که به من اجازه میدهد جزئیات تصویر را ویرایش کنم.
از اینجا میتوانم caption و متن جایگزین را ویرایش کنم.
میتوانم تنظیمات نمایش و چیدمان و همچنین اندازه و لینک به مشخصات را تغییر بدهم؛ و در قسمت “تنظیمات پیشرفته” یا در وردپرس لاتین در قسمت advanced options میتوانم یک title attribute یا “ویژگی عنوان تصویر” برای تصویر بگذارم یعنی متنی سفارشی کنم که با بردن ماوس روی تصویر نشان داده میشود.
زیاد از آن استفاده نمیشود و مورد استقبال هم نیست اما در دسترس است.
میتوانید یک “کلاس CSS تصویر” یا image CSS class تنظیم کنید، اگر بخواهید آن تصویر را خیلی پیشرفته توسعه بدهید میتوانید اینکار را انجام بدهید.
میتوانید انتخاب کنید که تصویر درون یک پنجره یا یک تب جدید باز بشود، این برای وقتی مفید است که میخواهید با تصویر به یک سایت دیگر لینک بدهید.
همچنین میتوانید یک link relation یا “ارتباط پیوند” و یک “کلاس CSS پیوند” یا link CSS class قرار بدهید.
در نهایت اینجا هم دو گزینه در اختیار شما قرار داده شده است.
نتیجه‌گیری و نکات پایانی
edit original یا “ویرایش اصلی” که همانطور که قبلاً گفتم ویرایشگر خوبی نیست و replace یا “جایگزینی” که خیلی جالب است چون به شما اجازه میدهد به کتابخانه تصاویر بروید و آنجا بیایید و یک فایل دیگر آپلود کنید و تصویر را جایگزین کنید و اینکار باعث میشود تصویر جدید دقیقاً در جای همان تصویر قبلی قرار بگیرد.
فعلاً همه را همینطور میگذارم و روی “بروزرسانی” یا Update کلیک میکنم.
تصویر در جایی که میخواستم نشان داده میشود.
و بعد پستم را با “بروزرسانی” آپدیت میکنم و بعد هم با گزینه “نمایش نوشته” از این بالا پست را در صفحه اصلیم میبینم تا مطمئن شوم همه چیز بدرستی کار میکند.
حالا اسکرول میکنم و این هم تصویر به همراه caption.
اگر روی تصویر کلیک کنم یک ورژنِ بزرگتر نشان داده میشود این روش زیاد جالب نیست و بعداً در فصل پلاگینها آنرادرست میکنیم. پس فعلاً همینطوری میگذاریم بماند.