Jak Bootstrap i WordPress współpracują ze sobą

WordPress i Bootstrap

Większość ludzi prawdopodobnie zna powiedzenie „podciągnij się za buty”. Chociaż powszechnie używa się go w znaczeniu „polegaj na sobie, aby osiągnąć sukces”, wyrażenie to zostało pierwotnie ukute jako odniesienie do czegoś niemożliwego – w końcu nie możesz się podnieść, używając własnych butów.

Ale w przeciwieństwie do popularnego powiedzenia, nie ma nic niemożliwego w korzystaniu z frameworka Bootstrap z usługami hostingu WordPress. Zaprojektowany z myślą o bezproblemowym projektowaniu responsywnych stron internetowych, Bootstrap jest jednym z najpopularniejszych obecnie dostępnych kreatywnych narzędzi internetowych.

W tym krótkim przewodniku wyjaśnimy tajniki WordPress Bootstrap — co to jest, dlaczego jest tak ceniony i jak z niego korzystać.

Czym jest Bootstrap dla WordPressa?

Pierwotnie zaprojektowany przez zespół programistów z Twittera, Bootstrap to platforma typu open source, która pozwala z łatwością tworzyć responsywne, profesjonalnie wyglądające strony internetowe. W szczególności kładzie się nacisk na tworzenie witryn przyjaznych dla urządzeń mobilnych.

W tym kontekście termin „framework” odnosi się do wstępnie napisanej części kodu (w tym przypadku HTML, CSS i JavaScript), której możesz użyć jako punktu wyjścia do projektowania swojej witryny. Filozofia plug-and-play Bootstrap CSS sprawia, że ​​jest to idealne rozwiązanie dla użytkowników, którzy dopiero zaczynają pracować z programowaniem WordPress, ale jest równie przydatne dla doświadczonych programistów. Ponieważ framework jest darmowy i open-source, możesz dodawać lub edytować linie kodu, dostosowując go do swoich indywidualnych potrzeb.

Krótko mówiąc, Bootstrap zajmuje się niektórymi trudnymi, zakulisowymi szczegółami programowania, które pomagają stronie internetowej działać płynnie, pozwalając Ci skupić się na częściach frontonu witryny, które są widoczne dla odwiedzających.

Dlaczego warto korzystać z Bootstrapa w WordPressie?

Bootstrap to wszechstronne narzędzie, które ułatwia tworzenie niestandardowych, responsywnych witryn. Ale nie wierz nam tylko na słowo — nawet międzynarodowe korporacje, takie jak Nintendo i Spotify, używały Bootstrap do tworzenia wspaniałych stron internetowych. Oto kilka z wielu powodów, dla których warto zintegrować komponenty Bootstrap z witryną WordPress:

• Jest ukierunkowany na korzystanie z urządzeń mobilnych — być może, co najważniejsze, szablon Bootstrap ułatwia tworzenie stron internetowych „zoptymalizowanych pod kątem urządzeń mobilnych”. Użytkownicy mobilni stanowią coraz większą część ruchu internetowego — 85% wszystkich Amerykanów posiada smartfony, a 15% dorosłych Amerykanów korzysta z Internetu wyłącznie za pośrednictwem urządzeń mobilnych. Jeśli Twoja witryna nie jest dostosowana do urządzeń mobilnych, tracisz rosnącą grupę demograficzną klientów.

• Jest open-source — Kiedy część technologii jest open-source, oznacza to, że każdy może przeglądać i modyfikować kod źródłowy. Ponieważ kod jest widoczny dla wszystkich, istnieje poczucie przejrzystości. Co więcej, oprogramowanie typu open source jest często bezpieczniejsze, ponieważ społeczność programistów może szybko naprawić wszelkie problemy.

• Pomaga zwiększyć szybkość witryny — Bootstrap promuje rozwój szczupłych, szybko ładujących się witryn. Zamiast polegać na wtyczkach WordPress w celu uzyskania dodatkowych funkcji, możesz użyć frameworka do wbudowania przydatnych funkcji bezpośrednio do niestandardowego motywu WordPress. Dzięki mniejszej liczbie wtyczek Twoja witryna będzie działać szybciej.

• Oszczędza czas i wysiłek — dzięki dziesiątkom gotowych funkcji dostosowywania WordPressa, takich jak przyciski, paski nawigacyjne, akordeony, podpowiedzi i wiele innych, Bootstrap sprawia, że ​​tworzenie pięknych, interaktywnych witryn internetowych jest dziecinnie proste. Cały kod wymagany dla tych elementów jest już napisany, więc możesz poświęcić mniej czasu na programowanie, a więcej na projektowanie niezapomnianej witryny WordPress.

• Łatwo znaleźć pomoc – jako jedno z najpopularniejszych narzędzi do tworzenia responsywnych stron internetowych (ponad 20% stron korzysta z Bootstrap, w tym firmy takie jak Netflix i Target), rzadko natkniesz się na problem, którego ktoś inny nie rozwiązał . Dzięki niekończącym się forom, filmom instruktażowym i dokumentom pomocniczym każdy może nauczyć się opanować Bootstrapa.

• Dba o kompatybilność przeglądarki — korzystając ze zbioru zmian CSS o nazwie Reboot, Bootstrap pomaga Twojej witrynie renderować spójnie w różnych przeglądarkach i urządzeniach, tworząc responsywną witrynę, która będzie promować ogólne wrażenia klientów.

• To nic nie kosztuje — podobnie jak WordPress, Bootstrap jest w 100% darmowy do pobrania i używania.

Top 5 darmowych motywów WordPress na Bootstrap

Najłatwiejszym sposobem na rozpoczęcie korzystania z Bootstrap w WordPressie jest aktywowanie responsywnego motywu WordPress, który już z niego korzysta. Wielu twórców motywów zawiera ramy w swoich motywach, więc możesz skorzystać z Bootstrap bez konieczności pobierania go i konfigurowania.

Jeśli chcesz od razu zacząć eksperymentować z Bootstrapem, masz do wyboru dziesiątki darmowych motywów WordPress. Oto niektóre z naszych ulubionych w przypadkowej kolejności:

1. Futurio

Dzięki szerokiej gamie potencjalnych aplikacji — w tym kreatywnym portfolio, witrynom eCommerce i blogom — Futurio jest doskonałym wyborem zarówno dla profesjonalistów zajmujących się tworzeniem stron internetowych, jak i nowicjuszy. Jest to niezwykle szybko ładujący się motyw, częściowo dzięki użyciu Bootstrap w celu dodania funkcjonalności.

Mając to na uwadze, motyw jest nadal kompatybilny z większością wtyczek WordPress. Co najlepsze, możesz wybrać jedną z ich witryn demonstracyjnych jednym kliknięciem i zainstalować w pełni działającą witrynę w ciągu kilku minut.

Dodaj optymalizację SEO i obsługę wielu języków, a łatwo zrozumieć, dlaczego Futurio znajduje się w pierwszej piątce.

2. Zgrabny

Shapely to jednostronicowy motyw WordPress, co oznacza, że ​​cała zawartość witryny znajduje się na jednej stronie docelowej. Chociaż może się to wydawać niepożądane, witryny jednostronicowe w rzeczywistości zapewniają optymalne wrażenia na urządzeniach mobilnych, ponieważ użytkownicy mogą płynnie przewijać różne sekcje.

Niezależnie od tego, czy chcesz dodać referencje, informacje o produkcie, wezwania do działania, czy więcej, Shapely to ułatwi. Motyw jest w pełni responsywny, przyjazny dla SEO i obsługuje większość darmowych i płatnych wtyczek WordPress.

3. NewsMag

Dla wyrafinowanego bloga, czasopisma lub gazety internetowej jest NewsMag. Ten motyw wykorzystuje moc Bootstrap, aby zapewnić elegancką, adaptacyjną i gotową do SEO witrynę.

Wybierz jeden z czterech różnych stylów stron bloga lub zajrzyj i dostosuj stronę główną do swoich upodobań. Wyróżniające się funkcje obejmują:

• Niestandardowe tła
• Formularze kontaktowe
• Czcionki Google
• Polecane banery postów
• Responsywne wideo
• Dynamiczne widżety
• Suwaki

Nie szukaj dalej niż NewsMag, jeśli chodzi o wszystkie Twoje potrzeby związane z mediami online.

4. Chory

Illdy ma modny charakter, dzięki czemu można go dostosować do każdej firmy lub produktu. A zalety tego motywu nie kończą się na atrakcyjności wizualnej.

Jak na darmowy motyw, Illdy jest niezwykle wszechstronny — potencjalne zastosowania obejmują zarówno blogi osobiste, jak i firmy o ustalonej pozycji. A dzięki Bootstrap, strona zbudowana za pomocą Illdy działa płynnie na smartfonach, tabletach i komputerach stacjonarnych.

Najciekawszym aspektem Illdy jest możliwość rozwijania swojej strony internetowej w trybie „Podgląd na żywo”. Ta funkcja umożliwia przeglądanie zmian w witrynie w miarę ich wprowadzania.

5. Musujące

Sparkling to mistrzowska klasa minimalizmu. Dzięki zgrabnemu interfejsowi, który pasuje do każdej aplikacji lub branży, ten darmowy motyw WordPress jest jednym z najlepszych.

Wraz z projektem przyjaznym dla SEO, Sparkling jest dostarczany z suwakami, popularnymi widżetami postów, integracją ikon społecznościowych i możliwością dodawania biografii autorów. Dzięki ponad 20 dostępnym językom i obsłudze nieskończonego przewijania, Sparkling jest wyraźnym przykładem dobrze wykonanego Bootstrapa.

Jak dodać Bootstrapa do WordPressa

Chociaż nie został zaprojektowany specjalnie dla WordPressa, Bootstrap można dodać do dowolnej witryny WordPress na różne sposoby. Jednak proces ten obejmuje nurkowanie pod powierzchnią WordPressa, więc odrobina wiedzy programistycznej może przejść długą drogę. Mając to na uwadze, opisaliśmy najłatwiejszą metodę tak jasno, jak to możliwe, aby każdy mógł zacząć korzystać z Bootstrap 5 — najbardziej aktualnej wersji frameworka.

Krok 1: Podejmij niezbędne środki ostrożności

Za każdym razem, gdy planujesz wprowadzić zmiany w motywie WordPress — bez względu na to, jak małe — musisz najpierw zrobić dwie rzeczy:

1. Utwórz kopię zapasową swojej witryny — jeśli coś pójdzie nie tak, zawsze możesz zacząć od nowa od ostatniej kopii zapasowej.

2. Utwórz motyw potomny i wprowadź w nim wszystkie zmiany – Edytowanie motywu nadrzędnego w WordPressie jest niewskazane, ponieważ istnieje ryzyko nadpisania kodu w motywie głównym.

Jeśli nie zaczniesz od tych dwóch zabezpieczeń, ryzykujesz utratę wszelkich wprowadzonych zmian lub, co gorsza, spowodowanie, że cała witryna przestanie działać.

Krok 2: Otwórz edytor motywów WordPress

Najpierw zaloguj się do swojego pulpitu WordPress. Stamtąd wybierz Wygląd z menu po prawej stronie, a następnie kliknij Edytor motywów. Przejdź do sekcji Nagłówek motywu (header.php).

Krok 3: Wklej kod referencyjny

Teraz, gdy masz otwarty nagłówek motywu, musisz wkleić wiersz kodu tuż pod tagiem <head>, uważając, aby nie usunąć ani nie nadpisać istniejącego kodu. W chwili pisania tego tekstu kod używany do odwoływania się do Bootstrap to:

<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHQ1oZqori”I

Bootstrap używa jsDelivr CDN do dostarczania buforowanej wersji skompilowanego CSS Bootstrap za pomocą tego kodu. Koniecznie sprawdź stronę Bootstrap i skopiuj najbardziej aktualny arkusz stylów.

Krok 4: Zakończ Up

Pozostało tylko kliknąć niebieski przycisk Aktualizuj plik , wyczyścić pamięć podręczną przeglądarki i ponownie otworzyć WordPress. Masz teraz odniesienie do Bootstrap wbudowane w Twój motyw i możesz zacząć używać go do optymalizacji swojej witryny.

Spraw, aby niemożliwe stało się możliwe dzięki Bootstrap i WordPress

Jeśli korzystasz już z WordPressa jako systemu zarządzania treścią, pokochasz Bootstrap z wielu tych samych powodów: jest darmowy, open-source i potężne narzędzie do tworzenia stron internetowych.

Gdy masz już motyw WordPress z obsługą Bootstrap, idealnym uzupełnieniem jest błyskawicznie zarządzany plan hostingowy WordPress od WP Engine. Mając gotowe rozwiązania internetowe, możesz osiągnąć coś, co wcześniej uważano za niemożliwe — zbudować światowej klasy witrynę internetową bez rozbijania banku.