1. Jak być tymi, którzy mają stare witryny ze stałym układem statycznym?
2. Jak zastąpić stary układ witryny na adaptacyjny
3. Jak pracować z Bootstrapem

Pozdrawiam przyjaciół, któregoś dnia w końcu zrobiłem to, na co byłem leniwy przez ostatnie 2 lata - zaadaptowałem tę stronę na urządzenia mobilne Wyszukiwarki aktywnie informowały webmasterów o potrzebie przejścia na adaptacyjny układ przez kilka lat. I to jest zrozumiałe - udział ruchu mobilnego rośnie skokowo każdego roku. Co więcej, wpływa na to możliwość dostosowania strony do rozdzielczości ekranu mobilnego i rankingów - oficjalnie ogłosili to przedstawiciele Google.

To znaczy jeśli witryna nie jest wyostrzona dla urządzeń mobilnych, po prostu stracisz pozycję w wynikach wyszukiwania w porównaniu z witrynami, które są wyostrzone.

Jak być tymi, którzy mają stare witryny ze stałym układem statycznym?

Niestety, prędzej czy później będziesz musiał zmienić układ, jeśli chcesz pozostać na powierzchni. W WordPress problem wydaje się być rozwiązywany przez regularną zmianę szablonu - korzyści ze wszystkich nowych tematów dla wp są teraz adaptowane.

Ale to rozwiązanie ma kilka poważnych wad:

• Utracisz wszystkie zmiany wprowadzone w starym szablonie - układ i projekt, liczniki i metryki, haki i wszelkiego rodzaju zmiany w kodzie. W rzeczywistości po zmianie szablonu pojawi się nowa, całkowicie surowa strona ze starym tekstem i obrazami.
• Istnieje ryzyko utraty pozycji w wyszukiwarce. Wielokrotnie zauważono, że niektórzy webmasterzy stracili dużo ruchu po zmianie szablonu.

Jeśli cię to nie przestraszyło, idź dalej). Jednak, jak dla mnie, po zmianie schematu pracy będzie znacznie więcej niż po prostu dostosuj stary wzór do systemów mobilnych.

Ponadto istnieją specjalne promocje. wtyczki, które powinny pomóc webmasterowi w optymalizacji witryny pod kątem urządzeń mobilnych. Ale w rzeczywistości rzeczy nie są tak piękne, jak w teorii.

Wcześniej musiałem użyć specjalnej wtyczki WordPress do tych celów (nie będę nawet pisał jej nazwy, ponieważ nie radzę jej używać), ale była bardzo ciężka, a poza tym była wadliwa w czerni: działała, nie działała, w ogóle nie ładowała witryny na urządzeniach mobilnych. W rezultacie, zamiast wygody użytkownika, często traciłem ruch mobilny. Ponadto prawie wszystkie z tych wtyczek są płatne, a w darmowych wersjach zyskujesz zmniejszoną funkcjonalność i otwierasz linki zewnętrzne do sprytnych programistów.

Teraz blog ruskweb.ru posiada własny adaptacyjny układ, łatwy do odczytania z telefonów komórkowych, bez żadnych wtyczek i rowerów o kulach. Wymagało to tylko platformy Bootstrap 3. Oraz kilku nieprzespanych nocy i oczywiście wiedzy struktury wordpress i CSS.

Pobierz Bootstrap 3 jest bezpłatny pod tym adresem. http://getbootstrap.com/getting-started/#download

Sprawdź, jak wygodna jest Twoja witryna dla ekranów mobilnych i tabletów w usłudze Google https://www.google.com/webmasters/tools/mobile-friendly/

Moja witryna ma teraz porządek adaptacyjny

Jak zastąpić stary układ witryny na adaptacyjny

Chcę cię tylko ostrzec - jeśli nie masz przynajmniej średniego poziomu wiedzy CSS i nie jesteś dobrze zaznajomiony z wewnętrznymi elementami WordPressa, nie radzę ci wchodzić w taką dżunglę. Najprawdopodobniej zniekształcasz układ swojej witryny.

Lepiej wydać kilka tysięcy płacąc za freelancera niż stracić dużo nerwów i czasu, aw rezultacie umieścić stronę internetową.

Nawiasem mówiąc, możesz się ze mną skontaktować - mogę pomóc sprawić, by Twoja strona internetowa reagowała na skromną nagrodę =) Napisz do poczty [email protected] lub poprzez formularz zwrotny w kontaktach.

Musisz edytować nie tylko główny szablon, ale także szablony stron postu single.php, strony typu page.php, strony sidebar.php, strony wyników wyszukiwania, strony archiwum (nagłówki, tagi) i inne taksonomie. W zależności od motywu WordPress zestaw może się różnić. Jednak w wielu plikach bloki będą powtarzane, więc po prostu je skopiuj.

Jak pracować z Bootstrapem

Przede wszystkim musisz zrozumieć logikę układu na Bootstrap. Układ strony jest zgodny z tak zwanym modelem siatki - są to 12 równych kolumn, w których można podzielić obszar roboczy witryny.

Cała zawartość witryny wewnątrz ciała powinna być zawinięta w specjalny blok div z klasą .container (lub .container-fluid do układu gumy). Wewnątrz tego kontenera cała zawartość jest zapakowana w div z klasą. Col- , którego rozmiar zmienia się dla 4 zakresów rozdzielczości urządzeń i są oznaczone przedrostkami .col-lg- .col-md-. Col-sm-. Col-xs-:

Po prefiksie dodajemy liczbę od 1 do 12, w zależności od tego, ile „kolumn” powinien zajmować nasz element. Zmieniając prefiksy klasy col, ustawiamy rozmiar i położenie elementu dla różnych rozdzielczości bez żadnej interwencji w CSS.

Na pierwszy rzut oka może wydawać się to zbyt trudne, ale uwierzcie mi, dzięki praktyce docenicie szybkość i łatwość takiego składu w porównaniu z ręczną edycją stylów. Oto kilka przykładów, jak to wygląda w praktyce:

Gdy zobaczysz taki kod, klasa col-md-4 jest dekodowana w następujący sposób: blok do wyświetlania na średnich urządzeniach z rozdzielczością ekranu ≥992px zajmującą 4/12 części elementu macierzystego.

Na przykład pokaż na swojej stronie internetowej. Edytuję stronę index.php strony głównej, dodajemy blok zaraz po opakowaniu

Tak więc przeznaczam na zawartość 8/12 części obszaru roboczego witryny. Reszta 4/12 spadnie na pasek boczny

W rezultacie mam następujące - moja zawartość i pasek boczny zostaną ustawione w 2 kolumnach w rozdzielczościach dla dużych i średnich urządzeń, a gdy tylko rozmiar okna osiągnie 768 pikseli, pasek boczny będzie płynął poniżej głównej zawartości. Dzieje się tak, aby wszystko wyglądało pięknie i harmonijnie na małych ekranach bez poziomego przewijania. W przeciwnym razie blok paska bocznego zmniejszyłby się do niewielkich rozmiarów i stałby się niewygodny podczas czytania.

W tym przypadku między kolumnami znajduje się standardowe wypełnienie, dzięki czemu bloki nie „łączą się”. I tak, nie umieszczajmy tagów zamykających dla naszych div. I chcę natychmiast zauważyć, w niektórych szablonach, otwarcie divy i zamknięcie może być w różnych plikach php.

Jeśli chcesz, możesz ukryć niepotrzebne bloki w wybranej rozdzielczości, dodając klasę .hidden, z prefiksem wymaganego uprawnienia, na którym chcesz ukryć blok.

Naprawdę jest wystarczająco dużo jego niuansów i momentów. Przeczytaj więcej na temat bootstrap tutaj. http://bootstrap-3.ru/css.php lub znajdź online lekcje wideo i artykuły, których jest mnóstwo. Aby się oczywiście uczyć, trzeba spędzać czas. I nie zapomnij zrobić pełnej kopii zapasowej strony przed przystąpieniem do ćwiczeń praktycznych 🙂

To ważne! Mogą występować konflikty ze starymi stylami witryn CSS i stylami ładowania początkowego. Aby je naprawić, możliwe są następujące działania:

1. Usuń stałe rozmiary (głównie szerokość) elementów strony w arkuszach stylów
2. Niektóre identyfikatory i klasy będą musiały zostać zastąpione ładowaniem początkowym lub ręcznie usuwać style zakłócające.
3. Zmień pozycjonowanie lub elementy graficzne w witrynie, które wyglądały dobrze w układzie statycznym, ale nie nadają się do adaptacji
4. Jeśli witryna ma duże tabele, będziesz musiał przy nich majstrować.
5. Sprawdź każdą stronę witryny, koniecznie zmieniając rozmiar okna przeglądarki, aby znaleźć ławice w układzie i je naprawić

Dzięki temu możesz zastąpić przestarzały układ strony adaptacyjnym, bez ręcznego przepisywania tysięcy linii stylów CSS. Po pracy nie zapomnij sprawdzić wyświetlania witryny w serwisie Google i w walidatorze.

Jeśli jesteś zbyt leniwy, aby zrozumieć wszystko lub po prostu nie ma na to czasu, lepiej jest skorzystać z usług specjalistów i dokonać adaptacji, a nawet zamów stronę „pod klucz” całkowicie.