استخدام Bootstrap في موقع في وورد بريس - الجزء الثاني - ||| « STUDYSHOOT
الوصول والتواصل معنا STUDYSHOOT

استخدام Bootstrap في موقع في وورد بريس – الجزء الثاني –

استخدام Bootstrap في موقع في وورد بريس – الجزء الثاني –

استخدام Bootstrap في موقع في وورد بريس ,, للعمل على تصميم مواقع عبر منصة وورد بريس انت بحاجة الى معرفة بداية أو ان تبدأ تعلم لغات البرمجة الاساسية التالية وهي html و كذلك php بالإضافة الى css و js.

بالنسبة لنظام Bootstrap فهو يساعدك في معرفة و كذلك تسهيل اساسيات html و css , كما واننا سنقوم بهذه السلسة بشرح كامل لكيفية التعامل مع ثيم موقع عبر منصة وورد بريس لانشاءة من الصفر باستخدام php و js و بالاضافة الى ضمّ bootstrap الى العمل ,

وفي هذا الدرس سوف نقوم بداية بكيفية شرح وتنصيب bootstrap لدينا .

قبل ذلك ولكن انت بحاجة الى معرفة التالي :

الخطوة الأولى : استخدام Bootstrap في موقعي في وورد بريس

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

يمكنك انشاء هذه الملفات من الذهاب الى Notebook في نظام ويندوز مثلا وانشاءها بكتابة الاسم مع اللاحقة كما هي وموضحة الآن ..

الملفات هي :

• header.php • Stylesheet.css • index.php • page.php • functions.php • single.php • search.php • archive.php • footer.php

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

/*
Theme Name: STUDYSHOOT
*/

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

الخطوة الثانية :استخدام Bootstrap في موقعي في وورد بريس

ضمّ bootstrap الى ملف الثيم الخاص بك , كيف ذلك ؟
اذهب الى الى الموقع الخاص ب Bootstrap من هنا , ثم اضغط على ايقونة تحميل , وقم بتحميل المجلد كامل على سطح المكتب . بعدها قم باستخراج الملفات الموجودة ضمن المجلد المضغوط الذي قمت بتحميله ,

اذهب الآن الى مجلد الثيم الخاص بك وانشىء مجلد قم بتسميته Bootstrap . ثم قم بنسخ مجلدات css و كذلك js  والصقها في مجلد Bootstrap الذي قمت بانشاءه منذ قليل في ملف الثيم الخاص بك .

وهنا سيصبح لدينا التسلسل التالي :

Your theme Folder >>> Bootstrap>>> Css + Js

بعدها لنبداً العمل , اذهب الى مجلد الثيم وقم بفتح ملف Function .php و الصق الكود التالي به :

//Css
function load_css()
                {
                wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(),false, 'all');
                wp_enqueue_style ('bootstrap');
                }
                add_action ('wp_enqueue_scripts','load_css');
 //Java Scripts
function load_js()
                {
                wp_enqueue_script('jquery');
                    wp_register_script('bootstrap', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery',false, true);
                    wp_enqueue_script('bootstrap');
                    wp_enqueue_script('jquery');
                }
                add_action ('wp_enqueue_scripts','load_js');

لنقم بشرح الكود قليلاً :

هذا الكود هو عبارة عن أمر تعطيه للورد بريس لكي يقوم بقراءة ملفات Bootstrap حتى نتمكن من استخدامها لاحقاً .

 
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(),false, 'all');
wp_enqueue_style ('bootstrap');
}
add_action ('wp_enqueue_scripts','load_css');

 في السطر الأول انت تخبر وورد بريس عن مكان مجلد bootstrap و بما في داخله أي ملف bootstrap.min.css ,

لربما لاحظت عند فتحك ملفات bootstrap بانها تحتوي على العديد من الملفات ومنها اخترنا فقط boostrap.min.css وذلك بسبب حجمها الخفيف الذي لن يسبب لنا مستقبلاً بطىء في حركة الموقع .

بالنسبة للشطر الثاني أي السطر الثاني هي خاصية بوورد بريس تستخدم عند جلب ملفات css  و js الى الثيم .

هنا نكون انتهينا من ضمّ ملفات Bootstrap الى  موقعنا الالكتروني  , تابع في الدرس القادم الدرس الثالث حتى نبدأ ببعض العمل الجاد .

الدرس التالي هو :

ماهي اساسيات bootstrap وكيف ابدأ العمل ؟ الجزء الثالث

روابط :

  • تحميل Bootstrap  من هنا 
  • مرجع وورد بريس لقراءة وفهم الكود الذي استخدمناه في function.php  من هنا 

أحدث المواضيع الى الآن

دورة تدريبية مجانية للغة الإنجليزية

دورة تدريبية مجانية للغة الإنجليزية

يوفر برنامج شبكة OPEN دورة تدريبية مجانية للغة الإنجليزية عبر الإنترنت فرصًا تعليمية افتراضية لمعلمي اللغة الإنجليزية والمهنيين... قراءة المزيد

منحة جامعة العلوم التطبيقية في ألمانيا

منحة جامعة العلوم التطبيقية في ألمانيا

قدّم على منحة جامعة العلوم التطبيقية في ألمانيا لجميع الطلاب لدراسة البكالوريوس و الدراسات العليا منحة جامعة العلوم التطبيقية في... قراءة المزيد

منحة جامعة بيتس الأمريكية

منحة جامعة بيتس الأمريكية

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

منحة معهد الدوحة للدراسات العليا بقطر

منحة معهد الدوحة للدراسات العليا بقطر

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

منح جامعة Jacobs في ألمانيا

منح جامعة Jacobs في ألمانيا

تقدم منح جامعة Jacobs للماجستير والدكتوراه في ألمانيا الممولة للطلاب المتميزين أكاديمياً في مختلف أنحاء العالم جامعة جاكوبس بريمن هي... قراءة المزيد

منح جامعة كوينزلاند الاسترالية للتكنولوجيا للبكالوريوس

منح جامعة كوينزلاند الاسترالية للتكنولوجيا للبكالوريوس

تقدم منح جامعة كوينزلاند للتكنولوجيا (QUT) في أستراليا لطلاب البكالوريوس الدوليين فرصة التقدم للحصول على منحة دراسية تهدف إلى جذب أفضل... قراءة المزيد