كيفية إنشاء قالب WordPress موضوع مع Bootstrap

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

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

نحقق ذلك من خلال وضع الملفات في قائمة الانتظار ثم ربط وظيفة إلى WP_enqueue_scripts. عند استخدام bootstrapstarter_enqueue_scripts () ، يتم تعريف مصفوفة التبعية ، والتي تتكون من "jquery" فقط. يعتمد هذا البرنامج النصي على مصفوفة من جميع مؤشرات النصوص المسجلة. نظرًا لأن ورقة الأنماط الرئيسية الخاصة بنا تتكون أساسًا من ملفات Bootstrap CSS ، فإننا نستخدم مؤشرًا واحدًا فقط في مصفوفة التبعيات $: bootstrap (التي سجلناها في السطر السابق فقط). تنقسم الملفات إلى أربعة ملفات منفصلة بعد استخراج Bootstrap من القالب. سيعرض الملف النهائي أحدث المشاركات بترتيبها الزمني الافتراضي. Loop هي أداة WordPress تعرض العنوان والمحتوى واسم المؤلف والتاريخ وما إلى ذلك.

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

هل يمكنني استخدام ثيمات Bootstrap مع WordPress؟

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

هناك العديد من الخطوات المتبعة عند العمل مع Bootstrap على 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.

Bootstrap: نقطة انطلاق رائعة لتطوير WordPress

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

قم بإنشاء سمة WordPress من Scratch Bootstrap

يعد إنشاء سمة WordPress من البداية باستخدام Bootstrap عملية بسيطة نسبيًا. أولاً ، ستحتاج إلى إنشاء مجلد لموضوعك داخل الدليل / wp-content / theme /. بعد ذلك ، ستحتاج إلى إنشاء ملف index.php وملف style.css داخل مجلد السمة الخاص بك. يمكنك بعد ذلك البدء في إضافة كود HTML و CSS و PHP إلى هذه الملفات. أخيرًا ، ستحتاج إلى تنشيط المظهر الخاص بك داخل لوحة إدارة WordPress.

NavWalker ، فئة PHP ، تسمح لقائمة التنقل في WordPress بالعمل بكفاءة أكبر. يتم عرض NavWalker عند استخدام ملف inc / bs5-navwalker.php في الكود أدناه. Get_search_form () هي وظيفة تنشئ نموذج بحث لـ WordPress. يجب إضافة الكود أدناه إلى ملف search.php الخاص بموضوع WordPress. لعرض الشفرة الخاصة التي ترغب في استخدامها في عناوين URL غير المرئية ، قم بإنشاء ملف جديد 404.php. يجب تحميل لقطة شاشة السمة (الصورة المصغرة) إلى مجلد السمة.

كيفية تضمين Bootstrap في ثيم WordPress Child

إذا كنت تقوم بإنشاء سمة تابعة لـ WordPress ، فستحتاج إلى تضمين ملفات bootstrap في مجلد القالب الخاص بك. يمكنك إما استخدام CDN (شبكة توصيل المحتوى) لتضمين ملفات التمهيد ، أو يمكنك تنزيل الملفات وتضمينها في مجلد النسق الخاص بك. إذا كنت تستخدم CDN ، فستحتاج إلى تضمين ملفات bootstrap CSS و JavaScript في ملف header.php الخاص بموضوع الطفل. يمكنك العثور على روابط CDN لملفات التمهيد على موقع Bootstrap على الويب. إذا كنت تقوم بتضمين ملفات bootstrap في مجلد السمة الخاصة بك ، فستحتاج إلى إدراج ملفات CSS و JavaScript في ملف function.php الخاص بالقالب الفرعي الخاص بك. يمكنك العثور على مزيد من المعلومات حول كيفية القيام بذلك في WordPress Codex.

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