شريط التمرير wp في العنوان الرئيسي. كيفية إنشاء شريط تمرير الصور الخاص بك في WordPress

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

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

مصادر التنزيل

أولاً ، قم بتنزيل المصادر بالشفرة التي سنحتاجها قريبًا.

هذا هو الشكل الذي سيبدو عليه شريط التمرير:

الخطوة 1. التحضير

أول شيء علينا القيام به هو تثبيت البرنامج المساعد. قم بإنشاء مجلد / envato-flex-slider /، وفيه ملف يسمى " إنفاتو فليكس سلايدر. php". هذا هو المكان الذي سنضيف فيه جميع المعلومات والرموز الضرورية للمكوِّن الإضافي الخاص بنا ، بدءًا من كتلة إعلان المكون الإضافي:

أنا أيضا أريد تثبيت بعض ثوابت المعلومات، والتي سأستخدمها كثيرًا في المكون الإضافي. أسفل إعلان الكتلة ، ولكن قبل علامة الإغلاق بي أتش بيأقوم بإضافة المعلومات التالية:

حدد ("EFS_PATH"، WP_PLUGIN_URL. "/". plugin_basename (dirname (__ FILE__)). "/")؛ تعريف ("EFS_NAME" ، "Envato FlexSlider") ؛ تعريف ("EFS_VERSION" ، "1.0") ؛

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

لاحظ أنني أبدأ كل ثوابتي بـ " EFSسأفعل الشيء نفسه مع أسماء الوظائف حتى لا تتعارض مع المكونات الإضافية الأخرى أو نواة WordPress.

الآن بعد أن انتهينا من الاستعدادات ، دعنا نضيف الملفات والكود إلى FlexSlider.

الخطوة 2. الإضافة

حان الوقت الآن لإضافة الجزء المهم: جافا سكريبتو المغلقمن أجل فليكس سلايدر. سنفعل هذا باستخدام wp_enqueue_scriptو wp_enqueue_style WordPress نفسه لتجنب الصراعات. يمكنك تنزيل FlexSlider هنا. نحتاج إلى ملفين: jquery.flexslider-min.jsو ، في مجلد /سمة/.

Wp_enqueue_script ("flexslider"، EFS_PATH. "jquery.flexslider-min.js"، array ("jquery"))؛ wp_enqueue_style ("flexslider_css"، EFS_PATH. "flexslider.css") ؛

في كلا السطرين ، نعطي كل نص برمجي اسمًا ، ثم نربط ملفي .js و .css. لاحظ أننا نستخدم ثابتنا ESF_PATH. نحن بحاجة لاستخدام مسار كاملوإلا فلن يتم ربط الملفات بشكل صحيح.

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

الشيء التالي الذي نريد القيام به هو تضمين JavaScript الفعلي الذي سيجعل البرنامج النصي يعمل. سنفعل هذا بوظيفتنا الخاصة و فعل-المهامووردبريس.

الوظيفة efs_script () (طباعة "" ؛) add_action ("wp_head"، "efs_script") ؛

سطر مهم هنا - add_action ("wp_head"، "efs_script") ؛التي ستدير وظيفتنا efs_script ()عندما يتم استدعاء wp_head. تقوم وظيفتنا ببساطة بإخراج جافا سكريبت المطلوب لجعل FlexSlide يقوم بعمله.

قد تلاحظ أنني أستخدم " مسج"بدلاً من" التقليدي " $ 'الذي يشيع استخدامه في نصوص jQuery. أفعل ذلك حتى لا يتعارض البرنامج النصي الخاص بنا مع مكتبات JavaScript الأخرى ، على سبيل المثال ، نصي.

أخيرًا فقط انسخ المجلد /سمة/إلى مجلدك / envato-flex-slider /.

الخطوة 3. الرمز القصير وعلامة القالب

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

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

الوظيفة efs_get_slider () (// سنملأ هذا لاحقًا.) / ** أضف الكود المختصر لشريط التمرير- للاستخدام في المحرر ** / function efs_insert_slider ($ atts، $ content = null) ($ slider = efs_get_slider ( )؛ return $ slider؛) add_shortcode ("ef_slider"، "efs_insert_slider")؛ / ** add template tag- للاستخدام في السمات ** / function efs_slider () (print efs_get_slider ()؛)

الآن يبدو هذا الرمز بسيطًا جدًا. للرمز القصير ، نسمي الوظيفة العامة efs_get_slider ()وإرجاع النتيجة. بالنسبة لعلامة القالب ، نخرج النتيجة. لقد فاتني المقدمة عمدا efs_get_slider ()، نظرًا لأننا لم نقم بعد بتحديد المكان الذي سنقوم بسحب الصور منه.

لجعل إضافة أي عدد من الصور إلى شريط التمرير سهلة الاستخدام ، سننشئ نوع منشور منفصل.

الخطوة 4 صورة شريط التمرير لنوع المنشور المخصص

أول شيء سنفعله هو الخلق ملف جديدمستحق ' slider-img-type.phpحيث ستكون جميع أكوادنا الخاصة بنوع المنشور المخصص. سنقوم أولاً ببعض التحضير ، كما فعلنا مع الملحق.

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

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

الوظيفة efs_register () ($ args = array ("label" => __ (CPT_NAME)، "singular_label" => __ (CPT_SINGLE)، "public" => true، "show_ui" => true، "ability_type "=>" post "،" hierarchical "=> false،" Rewrite "=> true،" support "=> array (" title "،" editor "،" thumbnail "))؛ register_post_type (CPT_TYPE، $ args)؛) add_action (" init "،" efs_register ")؛

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

الجميع! آخر شيء يتعين علينا القيام به هو تضمين ملفنا الجديد عن طريق الإضافة need_once ("slider-img-type.php") ؛الخامس إنفاتو فليكس سلايدر. php. لقد أضفته مباشرة فوق المكالمة إلى نصوصنا.

الآن بعد أن عرفنا كيفية تضمين الصور في شريط التمرير ، دعنا نعود ونملأ وظيفة شريط التمرير العامة.

الخطوة 5: قم بإنشاء شريط التمرير

العودة إلى الإعلان efs_get_slider ()واستبدالها // سنملأ هذا لاحقًاالى الآتى \ الى القادم \ الى الم:

"؛ $ efs_query =" post_type = slider-image "؛ query_posts ($ efs_query)؛ if (have_posts ()): while (have_posts ()): the_post ()؛ $ img = get_the_post_thumbnail ($ post-> ID،" large ") ؛ المنزلق $. ="
• ". $ img."
"؛ end while؛ endif؛ wp_reset_query ()؛ منزلق $. ="

"؛ إرجاع شريط التمرير $ ؛

أول سطرين مطلوبان بسبب طريقة التشغيل. سيستغرق الأمر قائمة غير مرتبة تسمى " الشرائح"الطبقة الداخلية" وتطبيقها عليها الرسوم المتحركة جافا سكريبت. في منطقتنا المغلقكما تم تعريفه و ul. الشرائح.

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

بعض الملاحظات

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

الخطوة 6. الاختبار

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

خاتمة

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

كما قيل ، يمنحك هذا المكون الإضافي كل ما تحتاجه لإنشاء إصدار بسيط حقًا وسهل الإدارة وسهل التضمين لـ WordPress!

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

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

العمل التحضيري

إذا كنت لا تعرف أساسيات JavaScriptولست على دراية بمكتبة jQuery ، أنصحك بشدة بقراءة المعلومات الواردة في الروابط أدناه:

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

تحضير هيكل المنزلق

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

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

نقوم بتوصيل شريط التمرير

الآن نحن بحاجة إلى توصيل شريط التمرير. في الأرشيف الذي تم تنزيله باستخدام شريط التمرير ، نجد ملف responseiveslides.min.js وقم بنسخه إلى مجلد js. الموجود في المجلد الجذر للموضوع. بعد ذلك ، انسخ ملف theme.gif من مجلد العرض التوضيحي / السمات إلى مجلد الصور الخاص بالمجلد الجذر للنسق.
افتح ملف header.php وقبل علامة الإغلاقإضافة نص شريط التمرير

شريط التمرير متصل ، لكنه لا يعمل بعد. كل ذلك لأننا لم نهيئها. لنفعل ذلك.
انتقل إلى مجلد js الخاص بالموضوع وابحث عن ملف function.js. لنفتحه. واكتب الكود التالي داخل jQuery (document) جاهز مع المحتوى التالي:

$ (function () ($ ("# slider"). responseiveSlides ((pager: true، nav: true)) ؛))؛

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

ربط الأنماط

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

Slider_box (الحد الأقصى للعرض: 1500 بكسل ؛ الموضع: نسبي ؛) #slider (الموضع: نسبي ؛ نمط القائمة: لا شيء ؛ تجاوز: مخفي ؛ العرض: 100٪ ؛ الحشو: 0 ؛ الهامش: 0 ؛) #slider li (-webkit -backface-visibility: مخفي ؛ نوع نمط القائمة: لا شيء ؛ الموضع: مطلق ؛ العرض: لا شيء ؛ العرض: 100٪ ؛ الحشو: 0 ؛ اليسار: 0 ؛ أعلى: 0 ؛) #slider li: أول طفل (الموضع : نسبي؛ display: block؛ float: left؛) #slider img (max-width: 1500px؛ display: block؛ height: auto؛ float: left؛ width: 100٪؛ border: 0؛) .rslides_nav (background: url (images / theme.gif) عدم تكرار التمرير إلى اليسار أعلى rgba (0 ، 0 ، 0 ، 0) ؛ الارتفاع: 61 بكسل ؛ اليسار: 0 ؛ أعلى الهامش: -45 بكسل ؛ التعتيم: 0.7 ؛ تجاوز: مخفي ؛ الموضع: مطلق ؛ زخرفة النص: لا شيء ؛ مسافة بادئة نصية: -9999 بكسل ؛ أعلى: 52٪ ؛ عرض: 38 بكسل ؛ فهرس z: 2 ؛) .rslides_nav.next (موضع الخلفية: أعلى اليمين ؛ يسار: تلقائي ؛ يمين: 0 ؛ ) rgba. : 18 بكسل ؛ نمط القائمة: لا شمال شرق الهامش: 0 تلقائي 50 بكسل ؛ العرض: 100٪ المساحة المتروكة: 10 بكسل 0 محاذاة النص: مركز ؛ العرض: 100٪ ) .rslides_tabs li: first-child (margin-left: 0؛) .rslides_tabs li (display: inline؛ float: none؛ margin-right: 1px؛) .rslides_tabs .rslides_here a (background: لا شيء تكرار التمرير 0 0 rgba ( 255 ، 255 ، 255 ، 0.3) ؛ اللون: #FFFFFF ؛ وزن الخط: غامق ؛) .rslides_tabs a (الخلفية: لا شيء تكرار التمرير 0 0 rgba (0 ، 0 ، 0 ، 0) ؛ العرض: مضمنة ؛ الارتفاع: تلقائي ؛ ارتفاع الخط: 20 بكسل ؛ الحشو: 9 بكسل 20 بكسل ؛ العرض: تلقائي ؛ زخرفة النص: لا شيء ؛)

يغير رمز css هذا شريط التمرير بصريًا ويجعله أكثر جاذبية.

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

منذ عام 2013 ، توقعت جميع أنواع الدراسات أن أشرطة التمرير ستغادر الإنترنت قريبًا ، لكن شعبيتها لم تتلاشى. أيا كان ما تقوله ، فإنهم "ينعشون" البوابة ، وجذب الانتباه إلى المعلومات. يجعلك ترغب في النقر عليها. بالطبع إذا كان شريط التمرير جميلاً ومصمم جيدًا ، لكننا سنعود إلى هذا لاحقًا.

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

حسنًا ، لنبدأ؟

ميتا سلايدر

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

إذا قرأت مقالتي حول ذلك ، فتذكر كيف غضبت من بعض الاقتراحات. المنفعة من هذا المنشور تكلف المال أيضا.

حسنًا ، دعني أوضح لك كيفية العمل مع البرنامج.

تثبيت

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

لا تنس تنشيط Meta Slider من خلال علامة التبويب المثبتة أو في النافذة التي تفتح بعد التثبيت.

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

الاحتمالات

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

يمكنك تحميل أي عدد تريده من الصور ، لكنني لا أوصي بالإفراط في ذلك. لن يشاهد أحد كثيرًا. العدد الأمثل يتراوح من ثلاثة إلى ثمانية.

يوجد على يمين الصور التي تم تحميلها حقل حيث يمكنك إدخال عنوان الصفحة التي سينتقل إليها الشخص عند النقر على الصورة. كما يمكنك إضافة وصف واقتصاص صورة و alt إلى الصور.

لديك أيضًا 4 خيارات تصميم. في الفيديو أدناه ، سأريك كيف يبدو كل منهم.

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

بالإضافة إلى الأشكال الأربعة الرئيسية للتصميم ، يمكنك الاختيار من بين أربعة أنظمة ألوان أخرى.

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

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

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

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

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

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

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

تكامل المدونة

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

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

حدد الاسم المطلوب من القائمة وانقر فوق "إدراج عرض الشرائح".

مستعد. في حالتي ، على الموقع سيبدو هكذا.

لوضع حظر على الصفحة الرئيسية ، انتقل إلى فئة "المظهر" - "الحاجيات". في الجزء العلوي سترى "ميتا سلايدر".

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

في موقع الاختبار الخاص بي ، تبدو الكتلة الموجودة على اليمين هكذا.

يتضمن تصميم هذا الموقع وضعه في منطقة المحتوى والتذييل أسفل الموقع. إذا كنت أرغب في إضافة كتلة هنا ، فأنا أنقل اللوحة إلى المكان الصحيح.

العرض على الموقع سوف يتغير على الفور.

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

حتى تتمكن من التطور في هذا المجال ، أنصحك باللجوء إلى مساعدة المستقلين. يمكنك القيام بذلك على مواقع الويب. weblancer.net و FL.ru . الأول أسهل قليلاً ، والثاني يمكنك مقابلة محترفين حقيقيين.

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

اتمنى لك التوفيق واذا اعجبك هذا المقال اشترك في النشرة الاخبارية. نراكم مرة أخرى.

العثور على شريط تمرير ووردبريس جيد ليس بالمهمة السهلة. تشير أحدث البيانات إلى وجود 690 مكونًا إضافيًا لشريط التمرير لـ WordPress. من لديه الكثير من الوقت لتعلم كل مكون إضافي؟

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

ما هو البرنامج المساعد لعرض الشرائح الذي تستخدمه؟ اخبرنا في التعليقات أدناه.

Meta Slider - شريط التمرير لـ WordPress

ميتا سلايدرهو إلى حد بعيد شريط تمرير WordPress الأكثر شيوعًا مع أكثر من 2 مليون عملية تنزيل.
يحتوي على أربعة منزلقات jQuery - Nivo Slider (متجاوب ، 16 انتقالات ، أربعة سمات) ، Coin Slider (أربعة انتقالات) ، Flex Slider 2 (متجاوب ، مرحلتان ، وضع دائري) ، شرائح مستجيبة (مستجيبة ، تتلاشى فقط).
يعد إنشاء عرض شرائح جديد أمرًا سهلاً - أضف صورة ، وحدد شريط التمرير الذي تريد استخدامه ، وسيعطيك المكون الإضافي رمزًا قصيرًا يمكنك إضافته في أي مكان على موقعك.
هناك أيضًا إصدار احترافي من هذا المكون الإضافي إذا كنت تريد دفع المال مقابل المزيد من الميزات.

تخفيف المنزلق

مع ما يقرب من 650 ألف عملية تنزيل ، تخفيف السلايدر لايت- ثاني أكثر المكونات الإضافية شيوعًا في شريط التمرير.

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

السلس سلايدر

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

سلايدر واو

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

vSlider Multi Image Slider for WordPress

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

SlideDeck 2 Lite شريط تمرير المحتوى المستجيب

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

EasyRotator لبرنامج WordPress - البرنامج المساعد المنزلق

EasyRotatorيعد بأن المستخدمين سيحصلون على "دوّارات صور جميلة وتفاعلية وشرائح منزلقة لموقع WordPress الخاص بهم في ثوانٍ" ، ولكنه في الواقع يتطلب بعض التغيير والتبديل. سيتعين عليك أولاً تثبيت برنامج Flash لإنشاء الشرائح - أو الدوارات - على جهاز الكمبيوتر الخاص بك ، مما قد يكون مزعجًا. بعد ذلك ، يمكنك إنشاء دوار جديد في الصفحة أو محرر النشر. يمكنك أيضًا استخدام الرمز القصير لإدراج محور دوار على موقعك أو إضافة محور دوار إلى المظهر الخاص بك باستخدام الوظيفة المقابلة.
بعد كل المشاكل المتعلقة بتثبيت برنامج Flash ، قد لا يعمل عند محاولة إعداد شريط التمرير الرئيسي من محرر المنشورات. أظهر القليل من البحث أن هذا المكون الإضافي لا يعمل مع Safari / Chrome.

متزلج ووردبريس متجاوب - Soliloquy Lite

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

سلايدر سلايدر 2

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

المتزلج المستجيب

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

سمارت سلايدر 3

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

الأكثر شعبية وأفضل شريط التمرير
وهناك فائزان: ميتا سلايدرو سمارت سلايدر 3.

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

vSlider متعدد الصور المنزلق,SlideDeck 2 لايتو Soliloquy لايت- أيضًا إضافات شريط تمرير رائعة إذا كان موقعك محملاً بالصور وتريد إنشاء الكثير من أشرطة التمرير. تستهدف هذه الموضوعات الثلاثة المحترفين لجذب العملاء - الحصول على المزيد من المبيعات - من خلال المنتجات المجانية.

إذا كنت تريد فقط منزلقًا بسيطًا للغاية بدون أجراس وصفارات ، فإن Cyclone Slider 2 هو بالتأكيد الطريق المناسب. إنه شريط تمرير رائع يسهل تخصيصه ولا يزدحم بإعدادات وخيارات لا حصر لها.

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