شرح اضافة سلايدر ووردبريس بطريقة بسيطة

شرح اضافة سلايدر ووردبريس بطريقة بسيطة

0

شرح اضافة سلايدر ووردبريس بطريقة بسيطة

اضافة سلايدر ووردبريس

السلام عليكم متابعينا في درس جديد حوول اضافة سلايدر ووردبريس Slider  أو لأي منصة أخري .

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

كل ماسنفعله في درس اليوم هو اننا سنعدل علي الأكواد لا غير ذلك اليوم سنطبق طريقتين طريقة لجميع المنصات وهي الفريم وورك وطريقة اخري مخصصة للووردبريس وهي اضافة في متجر الاضافات

كيفية وضع اكواد مكتبة UIKIT

لكل المنصات سواء  بلوجر أو ووردبريس أو غيرهم ضع هذه الأكواد أسفل <head > وبالنسبة لأصحاب مدونات بلوجر ستجد هذا الكود داخل مظهر المدونة.

وبالنسبة للمنصة الحرة ووردبريس ستجد هذا الكود في محرر القوالب مثل Header.php تبحث عن <head> وتضع هذه الأكواد أسفله

 

<!– UIkit CSS –>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css” />

<!– UIkit JS –>
<script src=”data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%203%202%27%3E%3C/svg%3E” data-src=”data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%203%202%27%3E%3C/svg%3E” data-src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js”></script>

 

اضافة سلايدر ووردبريس

كل ماعليك بعد اذافة أكواد المكتبة هو الذهاب لقسم السلايدر في الموقع الخاص باضافة uikit وستجد العديد من السلايدرات المختلفة فقط كل ماعليك هو نسخ السلايد الذي يعجبك .

سنأخذ مثالا لذلك :-

لنتفرض مثلا أننا نريد وضع هذا السلايد داخل مقال مثلا او في أي مكان يدعم الاكواد

اضافة سلايدر ووردبريس

لكي تضيف هذا الكود اضغط علي كلمة MARKUP وستجد الاكواد امامك مثل هذه الصورة تماما

اضافة سلايدر ووردبريس

فقط قم بالتعديل علي الصورة وضع الصورة التي تريدها وقم بوضع روابط هذه الصور ، أي قم بالتعديل علي images/light.jpg وقم بتغييرها بالصورة التي تريدها . وقم بتغيير # في href= “#” برابط الذي تريده عن النقر علي الصورة .

وقم بحفظ اعداداتك وبهذه الطريقة تكون قد اضفت سلايدر سريع ومتجاوب ويدعم الاتجاه العربي RTL

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

اضافة MetaSlider

Slider

Meta Slider هذه الاضافة تعتبر الأكثر تحميلا في عالم الووردبريس وانا قمت باستخدامها وهي تعمل بشكل جيد ، اليك نبذه عن

مميزاتها :-

  • يأتي Meta Slider واجهة بسيطة وسهلة الاستخدام مثالية للمستخدمين والمطورين والعملاء الأفراد!
  • الوصول إلى الصور المجانية عبر موقع Unsplash.com
  • إنشاء مؤشرات تحكم سريعة الاستجابة، محسنة وفقا للمعيار SEO في ثوان
  • دعم غير مقيد لشرائح الصور (يدعم التعليق، الارتباط، نص العنوان، النص البديل)
  • دعم عرض الشرائح بعرض كامل
  • سحب وإلقاء إعادة ترتيب الشريحة
  • القطع الذكي للصور
  • ضبط موضع قطع الصورة
  • السمات – تتضمن ١١ عرض شرائح إحترافية مجانية
  • بني في بلوك غوتنبرغ، ودجة و شورت كود
  • يتم تحميل خيارات تكوين الشرائح – تأثير الانتقال والسرعة وما إلى ذلك (لكل عرض شرائح)
  • تمت ترجمته بالكامل
  • متوافق مع WordPress Multi Site
  • متوافق مع ملحقات الترجمة (WPML و PolyLang & qRegate)
  • واجهة برمجة تطبيقات المطورين (الكتيبات والمرشحات)
  • سريع – يتم تضمين JavaScript/CSS كحد أدنى على صفحتك
  • دعم أساسي مجاني (يغطي مشكلات التثبيت وتعارضات السمات / الإضافات) في Meta Slider

متطلبات Meta Slider :-

  • إصدار ووردبريس المطلوب: 3.5 أو أعلى
  • متوافق حتى: 5.4.2
  • إصدار PHP المطلوب: 5.2 أو أعلى
  • التنصيبات النشطة: 800٬000+

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

تذكر ان هدفنا هو تقديم محتوي عالي الجودة لزوار الموقع ، اذا اعجبك محتوي ويب تايمز سجل دخولك وكن عضو معنا !

Ehab Zayn Web Times Co-founder

 

كورس خاص باعضاء الموقع
كورس خاص باعضاء الموقع
سجل بريدك الالكتروني ليصلك كورس بلوج ادسنس الشامل مجانا لك
You can unsubscribe at any time

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.