DE {CODE}: التصميم الحديث ومستقبل WordPress: العمل مع تحرير الموقع بالكامل وما بعده

قدم WordPress 5.9 تحرير الموقع الكامل إلى النواة ، مما يدل على تحول كبير في الطريقة التي نبني بها مواقع الويب باستخدام WordPress. في جلسة DE {CODE} هذه ، انضم إلى محامي WP Engine Developer Nick Diego أثناء تفكيكه لهذه التغييرات ، بالإضافة إلى بعض الطرق التي يمكنك من خلالها الاستفادة منها لإنشاء مواقع ويب أفضل — طريقة WordPress الحديثة.

شرائح الجلسة

نص كامل

نيك دييجو : مرحبًا ومرحبًا بكم في "العمل مع تحرير الموقع الكامل ومستقبل التصميم الحديث في WordPress." اسمي نيك دييجو ، وأنا مطور محامي هنا في WP Engine. إذاً قليلاً عني - لذلك بدأت العمل مع WordPress مرة أخرى في عام 2012. كنت في الأساس مطورًا للمكونات الإضافية ، ومنذ ذلك الحين انتقلت إلى القيام بالكثير مع قوالب الكتلة. لقد انضممت بالفعل إلى WP Engine في نوفمبر من عام 2021 ، لذلك هذا نوع جديد بالنسبة لي. أنا متحمس للكتل والأنماط وكل شيء تحرير الموقع بالكامل ، ولهذا السبب لا يمكنني أن أكون أكثر حماسًا لتقديم هذا العرض التقديمي اليوم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لذلك هذا شيء لم يكن بإمكانك فعله من قبل. لا يمكنك أبدًا تعديل home.PHP ، ولكن الآن قالب HTML مباشرةً من الواجهة ، وليس بدون بعض الامتدادات الأخرى من جهة خارجية.

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

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

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

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

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

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

ثم أريد أن أشير إلى أن سمة الكتلة يمكن أن تكون بسيطة للغاية. كل ما تحتاج إليه هو أن تتكون من ملف style.CSS وملف index.html ، بالإضافة إلى ملف index.PHP. ملف PHP هذا هو نوع من بقايا تطوير قالب WordPress التقليدي ومن المحتمل أن يختفي في المستقبل.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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