استخدام 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  من هنا