در مقاله “نمایش انواع نمودار ها در وردپرس با افزونه Visualizer” یکی دیگر از افزونه های کار آمد را میخواهیم معرفی کنیم :
واضح و مبرهن است که کمک های دیداری مانند نمودارهای میله ای، دایره ای، و گراف ها، ارائه های شما را جذاب تر می کند. به هر حال هیچ چیز چشمگیرتر از نمودارهای رنگارنگ، گراف های بالا رونده، یا میله های مقایسه کننده نیست.
حال ما در این مقاله به شما نشان می دهیم که چگونه و بدون نوشتن حتی یک خط کد به راحتی در وردپرس نمودار هایی زیبا ایجاد کنید. اما در ابتدا به بررسی یک مشکل کلی افزونه های نمایش نمودار در وردپرس می پردازیم.
مشکل افزونه های نمایش نمودار در وردپرس
در وردپرس افزونه های بسیاری برای اضافه کردن نمودارهای مختلف به سایت شما وجود دارد. با این حال، در صورت جستجو در اینترنت شایع ترین شکایتی که از طرف کاربران به چشم می خورد این است که افزونه ها معمولا بیش از حد برای استفاده کردن، پیچیده هستند. برخی از این افزونه ها حتی از کاربران انتظار دارند که داده ها را در داخل یک کد کوتاه و با استفاده از فرمت های بسیار پیچیده، اضافه کنند!!!
اما به جای استفاده از آن گونه افزونه ها، اکثر کاربران در نهایت نمودارها را در برنامه ی آفیس خود ایجاد کرده و سپس آنها را به تصویر تبدیل می کنند. این کار تا زمانی که شما قصد تغییر دادن این نمودارها در آینده را نداشته باشید ، و یا با این حقیقت که آنها واقعا مانند یک نمودار عمل نمی کنند مشکلی ندارید ، کار راه انداز و مفید است.
اما توجه داشته باشید که هیچگونه اطلاعات یا کمک های دیداری هنگامی که کاربر ماوس خود را بر روی تصویر حرکت می دهد، ظاهر نخواهد شد.
به طور ایده آل، آنچه لازم دارید که این افزونه ها در اختیار شما قرار دهند این است که اجازه دهد تا داده ها را از یک منبع بر روی کامپیوتر خود و یا بر روی وب، اضافه کنید. یعنی افزونه اطلاعات را از محلی دریافت و سپس نمودارهای مختلف را در سایت شما قرار دهد.
نمودارهای زیبا، تعاملی، و رنگارنگ ایجاد می کند که به صورت پویا اندازه های خود را برای تلفن های همراه و تبلت ها تنظیم می کنند. از همه مهمتر شما به یک راه حل نیاز دارید که اجازه ی به روز رسانی اطلاعات در هر زمان که شما می خواهید را بدهد.
راه حل Visualizer نام دارد! Visualizer افزونه ای قوی ولی ساده است که به شما کمک می کند نمودار هایی گویا و متفاوت برای سایت خود ایجاد کنید.
معرفی و آموزش کامل افزونه Visualizer
اولین گام که شما باید انجام دهید، نصب و فعال سازی افزونه رایگان Visualizer است. پس از فعال کردن افزونه، به سادگی می توانید یک پست جدید ایجاد و یا یکی از پست های موجود را ویرایش کنید.
در صفحه ویرایش پست ها بر روی دکمه ی اضافه کردن رسانه (Add Media) کلیک کنید. در آپلود کننده ی رسانه ی خود یک آیتم منو جدید برای تصویر سازی (Visualizations) خواهید دید. با کلیک کردن بر روی آن، کتابخانه تصویری شما نمایش داده خواهد شد.
با این حال، از آنجایی که شما به تازگی افزونه را نصب کرده اید، این منو خالی خواهد بود. پس بر روی گزینه ی “جدید ایجاد کنید” (Create New) کلیک کنید تا یک نمودار جدید ایجاد شود.
در صفحه بعدی، این افزونه از شما می خواهد تا نوع نمودار مورد نظر خود را انتخاب کنید. یک نوع از نمودارها را متناسب با آنچه خود در نظر دارید انتخاب کنید و سپس روی گزینهNext کلیک کنید.
افزونه در صفحه بعدی از شما خواهد خواست تا بر روی منوی Upload CSV File در سمت راست کلیک کنید که به شما دو گزینه نشان می دهد. گزینه اول آپلود یک فایل CSV از کامپیوتر شما و گزینه دوم ساکن کردن یک نمودار از وب با استفاده از صفحه ی گسترده ی درایو گوگل (Google Drive) است. ما در این پست هر دو گزینه را به شما نشان خواهیم داد.
اضافه کردن یک نمودار در وردپرس از یک صفحه ی گسترده ی درایو گوگل (Google Drive)
بر خلاف برخی از افزونه های وردپرس دیگر که برای وارد کردن داده ها برای یک نمودار از کد کوتاه ها استفاده می کنند، Visualizer به شما اجازه می دهد که نمودار خود را با داده ها از صفحات گسترده گوگل بگیرید و یا به صورت دستی یک فایل CSV را آپلود کنید.
برای ایجاد یک نمودار از صفحه ی گسترده ی درایو گوگل، به Google Drive بروید و یک صفحه گسترده جدید ایجاد و یا یکی از صفحه های گسترده ی موجود را ویرایش کنید. اطمینان حاصل کنید که سطر اول از صفحه گسترده دارای نام ستون و ردیف دوم دارای نوع داده ها است. نوع داده های پشتیبانی شده عبارتند از: رشته، تعداد، Boolean، تاریخ، تاریخ روز و ساعت روز است.
هنگامی که صفحه ی گسترده ی شما آماده شد بر روی …Publish to the web از منو File کلیک کنید. این کار یک پنجره ی pop up برای شما باز می کند که لازم است برای قابل دسترسی کردن این صفحه ی گسترده توسط وب، بر روی دکمه انتشار کلیک کنید.
در زیر بخش Get a link to the published data، ارزش های CSV جدا شده به وسیله ی ویرگول را انتخاب کنید. لینکی که در بخش پایینی این صفحه تولید شده است را کپی کنید، بعدا به این لینک نیاز خواهید داشت.
حال به سایت وردپرسی خود و بخش تنظیمات افزونه برگردید، بر روی دکمه From Web کلیک کرده و URL را که همین چند لحظه پیش از صفحه ی گسترده ی درایو گوگل کپی گردید در آن پیست کنید.
دقت کنید که در این مرحله Visualizer داده ها را از صفحه ی گسترده ی اسناد گوگل شما بارگذاری نخواهد کرد و به شما یک نمودار نمونه نشان خواهد داد. برای تغییر ظاهر نمودار، رنگ و سایر تنظیمات بر روی دکمه next کلیک کنید.
در صفحه ی بعد، یک منو در سمت راست صفحه خواهید دید. از اینجا می توانید تنظیمات بصری نمودار خود را تغییر دهید.
شما می توانید یک عنوان اضافه کنید، موقعیت نوشته های داخل نمودار را تنظیم کنید، رنگ ها را تغییر دهید، نمودار خود را به حالت سه بعدی تبدیل کنید و غیره. هر زمان که از ظاهر نمودار خود راضی هستید، بر روی دکمه Insert Chart کلیک کنید تا آن را به پست خود اضافه کنید.
با کلیک کردن بر روی دکمه Insert Chart، کد کوتاه (short code) نمودار به پست شما اضافه می شود. شما می توانید با بازبینی پست و یا انتشار آن ببینید که نموداری که ایجاد کرده اید چگونه به نظر می رسد.
اضافه کردن یک نمودار در وردپرس با استفاده از یک فایل CSV
اضافه کردن یک نمودار و ساکن کردن آن با داده های یک فایل CSV شبیه به همان فرایند ذکر شده در بالا است. اما شما فقط باید به جای اضافه کردن یک URL، فایل CSV را از کامپیوتر خود آپلود کنید.
به هر حال، هنگامی که یک فایل CSV را برای استفاده با یک Visualizer آماده سازی می کنید، مطمئن شوید که ستون ها توسط کاما از هم جدا شده اند، سطر اول شامل نام ستون، و سطر دوم شامل نوع داده ها می باشند. همچنین مطمئن شوید که دو علامت نقل قول در ابتدا و انتهای فایل CSV شما وجود دارد. برای یادگیری بهتر به فایل CSV نمونه ی زیر توجه کنید.
Browser,visitors"
string,numbers
Chrome,7894
Firefox,6754
InternetExplorer,4230
Safari,2106
"Opera,627
ویرایش کردن و به روز رسانی نمودارها در وردپرس
همه ی نمودارهایی را که به وسیله ی Visualizer ایجاد کرده اید، در بخش رسانه (Media) و قسمت Visualizer Library ذخیره می شود. شما با استفاده از آن بخش می توانید یک نمودار را شبیه سازی، حذف و یا تنظیمات بصری آن را ویرایش کنید.
خوشبختانه به روز رسانی داده ها برای نمودار های موجود بدون تغییر نمودار، به وسیله ی Visualizer بسیار آسان است. اگر شما داده ها را از یک صفحه ی گسترده ی گوگل اضافه کرده باشید، همه ی آنچه که نیاز دارید به روز رسانی داده ها در صفحه ی گسترده ی خود و رفتن به File » Publish to the web… است.
کافی است به صفحه گسترده خود مراجعه کرده و پس از انجام ویرایش های مورد نظر خود، دوباره صفحه ی گسترده ی خود را منتشر کنید. تغییرات شما به طور خودکار در چارت شما منعکس خواهد شد.
از سوی دیگر، اگر شما یک فایل CSV را آپلود کنید، در مرحله ی بعد باید آن فایل CSV را در کامپیوتر خود به روز رسانی کنید. پس از انجام این کار، نمودار را که می خواهید به روز رسانی شود، انتخاب کنید و بر روی لینک ویرایش در زیر نمودار کلیک کنید.
در بخش آپلود فایل CSV به سادگی فایل CSV جدید خود را بارگذاری کنید. تغییرات در داده ها به طور خودکار در پست ها یا صفحاتی که نمودار را در آنها قرار داده بوده اید منعکس خواهد شد.
اضافه کردن یک نمودار در یک نوار ابزار وردپرس
افزونه Visualizer از کد های کوتاه (short codes) برای وارد کردن یک نمودار استفاده می کند. برای ایجاد یک نمودار به بخش Media و سپس قسمت Visualizer Library رفته و بر روی دکمه Add New کلیک کنید. پس از آنکه نمودار خود را ایجاد کردید، به صفحه Visualizer Library باز خواهید گشت؛ جایی که در آن کد کوتاهی را که به تازگی ساخته اید در زیر نمودار خود خواهید دید.
کد کوتاه را کپی کرده و از قسمت نمایش در پیشخوان وردپرس خود به قسمت ابزارک ها بروید. یک ابزارک متن را کشیده و آن را در نوار ابزار کناری رها کنید و کد کوتاه را در داخل ابزارک پیست کنید. یک عنوان مناسب به ابزارک خود داده و آن را ذخیره کنید.
حال که می توانید صفحات گسترده ی گوگل را با Visualizer استفاده کنید، می توانید نمودار های پویا را که منعکس کننده اطلاعات به روز شده است، داشته باشید. برای مثال، شما می توانید ارزش سهام یک شرکت و یا یک نوار پیشرفت را نشان دهید.
در پایان امیدواریم با کمک این پست و این افزونه به توانید به طور کامل نمودار ها را در سایت وردپرسی خود پیاده سازی کنید. اگر در نصب و یا استفاده از این افزونه به مشکلی بر خوردید در قسمت نظرات پاسخگوی شما هستیم.
