5 doskonałe sposoby włamać Twenty Seventeen WordPress Theme

Twenty Seventeen to najbardziej wszechstronny domyślny motyw WordPress, jaki kiedykolwiek widział. Jednak opcje wbudowane w motyw pozostawiają kilka rzeczy do życzenia.

W tym poście pokażę Ci pięć hacków, których możesz użyć, aby Twenty Seventeen był wyjątkowy. Zaczniemy od podstaw i przejdziemy do bardziej wymagających i wpływowych dostosowań.

Zanim przejdziemy do kodu, rzuć okiem na modyfikacje, które zamierzamy pokryć. Jeśli ktoś wpadnie ci w oko, idź prosto do tej sekcji!

• Hack # 1: Jak utworzyć menu linki społeczne
• Hack # 2: Jak zmienić „dumnie wspierane przez WordPressa”
• Hack # 3: Jak korzystać z dynamicznej nawigacji jednostronicowej (ulepszone!)
• Hack # 4: Jak dodać niestandardowy pasek boczny do każdej sekcji strony głównej i każdej strony
• Hack # 5: Jak dodać ogromny wyróżniony obraz do każdego postu i strony

Zanim skończymy, będziesz mógł zamienić Twenty Seventeen w piękną i nowoczesną stronę internetową dla biznesu lub blogowania. Nie wierzysz mi? Spójrz. Oto, co zbudujesz, jeśli zaimplementujesz wszystkie pięć tych hacków:

Gotowy, aby rozpocząć slinging kodu? Bierzmy się do roboty.

#1. Tworzenie menu linków społecznościowych

Dobra, więc ten pierwszy to więcej napiwku niż włamania. Ale jest to dostosowanie do Twenty Seventeen unikalnie własne, więc zamierzamy to pokryć.

Twenty Seventeen zawiera atrakcyjne menu linków społecznościowych w stopce strony.

Problem polega na tym, że więcej niż kilku użytkowników zgłosiło problemy z wymyśleniem, jak dodać swoje linki do sieci społecznościowych do tego menu. Na szczęście jest to naprawdę proste, gdy wiesz, jak to zrobić.

Wszystko, co musisz zrobić, to utworzyć menu z linkami do sieci społecznościowych i przypisać je do lokalizacji Menu linków społecznościowych.

Przejdźmy przez proces.

• Zacznij od otwarcia customizera (Wygląd > Dostosuj).
• Wybierz Menu opcja i kliknij przycisk, aby Dodaj Menu.
• Nazwij to czymś oczywistym, jak „menu linków społecznościowych” i kliknij Utwórz Menu.
• Dodaj link do każdego konta w sieci społecznościowej za pomocą Niestandardowe Linki opcja.
• Zaznacz pole wyboru obok Menu Linki Społecznościowe w Wyświetl Lokalizację sekcji.

Po zakończeniu menu powinno wyglądać mniej więcej tak:

Ostatnim krokiem jest kliknięcie Zapisz I Opublikuj przycisk w Dostosowywaczu, aby zapisać nowe menu. Twoje linki do sieci społecznościowych będą teraz wyświetlane w menu stopki.

To nie było trudne. Przejdźmy do czegoś bardziej wymagającego.

#2. Zmień „dumnie wspierane przez WordPressa”

Istnieją dwa powody, dla których możesz chcieć zmienić tekst w stopce, oświadczając, że Twoja witryna jest „dumnie wspierana przez WordPressa.”

• Może chcesz to rozwinąć i powiedzieć coś w stylu „Proudly powered by WordPress, designed by WebPress Designs, and hosted by LAMPress Hosting.”
• Może chcesz iść w innym kierunku i powiedzieć coś naprawdę chwytliwego, jak „Copyright 2016 MyBiz / Wszelkie Prawa Zastrzeżone .” Nieźle.

Bez względu na twoje powody i cele, nie będziemy oceniać. Powiemy Ci, jak wykonać zadanie.

Pierwszą rzeczą, którą musisz zrobić, to utworzyć i aktywować motyw potomny (podpowiedź: jeśli chcesz naprawdę. łatwy Przycisk, po prostu pobierz wstępnie zbudowany motyw potomny).

Po utworzeniu i aktywowaniu motywu podrzędnego skopiuj stopka.php plik Od dwudziestu siedemnastu do katalogu motywów potomnych. Następnie otwórz stopka.php i poszukaj tego fragmentu kodu: get_template_part ('template-parts/footer / site',' info');.

Teraz masz kilka opcji. Możesz po prostu skomentować ten wiersz, dodając // tuż przed kodem lub możesz rozważyć zastąpienie go własnym niestandardowym tekstem stopki. Oto kod, który dodałem, aby utworzyć tekst stopki, który widzisz na powyższym obrazku:

#3. Dynamiczna Nawigacja Na Jednej Stronie (Ulepszona!)

W moim poprzednim poście około dwudziestu siedemnastu zawarłem prosty skrypt jQuery, którego można użyć do budowania dynamicznej nawigacji na jednej stronie łączącej różne sekcje strony głównej. Ten scenariusz załatwił sprawę, ale wymagał dopracowania.

W tym poście posuwamy się o dwa kroki dalej. Oprócz tworzenia funkcjonalnej nawigacji jednostronicowej, naprawimy również efekt najechania menu nawigacyjnego i dodamy płynne przewijanie, aby poprawić ogólne wrażenia.

Najpierw zacznijmy od nowego jQuery, który musisz dodać do swojej witryny:

Możesz dodać ten kod do pliku JavaScript załadowanego przez motyw potomny (co jest tym, co zrobiłem) lub użyć wtyczki, która pozwala dodać JavaScript do swojej witryny (co jest tym, co polecam w moim poprzednim poście na dwadzieścia siedemnaście). Upewnij się tylko, że załadowałeś kod po jQuery już się załadował.

Pierwsza część kodu pozostaje niezmieniona od poprzedniego samouczka. Reszta kodu naprawia podświetlanie linku nawigacyjnego. Spójrz na komentarze w kodzie, aby uzyskać pełny obraz tego, co się dzieje.

Ponadto możemy sprawić, że ruch do każdej sekcji będzie znacznie płynniejszy, instalując i aktywując darmową wtyczkę: jQuery Smooth Scroll (dzięki Bojanowi z naszego zespołu wsparcia za tę doskonałą sugestię).

Oczywiście nadal będziesz musiał stworzyć swoje menu nawigacyjne, dodając niestandardowe łącze do każdej sekcji, używając nazwy strony wyświetlanej w tej sekcji.

Na przykład, aby połączyć się z „O nas” sekcji, można utworzyć niestandardowy link i użyć „#about” jako kotwica łącza. Aby uzyskać szczegółowe informacje, zobacz jak dostosować bezpłatny motyw Twenty Seventeen WordPress dla firm.

To wymaga trochę robienia, ale wysiłek jest tego wart. Nie jesteś przekonany? Zobacz Wyniki:

Całkiem nieźle, nawet jeśli sam tak powiem.

#4. Dodaj niestandardowy pasek boczny do każdej sekcji i strony głównej

Twenty Seventeen świetnie wykorzystuje białe spacje, ale wiem, o czym myślisz. Myślisz, że może jest trochę za dużo Biała spacja. Wiesz, co może się przydać? Jeśli możesz dodać różne widżety paska bocznego do każdej sekcji strony głównej, a także dodać paski boczne do stron.

Na przykład załóżmy, że chcesz dodać pole wyszukiwania, listę rozwijaną kategorii i dodatkowe widżety do sekcji bloga na stronie głównej. Z pewnością byłoby miło móc zrobić coś takiego:

Oczywiście nie chcesz, aby te same widżety były wyświetlane w sekcji Informacje. Nie, chciałbyś dodać coś innego w tej sekcji. Teraz, gdy o tym myślę, byłoby naprawdę miło móc wyświetlić jeden pasek boczny w sekcji o stronie głównej, ale różne pasek boczny na rzeczywistym / o nas strona.

Przyjacielu, mam dobre wieści. Możesz dodać niestandardowe sekcje paska bocznego do każdej sekcji strony głównej, a następnie ponownie użyć tych samych lub całkowicie różnych pasków bocznych na każdej stronie witryny. Jednak nie jest to bardzo prosty hack. Jesteśmy z powrotem w obszarze tematycznym dziecka tutaj i będziemy również musieli użyć wtyczki.

Domyślnie Twenty Seventeen nie dodaje pasków bocznych do sekcji strony głównej – ani do żadnych stron. Wyświetla pasek boczny na poszczególnych postach, ale Strony mają surowy, szeroko otwarty, prawie pusty wygląd.

Aby to zmienić i dodać obszary paska bocznego do stron, musimy zrobić kilka rzeczy:

• Skopiuj pliki szablonów, których Twenty Seventeen używa do wyświetlania stron i sekcji strony głównej.
• Dodaj kod paska bocznego do szablonu strony i każdej sekcji strony głównej, modyfikując pliki szablonów.
• Zainstaluj Niestandardowe Paski Boczne.
• Utwórz niestandardowy pasek boczny dla każdej sekcji strony głównej i dla każdej strony, na której chcemy wyświetlić pasek boczny.
• Dodaj pasek boczny do każdej strony, na której chcesz wyświetlić pasek boczny.

Przejdźmy po schodach pojedynczo.

Krok 1: Kopiuj content-page.php, content-front-page.php, oraz content-front-page-panels.php do motywu dziecka.

Znajdziesz Te pliki, przechodząc do wp-contentthemes twentyseventeentemplate-partspage. W tym katalogu zobaczysz trzy pliki. Przyjąłem.

Musisz odtworzyć tę samą strukturę katalogów w motywie podrzędnym, dodając szablon-części katalog do motywu potomnego i zagnieżdżanie a strona katalog w środku. Następnie wklej pliki do strona katalog.

Po zakończeniu struktura katalogu motywu podrzędnego powinna wyglądać następująco:

Krok 2: Dodaj kod paska bocznego do każdego pliku szablonu.

Najpierw otwórz content-page.php i dodaj <?php get_sidebar ();?> tuż przed zamknięciem nagłówek tag, jak to:

Po drugie, otwórz pozostałe dwa pliki szablonów, content-front-page.php oraz content-front-page-panels.php i upuść następujący kod tuż przed zamknięciem nagłówek znacznik w każdym pliku:

Po wstawieniu tego kodu, oto co content-front-page.php oraz content-front-page-panels.php powinien wyglądać jak z dodanym niezbędnym kodem:

Krok 3: Zainstaluj Niestandardowe Paski Boczne.

Darmowa wtyczka niestandardowych pasków bocznych od WPMU DEV jest dostępna od WordPress.org, więc można go znaleźć, wyszukując „niestandardowe paski boczne” z Wtyczki > Dodaj Nowy. Oczywiście, jeśli jesteś członkiem WPMU DEV i masz zainstalowany pulpit DEV WPMU, możesz zainstalować niestandardowe paski boczne z WPMU DEV > wtyczki.

Krok 4: Utwórz niestandardowy pasek boczny dla każdej sekcji strony głównej.

Head to Wygląd > Widżety i utwórz nowy pasek boczny dla każdej sekcji strony głównej.

Teraz zwróć uwagę, ponieważ ważne jest, aby ta następna część była odpowiednia do wyświetlania pasków bocznych strony głównej. Wykonaj następujące kroki, aby utworzyć każdy pasek boczny:

1. Kliknij Tworzenie nowego paska bocznego. Nazwij każdy pasek boczny za pomocą dokładny taka sama nazwa jak nazwa strony. Na przykład, jeśli jedna z sekcji strony głównej jest wypełniona ze strony z tytułem „O nas”, a następnie utwórz pasek boczny o tej samej nazwie: „O nas”.

Kod dodany do szablonów strony głównej w Kroku 2 będzie obserwował dopasowanie tytułu sekcji i tytułu paska bocznego, aby wiedzieć, który pasek boczny ma zostać wyświetlony.

2. Kliknij Zaawansowane-Edycja niestandardowego kodu opakowania i dodaj następujący kod:

• W pierwszym pudełku, Przed Tytułem, dodaj <h2 class = "widget-title">.
• W drugim pudełku, Po Tytule, dodaj < / H2>.
• W trzecim pudełku, Przed Widżetem, dodaj < section id="%1$s" class="widget %2$S">.
• W czwartym polu, Po Widżecie, dodaj < / section>.

Ten kod pasuje do tego, co dodaje Twenty Seventeen przed i po każdym widgecie i tytule widgetu. Zawijając niestandardową zawartość paska bocznego w tym kodzie, upewnisz się, że domyślna stylizacja Twenty Seventeen jest zastosowana do zawartości paska bocznego strony głównej.

3. Teraz możesz dodać zawartość do pasków bocznych. Wybierz z dostępnych widżetów i stwórz niestandardowe paski boczne, które chcesz zobaczyć w każdej sekcji.

Kiedy skończysz. Twoja lista niestandardowych pasków bocznych powinna wyglądać mniej więcej tak, a każdy pasek boczny powinien pasować do jednej z sekcji strony głównej:

Uwaga: widżet Ostatnie posty nie działa z tym dostosowaniem. Jeśli dodasz go do dowolnego obszaru paska bocznego strony głównej, zauważysz, że sekcja, w której się pojawi, ładuje zawartość strony głównej, a nie niestandardową zawartość strony.

Krok 5: Dodaj pasek boczny do każdej strony, na której chcesz wyświetlić pasek boczny.

Teraz przejdź do dowolnej strony, na której chcesz wyświetlić pasek boczny i otwórz edytor stron. Przewiń w dół, aż zobaczysz okno meta panelu bocznego administratora w prawej kolumnie. Z listy rozwijanej wybierz pasek boczny, który chcesz wyświetlić.

Przewiń z powrotem do góry, kliknij Aktualizacja i zobacz stronę. Zobaczysz, że wybrany pasek boczny jest teraz wyświetlany tuż pod tytułem strony.

#5. Dodaj ogromny wyróżniony obraz do każdej strony

Uwielbiam sposób, w jaki obraz nagłówka lub wideo w pełnej wysokości wygląda na stronie głównej Twenty Seventeen. Jednak naprawdę nie podoba mi się sposób, w jaki polecane obrazy są renderowane wszędzie indziej. Zamiast tego wolałbym wyświetlać polecany obraz każdej strony lub posta za pomocą wyświetlacza o pełnej wysokości używanego na stronie głównej.

O to właśnie chodzi w tym hacku i jest to dostosowanie, które spada solidnie do kategorii hack. Nie będę kłamać, kod, który zobaczysz, nie jest piękny, ale — i to jest ważna część-działa!

Pierwszą rzeczą, którą musisz zrobić, to skopiować nagłówek.php od dwudziestu siedemnastu do motywu dziecka. Następnie należy wymienić całą zawartość nagłówek znacznik z następującym kodem:

Następnie musimy dodać trochę CSS do naszego motywu potomnego, aby powielić stylizację wbudowaną w stronę główną Twenty Seventeen i zastosować ją do naszych niestandardowych obrazów nagłówka.

Po prostu wklej ten CSS do motywu dziecka styl.css plik.

Nowy nagłówek.php kod i stylizacja dodana do styl.css zmusi obraz do pełnej wysokości. Jednak ze względu na sposób, w jaki klasy są stosowane i usuwane dynamicznie w Twenty Seventeen, lepka nawigacja nie działa całkiem dobrze. Będziemy musieli dodać trochę jQuery do naszego motywu, aby lepka nawigacja zachowywała się.

Ten kod może być dodany do pliku JavaScript motyw dziecko lub z wtyczką, po prostu upewnij się, że jest załadowany po rdzeń jQuery załadowany.

Super. Teraz, gdy dodasz polecany obraz do postu lub strony, będzie on wyświetlany przy użyciu pełnej wysokości widoku, podobnie jak nagłówek pełnej wysokości na stronie głównej.

Wszystkie hacki w jednym motywie potomnym

Przejrzeliśmy wiele spraw i sprawienie, aby każdy z tych hacków działał poprawnie, może być nieco trudne. Aby ułatwić Ci życie, wszystkie te modyfikacje przekształciłem w motyw potomny i wrzuciłem go na GitHub. Jeśli chcesz, aby wszystkie te modyfikacje działały bez przechodzenia przez proces samodzielnego tworzenia motywu podrzędnego, po prostu Pobierz folder zip release, prześlij go do swojej witryny i aktywuj go.

Ponadto będziesz chciał zainstalować dwie wtyczki-niestandardowe paski boczne i jQuery Smooth Scroll – aby uzyskać dostęp do wszystkich dostosowań opisanych w tym samouczku.

Następnie wystarczy przejść przez proces konfigurowania sekcji strony głównej i niestandardowego jednostronicowego menu nawigacyjnego opisanego w naszym poprzednim samouczku Twenty Seventeen. Następnie dostosuj menu mediów społecznościowych, stwórz tekst stopki według własnych upodobań, dodaj paski boczne sekcji strony głównej,a otrzymasz pełny efekt wszystkich pięciu hacków za dwadzieścia siedemnaście.

Tagi:

• motywy dziecięce
• rozwój
• twenty seventeen
• wordpress theme