إنشاء حلقة WordPress وتخصيص CSS

بافتراض أنك أكملت الجزء الأول ، سنقوم في هذا القسم بإنشاء حلقة WordPress وتخصيص CSS. حلقة WordPress هي رمز PHP يستخدمه WordPress لعرض المحتوى على موقع الويب الخاص بك. لتعديل الحلقة ، يجب أن تكون على دراية بلغة PHP. إذا لم تكن كذلك ، فهناك الكثير من الموارد المتاحة عبر الإنترنت لمساعدتك على تعلم الأساسيات. عندما يكون لديك فهم أساسي لـ PHP ، افتح محرر النصوص وأنشئ ملفًا جديدًا يسمى loop.php. في هذا الملف ، سننشئ حلقة WordPress. أول شيء عليك القيام به هو إخبار WordPress بتحميل ملف header.php الذي أنشأناه في الجزء 1. أضف الكود التالي إلى loop.php: بعد ذلك ، نحتاج إلى إنشاء حلقة WordPress. الحلقة مسؤولة عن عرض كل المحتوى على موقع الويب الخاص بك. يقوم بذلك عن طريق تكرار جميع المنشورات في قاعدة بيانات WordPress الخاصة بك وعرضها على الصفحة. لإنشاء الحلقة ، أضف الكود التالي إلى loop.php: يتحقق هذا الرمز لمعرفة ما إذا كانت هناك أية منشورات في قاعدة بيانات WordPress. إذا كانت هناك منشورات ، فسيتم تكرارها من خلال كل واحدة وعرضها على الصفحة. الآن بعد أن تم إعداد الحلقة ، نحتاج إلى إضافة بعض المحتوى بداخلها. في هذا المثال ، سنعرض فقط عنوان ومحتوى كل منشور. أضف الكود التالي داخل الحلقة: يعرض هذا الرمز عنوان ومحتوى كل منشور. الآن بعد أن تم إعداد الحلقة ، نحتاج إلى إضافة بعض CSS لتصميمها. في محرر النصوص الخاص بك ، قم بإنشاء ملف جديد يسمى style.css. أضف التعليمات البرمجية التالية إلى style.css: .post {margin-bottom: 40px؛ } تضيف هذه الشفرة هامشًا إلى أسفل كل منشور. سيساعد هذا في ترك مسافة بين المنشورات على الصفحة. الآن بعد أن أصبح لدينا الحلقة وإعداد CSS ، نحتاج إلى إضافة بعض الملفات الأخرى إلى موضوعنا. في محرر النصوص الخاص بك ، قم بإنشاء ملف جديد يسمى footer.php. أضف الكود التالي إلى foote

(الجزء 2) ما يفعله Bootstrap لموضوع WordPress ، ولماذا يحظى بشعبية كبيرة. هذا البرنامج التعليمي هو الجزء الثاني في سلسلة من البرامج التعليمية التي ستوجهك خلال عملية إنشاء قالب WordPress من البداية باستخدام إطار عمل Bootstrap CSS. هذا هو القسم الثالث والأخير من مناقشتنا حول إنشاء منطقة الرأس والتنقل والشريط الجانبي ومناطق التذييل. لوضع علامة على المدونة على أنها نشطة ، سيتم الآن عرض سطر الوصف واسم المدونة أعلى الصفحة. في منطقة التذييل ، سيكون هناك عنصر واجهة مستخدم يسمى Footer - Copyright Text. فيما يلي بعض الخيارات لدمج هذا القسم في WordPress. يتم تصميم سمة WordPress عن طريق إضافة عناصر واجهة مستخدم إضافية ومناطق عناصر واجهة مستخدم إليها.

لبدء تشغيل وظيفة bootstrapstarter_widgets_init () ، أضف الأسطر التالية إلى ملف footer.php: footer-copyright-text و sidebar-module-inset. يوجد هنا شريطان جانبيان: أحدهما بخلفية رمادية والآخر بخلفية سوداء. عندما تنظر لأول مرة إلى قالب البداية ، تظهر خلفية برتقالية لأعلى عنصر واجهة مستخدم (حول) ، وإذا أدخلت عنوانًا ، فسيتم تغليفه تلقائيًا بعلامات h4. باستخدام dynamic_sidebar () ، يمكننا عرض عناصر واجهة المستخدم المخصصة للمنطقة المسماة Footer - Copyright Text. قم بإنشاء شريط جانبي للمدونة كامل الميزات باستخدام الإرشادات خطوة بخطوة في هذا البرنامج التعليمي خطوة بخطوة. يحتوي ملف index.php النهائي على النتائج: وظيفة النتائج ، والتي يمكن العثور عليها مباشرة بعد منطقة المدونة . هذه هي النسخة النهائية للورقة التي يمكن تنزيلها هنا.

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

هل يمكننا استخدام Bootstrap Theme في WordPress؟

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

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

كيف يمكنني إضافة Bootstrap إلى قالب WordPress؟ هناك عدة خيارات. فيما يلي مكتبات Bootstrap CSS و JavaScript التي يمكنك دمجها في ملفات header.php و footer.php. يمكن إضافة صورة معاينة إلى السمة عن طريق تحميلها إلى دليل السمة ثم استخدام ملف screenshot.png. يتطلب إنشاء سمة WordPress الكثير من العمل ، لذلك أوصي بنسخ الملفات من سمة أخرى. نظرًا لأن Bootstrap لديه مجموعة القواعد والممارسات الخاصة به ، يجب أيضًا اتباع إجراءات تعلمها. في الواقع ، يمتلك كل من WordPress و Bootstrap مجتمعات شغوفة ، لذا فأنت لا تعرف أبدًا ما سيحدث بعد ذلك.

هل Bootstrap أفضل من WordPress؟

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

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

React-Bootstrap هي مكتبة تجمع بين قوة React ومرونة Bootstrap. يعد Bootstrap 4 نظامًا أساسيًا قويًا يتميز بتصميم متجاوب وتصميم متسق وجميع الميزات التي يفتقر إليها. لن تواجه أي مشكلة في النهوض والتشغيل لأنه سهل الاستخدام وسهل التعلم. React-Bootstrap هي مكتبة رائعة لإنشاء تطبيقات ويب عالية الجودة وسريعة الاستجابة.