Nhận thấy việc sử dụng thiết bị di động ngày càng tăng, kể từ cuối tháng 2015 năm XNUMX, Google đã phạt các trang web có trang chưa sẵn sàng cho thiết bị di động. Hậu quả đối với bạn SEO, bạn cần đảm bảo rằng trang web của bạn hiển thị tốt trên cả màn hình lớn và màn hình nhỏ.
Trong bài viết này, tôi sẽ chỉ cho bạn cách bạn có thể đưa trang web của mình vào trang bằng quy tắc @media của CSS3.
Điều quan trọng cần lưu ý là các thuật ngữ “đáp ứng” và “tương thích với thiết bị di động” thường được sử dụng thay thế cho nhau mặc dù có sự khác biệt về ý nghĩa thực sự của chúng. Việc hiểu từng phương tiện là gì quan trọng để có thể đảm bảo rằng trang web của bạn đáp ứng các tiêu chí cần thiết để phù hợp với tất cả các kích thước màn hình.
Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn
Sau đó, hãy trở lại lý do tại sao chúng ta ở đây.
Khả năng tương thích và tương thích với điện thoại di động
Trang web không không đáp ứng cũng không tương thích với điện thoại di động, được hiển thị giống nhau trên tất cả các màn hình, tức là phiên bản dành cho màn hình lớn được hiển thị ở mọi nơi. Trên màn hình nhỏ hơn, bạn phải cuộn trang theo chiều ngang để xem tất cả nội dung của chúng. Chúng rất khó điều hướng trên các màn hình này.
Khám phá những Plugin 8 WordPress để tùy chỉnh giao diện trang web của bạn
Một trang web là tương thích điện thoại di động khi nó chỉ đáp ứng mức tối thiểu nghiêm ngặt để được nhìn thấy trên thiết bị di động, điều này không làm cho nó trở thành một trang web đáp ứng. Ví dụ: một trang web có thể được coi là tương thích với thiết bị di động nếu bạn không phải điều hướng theo chiều ngang. Điều này làm cho các yếu tố của nó trở nên nhỏ và không thể phân biệt được. Sau đó, bạn phải phóng to để đọc nội dung của nó.
Về phía họ các trang web đáp ứng thích ứng hoàn hảo với các kích thước màn hình khác nhau. Họ xác định lại các yếu tố của mình để có thể dễ dàng nhìn thấy và sử dụng chúng trên màn hình nhỏ hơn. Đây là kiểu thiết kế bạn muốn cho trang web của mình.
Xem thêm 10 WordPress plugins để tạo một mẫu đặt phòng trên trang web của bạn
Bây giờ bạn biết sự khác biệt giữa đáp ứng và tương thích-di động. Bây giờ chúng ta sẽ thấy quy tắc @media của CSS3 cho phép bạn cập nhật trang web của mình để đáp ứng hoặc tạo khá dễ dàng Chủ đề WordPress với nội dung đáp ứng.
Quy tắc @media từ CSS3
Để làm cho chủ đề của bạn phản ứng nhanh, bạn sẽ cần quy tắc @media của CSS3. Về cơ bản, nó cho phép bạn xác định các kiểu bạn muốn sử dụng cho một loại (kích thước) màn hình cụ thể. Bạn sẽ sử dụng nó giống như một quy tắc CSS khác (có dấu ngoặc nhọn) với sự khác biệt duy nhất là nó chứa các quy tắc CSS khác.
@media media-type (expression) {css-test-selector {property1: value1; property2: giá trị2; }}
Trong cấu trúc này, các phần tử bên trong quy tắc @ phương tiện truyền thông chỉ hoạt động khi loại-of-truyền thông được chỉ định đã được phát hiện thành công. Loại phương tiện được chọn, bạn có thể chỉ định các đặc điểm về kích thước.
Khám phá Cách áp dụng giao diện và trải nghiệm người dùng cho WordPress
Quy tắc @media phát hiện cho bạn loại màn hình mà trang web của bạn được truy cập và chọn các quy tắc phù hợp nhất với loại màn hình này. Tất cả các trình duyệt chính đã tích hợp quy tắc @media.
Đây là danh sách cho thông tin của bạn: cơ rôm , Safari, Firefox, IE, Opera et Cạnh.
Xác định màn hình mục tiêu
Nếu bạn muốn sửa đổi một theme WordPress hiện có, vui lòng tạo một bản sao lưu CSS của cái sau để có thể quay lại nếu cần.
Đọc bài viết của chúng tôi về Cách tải dần bình luận Facebook và Disqus
Như chúng ta đã thấy trong cấu trúc của nó, để xác định loại màn hình, bạn phải chuyển tiếp @media loại màn hình được nhắm mục tiêu. Dưới đây là danh sách các loại màn hình khác nhau:
– tất cả các : cho tất cả các loại màn hình hoặc cho các kích thước được chỉ định trong biểu hiện
– màn : cho tất cả các màn hình, cho dù điện thoại di động, máy tính bảng, máy tính xách tay hoặc máy tính để bàn
– in : dành cho máy in, nếu bạn muốn kiểu cụ thể cho các trang có thể in
– phát biểu : dành cho trình đọc màn hình, nếu bạn muốn kiểu cho người khiếm thị.
Cũng có những toán tử mà bạn có thể đặt trước loại màn hình; như không để hiển thị các kiểu cho màn hình có kiểu khác với kiểu được chỉ định hoặc có thể để chỉ áp dụng kiểu cho các màn hình được chỉ định. Do đó, bạn có thể có:
màn hình chỉ có @media
Xác định kiểu cho kích thước màn hình
Bạn có thể sử dụng biểu hiện để cung cấp thông tin chi tiết về các đặc điểm của màn hình. Sau @media vào và theo sau là biểu thức. Nếu bạn đang sử dụng nhiều biểu thức, tất cả chúng phải được phân tách bằng và. Dưới đây là một ví dụ về cấu trúc:
@media only screen and (max-width: 640px) {selector-css-example {/ * CSS thông thường của bạn tại đây * /}}
Trong ví dụ này, tôi sử dụng max-width với một giá trị 640px. Điều này là để đặt chiều rộng màn hình tối đa bằng kích thước của iPhone hoặc điện thoại thông minh Android nhỏ. Với loại cấu trúc này, bạn có quyền kiểm soát giao diện trang web của mình trên các thiết bị khác nhau. Dưới đây là danh sách các thuộc tính liên quan đến thứ nguyên mà bạn có thể sử dụng biểu hiện :
Khám phá cũng của chúng tôi 8 SEO WordPress plugin để tối ưu hóa SEO của trang web của bạn
– mtrong-width et max-width : tương ứng là chiều rộng tối thiểu và tối đa cần thiết để hiển thị các kiểu có trong quy tắc @media. Thêm một pixel và kiểu không được hiển thị.
– mtrong chiều cao et max-height : tương ứng là chiều cao tối thiểu và tối đa cần thiết để hiển thị các kiểu có trong quy tắc @media. Bởi vì hầu hết các màn hình được thiết kế để hủy đăng ký các trang theo chiều dọc, các thuộc tính min-height et max-height ít được sử dụng
Dưới đây là danh sách các kích thước màn hình cho một số thiết bị đầu cuối:
– IPhone: 640px
- IPad: 1024px
- Máy tính bảng: 1366px
- Điện thoại thông minh Android: 640px, 720px, 854px, 960px
- Android cực lớn: 1024px, 1066px
- Điện thoại Windows: 480
- Điện thoại Windows lớn: 768px
- trẻ và già: 320px
- Ultrabook / Máy tính xách tay: 1366px
- Máy tính để bàn và TV: 1920px
Có nhiều tài sản khác bạn có thể sử dụng trong biểu hiện. Ví dụ: nếu bạn đang nhắm mục tiêu đến máy tính để bàn hoặc màn hình tivi có khả năng hiển thị hình ảnh tỷ lệ khung hình 16: 9, bạn có thể sử dụng cấu trúc như sau:
@media only screen and (min-width: 1920px) and (device-co-ratio: 16/9) {selector-css-example {/ * CSS thông thường của bạn tại đây * /}}
Để có danh sách và ví dụ hoàn chỉnh hơn, hãy tham khảo ý kiến w3schools et Trình phát triển Mozilla.
Kiểm tra chức năng đáp ứng của trang web của bạn
Khi bạn sửa đổi hoặc xây dựng theme WordPress hoặc cuối cùng nếu bạn thích bất ngờ, bạn phải kiểm tra kết quả để xem liệu cuối cùng nó có được đáp ứng hay không. Hãy nhớ rằng, Google theo dõi các trang web không phản hồi.
Xem thêm Các plugin 10 WordPress để tạo các tab trên blog của bạn
Không có tất cả các thiết bị di động mà bạn đang nhắm mục tiêu, có (may mắn cho các sàn giao dịch chứng khoán của chúng tôi) một số công cụ để xem cách trang web của bạn thích ứng với các màn hình khác nhau.
Trực tiếp trong trình duyệt của máy tính bạn có thể sử dụng Tiện ích mở rộng trình duyệt Chrome của Window Resizer, ResponsiveResize, ResizeMe ou Firesizer. Dưới đây là hình ảnh của BlogPasCher trong Chế độ xem thiết kế đáp ứng theo mặc định với Firefox.
Ngoài ra còn có các trang web dành riêng cho nhiệm vụ:
Trang web này có điểm đặc biệt là cho phép bạn tự chọn kích thước màn hình. Xin lưu ý rằng trang web này tải trang web của bạn trong một khung. Vì vậy nếu bạn theme WordPress được thiết kế để không hiển thị trong khung nên rất có thể nó sẽ không hiển thị ở đây.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Trang web này rất thú vị để thử nghiệm trang web của bạn trên các thiết bị Apple, iPad và iPhone mới nhất. Chỉ cần nhập url của bạn. Lưu ý rằng nó có cùng vấn đề về khung hình như responsivepx.
Trong trang web này, bạn có thể kiểm tra trên màn hình nhỏ và trên các mẫu điện thoại cũ hơn mà bạn chọn ở bên phải màn hình. Bạn cũng có thể cấu hình một số thuộc tính màn hình.
Thử nghiệm thân thiện với Google Mobile
Đây là một trong những bài kiểm tra quan trọng nhất, nếu không muốn nói là quan trọng nhất. Chỉ cần nhập địa chỉ của bạn vào thanh và nhấp vào Phân tích để bắt đầu thử nghiệm. Sau khi kiểm tra, công cụ sẽ hiển thị một báo cáo và điểm số. Nếu kết quả là dương tính thì càng tốt, bạn sẽ không bị Google phạt.
Nếu bạn không phải là nhà phát triển, tôi khuyên bạn một danh sách các chủ đề WordPress đáp ứng để bắt đầu.
Tài nguyên đề xuất
Đồng thời khám phá các tài nguyên được đề xuất khác sẽ giúp bạn thu hút đối tác và người đăng ký của mình tốt hơn, đồng thời cải thiện tính bảo mật của trang web của bạn.
- Làm thế nào để tạo liên kết tùy chỉnh các khóa học trên WordPress
- Các plugin 5 WordPress để thêm đánh giá của khách hàng vào blog của bạn
- Cách tạo vòng quay may mắn cho phiếu giảm giá trên WooC Commerce
- Khám phá các Ưu đãi & Phiếu giảm giá tốt nhất cho Blog của bạn
Kết luận
Đây ! bạn biết mọi thứ cần biết về cách làm cho trang web hoặc chủ đề WordPress của bạn đáp ứng bằng cách sử dụng quy tắc @media của CSS3. Nếu chúng tôi bỏ lỡ một chủ đề WordPress mà bạn yêu thích hoặc bạn thích, vui lòng để lại liên kết trong phần ý kiến bên dưới.
Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Chúng tôi cũng mời bạn đến chia sẻ trên các mạng xã hội khác nhau của bạn.
...
