W artykule:
WordPress.org ma tak wiele tematów, że jesteś zobowiązany do znalezienia idealnego dla siebie.
A jeśli nie?
Co zrobić, jeśli znajdziesz motyw, który jest prawie idealny, ale nie ma takiego szablonu strony o pełnej szerokości, jakiego potrzebujesz do strony docelowej lub o stronie – a może w ogóle go nie ma?
Nie martw się, możesz łatwo edytować dowolny motyw, aby utworzyć nowy szablon, który jest idealny dla Twoich potrzeb. Wystarczy kilka prostych zmian i jesteś gotowy do pracy.
W dzisiejszym poście omówię, jak zachować nowy szablon przyjazny dla urządzeń mobilnych z kolumnami, CSS3 i frameworkiem Twitter Bootstrap, jeśli masz responsywny motyw. Nawet jeśli tego nie zrobisz, będę cię osłaniał.
Pierwsze Kroki
Upewnij się, że wykonujesz pełną kopię zapasową swojej witryny przed kontynuowaniem, aby upewnić się, że Twoja witryna jest Bezpieczna na wypadek, gdyby coś poszło nie tak.
W ten sposób będziesz w stanie wykonać przywracanie i przywrócić wszystko do stanu, w jakim było, aby spróbować ponownie.
Istnieje wiele narzędzi, które mogą ci w tym pomóc, takich jak nasza wtyczka do migawek, VaultPress lub ręcznie przez FTP. Po utworzeniu kopii zapasowej możesz przejść do następnego kroku.
Tworzenie nowego szablonu
Aby utworzyć nowy układ strony, musisz uzyskać dostęp do plików motywów i otworzyć i edytować strona.php.
Jeśli używasz cPanel, kliknij przycisk ” Edytuj „na górze strony, a następnie przycisk” Edytuj ” w wyświetlonym okienku – jeśli wcześniej go nie wyłączyłeś.
Wybierz i skopiuj całą zawartość pliku, a następnie zamknij go.
Z powrotem w menedżerze plików wybierz przycisk” Nowy plik „w lewym górnym rogu i wprowadź nazwę pliku w wyskakującym okienku, które się pojawi, a następnie kliknij przycisk” Utwórz nowy plik”.
Najlepiej wpisać nazwę, która odnosi się do tego, co chcesz utworzyć. W tym przypadku wpisałem pełna szerokość.php ale możesz wpisać to, co Ci najbardziej odpowiada. Tylko pamiętaj, aby nie zapomnieć o .php przyrostek i upewnij się, że wprowadzona nazwa nie ma spacji lub szablon nie będzie działał.
Znajdź nowy plik na liście i kliknij na niego, a następnie przycisk „Edytuj” na górze strony. Ponownie, jeśli nie wyłączyłeś wyskakującego okienka, kliknij przycisk” Edytuj”, który się pojawi.
Na stronie edycji wklej kod z strona.php plik i zapisz plik.
Edytuj Swój Nowy Szablon
Na szczycie swojej pełna szerokość.php plik przed całym kodem musisz nazwać swój szablon, aby WordPress rozpoznał go poprawnie. Dodaj poniższy kod, aby tak się stało:
Usunąłem wszystkie inne komentarze wspominające, że jest to domyślna strona w temacie, którego używam, ponieważ jest teraz niepotrzebna, ale zostawił nienaruszony nagłówek. Oto, co na szczycie pełna szerokość.php plik wygląda teraz:
Nie martw się, jeśli Twój plik wygląda nieco inaczej w zależności od używanego motywu.
Teraz musisz znaleźć następujący kod, który będzie na początku lub na końcu nowego szablonu. Śmiało, Zdejmij to.
Używam base WP wykonany z mistrzowskiego motywu podkreślenia, aby pokazać, co edytować, ponieważ stanowi świetny przykład.
Ponieważ jest to responsywny motyw, który używa kolumn w swojej strukturze, wystarczy dostosować szerokość kolumny do żądanej długości. W oryginalnym kodzie było 12 kolumn, które zmieniłem na 16, Jak pokazano poniżej w pierwszej linii tego fragmentu kodu:
Zapisz plik i Aktywuj motyw dla swojej witryny. Przejdź do ekranu edycji jednej ze swoich stron i wybierz szablon” pełna Szerokość”, który jest teraz Wymieniony i zaktualizuj post.
Podczas odwiedzania strony zobaczysz świetnie wyglądający obszar zawartości o pełnej szerokości. Jeśli nie wygląda na odpowiednią długość dla Ciebie, śmiało i zmień liczbę kolumn, aż będzie do Twoich potrzeb.
Oto jak to wygląda:
Testowanie go pokazuje, że nadal jest w pełni responsywny i wszystko wygląda świetnie. Jeśli ci się to nie podoba, Zmień wartości, aż będzie dobrze.
Co jeśli twój motyw nie zawiera tego rodzaju kodu? Istnieją podobne struktury dla różnych typów ram. Pokażę Ci, jak się nimi poruszać.
Edycja Szablonów Bootstrap
Dzięki frameworkowi Bootstrap zauważysz linie takie jak < div class = "col-sm-4"> i podobne w pliku szablonu strony. W div kontenera, kolumny są określane jako pułkownik- po którym następuje wartość. Poniżej znajduje się krótkie odniesienie do rozmiarów kolumn.
- col-xs- – Bardzo małe urządzenia o szerokości mniejszej niż 768 px
- pułkownik-sm- – Małe urządzenia i Tablety o szerokości około 768 px
- pułkownik-md- – Średnie urządzenia i komputery stacjonarne o szerokości 922 px
- col-lg- – Duże urządzenia i komputery stacjonarne o szerokości około 1200 px
Kiedy widzisz div kontener z czymś podobnym do poniższego kodu, patrzysz na bardziej szczegółowe opcje rozmiaru, gdzie liczby reprezentują liczbę kolumn zdefiniowanych dla każdego rozmiaru:
Całkowita liczba kolumn, których używasz na rozmiar i stronę, musi dodać do 12-nie więcej, nie mniej. Pamiętaj o tym podczas edycji tych wartości.
Zwiększenie liczby i usunięcie podobnych linii zaraz po tym utworzy jedną kolumnę o pełnej szerokości strony. Następnie wystarczy zwiększyć rozmiar, aby zwiększyć główny obszar zawartości.
Może być również konieczne przeszukanie styl.css plik dla tych samych klas, aby zmienić kilka dodatkowych opcji, chociaż ponieważ rozmiary kolumn są predefiniowane, może to nie być konieczne.
Zabawa tymi wartościami pomoże Ci osiągnąć preferowany rozmiar. Po prostu upewnij się, że wykonasz kilka testów na wielu urządzeniach lub zmienisz rozmiar okna przeglądarki, aby upewnić się, że wygląda świetnie na całej planszy.
Jeśli chcesz uzyskać więcej szczegółowych informacji na temat kodowania Bootstrap, możesz zapoznać się z artykułem W3School ’ s Bootstrap Grid System.
Edycja szablonów CSS3
Twój styl.css plik będzie miał podobną zawartość jak poniższy kod, jeśli Opcje kolumn wprowadzone w CSS w wersji 3 są obecne w Twoim motywie:
Ten kod pokazuje, że w pliku szablonu znajdują się cztery kolumny do identyfikatora zawartości we wszystkich przeglądarkach. W kierunku dołu pokazuje również, że każda kolumna ma szerokość 300px, co daje w sumie 1200px.
Zmiana tych wartości pomoże Ci osiągnąć żądaną stronę o pełnej szerokości, ale powinieneś zmienić identyfikatory na inne, aby uniknąć konfliktów stylizacji z innymi szablonami. Na div kontenery w Nowym pliku szablonu będą musiały być edytowane, aby odzwierciedlić te same zmiany.
Musisz również zwrócić uwagę na marginesy i atrybuty pływające. W szablonach responsywnych zauważysz, że margines jest ustawiony na „auto”, co pozwala przeglądarce zdecydować, który Rozmiar obszaru wokół pola zawartości jest najbardziej odpowiedni do optymalnego oglądania.
Jeśli widzisz jakiś CSS, jak w poniższym przykładzie, obszar zawartości jest ustawiony na przesunięcie w lewo i nie jest wyśrodkowany. Jeśli tak jest, zamień „left” na „none.”
Jeśli zdarzy się to kilka razy w pliku, musisz wyczyścić pływaki za pomocą następującego kodu. Upewnij się tylko, że # content jest zastępowany dowolnym szablonem dla głównego obszaru zawartości.
To prawdopodobnie zajmie kilka prób, aby uzyskać prawo, więc nie zniechęcaj się. Pamiętaj, aby przetestować szablon pod kątem responsywności po zakończeniu.
Jeśli napotkasz problemy po drodze, możesz znaleźć wiele szczegółowych artykułów na temat CSS3 w w3Schools.
Motywy Nie Responsywne
Jeśli zdecydowałeś, że Twoja strona nie będzie wyświetlana na telefonach i tabletach i wybrałeś motyw, który nie jest responsywny, nadal możesz utworzyć szablon o pełnej szerokości.
Po utworzeniu nowego pliku szablonu, który omówiliśmy w pierwszym segmencie, należy dokonać kilku zmian w szablonie i styl.css plik.
Znajdź główny obszar zawartości w pliku szablonu. To tutaj sprawy stają się nieco skomplikowane, ponieważ nie wszystkie motywy nazywają je tak samo. Może być wyświetlany jako < div class = "content">. Niektóre motywy nazywają to „kontenerem” lub coś podobnego.
Zmień nazwę na inną – po prostu upewnij się, że nie ma spacji. Zmieniłem jego nazwę na” full-width”, aby był łatwo rozpoznawalny.
Nie ma znaczenia, czy jest to identyfikator, czy klasa, o ile nie jest używana gdzie indziej na stronie lub w innych szablonach strony, chyba że chcesz, aby wszystkie obszary, które się powtarza, wyglądały tak samo.
Po zakończeniu nowy kontener powinien wyglądać jak fragment kodu poniżej.
W tej chwili twój pasek boczny zniknie z tego szablonu, ale nadal będziesz miał puste miejsce w miejscu, w którym kiedyś był. W następnym kroku to naprawimy.
Zapisz plik szablonu o pełnej szerokości, zamknij go i wróć do menedżera plików w tym samym folderze, do którego udaliśmy się na początku. Znajdź styl.css plik i kliknij na niego, a następnie na „Edytuj” na górze strony w cPanel. Kliknij przycisk „Edytuj” w wyskakującym okienku, jeśli się pojawi.
Teraz musimy znaleźć wszystkie przypadki, w których Stary obszar zawartości jest wymieniony w tym pliku. Przydatna jest tutaj funkcja wyszukiwania stron w przeglądarce.
Skopiuj każdy fragment kodu tam, gdzie się pojawi, wklej do pliku, a następnie zmień jego nazwę na taką samą, jak plik szablonu. Chcesz zwrócić szczególną uwagę na kod, który wspomina o szerokości, taki jak w tym przykładzie:
Po prostu zmień .zawartość do .pełna szerokość dla każdego zestawu kopiujesz i wklejasz, a następnie zapisujesz plik. Nie zapomnij, że oryginalny obszar zawartości może mieć inną nazwę i może być identyfikatorem zamiast klasy.
Zmień szerokość na żądaną długość, a jeśli jest pływak, zmień go na ” brak.”Jeśli to nie wygląda ładnie, Wyczyść pływak, jak wcześniej.
Na koniec zapisz plik i weź szablon do uruchomienia testowego. Jeśli zauważysz, że masz problemy, sprawdź artykuły W3School na temat CSS.
Wniosek
Stworzenie idealnego szablonu pełnej strony nie powinno być teraz takie trudne, nawet jeśli masz responsywny motyw. Może to zająć trochę czasu, aby uzyskać prawo, więc bądź cierpliwy. Kiedy już się z tym uporasz, nie jest to zbyt trudne.
Jeśli jesteś zainteresowany jeszcze więcej informacji na temat tworzenia witryn przyjaznych dla urządzeń mobilnych, sprawdź nasz post: Jak zbudować mobilny motyw WordPress i dlaczego powinieneś.
Jak uczciwie stworzyłeś własny szablon pełnej szerokości? Daj mi znać w komentarzach poniżej.
Tagi:
