Използване на Bootstrap на WordPress Свързване и функции
Какво е Bootstrap?
Можете да редактирате или дори да създадете тема на WordPress за вашия блог, като използвате функциите на Bootstrap. За да направите това, рамката предоставя всичко необходимо и дефинира основни стилове за основните компоненти, които могат да се използват на сайта: навигация и формуляри, модали и известия, акордеони и въртележки, падащи списъци и много други.
В интернет можете да намерите много различни ресурси, направени с помощта на тази библиотека. Читателите на моя блог най-вероятно ще се интересуват от Bootstrap шаблони за WordPress. В Runet ще намерите голям брой теми, базирани на рамката, включително безплатни. Те са стилен дизайн и функционални.
Какво прави Bootstrap популярен сред разработчиците? Нека разгледаме редица неоспорими предимства, които получаваме при работата с него:
Основният недостатък при работата с библиотеката може да бъде само това, че при редактиране или създаване на адаптивна WordPress тема компонентите на Bootstrap неможе просто да се добави от CMS конзолата. Използването им ще изисква вмъкване на допълнителен код или инсталиране на спомагателни добавки.
Свързване на рамката с WordPress
Първо изтеглете библиотеката от официалния сайт - https://getbootstrap.com : щракнете върху "Изтегляне на Bootstrap" и в раздела "Първи стъпки", който се отваря, изберете опцията "Изтегляне на Bootstrap". В момента Bootstrap 3 остава стабилната версия, но четвъртата версия вече е пусната в тестов режим. Той има някои разлики от текущия, но ако изучавате Bootstrap 3, тогава актуализираната версия на рамката няма да повдигне никакви въпроси.
Разопаковаме архива и виждаме 3 основни папки: css, js, шрифтове. Файловете, съдържащи "min" в имената си, не се различават от файловете със същото име без тази частица. Това означава, че кодът е написан без интервали, в един ред, за да се намали теглото на файла без загуба на функционалност. Този формат е нечетлив, но често е свързан с проекта. Това има положителен ефект върху увеличаването на скоростта на зареждане на сайт в WordPress. Папките css и js съдържат съответно стилови и скриптови файлове, а папката с шрифтове съдържа същите векторни икони, споменати по-горе. Всъщност тук виждаме един шрифт, представен в няколко формата.
Един удобен начин за поставяне на рамкови файлове в проект е създаването на отделна папка. За да направите това, папката libs се формира в корена на сайта в директорията wp-content - themes - name_of_your_theme, където в бъдеще може да се намират други библиотеки, използвани в проекта. И вече в него е папката за зареждане, където копираме цялото съдържание, извлечено от архива.
Както отбелязахме по-рано, възможно е да изтеглите само определени функции на Bootstrap, като мрежа или икони. Това се изпълнява настраница на официалния сайт "Персонализиране".
Тук трябва да махнете отметката от тези компоненти и добавки на библиотеката, които не искате да свържете към проекта. И след това, превъртайки страницата надолу, изтеглете персонализираната версия на Bootstrap, като щракнете върху „Компилиране и изтегляне“.
// Лист със стилове на Bootstrap. wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/libs/bootstrap/css/bootstrap.min.css', array(), ' ' );
- този ред включва минимизиран файл със стил на рамка. Първият параметър на функцията ('bootstrap— style') е произволно име на свързания обект.
Продължаваме да поставяме кода:
//Mythemestylesheet. wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/css/style.css', array(), ' ' );
- по същия начин свързваме собствен стилов файл, в който можем да променим правилата на Bootstrap. Моля, обърнете внимание, че за да е възможно това, нашите стилове трябва да бъдат заредени след стиловете на рамката. Тези. трябва да поставите този ред код, така че да е след кода, който отговаря за включването на библиотечните стилове.
И последният ред, от който се нуждаем, за да свържем Bootstrap с WordPress:
//Bootstrap js wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/libs/bootstrap/js/bootstrap.min.js', array('jquery'), ' ' );
- накрая свързваме минимизирания скрипт файл. Тук се нуждаем от третия параметър на функцията - array (), който отговаря за реда, в който са свързани скриптовете. Факт е, че Bootstrap зависи от библиотеката jQuery. Ако в момента, когато сървърът зарежда нашата рамка, jQuery все още не е свързан с проекта, скриптовете Bootstrap няма да работят. Не е необходимо да зареждаме самата библиотека jQuery, т.кWordPress прави това автоматично. Но за да може връзката да се осъществи в последователността, от която се нуждаем, ще определим, че Bootstrap js скриптовете винаги трябва да идват след jQuery. Точно това прави редът array('jquery').
Ако създавате тема на WordPress Bootstrap от нулата или просто не искате да смесвате всички скриптове на едно място, предлагам ви да създадете отделна функция за свързване на Bootstrap 3 с WordPress. В края на файла functions.php поставете следния код:
- където load_bootstrap () е произволно име на функцията, която създадохме, а последният ред я дава на двигателя за изпълнение.
Основните характеристики на Bootstrap и как работи
За да разберете как си взаимодействат WordPress и Bootstrap, нека да разгледаме как работи рамката.
И така, файлът със стил Bootstrap съдържа специални класове, които се добавят към html маркирането, като по този начин определят показването или поведението на елементите.
Маркиране: контейнери и клетки. Маркиращата структура на Bootstrap се основава на вложена блокова система. Контейнерите от най-висок ред, които действат като обвивки, се формират чрез добавяне на класовете .container или .container-fluid към тях, в зависимост от това дали искаме да получим блок с адаптивна фиксирана ширина или „течност“.
Едно ниво надолу са вложени блокове с класа .row. Тези структурни елементи са редове, които организират хоризонтални групи от клетки.
Вместо звездичка в името на класа се посочва число от 1 до 12, равно на броя на клетките, които трябва да заема елементът. Но сумата от всички клетки в един ред не трябва да надвишава 12. Ето примерен код:
Ето как ще изглежда в браузъра:
подробно и сПримери за това как да работите с мрежата Bootstrap са описани в документацията на рамката на официалния уебсайт в раздела „CSS“ - „Grid system“.
Маси. Рамката предоставя редица класове за елементи на "таблица", които ви позволяват лесно да стилизирате таблици:
- .table - основен стил, само хоризонтални граници;
- .table-striped - редуване на сиви и бели редове в таблицата;
- .table-bordered - формирането на всички граници на редове и колони;
- .table-hover – осветяване на ред на таблица при задържане на мишката;
- .table-responsive - този клас прави таблицата отзивчива към всички устройства.
Бутони. За да създадете стилни бутони, Bootstrap предлага и редица класове във формат .btn-*, където вместо звездичка можете да замените всяка стойност от екранната снимка по-долу и да получите съответния бутон:
Ето как, например, трябва да напишете вашия елемент "button", за да получите зелен бутон в стила на Bootstrap 3: Success
Изображения. Има и интересни решения за "img" елементите:
Това е само малка част от възможностите на Bootstrap. Рамката предоставя класове за работа с типография, икони, формуляри, подсказки, навигация и др. Ако оценявате предимствата на функционалността на Bootstrap за WordPress блог, не забравяйте да проверите документацията за тази библиотека.
Как да създадете Bootstrap меню в WordPress
Вече знаем как да свържем Bootstrap с WordPress и сега можем да разгледаме пример за практическото използване на рамката на блога. За да направим това, ще заменим съществуващото активно меню на темата с адаптивната навигация на Bootstrap. Ще използвам в примера тестов шаблон, базиран на WordPress темата Twenty Sixteen, където вече създадох двустепеннаменю.
Намираме кода на менюто „Навигационна лента по подразбиране“, предлаган на официалния уебсайт на рамката в раздел „Компоненти“ - „Навигационна лента“:
Ние редактираме според нуждите. Ще премахна например връзката към логото (Марката), формата и списъка с класа .navbar-right. И тази част:
- заменете със следния код:
'top_menu', 'depth' => 2, 'контейнер' => false, 'menu_class' => 'nav navbar-nav', //Обработване на навигационното меню с помощта на нашия персонализиран навигационен инструмент 'walker' => нов wp_bootstrap_navwalker())); ?>
Поставяме крайния резултат от навигацията в съответния файл вместо в съществуващия. Имам този файл header.php:
В реда 'menu' => 'top_menu' указва менюто, което сте задали като горно меню в админ панела. 'дълбочина' => 2 - ниво на влагане за случаите, когато има падащи елементи. 'menu_class' => 'nav navbar-nav' - Това указва класовете на менюто на Bootstrap, които сме използвали.
Но за да интегрираме Bootstrap навигацията в WordPress, се нуждаем от друг файл със специален клас - wp_bootstrap_navwalker.php. Може да бъде изтеглен от GitHub на линка - https://github.com/twittem/wp-bootstrap-navwalker . Тук натискаме бутона „Клониране или изтегляне“ и избираме „Изтегляне на ZIP“.
Извличаме файловете от архива и копираме необходимия файл в папката „wp-bootstrap-navwalker-master“.
wp_bootstrap_navwalker.php се поставя в нашата папка с теми. Връщаме се към файла functions.php и в началото включваме изтегления клас:
//Регистриране на персонализирана навигационна програма
Нашият WordPress шаблон за адаптивна навигация Bootstrap е готов. След това зависи от стиловете. Това е менюто, което получих:
При задържане падащият списък се разширява, а на малките екрани връзките за навигация са скрити иизвиква се чрез иконата на менюто.
Ако нямате време да научите всички нюанси на работа с библиотеката на WordPress, използвайте добавките Bootstrap, най-популярните от които са WordPress Twitter Bootstrap CSS и Easy Bootstrap Shortcode.
Това приключва нашето въведение към рамката. Днес научихме как да свържем Bootstrap с WordPress, основните предимства на тази библиотека и функционалността на рамката, която може да ни помогне да създадем модерна отзивчива тема. Изучавайте уроци и експериментирайте!