Gutenberg و Smart Slider 3: كيفية إضافة أشرطة التمرير إلى WordPress

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

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

ما هو جوتنبرج؟

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

إليك ما يبدو عليه المحرر الكلاسيكي ومحرر Gutenberg جنبًا إلى جنب:

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

بدأ العمل في Gutenberg في أوائل عام 2017 وما زال العمل قيد التقدم. يمكنك تنزيله كمكوِّن إضافي من WordPress.org وتجربته. من المقرر إطلاقه مع WordPress 5.0 ولكن لا يوجد تاريخ محدد. يقول البعض إنه قد يتم إصداره في وقت لاحق من هذا العام أو حتى أوائل العام المقبل.

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

بصفتي كاتبًا يعمل مع WordPress لسنوات عديدة ، أعتقد أن Gutenberg هو نفس من الهواء النقي وقد فات موعده كثيرًا.

أعني ، لماذا لا يكون WordPress سهل الاستخدام مثل Medium؟

العمل مع Gutenberg و Content Blocks

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

سترى أيضًا روابط أسفل مشاركاتك تتيح لك التبديل بين استخدام Gutenberg والمحرر الكلاسيكي.

إذا لم تكن قد استخدمته بعد ، فلنلقِ نظرة على كيفية عمله باستخدام المنشور التجريبي:

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

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

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

استخدام قوالب المحتوى

على اليسار لديك مساحة كبيرة للكتابة. إنه ملائم بشكل خاص لمستخدمي الكمبيوتر المحمول ( مثلي! ) الذين يعانون من استخدام واجهة المحرر الكلاسيكية الضخمة.

للوصول إلى كتلة المحتوى ، انقر فوق رمز "+" في الجزء العلوي الأيسر. سترى الكتل "الأكثر استخدامًا" معروضة أولاً ، ولكن عند التمرير لأسفل ، يمكنك الوصول إلى كتل أخرى للتنسيق والتخطيط والأدوات والعديد من التضمينات المختلفة لكل شيء من YouTube و Twitter إلى Spotify و SoundCloud.

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

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

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

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

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

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

إضافة Gutenberg Sliders إلى WordPress

يعمل فريق Smart Slider 3 بجد منذ الإعلان عن Gutenberg لضمان توافق المنزلقات.

ويسعدني أن أخبرك أن Smart Slider 3 متوافق مع Gutenberg! عند تحديث SS3 ، سترى كتلة محتوى شريط تمرير جديدة في المرة التالية التي تستخدم فيها Gutenberg.

إليك كيفية إضافة منزلقات Gutenberg إلى WordPress باستخدام كتلة محتوى Smart Slider 3 الجديدة:

1. أولاً ، قم بتثبيت (أو تحديث) Smart Slider 3 حتى تقوم بتشغيل أحدث إصدار.
2. انقر فوق Smart Slider في الشريط الجانبي ، وأنشئ مشروعًا جديدًا واختر الخيار Start with a Template .

3. اختر النموذج الذي ترغب في استخدامه. سأذهب إلى شريط تمرير صورة بسيط.

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

5. عندما تكون جاهزًا لإضافة شريط التمرير إلى منشورك ، افتحه في Gutenberg وانقر فوق رمز كتل المحتوى. سترى تمت إضافة Smart Slider 3 إلى قائمة الكتل "الأكثر استخدامًا".

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

7. انقر فوق تحديد شريط التمرير وسيتم عرض أشرطة التمرير الخاصة بك لـ Smart Slider 3. اختر شريط التمرير الخاص بك وسيظهر في منشورك.

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

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