FSE Outreach Round # 2: إنشاء صفحة رئيسية مخصصة باستخدام محرر موقع Gutenberg

نشرت: 2021-02-24

أعلنت آن مكارثي عن الجولة الثانية من الاختبار لبرنامج التوعية لتحرير الموقع الكامل (FSE). تطلب دعوة الاختبار من المستخدمين إنشاء صفحة رئيسية من محرر موقع ملحق Gutenberg. التعليقات مفتوحة حتى 5 مارس.

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

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

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

في النهاية ، أنشأت صفحة رئيسية مخصصة لمطعم يسمى The Grilled Cheese - سأفتح هذا المطعم بالتأكيد في العالم الحقيقي إذا غادرت مجتمع WordPress.

صفحة رئيسية مصممة خصيصًا عبر محرر موقع Gutenberg لمطعم وهمي.
صفحة مطعم مخصصة مع شريط جانبي.

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

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

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

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

تحديد نقاط الألم

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

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

العرض الأقصى

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

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

إضافة رمز الحظر

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

التمرير فوق رمز "إضافة كتلة" في محرر الموقع.
تحديد موقع رمز "إضافة كتلة".

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

كتلة الاستعلام

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

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

استخدام كتلة الاستعلام في محرر موقع WordPress.
تحديد المشاركات باستخدام عامل تصفية فئة كتلة الاستعلام.

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

الأنماط العامة لجميع الكتل

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

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

لا توجد أعمدة ذات عرض كامل

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

فحص مخرجات أعمدة العرض الكامل من محرر الموقع.
أعمدة كاملة العرض لا تغطي المنطقة الكاملة.

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

الصور المميزة

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

لا يوجد سبب لا ينبغي أن يكون هذا بشكل أساسي اختلافًا في كتلة الصورة. الشيء الوحيد الذي تحتاجه الصور المميزة والمختلف هو خيار الارتباط بالمنشور.