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

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

در این راهنما اول با کاربردهای اینفوگرافیک آشنا می‌شید. بعد ساخت پروژه در Infogram، گرفتن کد Embed و قراردادن اون در ویرایشگر وردپرس رو قدم‌به‌قدم یاد می‌گیرید. در ادامه هم روش بدون کد، رفع مشکلات نمایش، نکته‌های طراحی و تأثیر احتمالی اینفوگرافیک روی تجربه کاربر و سئو رو بررسی می‌کنیم.

اینفوگرافیک چیه و چه کمکی به سایتتون می‌کنه؟

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

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

چه اطلاعاتی رو بهتره با اینفوگرافیک نشون بدید؟

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

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

انواع پرکاربرد اینفوگرافیک

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

Infogram چیه و چطور کار می‌کنه؟

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

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

قبل از شروع به چه چیزهایی نیاز دارید؟

• یک حساب کاربری Infogram
• داده‌های نهایی و منبع معتبر اون‌ها
• دسترسی به ویرایش نوشته یا برگه در وردپرس
• رنگ‌ها، لوگو و فونت‌های مناسب برندتون
• یک نسخه متنی از اطلاعات مهم برای مخاطب و موتور جستجو

پلن رایگان Infogram برای چه سایت‌هایی مناسبه؟

پلن رایگان برای آشنایی با محیط Infogram، تمرین و ساخت تعداد محدودی پروژه عمومی مناسبه. اگه انتشار خصوصی، امکانات بیشتر، حذف نشانه سرویس یا تنظیمات حرفه‌ای برند براتون مهمه، باید امکانات پلن‌های پولی رو بررسی کنید.

ظرفیت‌ها و امکانات پلن‌ها ممکنه تغییر کنن. قبل از شروع یک پروژه جدی، جزئیات صفحه رسمی قیمت‌گذاری Infogram رو بخونید تا مطمئن بشید پلن انتخابی با نیازتون هماهنگه.

آموزش ساخت اینفوگرافیک با Infogram

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

ساخت حساب کاربری و ورود به پیشخوان

وارد سایت Infogram بشید و گزینه ثبت‌نام رو انتخاب کنید. بعد از ساخت حساب و ورود، پیشخوان پروژه‌ها باز می‌شه. از همین بخش می‌تونید پروژه جدید بسازید یا طرح‌های قبلی رو ویرایش کنید.

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

ایجاد پروژه و انتخاب قالب مناسب

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

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

اضافه‌کردن متن، تصویر، نمودار و داده

برای اضافه‌کردن محتوا از ابزارهای ویرایشگر Infogram استفاده کنید. عنوان اصلی باید کوتاه و روشن باشه. زیر هر نمودار هم توضیحی بذارید که مخاطب بفهمه عددها درباره چه موضوع و چه بازه‌ای هستن.

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

واردکردن دستی اطلاعات

برای داده‌های کم می‌تونید سلول‌های جدول داخلی نمودار رو مستقیم ویرایش کنید. عنوان ستون‌ها رو واضح بنویسید و عددها رو با واحد درست وارد کنید. بعد از هر تغییر، خود نمودار رو هم بررسی کنید تا برچسب‌ها یا رنگ‌ها اشتباه نشون داده نشن.

انتقال داده از فایل یا سرویس‌های پشتیبانی‌شده

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

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

تنظیم رنگ، فونت و اندازه بخش‌ها

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

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

بررسی نمایش اینفوگرافیک در موبایل

بخش بزرگی از بازدیدکننده‌ها ممکنه مقاله رو با موبایل ببینن. پیش‌نمایش پروژه رو در عرض کم بررسی کنید و مطمئن بشید عنوان‌ها، برچسب نمودارها و عددهای مهم قابل‌خوندن هستن.

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

انتشار پروژه و دریافت کد Embed

وقتی طراحی تموم شد، پروژه رو منتشر کنید. بعد وارد بخش Share یا اشتراک‌گذاری بشید و گزینه Embed رو باز کنید. کدی که Infogram در اختیارتون می‌ذاره، برای جاسازی پروژه در سایت استفاده می‌شه.

اگه چند نوع کد می‌بینید، گزینه Responsive IFrame برای خیلی از سایت‌ها انتخاب ساده‌ایه. Responsive یعنی اندازه محتوا با عرض صفحه هماهنگ می‌شه. یک گزینه هم برای وردپرس داره. راهنمای رسمی جاسازی پروژه Infogram جزئیات گزینه‌های فعلی رو نشون می‌ده. یک گزینه

آموزش قراردادن اینفوگرافیک در وردپرس

روش اصلی و کم‌وابسته برای ساخت اینفوگرافیک در وردپرس اینه که کد رسمی پروژه رو در بلوک HTML سفارشی بذارید. این روش به افزونه جداگانه یا API نیاز نداره و در ویرایشگر بلوکی وردپرس قابل‌انجامه.

اضافه‌کردن کد Infogram با بلوک HTML سفارشی

1. در Infogram کد Embed پروژه منتشرشده رو کپی کنید.
2. در پیشخوان وردپرس، نوشته یا برگه موردنظرتون رو باز کنید.
3. روی دکمه افزودن بلوک با علامت مثبت کلیک کنید.
4. عبارت «HTML سفارشی» رو جست‌وجو و همین بلوک رو انتخاب کنید.
5. کد کپی‌شده رو بدون تغییر داخل بلوک بچسبونید.
6. پیش‌نمایش نوشته رو باز کنید و نتیجه رو بررسی کنید.

استفاده از کد Responsive IFrame برای نمایش واکنش‌گرا

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

کد رو همون‌طور که سرویس ارائه می‌کنه داخل بلوک HTML سفارشی بذارید. اگه قالب یا افزونه امنیتی بخشی از کد رو حذف می‌کنه، اول سطح دسترسی حساب وردپرس و تنظیمات امنیتی سایتتون رو بررسی کنید. کد ناشناخته یا تغییریافته رو هم از سایت‌های دیگه کپی نکنید.

پیش‌نمایش و انتشار نوشته در وردپرس

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

مطمئن بشید اینفوگرافیک از کادر محتوا بیرون نزده، متن‌ها خونده می‌شن و فضای خالی زیادی زیر پروژه دیده نمی‌شه. بعد از این بررسی‌ها می‌تونید نوشته رو منتشر یا به‌روزرسانی کنید.

قراردادن اینفوگرافیک در وردپرس بدون کار با کد

اگه نمی‌خواید کد Embed رو داخل نوشته بذارید، افزونه oEmbed Infogram یک گزینه جانبیه. oEmbed روشی برای تبدیل لینک یک محتوای پشتیبانی‌شده به نسخه جاسازی‌شده اونه.

نصب و راه‌اندازی افزونه oEmbed Infogram

1. در پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید.
2. نام oEmbed Infogram رو جست‌وجو کنید.
3. نام افزونه و سازنده اون رو با صفحه رسمی مخزن تطبیق بدید.
4. افزونه رو نصب و بعد فعال کنید.

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

جاسازی اینفوگرافیک با لینک اشتراک‌گذاری

پروژه Infogram رو منتشر کنید و لینک اشتراک‌گذاری اون رو کپی کنید. بعد لینک رو در یک خط جدا داخل ویرایشگر وردپرس بچسبونید. افزونه تلاش می‌کنه لینک رو به اینفوگرافیک جاسازی‌شده تبدیل کنه.

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

روش کد Embed بهتره یا افزونه؟

برای بیشتر سایت‌ها، کد Embed رسمی انتخاب مطمئن‌تریه چون به نصب یک افزونه جانبی وابسته نیست. در مقابل، افزونه oEmbed Infogram کار رو برای کسی که نمی‌خواد با کد سروکار داشته باشه ساده‌تر می‌کنه.

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

حل مشکل نمایش Infogram در وردپرس

چرا اینفوگرافیک نمایش داده نمی‌شه؟

اول مطمئن بشید پروژه در Infogram منتشر شده و کد مربوط به همون نسخه منتشرشده‌ست. بعد بررسی کنید کد داخل بلوک HTML سفارشی قرار گرفته و به‌صورت متن عادی وارد نشده.

اگه بعد از ذخیره بخشی از کد ناپدید می‌شه، ممکنه وردپرس یا ابزار امنیتی سایت بعضی تگ‌ها رو پاک کنه. این مشکل گاهی به سطح دسترسی حساب کاربری هم مربوطه. برای بررسی، از مدیر سایت یا پشتیبان فنی کمک بگیرید و هیچ تنظیم امنیتی مهمی رو بدون شناخت تغییر ندید.

چطور مشکل عرض و نمایش در موبایل رو حل کنید؟

از گزینه Responsive IFrame استفاده کنید و بررسی کنید عرض ثابت به قاب پروژه اضافه نشده باشه. محدودیت عرض ستون یا بخش والد در قالب هم می‌تونه باعث باریک‌شدن یا بیرون‌زدن اینفوگرافیک بشه.

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

چرا تغییرات پروژه داخل وردپرس دیده نمی‌شن؟

بعد از ویرایش پروژه در Infogram، مطمئن بشید تغییرات ذخیره و نسخه منتشرشده دوباره به‌روز شده. بعد صفحه وردپرس رو در یک پنجره ناشناس مرورگر باز کنید تا نسخه ذخیره‌شده در مرورگر باعث اشتباه نشه.

اگه پروژه رو با نسخه یا لینک تازه‌ای منتشر کردید، ممکنه لازم باشه کد Embed قبلی رو با کد جدید عوض کنید. کدها رو با هم ترکیب نکنید و فقط نسخه کامل ارائه‌شده در پنجره Share رو بذارید.

چطور تداخل کش یا تنظیمات امنیتی رو بررسی کنید؟

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

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

نکته‌های مهم برای ساخت یک اینفوگرافیک خوانا

اطلاعات و منبع داده رو دقیق انتخاب کنید

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

متن‌ها رو کوتاه و قابل‌فهم نگه دارید

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

از رنگ و فونت هماهنگ با برندتون استفاده کنید

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

اینفوگرافیک رو برای موبایل بهینه کنید

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

برای اطلاعات تصویری، متن جایگزین هم در مقاله بذارید

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

تأثیر اینفوگرافیک روی تجربه کاربر و سئو

اینفوگرافیک چطور فهم محتوا رو راحت‌تر می‌کنه؟

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

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

چطور از سنگین‌شدن صفحه جلوگیری کنید؟

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

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

چطور امکان اشتراک‌گذاری و دریافت لینک رو بیشتر کنید؟

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

اگه سایت دیگه‌ای به مقاله شما ارجاع بده، اون لینک می‌تونه بخشی از مسیر معرفی محتوا باشه. برای شناخت دقیق‌تر این موضوع، راهنمای ساخت بک‌لینک بدون ایجاد مشکل برای سئو رو ببینید.

جمع‌بندی

برای ساخت اینفوگرافیک در وردپرس، اول داده‌ها رو آماده کنید و پروژه رو در Infogram بسازید. بعد از انتشار، کد Embed رو از بخش Share بگیرید و داخل بلوک HTML سفارشی وردپرس بذارید. این روش برای جاسازی عادی به API یا افزونه اختصاصی نیاز نداره.

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

سؤال‌های رایج

تیم تولید محتوا

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