Jak stworzyć responsywny motyw WordPress w oparciu o Bootstrap

Przy tak wielu urządzeniach o różnych rozdzielczościach, rozmiarach ekranu i systemach operacyjnych, responsywne strony internetowe i aplikacje stały się podstawowym wymogiem obecności marki w Internecie.

Ponad 52% całego ruchu w sieci pochodzi z urządzeń mobilnych, a liczba ta rośnie. Twórcy stron internetowych, marketerzy i projektanci rozumieją ogromny potencjał, jeśli witryna jest responsywna i można ją łatwo przeglądać, nawigować i przeglądać na dowolnym urządzeniu, niezależnie od rozdzielczości i proporcji.

Responsywne motywy to podejście do projektowania stron internetowych, w którym elementy witryny dostosowują się do rozmiaru ekranu i przeglądarek, aby zapewnić lepszą czytelność, wygodę użytkownika i czas ładowania. Deweloperzy i projektanci motywów zarabiają na koncepcji responsywnych stron internetowych. Wiele marek coraz częściej zatrudnia programistów WordPressa, aby ich witryny były responsywne i przyjazne dla urządzeń mobilnych.

W listopadzie 2013 r. Matt Cutts, szef zespołu Google ds. spamu internetowego, opublikował film wyjaśniający, że responsywne projektowanie nie wpłynie negatywnie na Ciebie w SERP. Co więcej, Google opublikował również swoje wytyczne dotyczące witryn przyjaznych dla urządzeń mobilnych, które zawierają szczegółowe informacje o tym, jak Google traktuje responsywne witryny.

Wraz z rozwojem smartfonów i innych podobnych urządzeń, korzystanie z komputerów stacjonarnych i laptopów (powoli) spada. Oznacza to, że ludzie używają smartfonów do wyszukiwania praktycznie wszystkiego: od wiadomości po lokalne sklepy, od zapytań o lot po najnowsze filmy. Ten rosnący trend stanowi dużą szansę biznesową dla społeczności internetowej.

WordPress i responsywna sieć

WordPress to najpopularniejszy CMS, który obsługuje znaczną część Internetu. Cieszy się wsparciem silnej społeczności programistów i projektantów open-source. Wraz z rozwojem responsywnego projektowania stron internetowych wielu renomowanych twórców motywów przeszło na projektowanie responsywne i wprowadziło łatwe do zrozumienia frameworki, takie jak Redux Framework, Carrington Core i Bootstrap , które są idealne do tworzenia responsywnych motywów WordPress od podstaw.

Co to jest Bootstrap?

Bootstrap to platforma typu open source, która jest używana do tworzenia stron internetowych przyjaznych dla urządzeń mobilnych. Oznacza to, że można go używać do tworzenia responsywnych motywów WordPress za pomocą szablonów projektowych opartych na CSS i Java Script.

Bootstrap to zestaw narzędzi, który upraszcza proces tworzenia złożonych aplikacji internetowych. Jest pomysłem zespołu deweloperów Twittera i został udostępniony społeczności open-source. Framework stał się popularny ze względu na swoją lekką strukturę, ponieważ jest kodowany w LessCSS.

Dodając Bootstrap do swojej witryny, możesz wywołać jego klasy, aby dodać gotowe elementy, takie jak przyciski, siatki, tabele, menu itp. Podobnie możesz sprawić, że istniejące elementy będą responsywne, bez dodawania skomplikowanych zapytań o media.

Utwórz motyw WordPress Bootstrap

Tworzenie motywu ładowania początkowego WordPress to w rzeczywistości 8-etapowy proces. Dobra wiadomość – łatwo jest zbudować motyw oparty na Bootstrap.

Krok 1: Rozpakuj Bootstrap

1. Przede wszystkim zainstaluj WordPress w swojej domenie.
2. Pobierz i rozpakuj Bootstrap.
3. Po zakończeniu połącz się za pomocą klienta FTP, takiego jak FileZilla.
4. Przejdź do wp-content > motywy .
5. Utwórz nowy folder w folderze Themes i nadaj mu nazwę BootSTeme . Prześlij zawartość rozpakowanego Bootstrapa do tego folderu.
6. Prawie każda instalacja WordPressa zawiera następujące pliki:

• stopka.php
• header.php
• index.php
• styl.css

Teraz utwórz cztery puste pliki o powyższych nazwach w folderze BootSTeme .

Krok 2: Konfiguracja Bootstrapa

W folderze BootSTeme otwórz style.css i wklej następujący kod.

 /*
Nazwa motywu: Mój motyw
URI motywu: https://cloudways.com
Opis: Mytheme Zbudowany na bootstrapie
Wersja: 1,1
Autor: Ahsan Parwez
URI autora: https://cloudways.com
*/

Są to w zasadzie komentarze zawierające opisy i szczegóły dotyczące tematu. Gorąco polecam zmienić te komentarze, aby odzwierciedlić szczegóły twojego motywu.

Krok 3: Kopiowanie kodu

W tym samouczku nie będę używał wszystkich plików CSS i JS zawartych w pakiecie Bootstrap. Aby rozpocząć proces tworzenia, skopiuj kod z pliku bootstrap.min.css i wklej w pliku style.css . W tym momencie plik style.css powinien wyglądać tak.

Uwaga: możesz uzyskać pełny zminimalizowany kod CSS ze strony Bootstrap.

Krok 4: Konfiguracja szablonu HTML

Muszę mieć podstawowy szablon HTML do pracy. Dla ułatwienia użyję tego motywu HTML . Polecam pobrać, aby kontynuować samouczek.

WordPress ma wbudowane funkcje get_header() i get_footer(), które domyślnie wywołują odpowiednio pliki header.php i footer.php .

Zacznij od wycięcia kodu HTML od góry do pierwszego div kontenera i wklej go do pliku header.php . Plik wyglądałby tak:

Plik footer.php będzie zawierał resztę kodu:

W tym momencie, jeśli prześlesz motyw Bootstrap WordPress i aktywujesz go, nic nie zobaczysz, ponieważ index.php niczego nie zawiera.

Aby załadować nagłówek i stopkę, użyję wbudowanej funkcji WordPressa do wywołania tych elementów. W tym celu wklej następujący kod w index.php :

 <?php get_header(); ?>

<?php get_footer(); ?>

Teraz na naszej stronie załadują się elementy nagłówka i stopki, ale dostaniemy stronę podstawową, pozbawioną jakiejkolwiek stylizacji.

Krok 5: Ustawianie nagłówka i stopki

W pliku header.php zaimportuję arkusz stylów Bootstrap za pomocą funkcji WordPress echo get_stylesheet_uri() (więcej o funkcji w WordPress Codex ). To zaimportuje style.css na stronę internetową i zobaczysz teraz górny pasek menu.

Możesz również dodać style.css , dodając następujący kod na górze pliku header.php .

 <link rel="arkusz stylów" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>"> 

Ale to nie wszystko, funkcje JavaScript na naszej stronie nadal nie będą działać i nie zobaczymy żadnych rozwijanych menu. Aby to umożliwić, zaimportujemy nasze pliki js, bezpośrednio importując plik według adresu URL w footer.php . Wklej następujący kod przed zamykającym tagiem body .

 <script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

WordPress jest znany z dostosowywania i wtyczek. Aby powiedzieć WordPressowi, gdzie umieścić zaczepy wtyczek, wkleimy <?php wp_head(); ?> i <?php wp_footer(); ?> w plikach header.php i footer.php . Ponadto, aby ustawić dynamiczne tytuły witryny, użyjemy wp_title(); w pliku header.php między znacznikami <title> .

 <title><?php wp_title(' | ',prawda,'prawda'); ></tytuł>

Powyższy kod wywoła tytuł posta oddzielony znakiem '|' niż nazwa witryny. Wartość logiczna true wyświetli tytuł. Jeśli ustawisz go na false , po prostu zwróci wartość i nie wyświetli jej. 'right' określa położenie tytułu posta na prawo od separatora.

Krok 6: Wyświetlanie polecanych postów

Następnie będę wywoływał posty dynamicznie na stronie głównej (wyświetlane przez ) i wyświetlałem je u góry (podobnie do polecanych postów, które widzimy w wielu witrynach opartych na WordPressie).

Napisz następujący kod do swojego index.php :

 <?php

query_posts('posts_per_page=1');

while(have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_fragment(); ?>&lt;/p>
</div>

<?php koniec; wp_reset_query(); ?>

Jak widać, Używam pętli while i ustaw liczbę stanowisk do jednego przy użyciu post_per_page. Ten wiersz wyświetli tylko najnowszy wpis na blogu u góry strony, a po zamknięciu pętli zapytanie query_posts zostanie zresetowane.

Klasa jumbotron jest zdefiniowana w pliku bootstrap.min.css . Użyję go do stylizacji polecanych postów za pomocą tagów <h2> i the_permalink(); funkcjonować. Hiperłącze jest tworzone w tytule posta, a the_permalink(); Linki funkcyjne do adresu URL całego postu. Aby wyświetlić fragment wpisu, użyłem innej wbudowanej funkcji WordPressa, the_excerpt();.

Krok 7: Lista kategorii

Wymienię teraz kategorie po lewej stronie strony głównej. Stworzę kilka instancji div stylizowanych na klasy Bootstrap i funkcję WordPress wp_list_categories(); .

Wklej następujący kod w index.php :

 <div class="panel panel-default panel-body">
<div>
<div>

<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

</div>
</div>
</div>

Spowoduje to wyświetlenie kategorii według nazwy z ładnym efektem najechania.

Krok 8: Wyświetl najnowsze posty i autorów

Na koniec pokażemy najnowsze wpisy na blogu na stronie głównej. Mamy zamiar rozpocząć kolejny znacznik div i pod tym div użyjemy podobną technikę pętli natomiast, że użyty w Prezentowany wpis, ale nie mamy zamiaru ograniczyć ją query_posts (); .

 <div>

<?php while(have_posts()) : the_post(); ?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_fragment(); ?></p>
<p> wysłane przez <?php the_author(); ?>

<?php koniec; wp_reset_query(); ?>

</div>

WordPress działa the_author() ; i pobierz nazwę użytkownika autora posta. Możemy go wykorzystać do dynamicznego wyświetlania nazwiska autora przy każdym poście.

Po pomyślnym zakończeniu wszystkiego otrzymasz stronę podobną do tej, którą widzisz na powyższym obrazku.

Dodawanie Bootstrapa do istniejącego motywu WordPress

Jeśli używasz motywu WordPress, który nie jest responsywny, możesz dodać Bootstrap, aby był przyjazny dla urządzeń mobilnych. Możesz korzystać z WordPressa i Bootstrapa na dwa różne sposoby.

Dodawanie Bootstrapa za pomocą CDN

Możesz zacząć używać elementów Bootstrap, po prostu dodając ich CDN do pliku header.php.

Uwaga: Ta metoda może powodować problemy ze zgodnością, dlatego przed dodaniem poniższego kodu należy wykonać pełną kopię zapasową.

 <!-- Najnowsze skompilowane i zminimalizowane CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- Ostatni skompilowany i zminimalizowany JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Dostęp do pliku header.php można uzyskać za pomocą FTP lub za pomocą wtyczki. Powyższy kod zawiera zminimalizowane wersje plików CSS i JS, które oferują lepszą wydajność.

Dodawanie Bootstrapa do functions.php

W tej metodzie musisz pobrać bibliotekę Bootstrap. Prześlij pliki Bootstrap.min.css i Bootstrap-theme.min.css do folderu CSS motywu i prześlij plik Bootstrap.js do folderu motywu o nazwie „js” Twojego motywu WordPress.

Teraz przejdź do pliku functions.php, aby umieścić te skrypty w kolejce.

Dodaj następujący kod do pliku functions.php.

 funkcja reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'skrypt startowy', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

Możesz także pominąć część przesyłania i bezpośrednio umieścić w kolejce CDN ładowania początkowego w ten sposób.

 funkcja my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Zapisz plik i prześlij go z powrotem na serwer.

Co dalej?

Ten samouczek koncentruje się głównie na tworzeniu podstawowego motywu WordPress z szablonu HTML i sprawieniu, aby był responsywny za pomocą Bootstrap 3.x. W przyszłych postach będę tworzyć więcej stron takich jak single.php, front-page.php i functions.php. Wyjaśnię również, jak importować arkusze stylów i JavaScripty z pliku functions.php.

Jeśli potrzebujesz pomocy, po prostu opublikuj komentarz poniżej, a ja skontaktuję się z Tobą.