كيفية الحصول على Vivus SVG يعمل على موقع Divi الخاص بك

إذا كنت تبحث عن إضافة بعض الإثارة إلى موقع Divi الخاص بك ، فقد تتساءل عن كيفية تشغيل Vivus SVG. إليك دليل سريع لمساعدتك على البدء. Vivus هي مكتبة JavaScript تسمح لك بتحريك Scalable Vector Graphics (SVG). يمكن أن تكون هذه طريقة رائعة لإضافة بعض الاهتمام المرئي إلى موقع الويب الخاص بك ، خاصة إذا كنت تستخدم Divi ، وهي سمة WordPress شائعة معروفة بتصميمها النظيف والبسيط. بينما يدعم Divi SVG ، قد يكون من الصعب بعض الشيء جعله يعمل مع Vivus. والخبر السار هو أن هناك بعض الخطوات البسيطة التي يمكنك اتباعها لإعداد الأمور وتشغيلها. أولاً ، ستحتاج إلى تنزيل ملف Vivus SVG من الموقع الرسمي. بعد ذلك ، ستحتاج إلى تحميل الملف إلى موقع Divi الخاص بك. يمكنك القيام بذلك عن طريق الانتقال إلى لوحة تحكم WordPress واختيار "إضافة جديد" من قائمة "الوسائط". بمجرد تحميل الملف ، ستحتاج إلى إضافة الكود التالي إلى ملف header.php الخاص بموقع Divi الخاص بك: أخيرًا ، ستحتاج إلى إضافة الكود التالي إلى ملف footer.php الخاص بموقع Divi على الويب:؟ > بهذه الخطوات البسيطة ، يجب أن تكون قادرًا على تشغيل Vivus SVG على موقع Divi الخاص بك.

يمكن استخدام تنسيق ملف SVG (Scalable Vector Graphics) ، وهو تنسيق صورة قائم على المتجهات ، لإنشاء صفحات ويب. تم تصميم البرنامج ليكون معيارًا لرسومات الويب ولأن يكون متوافقًا مع غالبية المتصفحات. سيتم إنشاء صور SVG الرائعة هذه باستخدام بعض برامج تحرير الصور ، مثل Adobe Illustrator أو Inkscape. لا توجد برامج WordPress أو Divi متوفرة. نظرًا لأن ملفات SVG تستند إلى الإعداد الافتراضي ، يجب علينا تمكين الأدوات. في هذا البرنامج التعليمي Divi ، سننظر في كيفية إدراج SVGs في تثبيت Divi الخاص بنا. الرسومات المتجهة (SVGs) أصغر بكثير من ملفات PNG ومن غير المرجح أن تبطئ جهاز الكمبيوتر أو موقع الويب الخاص بك.

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

بعد ذلك ، سنوضح لك كيفية استخدام CSS لإضافة بعض التأثيرات المذهلة إلى هذا الرمز. لمعالجة كل مسار ، قم بتعيين فئات CSS لكل مسار ثم استخدم كود CSS للقيام بذلك. يرجى لصق الرمز بين علامتين (النمط والوحدة) باستخدام وحدة التعليمات البرمجية أدناه. يمكننا عمل شعار SVG باستخدام كود Adobe Illustrator وكود Divi. في هذا القسم ، سنلقي نظرة على خصائص التعبئة ، والحد ، والتحويل في CSS ، وكلها شائعة جدًا. سنوضح لك كيفية تحريك SVGs في برنامج تعليمي مستقبلي باستخدام محرك Divi.

هل تدعم Divi صور Svg؟

نعم ، Divi يدعم SVGs! يمكنك تحميلها تمامًا مثل أي ملف صورة آخر وستعمل بشكل جيد.

كيفية تمكين تحميلات Svg في WordPress & Divi

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

لماذا لا يُسمح باستخدام Svg في WordPress؟

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

يمكن عرض صورة ثنائية الأبعاد على مواقع WordPress باستخدام ملفات Vector Graphics (SVG). عند إعادة تكوين نوع الملف ، ستتمكن من تحسين بعض الشعارات والرسومات الأخرى الخاصة بك. نظرًا لقابليتها للتوسع ، يمكنك إدارة الحجم حسب الحاجة دون التأثير سلبًا على جودة الصورة. نظرًا لأن WordPress لا يدعم SVGs ، فستحتاج إلى اتخاذ خطوات إضافية لتضمينها في موقعك. سوف تتعلم كيفية دمج SVGs في موقع الويب الخاص بك عبر مكون إضافي وعملية يدوية. يُنصح بأن يكون للمسؤولين حق الوصول إلى ملفات تحميل SVG فقط. إنها لفكرة جيدة أيضًا أن تقوم بتعقيم ملفاتك قبل تحميلها.

لتمكين الطريقة التالية لتمكين SVGs على موقع WordPress الخاص بك ، قم بتحرير ملف jobs.php لموقع الويب الخاص بك. الخطوة 2 هي إضافة مقتطف رمز إلى ترميز وظيفتك للسماح لها بتحميل ملفات HTML إلى موقع الويب الخاص بك. كخطوة 3 ، يمكنك تمكين SVGs على موقع WordPress الخاص بك يدويًا. في الخطوة الأولى ، يجب عليك تمكين وتأمين استخدام ملفات SVG على موقع الويب الخاص بك. الخطوة الثالثة هي التفاعل مع SVGs وعرضها ، تمامًا كما تفعل مع أنواع الصور الأخرى. ستساعدك هذه الخطوات في مراقبة أمان هذه الملفات.

ملفات Svg: خطر أمني على موقع الويب الخاص بك

إنه عرضة للهجمات مثل هجمات الكيانات الخارجية نظرًا لطبيعته المستندة إلى XML. تجدر الإشارة إلى أن محرر منشور WordPress لا يدعم ملفات SVG بسبب مخاوف أمنية. إذا اخترت استخدام WordPress ، فلا يزال بإمكانك استخدام ملفات SVG عن طريق تحميلها وإضافة كتلة صورة إلى محرر النشر. يمكن إدراج رمز PHP مباشرةً في WordPress باستخدام مكون إضافي لإدارة التعليمات البرمجية مثل Code Snippets.

كيف يمكنني تمكين Svg في WordPress بدون المكونات الإضافية؟

تتطلب إضافة دعم SVG إلى WordPress بضع خطوات: أولاً ، تحتاج إلى إضافة الكود التالي إلى ملف function.php الخاص بالقالب: function wpb_add_svg_to_upload_mimes ($ upload_mimes) {$ upload_mimes ['svg'] = 'image / svg + xml'؛ إرجاع $ upload_mimes؛ } add_filter ('upload_mimes'، 'wpb_add_svg_to_upload_mimes'، 10، 1) ؛ يخبر هذا الرمز WordPress أنه يجب أن يسمح بتحميل ملفات SVG. بعد ذلك ، تحتاج إلى تنزيل وتثبيت المكون الإضافي Safe SVG. سيسمح لك هذا المكون الإضافي بتحميل ملفات SVG بأمان إلى موقع WordPress الخاص بك. بمجرد تثبيت المكون الإضافي ، انتقل إلى الإعدادات> إعدادات SVG وقم بتمكين خيار السماح لـ SVG في مكتبة الوسائط. هذا هو! يجب أن تكون الآن قادرًا على تحميل ملفات SVG إلى موقع WordPress الخاص بك.

أحد أكثر تنسيقات الصور شيوعًا المستخدمة لإضافة رسومات متجهة إلى موقع ويب هو تنسيق صورة SVG (رسومات متجهة قابلة للتطوير). عند تحميل ملف a.sva على WordPress ، لا يدعمه المحرر. يجب تثبيت المكون الإضافي على موقع WordPress الخاص بك لتمكين الدعم. هناك طرق يدوية يمكن استخدامها لتمكين التحميل إلى sva إذا لم تكن بحاجة إلى أي مكون إضافي. يمكن أن يتسبب ملف SVG التالف في انهيار موقع الويب الخاص بك إذا تم تحميله. هناك العديد من المكونات الإضافية للأمان المتاحة لـ WordPress والتي يمكن أن تساعدك في منع هذا النوع من الهجوم. كيف يمكنني إضافة صورة svg إلى WordPress؟

الطريقة الأولى هي إضافة SVG إلى WordPress باستخدام إضافة دعم SVG . يمكنك تحميل وحذف ملفات SVG باستخدام Upload Safe ، وهو مجاني وآمن للاستخدام. إذا كان موقعك لا يسمح بنشر مشاركات الضيف ، فإن المكون الإضافي Safe SVG هو الخيار الأفضل. هناك أيضًا البرنامج المساعد Code Snippets ، والذي يسمح لك بإدخال كود PHP في WordPress. لا تتردد في طرح أي أسئلة حول هذا في قسم التعليقات. في هذا البرنامج التعليمي ، آمل أن تتعلم كيفية تحميل svgs بأمان إلى WordPress.

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

لماذا لا تظهر أيقونة Svg؟

سيعرض Chrome صورة svg إذا كانت شفرة المصدر لا تتضمن سمة ذات قيمة لـ svg. قم بإجراء تغييرات على شفرة مصدر SVG التي تتضمن سمة العرض.

Svg: يستحق التحدي

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

كيف يمكنني ربط Svg بـ WordPress؟

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

يمكنك العثور عليه في عنوان هذه المقالة ، "Scalable Vector Graphics". تختلف هذه الأنواع من ملفات الصور عن الأنواع الأخرى مثل ملفات JPEG و PNG و GIF ، والتي تستند إلى وحدات البكسل. باستخدام المتجهات ، يتم رسم صورة "رسم متجه" رياضيًا ، وهي مجموعة فرعية من مجموعة من الصور تُعرف باسم "صور SVG". تحدد الخريطة ثنائية الأبعاد كيفية ظهور الصورة عن طريق تحديد كل مكون منها. نظرًا لأن الملفات مصممة بشكل غير آمن ، فإن WordPress يعتبرها غير آمنة. نظرًا لأنه يجب تحليل علامة XML لعرض الرسم المتجه ، فهي عرضة للتعليمات البرمجية الضارة. من الأهمية بمكان ألا تحتوي أي ملفات SVG تقوم بتحميلها على موقع الويب الخاص بك على تعليمات برمجية ضارة.

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

يمكن استخدام علامة'svg لإدراج صورة asvg مباشرة في مستند HTML. يمكنك القيام بذلك عن طريق فتح صورة SVG في كود VS أو IDE مشابه ، ونسخ الكود وإدخاله في النص الأساسي> عنصر في ملف HTML الخاص بك. إذا تم تنفيذ جميع خطواتك بشكل صحيح ، فسيبدو العرض التوضيحي أدناه هو نفسه تمامًا.
عندما تقوم بإدراج SVG كأيقونات قائمة ، فإنك تضيف أيقونة SVG.
يجب تمكين علامة التبويب العامة قبل أن تتمكن من وضع رموز القائمة التي تحتوي على SVG في علامة التبويب العامة. بعد ذلك ، انتقل إلى هيكل القائمة وحدد عناصر القائمة. بعد تحميل مجموعة SVG لعناصر القائمة الخاصة بك ، اختر رمزًا واحدًا يمثل عناصر القائمة الأكثر ملاءمة. بعد النقر فوق تحديد ، سيتم تحديث الموقع.

ديفي Svg

divi svg هو نوع من الرسوم المتجهية التي يمكن استخدامها على مواقع الويب. غالبًا ما تُستخدم لإضافة رسومات إلى مواقع الويب ، ويمكن تخصيصها لتناسب شكل وأسلوب موقع الويب. يمكن إنشاء رسومات Divi svg في مجموعة متنوعة من البرامج ، وغالبًا ما يتم حفظها بتنسيق ملف يمكن استخدامه على مواقع الويب.

ملحقات ديفي

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

يمكنك استخدامه بمفرده لإنشاء موقع ويب قوي. ليس من المفترض أن تكون قادرًا على القيام بكل شيء في وقت واحد. يعد استخدام Divi Plugins (المعروف أيضًا باسم ملحقات Divi ) في هذه الحالة أمرًا بالغ الأهمية. إنهم يوسعون قدرات Divi حتى يتمكن من أداء مهام جديدة. نظرًا لأن Divi يسمح لك بتصميم المكون الإضافي بالكامل ، فإنه يُستخدم فقط في تحرير WordPress. ستتضمن بعض ملحقات Divi وحدات جديدة ، بينما سيتضمن البعض الآخر أنواع منشورات مخصصة. يجب أن تعمل معظم المكونات الإضافية بشكل جيد طالما أنها سمات WordPress.

المكوّن الإضافي Divi هو نفس أي مكون إضافي لبرنامج WordPress. Divi هو قالب WordPress ومنشئ الصفحات الذي تم تصميمه لتلبية أفضل ممارسات WordPress. تتضمن Divi الكثير من الميزات والوظائف ، مما يجعلها منصة جذابة لإضافة مكونات إضافية.

كيفية تثبيت Divi Plugins على موقع WordPress الخاص بك

يجب عليك أولاً تحديد موقع ملف Divi-Builder.zip قبل استخدام مكونات Divi الإضافية على موقع WordPress الخاص بك. يجب عليك تحميل الملف إلى موقع WordPress الخاص بك بمجرد تنزيله واستخراجه. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress الخاصة بك وقم بتسجيل الدخول إلى قسم المكونات الإضافية. سيتم نقلك إلى صفحة مكونات WordPress الإضافية.
حدد ملف ZIP الذي تريد تثبيت المكون الإضافي عليه بعد العثور على ملفه ، متبوعًا بزر تحميل البرنامج المساعد لتحميل المكون الإضافي. انقر فوق زر التثبيت الآن لتنزيل ملف ZIP. يجب تنشيط المكون الإضافي بمجرد تثبيته.
هناك خياران للتسعير لإضافات Divi: الوصول السنوي والوصول مدى الحياة. تبلغ تكلفة خطة الوصول السنوية 89 دولارًا سنويًا وتشمل الوصول إلى التحديثات والميزات الجديدة ، بينما تكلف خطة Lifetime Access 249 دولارًا سنويًا وتشمل الوصول إلى التحديثات لبقية حياتك.