Biorąc pod uwagę rosnące wykorzystanie urządzeń mobilnych, od końca kwietnia 2015 r. Google nakłada kary na witryny, których strony nie są przystosowane do urządzeń mobilnych. Konsekwencje dla Ciebie SEO, musisz się upewnić, że Twoja witryna internetowa wyświetla się przyzwoicie zarówno na dużym, jak i małym ekranie.

wordpress design responsive rules media css3

W tym artykule pokażę, jak możesz umieścić swoją stronę na stronie, korzystając z reguły @media z CSS3.

Należy zauważyć, że terminy „responsywny” i „kompatybilny z urządzeniami mobilnymi” są często używane zamiennie, pomimo różnicy w ich rzeczywistym znaczeniu. Zrozumienie, co to oznacza, jest ważne, aby mieć pewność, że Twoja witryna spełnia kryteria niezbędne do obsługi wszystkich rozmiarów ekranu.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Responsywny i kompatybilny mobilny

Witryny, które nie są ani responsywne, ani kompatybilne - mobilne, są wyświetlane identycznie na wszystkich ekranach, tzn. wersja dla dużych ekranów jest wyświetlana wszędzie. Na mniejszych ekranach musisz przewijać stronę w poziomie, aby zobaczyć całą ich zawartość. Na tych ekranach nawigacja jest trudna. 

Odkryj także te Wtyczki 8 WordPress, aby dostosować wygląd swojej witryny

Witryna jest Komórka kompatybilny gdy spełnia tylko minimalne wymagania dotyczące wyświetlania na urządzeniach mobilnych, co nie czyni z niej responsywnej witryny internetowej. Na przykład witrynę można uznać za zgodną z urządzeniami mobilnymi, jeśli nie musisz nawigować w poziomie. Powoduje to, że jego elementy stają się małe i nie do odróżnienia. Musisz wtedy powiększyć, aby przeczytać jego zawartość.wordpress design responsive rules media css3 2

Po ich stronie strony internetowe czuły idealnie dopasowują się do różnych rozmiarów ekranu. Na nowo definiują swoje elementy tak, aby były łatwo widoczne i używane na najmniejszych ekranach. To jest typ projektu, który chcesz umieścić w swojej witrynie.

Zobacz także nasze Wtyczki 10 WordPress, aby utworzyć formularz rezerwacji na swojej stronie internetowej

Teraz znasz różnicę między responsywnym a zgodnym urządzeniem mobilnym. Zobaczymy teraz regułę @media CSS3, który pozwala na aktualizację witryny pod kątem responsywności lub łatwego tworzenia Motywy WordPress z responsywnymi treściami.

Zasada @media z CSS3

Aby motyw był responsywny, potrzebujesz reguły @media CSS3. Zasadniczo pozwala zdefiniować style, których chcesz użyć dla określonego typu (rozmiaru) ekranu. Będziesz go używać jak innej reguły CSS (z nawiasami klamrowymi), z wyjątkiem tego, że zagnieżdża inne reguły CSS.

@media media-type (wyrażenie) {css-test-selector {właściwość1: wartość1; właściwość2: wartość2; }}

W tej strukturze elementy wewnątrz reguły @ mediów działa tylko wtedy, gdy na rodzaj mediów określone jako pomyślnie wykryte. Wybrany rodzaj mediów, możesz określić cechy pod względem wymiarów.

wordpress design responsive rules media css3 3Odkrywaj Jak zastosować interfejs i wrażenia użytkownika do WordPress

Zasada @media wykrywa dla Ciebie rodzaj ekranu, na którym odwiedzana jest Twoja witryna i wybiera reguły, które najlepiej pasują do tego typu ekranu. Wszystkie główne przeglądarki mają już zintegrowaną regułę @media.

Oto lista informacji: Chrom , Safari, Firefox, IE, Opera et krawędź.

Zdefiniuj ekrany docelowe

Jeśli chcesz zmodyfikować a WordPress istniejącego, proszę wykonać kopię zapasową CSS tego ostatniego, aby w razie potrzeby móc wrócić.

Przeczytaj także nasz artykuł na temat Jak stopniowo ładować komentarze na Facebooku i Disqus

Jak widzieliśmy w jego strukturze, aby zdefiniować typ ekranu, musisz przejść dalej @media typ ekranu docelowego. Oto lista różnych typów ekranów:

- cała kolekcja : dla wszystkich typów ekranów lub dla wymiarów określonych w wyrażenie
- ekran : dla wszystkich ekranów, mobilnych, tabletów, laptopów lub stacjonarnych
- : dla drukarek, jeśli chcesz mieć określone style dla stron, które można wydrukować
- przemówienie : dla czytników ekranu, jeśli potrzebujesz stylów dla osób niedowidzących.

Istnieją również operatory, które można umieścić przed typem ekranu; tak jak nie aby wyświetlić style dla ekranów innego typu niż określony lub tylko aby zastosować style tylko do określonych ekranów. Możesz więc mieć:

@media tylko ekran

Zdefiniuj style wymiarów ekranu

Możesz użyć wyrażenie aby podać więcej szczegółów na temat właściwości ekranu. Po @media wchodzić i po którym następuje wyrażenie. Jeśli używasz wielu wyrażeń, wszystkie powinny być oddzielone i, Oto przykład struktury:

Ekran tylko @ media i (max-width: 640px) {selector-css-example {/ * Twój zwykły CSS tutaj * /}}

W tym przykładzie używam Maksymalna szerokość o wartości 640px. Ma to na celu ustawienie maksymalnej szerokości ekranu odpowiadającej rozmiarowi iPhone'a lub małego smartfona z systemem Android. Dzięki takiej strukturze masz kontrolę nad wyglądem witryny na różnych urządzeniach. Oto lista właściwości związanych z wymiarami, których możesz użyć wyrażenie :

Odkryj także nasze 8 SEO WordPress wtyczek do optymalizacji SEO Twojej witryny

- min szerokości et Maksymalna szerokość : odpowiednio minimalna i maksymalna szerokość wymagana do wyświetlania stylów zawartych w regule @media, Jeszcze jeden piksel i style nie są wyświetlane.

- min wysokości et max-height : odpowiednio minimalna i maksymalna wysokość wymagana do wyświetlania stylów zawartych w regule @media, Ponieważ większość ekranów jest zaprojektowana do rozwijania stron w pionie, właściwości min wysokość et max-height są mało używane.

Oto lista rozmiarów ekranu dla niektórych terminali:

- IPhone: 640px
- iPad: 1024px
- Tablety: 1366px
- Smartfon z systemem Android: 640px, 720px, 854px, 960px
- Android bardzo duży: 1024px, 1066px
- Telefon z systemem Windows: 480
- Duży telefon z systemem Windows: 768px
- młode i stare: 320px
- Ultrabook / laptopy: 1366px
- Komputery stacjonarne i telewizory: 1920 pikseli

Istnieje wiele innych właściwości, z których możesz korzystać wyrażenie. Na przykład, jeśli kierujesz reklamy na komputery stacjonarne lub telewizory, które mogą wyświetlać obrazy o proporcjach 16: 9, możesz użyć takiej struktury:

Ekran tylko @ media i (min-width: 1920px) i (device-proporcje: 16/9) {selector-css-example {/ * Tutaj Twój zwykły CSS * /}}

 Aby uzyskać pełniejsze listy i przykłady, skonsultuj się w3schools et Mozilla Developpers.

Przetestuj responsywną funkcjonalność swojej witryny

Gdy modyfikujesz lub budujesz swoje WordPress lub na koniec, jeśli lubisz niespodzianki, musisz przetestować wynik, aby sprawdzić, czy w końcu jest responsywny. Pamiętaj, że Google obserwuje strony, które nie reagują.

Zobacz także te Wtyczki 10 WordPress do tworzenia kart na swoim blogu

W przypadku braku wszystkich urządzeń mobilnych, na które kierujesz reklamy, istnieje (na szczęście dla naszych giełd) wiele narzędzi umożliwiających sprawdzenie, jak Twoja witryna dostosowuje się do różnych ekranów.

Bezpośrednio w przeglądarce komputera możesz użyć Rozszerzenie przeglądarki Chrome dla przeglądarki Chrome, ResponsiveResize, ResizeMe ou Firesizer, Poniżej znajduje się obraz BlogPasCher w Responsive Design View, który jest domyślnie dostarczany z Firefoksem.

css3-media-firefox-czuły-design-view

Istnieją również strony internetowe poświęcone temu zadaniu:

Responsivepx

css3-media-responsivepx

Cechą tej witryny jest możliwość samodzielnego wyboru wymiarów ekranu. Pamiętaj, że ta witryna ładuje Twoją witrynę w ramce. Więc jeśli twój WordPress został zaprojektowany tak, aby nie wyświetlać się w ramce, więc jest całkiem możliwe, że tutaj nie zostanie wyświetlony.

IPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-media-ipad-peek

Ta witryna jest przydatna do testowania witryny na najnowszych urządzeniach Apple, iPad i iPhone. Po prostu wprowadź swój adres URL. Zwróć uwagę, że występuje ten sam problem z ramką, co responsivepx.

Telefon komórkowy Emulator

css3-media-mobile-phone-emulator

Na tej stronie możesz przetestować swój telefon na małych ekranach i na starszych modelach telefonów, które wybierzesz po prawej stronie ekranu. Możesz także skonfigurować niektóre właściwości ekranu.

Test na Google Mobile Friendly

css3-media-google-mobile w obsłudze testy

To jeden z najważniejszych testów, jeśli nie najważniejszy. Wystarczy wpisać swój adres w pasku i kliknąć Analizować aby rozpocząć test. Po teście narzędzie wyświetla raport i ocenę. Jeśli wynik testu jest pozytywny, tym lepiej, nie zostaniesz ukarany przez Google.

Jeśli nie jesteś programistą, radzę ci lista responsywnych motywów WordPress aby rozpocząć.

Polecane zasoby

Odkryj także inne zalecane zasoby, które pomogą Ci lepiej przyciągnąć partnerów i subskrybentów, ale także poprawią bezpieczeństwo Twojej witryny.

Wnioski

Tutaj! wiesz wszystko, co trzeba wiedzieć o tym, jak sprawić, by Twoja witryna lub motyw WordPress odpowiadał za pomocą reguły @media z CSS3. Jeśli przegapiliśmy motyw WordPress, który jest Ci bliski lub który wolisz, zostaw link w sekcji commentaires poniżej.

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Zapraszamy również do udostępnij w różnych sieciach społecznościowych.

...