WordPress المستوى المتقدم: السمات المتقدمة

Name: WordPress المستوى المتقدم: السمات المتقدمة
Author: Chrissy Rey

تعلم كيفية استخدام HTML وJSON ومحرر الموقع لإنشاء سمة كتلة مخصصة

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ6.

دورة تدريبية: عند الطلب

مرحبًا، اسمي كريستي راي، وسنتحدث في هذه الدروس عن تطوير السمات المتقدمة. خاصة، سأوضح لك كيفية إنشاء سمة كتلة من البداية. تختلف سمات الكتل تمامًا عن السمات الكلاسيكية حيث يتم التحكم في كل شيء باستخدام الكتل. تمت إضافة القليل جدًا من كود PHP إلى السمة ويتم التحكم في كل شيء باستخدام HTML واستخدام الكتل الموجودة في مكانها من وظائف PHP التي تم استخدامها في السمات الكلاسيكية. دعنا نلقي نظرة على الملفات الموجودة في سمة الكتلة Block Theme. بعضها مطلوب وبعضها لا. يمكننا أن نرى هنا أنني حصلت على سمة أساسية جدًا للكتلة تم إنشاؤها باسم Chocolate World وتحتوي على عدة ملفات فيها. بعض هذه مطلوبة، وبعضها لا. من الناحية الفنية، الملفان الوحيدان المطلوبان حقًا لسمة الكتلة هما مجلد القوالب، تحتاج إلى فهرس html. لا شيء آخر مطلوب على الاطلاق. لكن بعض هذه الملفات الأخرى الموجودة هنا من الجميل جدًا أن تمتلكها، ومن الجيد جدًا أن تمتلكها، وسوف نلقي نظرة بداخل البعض منهم. الملف الآخر الذي من الجيد أن يكون لديك هو ملف الفهرس php. يمكنك أن ترى الآن أن هذا لا يقول شيئًا يمكن رؤيته هنا. هذا مطلوب بالفعل للسمات التي تدعم الإصدارات الأقدم من WordPress. من الجيد أن يكون هناك فقط في حالة. إذا كان المستخدمون لديك يستخدمون إصدارات أقدم من WordPress وهو أمر لا ينبغي لهم استخدامه، فيجب عليهم استخدام أحدث إصدار من WordPress ولكن في حالة حدوث ذلك، لا يزال بإمكانهم استخدام السمة. الملف الآخر الذي من الجيد أن يكون لديك هو الملف التمهيدي txt. سيوفر هذا فقط بعض المعلومات حول السمة والتثبيت وأشياء أخرى من هذا القبيل. Screenshot .png هو ملف آخر رائع للحصول عليه، ويمكنك أن ترى هنا ما يفعله، فهو فقط يضع لقطة الشاشة، أو في هذه الحالة، يُقال فقط Chocolate World وهذا يتيح للمستخدم رؤية شيء ما في شاشة السمات في WordPress. لذلك من الجيد أن يكون هناك شيء ما، وهو مجرد، في هذه الحالة، صورة بحجم 1200 × 900، ويتم الحصول على أي شيء، إذا أردت وضع لقطة شاشة هناك، يمكنك ذلك. لذا، بعد الانتهاء من تصميم السمة، يمكنك التقاط لقطة شاشة للصفحة، ربما للصفحة الرئيسية أو شيء من هذا القبيل مع إعداد السمة بالفعل، أو يمكنك وضع صورة كما فعلت هناك. هناك ملف آخر من الجيد أن يكون لديك هو ملف .json ذو السمة، وسوف تستخدمه لإعداد الأنماط والخيارات وأشياء. أخرى في السمة. كما ذكرت، مطلوب ملف الفهرس html. الموجود داخل مجلد القوالب، ولكن يمكنك الحصول على ملفات قوالب إضافية، وبعد ذلك يمكنك أيضًا إنشاء مجلد أجزاء، والذي سيحتوي على أجزاء قالب إضافية مثل الرأس، و التذييل والاستعلام وأي أجزاء قالب أخرى تريدها. هناك ملف آخر من الجيد أن يكون لديك، ولكن مرة أخرى، ليس ضروريًا، وهو ملف الوظائف php. ولدي القليل من التعليمات البرمجية في ذهني، فهي لا تفعل أي شيء في الواقع، ولكن هذا سيكون المكان الذي تريده إذا أردت تسجيل الدعم لأي ميزات لا تدعمها سمات الكتلة Block Theme تلقائيًا ستضعهم في ملف وظائف php. الآن دعنا نلقي نظرة فاحصة على بعض هذه الملفات. لذلك سأقوم بإلقاء نظرة على ملف الأنماط css. هذا ملف مهم جداً سيؤدي هذا إلى السماح لـ WordPress بمعرفة السمة لديك. لذا، ستحتوي على أشياء مثل اسم السمة، والمؤلف، والوصف، وما هو الإصدار، وما هي إصداراته مطلوب PHP وWordPress، وأشياء أخرى من هذا القبيل. ويمكنك أن ترى أن موقعي فارغ الآن، مما يعني أنه إذا ذهبت إلى WordPress ونظرت إلى تفاصيل السمة، فإنه يقول فقط أن اسم السمة هي Chocolate World، وليس لها إصدار، وهي من Anonymous. وذلك فقط لأنني لم أقم بإعداد أي شيء في ملف الأنماط css. لذلك دعنا نلقي نظرة على تلك الأنماط ونقوم بإعدادها. المعلومات التي تدخل في وصف السمة أو تفاصيل السمة ستكون في تعليق CSS. هذا هو كل ما ستضيفه إلى ملف style.css. قد يبدو الأمر غريبًا بعض الشيء أنك لا تقوم فعليًا بإضافة أنماطك إلى ملف CSS، أو ورقة أنماط، ولكننا سنقوم بإضافة معلومات حول السمة إلى هذا الملف. لذلك ستقوم بإضافة تعليق هناك، وكل المحتوى الذي سنقوم بوضعه هنا سيتم إدخاله إلى داخل علامة التعليق الافتتاحية والختامية هذه. لذا فإن أول شيء نضيفه هنا هو اسم السمة. لذلك عليك فقط كتابة اسم السمة، ولا تحتاج إلى تلك الفاصلة المنقوطة، حيث يتم التصحيح التلقائي هناك. وبعد ذلك ستقوم فقط بكتابة اسم السمة. الشيء التالي الذي يمكنك القيام به، ليس مطلوبًا، ولكن يمكنك وضع URI للسمة. لذا، إذا كان لديك عنوان URL الذي تريد أن ينتقل إليه المستخدمون للحصول على مزيد من المعلومات حول الموضوع، فيمكنك كتابته هناك. لذلك سأكتب فقط موقع الويب الخاص بي. وبعد ذلك، يمكنك كتابة اسم المؤلف ومعرف الموارد الموحد URI للمؤلف. ومرة أخرى، تكتب URI. هناك نذهب. والشيء الآخر الذي يمكنك فعله هو إضافة وصف. ولكن قبل أن أفعل ذلك، أريد حفظ عملي. لذلك سأقوم بحفظ ملفي وسأقوم بتحديث الشاشة حتى نتمكن من رؤية أن هذا وضع سمة عالم الشوكولاتة وهو ما أضفته. وقد حصلت عليه كريستي راي وسيتم نقله إلى mywebsite.com. لذلك اسمح لي أن أعود إلى هناك. لذا فإن الشيء التالي الذي سأفعله هو إضافة وصف. وهذه الكلمات التي أستخدمها هي الكلمات الفعلية التي تريد استخدامها. لذلك ستكتب الوصف تمامًا كما كتبته هنا، نقطتي الوصف، ثم الوصف الفعلي. يمكن لـ WordPress بعد ذلك قراءة ذلك ويعرف ما يجب وضعه في الواجهة الخلفية. لذا سأقول، ثم يمكننا أيضًا إضافة إصدار. إذن هذا هو 1.0. لذلك سنقوم فقط بوضع ذلك هناك ويمكنك تعديل الإصدار. لذلك، من الجيد أن نتتبع تلك الإصدارات. لذلك، أثناء إجراء تغييرات على القالب الخاص بك، يمكنك تحديث رقم الإصدار. والشيء التالي الذي سنفعله هو أننا سنذكر ما هو الإصدار، وما هو الحد الأدنى لإصدار WordPress ما هو مطلوب لهذه السمة. لذا يمكنك كتابة مطلوب الكتابة Required على الأقل. إذن ما هو الإصدار الأدنى الذي ستسمح به للمستخدمين أو الذي تريد من المستخدمين استخدام هذه السمة. وسنقول 5 .9 لهذا. وسنقول ما هو الإصدار الذي تم اختباره عليه. وسنقوم فقط بكتابة ما تم اختباره. وسنقول أن هذا هو الإصدار الحالي من ووردبرس من وقت تسجيل هذا الفيديو وهو 6 .2. يمكنك أيضًا تحديد إصدار PHP المطلوب. لذلك سنقوم بكتابة يتطلب PHP وسنقول أن هذا يتطلب 7 .4، أو يمكنك أن تقول 8 .0، أيًا كان إصدار PHP الذي تريد جعله مطلوبا. لذلك يعتمد الأمر فقط على ما قمت بوضعه في الكود الخاص بالسمة. لذا، سنقول 7.4 لهذا. وبعد ذلك يمكنك أيضًا إدخال ما هو الترخيص و URI الخاص بالترخيص. لن أضيف ذلك الآن. لا أريد أن أكتب كل شيء. وهذا هو كل ما هو مطلوب إلى حد كبير. بعض الأشياء الأخرى التي يمكنك إضافتها ستكون هناك أشياء مثل العلامات. لذا، إذا أضفت علامات، فهذه هي العلامات التي ستظهر إذا قمت بإرسالها إلى مستودع السمات، وهذه هي العلامات التي سيتم تصفيتها. لذلك يمكنك القيام بأشياء مثل التحرير الكامل للموقع. لذلك سأقوم بحفظ ذلك. ومرة أخرى، سأعود إلى هذه الواجهة الخلفية هنا، وألق نظرة، واسمح لي بتحديثها. والآن يمكنك أن ترى أن العلامات مدرجة هناك. لقد حصلت على الوصف والنسخة مدرجة هناك أيضًا. لذلك انتهيت من تعديل ملف Style.css. ودعنا نلقي نظرة سريعة أيضًا على الملف التمهيدي‎ readme.txt. الآن هو فارغ. لذا، إذا قمت بفتح هذا في محرر النصوص الخاص بي، فهو فارغ، لكن يمكنك وضع الأشياء هنا. الملف التمهيدي readme.txt مطلوب إذا كنت تخطط لتوزيع الملف. لذلك من الناحية الفنية ليس مطلوبًا فقط إنشاء السمة. لا يتطلب WordPress أن يكون موجودًا لديك، ولكن من الجيد أن يكون لديك، لأنه إذا كنت ستقوم بتوزيعه، فيجب عليك تحتاج إلى السماح للمستخدمين بمعرفة معلومات حول التثبيت، تعديل الأشياء. وهكذا ستضيف أشياء مثل، أشياء مشابهة جدًا لما هو موجود في style.css، ولكن يمكنك أيضًا إضافة أشياء مثل الوصف ويمكنك أيضًا إضافة أشياء مثل التثبيت. لذلك يمكنك إضافة كل تلك المعلومات هناك. إذن هذا ملف أساسي جدًا. يمكنك تعديله حسب الحاجة لأي شيء ستفعله بهذه السمة. شكرًا جزيلاً على المشاهدة وترقب الدرس التالي، حيث سنلقي نظرة على إنشاء وتحرير ملفات القالب لسمة الكتلة Block الخاصة بك.

متقدم مقدِّم الخدمة : Chrissy Rey 6 الدروس · 1h 2m باللغات: العربية, الإنجليزية

وصف الدورة

يحتوي WordPress على نوعين من السمات: الكلاسيكية والكتل. على الرغم من أن السمات الكلاسيكية تتكون من ملفات PHP وCSS فإن سمات الكتلة تستخدم ملفات HTML وملفات JSON. يتم تقسيم ملفات HTML السمة إلى قوالب وأجزاء القالب، وعندما يتم دمجها مع الإعدادات والأنماط في ملفات JSON يمكن لسمة الكتلة التحكم في ظهور موقع ويب WordPress. إن معرفة كيفية إنشاء ملفات HTML وJSON اللازمة لإنشاء سمة كتلة هي مهارات مهمة لمطور WordPress.

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

ما ستتعلمه

تحديد بنية وتنسيق ملفات قالب كتل WordPress
إنشاء وتحرير القوالب وأجزاء القوالب باستخدام ملفات HTML
تكوين ملف theme.json لتحديد الإعدادات والأنماط وعناصر قالب الكتل الأخرى
إضافة خطوط مخصصة إلى قالب الكتل عبر ملف theme.json
إنشاء اختلافات أنماط عالمية لقالب الكتل
بناء قالب كتل مخصص باستخدام HTML وJSON ومحرر الموقع

النقاط الرئيسية

يدعم WordPress نوعين من القوالب: القوالب الكلاسيكية المبنية من ملفات PHP وCSS، وقوالب الكتل المبنية من ملفات HTML وJSON.
يتم تقسيم ملفات HTML الخاصة بقالب الكتل إلى قوالب وأجزاء قوالب.
عند دمج قالب الكتل مع الإعدادات والأنماط في ملفات JSON، يمكنه التحكم في مظهر موقع WordPress الإلكتروني.
يُستخدم ملف theme.json لتحديد الإعدادات والأنماط والعناصر الأخرى لقالب الكتل، ويمكن أن يتضمن خطوطاً مخصصة واختلافات أنماط عالمية.
تعد معرفة كيفية إنشاء ملفات HTML وJSON اللازمة لقالب الكتل مهارة مهمة لمطور WordPress.

الأسئلة الشائعة

لمن هذه الدورة؟

هي لمطوري WordPress الذين يرغبون في تعلم كيفية إنشاء قوالب كتل مخصصة، حيث يوصف إنشاء ملفات HTML وJSON لقالب الكتل بأنه مهارة مهمة لمطور WordPress.

ما الذي سأكون قادراً على فعله بنهاية الدورة؟

بنهاية الدورة، ستكون قادراً على إنشاء قالب كتل مخصص باستخدام HTML وJSON ومحرر الموقع.

ما هي الموضوعات التي تغطيها هذه الدورة؟

تغطي الدورة بنية قالب الكتل، والملفات المطلوبة لإنشاء قالب الكتل، والقوالب وأجزاء القوالب، وملف theme.json، وإضافة الخطوط المخصصة، وإنشاء اختلافات الأنماط العالمية.

ما الفرق بين القوالب الكلاسيكية وقوالب الكتل التي تغطيها هذه الدورة؟

تتكون القوالب الكلاسيكية من ملفات PHP وCSS، بينما تستخدم قوالب الكتل ملفات HTML (مقسمة إلى قوالب وأجزاء قوالب) وملفات JSON للإعدادات والأنماط.