إعادة إنشاء الصفحة الرئيسية لموضوع Music Artist WordPress باستخدام محرر القوالب

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

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

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

كل هذا ممكن مع محرر الكتلة.

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

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

فيما يلي مقارنة بين الصفحة الرئيسية الأصلية لموضوع Music Artist (أولاً) واستجمام باستخدام الكتل عبر سمة Ariele Lite (الثانية):

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

في هذه التجربة ، استخدمت:

• ووردبريس 5.7 بيتا
• جوتنبرج 10.1 بيتا
• Ariele Lite 1.0.8.0 تحديث
• Editor Plus 2.6.1 تحديث

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

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

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

إعادة إنشاء الصفحة الرئيسية لفنان الموسيقى

كان البدء بقاعدة من Ariele Lite يعني أن التصميم كان محاصرًا. ومع ذلك ، يحتوي السمة على قالب صفحة "Blank Canvas" المخصص الذي يتيح للمستخدمين تصميم الصفحة بأكملها.

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

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

قسم البطل

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

بعد ذلك ، أضفت كتلة العنوان ، واضبط حجمها قليلاً. لقد تابعته باستخدام مجموعة Spacer و Social Icons.

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

قسم التسجيلات

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

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

قسم الإعلام والنصوص

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

بدلاً من ذلك ، ذهبت مع كتلة الأعمدة. في العمود الأيسر ، أسقطت عنوان URL لفيديو YouTube. على اليمين ، أضفت كتل العناوين والفقرة والأزرار.

قسم الفيديوهات

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

قسم أحدث المشاركات

كان هذا هو الجزء الذي واجهتني مشكلة كبيرة في التصميم. يوفر WordPress كتلة أحدث المنشورات ، والتي يمكن تعيينها في شبكة. ومع ذلك ، لم يتعامل Ariele Lite مع الأعمدة بشكل صحيح.

لذلك ، لقد غششت قليلاً.

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

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

قسم الشريط الجانبي التذييل

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

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

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