كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

سواء كنت باحثا تقوم بجمع البيانات حول الانتخابات المحلية أو معلم تقوم بتبادل البيانات حول السكان المحليين في الحياة البرية مع صفك، لا توجد بدائل أفضل من الرسوم والأشكال البيانية. هذه الأدوات البصرية تُحول البيانات المملة، والرموز التي تبدو لا قيمة لها إلى معلومات سهلة الهضم بسهولة.

ما هو عظيم هو أن لا داعي للقلق حول التعامل مع برنامج بناء الرسوم البيانية المعقد، بما أن بامكانك القيام بذلك بفضل اضافات الووردبريس البسيطة لانشاء الجداول والرسوم البيانية. لذلك، نحن هنا لتوضيح أي من تلك الإضافات هي الأفضل، وسوف نذهب أيضا إلى كيفية إنشاء الرسوم البيانية الجميلة والأشكال في الووردبريس.

wordpress charts 1 DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

مزايا انشاء الرسوم البيانية والجداول والأشكال على الووردبريس

قد تتساءل لماذا لا يمكنك ببساطة تطوير الرسم البياني في برنامج، مثلا، إكسل، ثم تأخذ صورة للشاشة وتقوم بوضعها في مقالة على المدونة. في بعض الأحيان هذا الأسلوب يعمل بشكل جيد، ولكن في أوقات أخرى تكون عبارة عن نفايات ضخمة اذا لم يتم وضعها وصصويرها بشكل دقيق. السبب الرئيسي الذي يجعلك تذهب الى استخدام إكسيل أو برنامج آخر لبناء المخطط هو عندما تحتاج إلى ميزة متقدمة لا تتوفر عليها من خلال مكون ووردبريس الإضافي.

وإلا، فإليك فوائد إنشاء مخططات ورسومات على الووردبريس باستخدام الإضافات:

  • أنها تدمج كل من الرسم البياني الخاص بك والبناء في منطقة واحدة. إذا قمت بإجراء الرسوم البيانية أو المخططات على أساس منتظم، وهذا يوفر لك الكثير من الوقت.
  • انها تسمح لك بالعودة وتحرير الرسم البياني إذا لزم الأمر. وتحد الصورة من الإصلاحات السريعة وتتطلب منك العثور على الملف القديم الذي استخدمته لإجراء الرسم البياني.
  • بعض الرسوم البيانية والمخططات لها ميزات تفاعلية، والتي لن تكون ممكنا مع صورة.

وعموما، فإن اضافة مخطط للوردبريس يبسط العملية، لكنه لا يزال يوفر لك معظم الميزات التي ستحتاج لمشاركاتها على المدونة الخاص بك.

5 إضافات فعالة لانشاء المخططات والأشكال البيانية على الووردبريس

قبل أن نبدأ مع البرنامج التعليمي حول كيفية إنشاء الرسوم البيانية جميلة والمخططات على الووردبريس، فنحن نريد أن تستخدم مجموعة من أفضل الإضافات لإنجاز ما تحتاجه.

  1. wpDataTables
  2. WordPress Charts and Graphs Lite
  3. WordPress Charts
  4. Interactive Maps, Charts, Graphs
  5. UberChart

1. wpDataTables

wpDataTables هي اضافة وردبريس قوية جدا! لا تدع الاسم يخدعك. يمكن أن تفعل أكثر بكثير من مجرد إنشاء الجداول النموذجية الخاصة بك. يمكنك تصميم جميع أنواع الرسوم البيانية والمخططات كذلك. وقد وضعت خصيصا للسماح لك بادخال كميات كبيرة من البيانات وتحولها بسرعة كذلك إلى عرض رسومي لطيف بالنسبة لك والقراء.

wpdatatables wordpress plugin DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

wpDataTables هي اضافة مدفوعة، ابتداء من 44 $ للحصول على ترخيص. لديها حاليا أكثر من 13،000 من المبيعات على CodeCanyon مع 4.5 من 5 نجوم، لذلك يمكنك أن تطمئن إلى أن هناك الكثير من الناس سعداء باستخدامها. وتشمل بعض معالمه:

  1. كل شيء مستجيب مع نوع الجاهز المستعمل، وهذا يعني أنها سوف تظهر بنطاق جميل لكل جهاز
  2. اضافة wpDataTables تقوم بتقديم ثلاثة محركات للرسم البياني المختلف: Google Charts, Highcharts, وChart.js. هذا يسمح لك بتقديم الرسوم البيانية بشكل بسيط ومرن مع الكثير من الخيارات لتخصيصها.
  3. مع التحديث التلقائي للجداول والرسوم البيانية في الوقت الحقيقي
  4. معاينة المخططات الخاصة بك في الخلفية جنبا إلى جنب مع الجدول

2. WordPress Charts and Graphs Lite

إذا كنت ترغب في عرض البيانات والمعلومات علىمدونة الووردبريس الخاص بك باستخدام الرسوم البيانية والمخططات الجميلة، فانظر الى أبعد من الأفضل، اضافة WordPress Charts and Graphs Lite. فهي تقوم بعمل رائع لخلق صور جميلة وتفاعلية في حين تعطي لك الحرية الكاملة لتخصيص الإخراج لجعلها تناسب مع الاحتياجات الخاصة بك بالضبط: يمكنك تغيير الألوان، وتخصيص الخطوط، إخفاء النص، إضافة نص – كل هذا حتى بعد نشر المخطط . يعد عرض المخططات في مشاركاتك وصفحاتك أمرا بسيطا مثل تحميل جدول بيانات وإضافة الرمز القصير الذي ينشئه المكون الإضافي تلقائيا إلى صفحتك.

ذات صلة:  كيفية انشاء موقع ووردبريس في 20 دقيقة مع نصائح مهمة لتسويقه والربح منه

وفي وقت لاحق، إذا قررت تغيير نوع الرسم البياني من الرسم البياني للكتلة إلى مخطط دائري، فاضغط على زر التعديل وحدد التبديل. نعم، هو حقا سهل. ومن الجدير بالذكر أيضا أن الرسوم البيانية التي تنتج يمكنها العمل على جميع شاشات الأجهزة (أجهزة الكمبيوتر المكتبية، والتابلات، والهواتف النقالة) من جميع الأحجام لأن هذه الاضافة مستجيبة.

wordpress charts and graphs lite plugin DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

وتشمل تسعة أنواع من الرسوم البيانية، ودعم الرموز القصيرة، وخيار لاستيراد الكثير من البيانات مع CSV. هناك على حد سواء نسخة مجانية وأخرى مدفوعة. النسخة برو تدفع للحصول عليها على الأقل 74 $ (ترخيص موقع واحد،) وتوفر أدوات للاستيراد من الرسوم البيانية الأخرى. وتشمل النسخة برو بعض الميزات الأخرى :

  • الخيار لمنح المستخدمين قدرات التحرير
  • إنشاء مخطط الخاص
  • المزامنة التلقائية مع الملف الخاص بك على الانترنت
  • أنواع المخططات الإضافية
  • يمكنك الوصول إلى محرر مباشر

الاضافة لايت لا تزال قوية جدا. إليك بعض المخططات التي يمكنك إجراؤها:

  1. خط الرسم البياني
  2. مخطط دائري
  3. شريط الرسم البياني
  4. مخطط عمودي
  5. مخطط المنطقة
  6. مخطط جغرافي
  7. جدول الرسم البياني
  8. مخطط غواج
  9. جداول
  10. مخطط كومبو
  11. مخطط مبعثر
  12. المخطط الزمني

3. WordPress Charts

اضافة WordPress Charts ستكون خياري الثالث، العديد من المستخدمين يحبون هذه الاضافة لتصاميمها النظيفة، والرسوم المتحركة، والخيارات الملونة. ومع ذلك، أيضا يجب أن تدرك أنه لم يتم تحديثها لفترة من الوقت.

wordpress charts plugin DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

توفر اضافة WordPress Charts ستة مخططات فريدة وقوالب الرسم البياني، والتي يمكنك ضبطها وإدراج البيانات الخاصة بك فيها لعرضها على موقع الويب الخاص بك. وتشمل المخططات المعروضة:

  1. خط
  2. شريط
  3. فطيرة
  4. رادار
  5. منطقة القطبية
  6. أنواع دونات

تم إنشاء كل هذه المخططات باستخدام HTML5. خيارات التخصيص هي إلى حد كبير لا نهاية لها، ولكن سيكون عليك المعرفة قليلا عن الترميز، الرموز القصيرة، أو على الأقل ضبط الإعدادات الافتراضية. السبب الذي جعلنا نوصي بـ اضافة WordPress Charts كثيرا هي أنها خفيفة الحجم للغاية. يمكنك إدراج العشرات من المخططات على جميع مشاركات مدونتك ولن يكون لديك أي مشكلة. وهذه هي النقطة الكاملة للعمل مع HTML5. يمكنك إزالة الفوضى دون التضحية بأي من الوظائف.

4. Interactive Maps, Charts, Graphs

إذا كان لديك حاليا اضافة Visual Composer على موقعك على الويب، فقد تكون اضافة Interactive Maps, Charts, Graphs مميزة لك. انها إضافة إلى  Visual Composer، لذلك ليس هناك سبب للحصول على خلاف ذلك.

mega main vc add on charts DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

الوظيفة الإضافية تباع بـ 12 $، والذي يقدم بعد ذلك الخرائط التفاعلية والرسوم البيانية والمخططات، يتم وضعها في واجهة Visual Composer. تأتي الإضافة مع رموز المتجهات وخطوط غوغل والألوان غير المحدودة ومجموعة واسعة من الميزات الأخرى لإنشاء الرسوم البيانية والجداول والمخططات وتخصيصها. تحتوي الإضافة على الرسوم البيانية والرسوم البيانية القياسية، مثل الرسوم البيانية الدائرية والخطوط. هناك أيضا ميزة خريطة فريدة لتسليط الضوء على مناطق معينة، سواء كانت خريطة محلية أو واحدة من العالم.

5. UberChart

اضافة UberChart هي أكثر تنوعا من تلك الاضافات المدفوعة، لان الاضافة لا تتطلب Visual Composer. توفر الاضافة 10 أنواع مدمجة من المخططات، والتي تتلقى حوالي 240 من الخيارات للتخصيص في الرسم البياني.

uberchart plugin DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

يمكنك تصدير واستيراد البيانات بنقرة زر واحدة، والتصميم المتجاوب يضمن أن تظهر جميع الرسوم البيانية الخاصة بك على كل جهاز. بعض أنواع المخططات تتضمن:

  1. المخططات الخطية
  2. مخططات المنطقة
  3. شريط الرسوم البيانية
  4. الرسوم البيانية الدائرية
  5. الرسوم البيانية دونات
  6. فقاعات المخططات

الجزء الأكثر إثارة للإعجاب من هذه اضافة UberChart للووردبريس هو محرر جدول البيانات. انه يسمح لك بنسخ البيانات من أي برنامج تريد (مثل إكسيل،) الجمع بين ميزات أكثر تقدما من إكسيل وبراعة اضافة UberChart.

كيفية إنشاء الرسوم البيانية والمخططات الجميلة على الووردبريس

واحدة من الإضافات لانشاء المخططات المفضلة لدينا هي WordPress Charts and Graphs Lite. لذلك، نحن فقط ذاهبون خلال هذا البرنامج التعليمي مع هذه شرح لهذه الاضافة. إضافات انشاء المخططات الأخرى لديها أدوات مماثلة ولكن واجهات مختلفة. لذلك، أود أن أوصي اختبار كل منهم لمعرفة أي واحدة هي المناسبة لكم،  wpDataTables هي أيضا اضافة قوية جدا!

الخطوة 1: تثبيت وتنشيط WordPress Charts and Graphs Lite

بسيطا بما فيه الكفاية.

الخطوة 2: انتقل إلى Visualizer Library وقم بإضافة رسم بياني جديد

كما ذكرنا بإيجاز أعلاه، يشار أيضا إلى WordPress Charts and Graphs Lite كما متخيل. من الصعب إلى حد ما العثور على صفحة الإعدادات، ولكن كل ما عليك القيام به هو الذهاب إلى وسائل الإعلام> Visualizer Library. لا توجد أي إعدادات أخرى لديك لتكوينها قبل البدء مع مخططات الووردبريس الخاص بك.

vizualizer library DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

عند تحميلك لـVisualizer Library، سترى رسالة تقول انه “لم يتم العثور على مخططات”. هذا أمر جيد تماما، لأننا لم نجري أي مخططات حتى الآن. لذلك، يجب النقر على الزر إضافة جديد أعلى الصفحة.

add new DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

هذا يكشف كل المخططات ورسومات الوردبريس التي يمكنك انشاؤها مع الاضافة. على سبيل المثال، لديها فطيرة، خط، منطقة، الجغرافية، وشريط الرسوم البيانية . يتم توفير تسعة أنواع من الرسوم البيانية في النسخة المجانية. يمكنك الحصول على المزيد من الرسوم البيانية إذا كنت قد دفعت للنسخة المدفوعة. على أي حال، سوف أختار مخطط دائري لهذا البرنامج التعليمي.

select chart hit next DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

الخطوة 3: استيراد البيانات إلى مخطط الوردبريس

تقوم الاضافة تلقائيا بإدراج البيانات بحيث يحتوي المخطط على شيء لعرضه. ومع ذلك، من أجل تقديم البيانات الخاصة بك، سوف تحتاج إلى استيرادها باستخدام واحدة من خمس طرق. تستطيع:

  • استيراد البيانات من ملف (ربما الأسلوب الأكثر شيوعا)
  • استيراد البيانات من عنوان رابط
  • استيراد من مخطط آخر
  • استيراد من الووردبريس (متوفر فقط في النسخة برو)
  • استيراد البيانات يدويا (متوفر فقط في النسخة برو)

import data DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

على سبيل المثال، أنا سأقوم باستيراد البيانات من ملف CSV. التي أشأته من ملف إكسيل، الذي يعد إحدى الطرق الأكثر شيوعا للحصول على البيانات في مخطط ووردبريس أو رسم بياني. عند استيراد البيانات من ملف، انقر على الزر اختيار ملف، ابحث عن الملف على جهاز الكمبيوتر، ثم اضغط على الزر استيراد في لوحة تحكم وردبريس.

من المفترض أن يظهر لك ذلك معاينة لما ستبدو عليه بياناتك على اليمين. والخبر السار هو أنه يمكنك دائما الرجوع وضبط التنسيق على ملف CSV والمحاولة مرة أخرى. هناك أيضا الكثير من أدوات التخصيص في الخطوة التالية لجعل الأمور تبدو أفضل قليلا.

الخطوة 4: تخصيص مخطط وردبريس الخاص بك

هناك رابط صغير يقول “متقدم” أسفل جميع خيارات الاستيراد. انقر على هذا لإظهار إعدادات التخصيص. هناك عدد قليل جدا من الخيارات للعب حولها، لذلك نحن لن نذهب من خلال كل منهم هنا.

ولكن يمكننا أن نبدأ مع عنوان الرسم البياني. سوف اكتب في شيء مثل “أين يذهب وقتك؟” حيث مخططي يحدد النسبة المئوية من الوقت الذي يقضيه الناس على مهام معينة على مدار اليوم. ويمكنني أيضا تغيير الخط وحجم الخط واللون وموقع العنوان.

customizing title DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

وأنت تتحرك من خلال الإعدادات، ستلاحظ علامات تبويب متعددة لأشياء مثل الإعدادات العامة، وإعدادات الشريحة، والإجراءات الأمامية، وأكثر من ذلك. ستحتاج على الأرجح إلى تحديد مكان إقامة الأسطورة، نظرا لأن هذا جزء أساسي من الرسم البياني.

other settings and frontend actions DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

بخلاف ذلك، كل هذا يعتمد تماما على نوع الرسم البياني الذي تحاول إجراؤه، والعناصر التي تحتاج إلى عرضها. أنا ذاهب إلى التظاهر بأن هذا هو مخطط الووردبريس لعدد من الطلاب لدي. لذلك، أود أن منحهم خيار طباعة وتنزيل البيانات والرسوم البيانية.

للقيام بذلك، انتقل إلى علامة التبويب إجراءات الواجهة الأمامية. سيكشف ذلك عن مربعات اختيار لتمكين المستخدمين من طباعة البيانات ونسخها. يمكنك أيضا منحهم أوراق إكسيل قابلة للتنزيل و CSV. بعد الانتهاء من تخصيص الرسم البياني، تأكد من حفظه.

الخطوة 5: انسخ الرمز القصير إلى الصفحة أو المشاركة

بعد حفظ مخطط وردبريس أو الرسم البياني، انتقل مرة أخرى إلى Visualizer Library. سترى قائمة بالمخططات، ويمكنك تصفيتها استنادا إلى أنواع المخططات. وبما أن لدي مخطط واحد فقط الآن، أستطيع أن أرى على الفور أنه الخيار الوحيد. من أجل نشر مخطط وردبريس الخاص بك على صفحة أو مشاركة، يجب نسخ الرمز القصير للمخطط ولصقه في الصفحة المطلوبة أو المشاركة. يقع الرمز القصير تحت معاينة المخطط (انظر الصورة أدناه).

grab id DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

بمجرد نسخ الرمز القصير، عليك إما إنشاء صفحة أو مشاركة، أو التوجه إلى واحدة من التي قد نشرت بالفعل. ابحث عن المكان الذي تريد أن يظهر الرسم البياني فيه والصق الرمز القصير في ذلك المكان.

الخطوة 6: عرض الرسم البياني للوردبريس على الواجهة

أوصي بمعاينة الرسم البياني قبل النقر على الزر نشر. بهذه الطريقة يمكنك معرفة ما يراه المستخدمين الخاص بك، وخصوصا الرسوم البيانية والمخطاطات للووردبريس التي يمكن أن تكون صعبة بدلا من ذلك. إذا ألقيت نظرة على لقطة الشاشة أدناه، فسترى معاينة للرسم البياني الاختباري على الواجهة الأمامية لموقع الويب. أزرار الطباعة والتحميل مرئية، مخطط ووردبريس لديه بعض الرسوم المتحركة اللطيفة عند التمرير فوقها، والألوان وعناصر العنوان تبدو لطيفة.

published DzTechs - كيفية إنشاء الرسوم البيانية الجميلة والمخططات المفيدة على الووردبريس

تحدث التغييرات على الفور في المعاينة المباشرة حتى تتمكن من معرفة كيفية تأثيرها على الرسم البياني دون الحاجة إلى حفظ الصفحة وعرضها في علامة تبويب جديدة. هناك ميزة واحدة أخرى جديرة بالذكر، وهي رهيبة جدا. ليس فقط يمكنك تحرير خيارات التصميم من المخطط، ولكن يمكنك أيضا تحرير البيانات داخل المخططات عن طريق تحميل ملف آخر، الكتابة فوق الأصلي، واستبدال البيانات القديمة مع الجديدة.

أسئلة حول كيفية إنشاء الرسوم البيانية في الوردبريس؟

جميع الرسوم البيانية ومخططات الوورديرس لها وظائف مختلفة. الجزء البارد حول هذه الإضافات هو أن لديك كل المرونة. ولذلك، فإنني أشجعكم على قضاء بعض الوقت في اختبار الرسوم البيانية وفهم ما يمكن فعله من خلال كل تعديل من إعدادات الضبط. ثم، سوف تصبح في نهاية المطاف سيد المخططات، والناس سيطلبون منك كيفية القيام بذلك. إذا كانت لديك أية أسئلة أو أفكار حول كيفية إنشاء مخططات ورسومات وردبريس، فقم بإسقاط السطر في التعليقات أدناه.

ذات صلة:  استضافة WordPress المشتركة مقابل الاستضافة المُدارة: ما هي افضل استضافة بالنسبة لك؟
اشترك في نشرتنا الإخبارية
اشترك هنا للحصول على آخر الأخبار والتحديثات والعروض الخاصة التي يتم تسليمها مباشرة إلى البريد الإلكتروني الخاص بك.
يمكنك إلغاء الاشتراك في أي وقت
قد يعجبك ايضا

التعليقات مغلقة.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More