كيفية تحويل Bootstrap Theme إلى WordPress Theme

نشرت: 2022-10-07

بافتراض أن لديك فهمًا أساسيًا لكل من WordPress و Bootstrap ، فإن عملية تحويل سمة Bootstrap إلى WordPress هي في الواقع عملية مباشرة تمامًا. باختصار ، ستحتاج إلى: 1. إنشاء سمة فرعية لـ WordPress 2. نسخ فوق ملفات Bootstrap CSS و JS 3. إنشاء ملفات قالب WordPress الضرورية 4. ربط ملفات Bootstrap CSS و JS في القالب الفرعي الخاص بك ، دعنا نذهب من خلال كل خطوة من هذه الخطوات بالتفصيل. 1. أنشئ قالبًا فرعيًا لـ WordPress إذا لم تكن معتادًا على السمات الفرعية ، فهي ببساطة سمات ترث وظيفة سمة أخرى (السمة "الأصل"). يكون هذا مفيدًا عندما تريد إجراء تغييرات على سمة موجودة دون فقد القدرة على تحديث السمة الأصلية. لإنشاء سمة فرعية ، ستحتاج أولاً إلى إنشاء دليل جديد لموضوع الطفل الخاص بك. على سبيل المثال ، إذا كان موضوعك الرئيسي يسمى "my-theme" ، فيمكنك تسمية دليل السمات الفرعية "my-theme-child". داخل دليل القالب الفرعي الخاص بك ، سوف تحتاج إلى إنشاء ملف يسمى “style.css”. سيحتوي هذا الملف على قواعد CSS الخاصة بالقالب الفرعي الخاص بك. في الجزء العلوي من ملف "style.css" الخاص بك ، ستحتاج إلى إضافة بضعة أسطر من التعليمات البرمجية لإخبار WordPress أن هذا موضوع فرعي. يجب أن تبدو هذه السطور على النحو التالي: / * اسم الموضوع: عنوان URI للموضوع الفرعي الخاص بي: http://example.com/my-theme-child الوصف: قالب فرعي لموضوعي المؤلف: John Doe مؤلف URI: http: // example.com Template: my-theme Version: 1.0.0 * / تأكد من استبدال قيم العنصر النائب بمعلوماتك الخاصة. يجب أن تكون قيمة "النموذج" هي اسم الدليل لموضوعك الأصلي. 2. انسخ ملفات Bootstrap CSS و JS بعد ذلك ، ستحتاج إلى نسخ ملفات Bootstrap CSS و JS من السمة الرئيسية الخاصة بك إلى السمة الخاصة بك. إذا لم تكن متأكدًا من مكان وجود هذه الملفات ، فيمكنك عادةً العثور عليها في الدلائل "css" و "js" في السمة الرئيسية الخاصة بك. 3. قم بإنشاء ملفات قالب WordPress الضرورية لكي يعمل قالب طفلك بشكل صحيح ، ستحتاج إلى إنشاء ملفات قالب WordPress معينة. هذه الملفات مسؤولة عن إخراج ترميز HTML لموضوعك. الحد الأدنى من ملفات القوالب التي ستحتاجها

فيما يلي بعض الإرشادات خطوة بخطوة حول تحويل قوالب bootstrap 4 إلى سمات Wordpress. في هذا البرنامج التعليمي ، ستتعرف على كل من إطار عمل WordPress و Bootstrap. يمكن استخدام فئات ومكونات المكتبة هذه لجعل موقع الويب الخاص بك مستجيبًا ، مما يضمن ضبط جميع أحجام الشاشات بشكل صحيح. WordPress هو إطار عمل CMS يمكن استخدامه لإنشاء موقع ويب ، لذلك يجب أن يكون متجاوبًا بطبيعته. يتيح لك أحدث إصدار من WordPress إنشاء قوالب تصميم سريعة الاستجابة مجانًا أو مقابل رسوم. هذه ليست سوى عدد قليل من الأسباب التي تجعلك تتعلم كيفية تحويل قوالب Bootstrap 4 إلى WordPress Theme. في الخطوة 6 ، ستحتاج إلى تحويل تنقل Bootstrap الثابت إلى قائمة WordPress ديناميكية.

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

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

الائتمان: blogspot.com

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

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

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

هل يجب علي استخدام Bootstrap أو WordPress؟

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


هل Bootstrap أفضل من WordPress؟

الائتمان: TemplateToaster

هناك إيجابيات وسلبيات لكل من Bootstrap و WordPress. يعد Bootstrap إطار عمل أكثر ملاءمة للمطورين ، بينما يعد WordPress أكثر سهولة في الاستخدام ومناسبًا لمن لديهم معرفة تقنية أقل. يعد Bootstrap أسرع وأسهل في الاستخدام ، لكن WordPress أكثر مرونة.

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

يمكن استخدام إطار عمل Bootstrap ، جنبًا إلى جنب مع أطر HTML / CSS / JS. هناك العديد من الأطر الأخرى المتاحة ، مثل SASS و Less و Foundation. باستخدام إطار عمل ، لديك القدرة على إنشاء موقع الويب أو التطبيق الخاص بك من خلال استخدام مجموعة من المكونات المصممة مسبقًا. يجعل من السهل إنشاء موقع ويب أو تطبيق بتصميم متناسق باستخدام Bootstrap.

يعد Bootstrap خيارًا رائعًا لتطوير WordPress

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

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

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

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