Tworzenie pętli WordPress i dostosowywanie CSS

Zakładając, że ukończyłeś Część 1, w tej sekcji będziemy tworzyć pętlę WordPress i dostosowywać CSS. Pętla WordPress to kod PHP używany przez WordPress do wyświetlania treści w Twojej witrynie. Aby edytować pętlę, musisz znać PHP. Jeśli nie, istnieje wiele zasobów dostępnych online, które pomogą Ci nauczyć się podstaw. Kiedy masz podstawową wiedzę na temat PHP, otwórz edytor tekstu i utwórz nowy plik o nazwie loop.php. W tym pliku będziemy tworzyć pętlę WordPress. Pierwszą rzeczą, którą musisz zrobić, to powiedzieć WordPressowi, aby załadował plik header.php, który utworzyliśmy w części 1. Dodaj następujący kod do loop.php: Następnie musimy utworzyć pętlę WordPress. Pętla odpowiada za wyświetlanie całej zawartości Twojej witryny. Robi to, przeglądając wszystkie posty w bazie danych WordPress i wyświetlając je na stronie. Aby utworzyć pętlę, dodaj następujący kod do loop.php: Ten kod sprawdza, czy w bazie danych WordPressa znajdują się jakieś posty. Jeśli istnieją posty, przejdzie przez każdy z nich i wyświetli je na stronie. Teraz, gdy mamy już skonfigurowaną pętlę, musimy dodać do niej trochę zawartości. W tym przykładzie wyświetlimy tylko tytuł i treść każdego posta. Dodaj następujący kod wewnątrz pętli: Ten kod wyświetla tytuł i treść każdego posta. Teraz, gdy mamy skonfigurowaną pętlę, musimy dodać trochę CSS, aby ją ostylować. W edytorze tekstu utwórz nowy plik o nazwie style.css. Dodaj następujący kod do style.css: .post { margin-bottom: 40px; } Ten kod dodaje margines na dole każdego postu. Pomoże to rozmieścić posty na stronie. Teraz, gdy mamy skonfigurowaną pętlę i CSS, musimy dodać kilka dodatkowych plików do naszego motywu. W edytorze tekstu utwórz nowy plik o nazwie footer.php. Dodaj następujący kod do foote

(Część 2) Co Bootstrap robi z motywem WordPress i dlaczego jest tak popularny. Ten samouczek jest drugą częścią serii samouczków, które przeprowadzą Cię przez proces tworzenia od podstaw motywu WordPress za pomocą frameworka Bootstrap CSS. To jest trzecia i ostatnia część naszej dyskusji na temat tworzenia obszaru nagłówka , nawigacji, paska bocznego i obszarów stopki. Aby oznaczyć bloga jako aktywnego, slogan i nazwa bloga będą teraz wyświetlane u góry strony. W obszarze stopki pojawi się widżet o nazwie Footer – Copyright Text. Oto kilka opcji włączenia tej sekcji do WordPressa. Motyw WordPress jest widżetowany przez dodanie do niego dodatkowych widżetów i obszarów widżetów.

Aby uruchomić funkcję bootstrapstarter_widgets_init(), dodaj następujące wiersze do pliku footer.php: footer-copyright-text i sidebar-module-inset. Są tu dwa paski boczne: jeden z szarym tłem, a drugi z czarnym tłem. Kiedy pierwszy raz spojrzysz na szablon startowy, dla górnego widżetu widżetu (Informacje) pojawi się pomarańczowe tło, a jeśli wprowadzisz tytuł, zostanie on automatycznie umieszczony w znacznikach h4. Za pomocą metody dynamic_sidebar() możemy wyświetlić widgety przypisane do obszaru o nazwie Footer – Copyright Text. Utwórz w pełni funkcjonalny pasek boczny bloga, korzystając z instrukcji krok po kroku zawartych w tym samouczku krok po kroku. Finalny plik index.php zawiera wyniki: Funkcja Results, która znajduje się zaraz za obszarem bloga . Jest to ostateczna wersja artykułu, który można pobrać tutaj.

Zawiera również poprawki CSS i dostosowania paska nawigacyjnego i pasków bocznych. Na tej stronie możesz natknąć się na zewnętrzne linki partnerskie, które mogą skutkować wypłaceniem prowizji LyraThemes.com, jeśli z nich skorzystasz. Nie składamy żadnych oświadczeń ani roszczeń dotyczących naszych pisemnych opinii lub recenzji na tej stronie.

Czy możemy użyć motywu Bootstrap w WordPress?

Najprostszym sposobem użycia Bootstrapa w WordPressie jest aktywacja responsywnego motywu , który już go obsługuje. Dzięki Bootstrap możesz go używać bez konieczności pobierania lub instalowania od twórcy motywu, ponieważ framework jest zawarty w wielu ich motywach.

Instalacja motywu lub wtyczki nie jest tak prosta, jak stworzenie strony Bootstrap za pomocą WordPressa. Aby utworzyć motyw WordPress, musisz mieć konto hostingowe WordPress. Wykorzystując Bootstrap jako podstawę, WordPress i Bootstrap mogą ze sobą współpracować. Wiele szczegółów technicznych kryje się pod przyjaznym interfejsem obu systemów. Często nie będziesz w stanie zbudować motywu WordPress od podstaw. Aby poczuć motyw WordPress oparty na Bootstrap, skopiuj kilka niezbędnych plików z poprzedniej wersji. Motyw będzie się nazywał WPBootstrap, a katalogowi zostanie nadana ta sama nazwa (zapisana małymi literami).

Jak mogę dodać Bootstrap do motywu WordPress? Istnieje kilka opcji. Poniżej znajdują się biblioteki Bootstrap CSS i JavaScript, które można włączyć do plików header.php i footer.php. Obraz podglądu można dodać do motywu, przesyłając go do katalogu motywu, a następnie korzystając z pliku screenshot.png. Stworzenie motywu WordPress to dużo pracy, więc polecam kopiowanie plików z innego motywu. Ponieważ Bootstrap ma swój własny zestaw zasad i praktyk, należy również przestrzegać procedury ich uczenia się. W rzeczywistości zarówno WordPress, jak i Bootstrap mają pełne pasji społeczności, więc nigdy nie wiadomo, co będzie dalej.

Czy Bootstrap jest lepszy niż WordPress?

Jeśli dopiero zaczynasz i nie wiesz zbyt wiele o projektowaniu stron internetowych, korzystanie z Bootstrap jest dobrym pomysłem, ponieważ jest łatwy do nauczenia się i używania. Jeśli chcesz poprawić swoje umiejętności projektowania stron internetowych , WordPress może być lepszym rozwiązaniem.

Tworząc witrynę internetową trudno jest wybrać między Bootstrapem a WordPressem. Tutaj omówimy szybkie porównanie Bootstrap i WordPress, a także pełny podział każdego z nich. Korzystając z tej metody, możesz zdecydować się na najbardziej odpowiednią platformę dla swojej witryny. Strony Bootstrap są tańsze do załadowania niż strony WordPress. Strony internetowe zbudowane za pomocą Bootstrap są dostępne z dowolnego urządzenia. Najlepsze witryny WordPress działają najlepiej na dużych ekranach, zarówno na komputerach PC, tabletach, jak i laptopach. Musisz być programistą, aby móc wykonywać SEO na stronie dla swojej witryny lub stron w Bootstrap.

React-Bootstrap to biblioteka, która łączy w sobie moc Reacta i elastyczność Bootstrapa. Bootstrap 4 to solidna platforma z responsywnym designem , spójnym projektem i wszystkimi funkcjami, których jej brakuje. Nie będziesz mieć problemów z uruchomieniem i uruchomieniem, ponieważ jest bardzo prosty w użyciu i łatwy do nauczenia. React-Bootstrap to fantastyczna biblioteka do tworzenia wysokiej jakości, responsywnych aplikacji internetowych.