WordPress có thể đáp ứng được không?
|
Có một trang web đáp ứng là vô cùng quan trọng. Hướng dẫn này đặc biệt quan trọng nếu bạn vẫn đang chạy một chủ đề tĩnh mà bạn muốn đáp ứng Show
Làm như vậy thường có thể dễ dàng hơn so với việc sử dụng một chủ đề đã phản hồi và tùy chỉnh nó để phù hợp với thiết kế của bạn. Tuy nhiên, ngay cả khi bạn chỉ quan tâm đến việc học cách triển khai thiết kế đáp ứng trong điều kiện thực tế, thì đây là bài viết dành cho bạn Cách chuyển đổi chủ đề WordPress của bạn sang thiết kế đáp ứngĐầu tiên, chúng ta cần tìm hiểu những điều cơ bản của thiết kế đáp ứng
Từ đây, chúng ta sẽ tìm hiểu cách sử dụng những điều trên để biến một chủ đề WordPress tĩnh thành một chủ đề đáp ứng Tuy nhiên, xin lưu ý rằng trong khi các nguyên tắc vẫn giữ nguyên, chủ đề của bạn có thể được xây dựng khác với các ví dụ bên dưới Do đó, hãy coi đây chỉ là những nét rộng. Bạn có thể phải thực hiện một số công việc tùy chỉnh cho trang web của riêng mình Công cụ bạn sẽ cầnCác công cụ chúng ta cần để thực hiện điều này đã có sẵn Trước hết, chúng tôi cần một cách để kiểm tra cấu trúc HTML và CSS của trang web của chúng tôi. Công cụ yêu thích của tôi để làm như vậy là Firebug, tuy nhiên, bạn cũng có thể sử dụng Công cụ dành cho nhà phát triển Chrome và Công cụ dành cho nhà phát triển Firefox (Nhân tiện, bạn đã kiểm tra bộ sưu tập các công cụ phát triển của chúng tôi chưa?) Ngoài ra, chúng tôi sẽ phải chỉnh sửa một số tệp PHP và HTML. Một trình soạn thảo văn bản đơn giản như Notepad++ sẽ làm việc này nhưng bạn có thể tìm thấy các tùy chọn khác trong bài viết này Bạn cũng có thể muốn xem xét việc thiết lập trang web của mình trong môi trường phát triển cục bộ để bạn có thể thử nghiệm làm cho trang web phản hồi nhanh mà không gây rối cho trang web trực tiếp của bạn Chúng tôi có một hướng dẫn chi tiết về điều này, ngay tại đây trên Torque Sẳn sàng? 1. Xác định thu phóng mặc địnhBước đầu tiên của chúng tôi là thêm dòng mã sau vào tiêu đề của trang web của chúng tôi Những gì nó làm là yêu cầu các trình duyệt hiển thị các trang của bạn dựa trên chiều rộng của thiết bị, nghĩa là nếu màn hình được sử dụng chỉ rộng 320px, thì trang web sẽ được hiển thị ở cùng kích thước thay vì trở lại kích thước mặc định lớn hơn In WordPress, adding things to the site header this is typically done by editing the header.php file in your theme folder. The code goes between the and tags.Tất cả đã được làm xong? 2. Đặt chiều rộng và chiều cao của phần tử chất lỏngTiếp theo, bạn cần tìm các vùng chứa cho các phần chính của trang web của mình Đối với điều này, Firebug đã nói ở trên rất hữu ích vì nó có thể hiển thị cấu trúc HTML của trang web của bạn bên trong trình duyệt Một chủ đề WordPress điển hình sẽ có các yếu tố sau
Nhiệm vụ của chúng tôi bây giờ là đảm bảo rằng chúng có các định nghĩa về chiều rộng chất lỏng thay vì các định nghĩa tĩnh. Chúng tôi làm như vậy bằng cách thay đổi CSS bên trong biểu định kiểu Ví dụ: hãy bắt đầu với trình bao bọc và nói rằng đây là những gì bạn tìm thấy bên trong biểu định kiểu của mình #wrapper {
width: 900px
}Như bạn có thể thấy, đây là một chiều rộng cố định (900 pixel) mà bây giờ chúng tôi muốn chuyển thành một thứ gì đó linh hoạt. Nó thực sự khá dễ dàng #wrapper {
max-width: 900px;
width: 100%
}Thay đổi này làm gì? Bằng cách đó, trang sẽ trông giống như trước đây trên bất kỳ màn hình nào lớn hơn 900px nhưng chiếm toàn bộ chiều rộng của bất kỳ thiết bị nào nhỏ hơn thế Dễ dàng, phải không? Tuy nhiên, về cơ bản đó là tất cả những gì cần thiết để làm cho một chủ đề WordPress phản hồi nhanh Bây giờ, tất cả những gì bạn cần làm là xem qua toàn bộ cấu trúc trang của mình và biến bất kỳ chiều rộng cố định nào thành chiều rộng linh hoạt bằng cách thay đổi pixel thành tỷ lệ phần trăm. Bằng cách đó, các phần tử trang sẽ tự động thích ứng với kích thước của màn hình mà chúng đang được hiển thị trên đó Tuy nhiên, ma quỷ nằm trong chi tiết, vì vậy đây là một số gợi ý quan trọng
Firebug là bạn của bạn ở đây, vì nó cho phép bạn thực hiện các chỉnh sửa trực tiếp và thử các thay đổi CSS trong khi xem các hiệu ứng trên màn hình Tuy nhiên, tôi có thể nói từ kinh nghiệm rằng có thể mất một lúc cho đến khi bạn tìm thấy tất cả các phép đo cố định Do đó, ngoài Firebug, bạn cũng nên chạy tìm kiếm văn bản bên trong biểu định kiểu của mình để tìm bất kỳ khai báo nào về chiều rộng và trong khi bạn đang ở đó, chiều cao Điều thứ hai là do khi kích thước màn hình được nén, bất kỳ văn bản nào bên trong các phần tử HTML sẽ mở rộng theo chiều dọc Để đảm bảo rằng nó không thoát ra khỏi phần tử chứa nó hoặc bị cắt, bạn cần đảm bảo rằng bạn cũng không có chiều cao cố định. Hoàn toàn không khai báo bất kỳ chiều cao nào hoặc nếu cần, hãy biến nó thành tỷ lệ phần trăm Ngoài ra, một lưu ý nhanh về lề và phần đệm, là khoảng trống xung quanh và bên trong các phần tử HTML. Họ đảm bảo có đủ khoảng cách giữa các thành phần trang và xung quanh nội dung để mọi thứ đều dễ hiểu và dễ đọc Mặc dù có thể hợp lý khi đặt những thứ này theo số lượng tương đối, nhưng nhiều chủ đề ngoài kia (ví dụ: khung Genesis) khai báo chúng bằng pixel Vì những người này biết họ đang làm gì, tôi sẽ làm theo phương pháp của họ. Tuy nhiên, sự lựa chọn là ở bạn Cuối cùng, bạn sẽ có một trang web thích ứng với kích thước của cửa sổ trình duyệt khi bạn thu nhỏ và mở rộng Tại thời điểm này, nhiều thành phần trang có thể sẽ trông bị nhòe với nhau, khác xa với những gì bạn muốn, tuy nhiên, đừng lo lắng, chúng tôi sẽ tìm hiểu thêm về điều đó bên dưới 3. Thay đổi kích thước hình ảnhSau đó, đã đến lúc đảm bảo hình ảnh của chúng tôi được tự động thu nhỏ theo kích thước màn hình Điều này có thể được thực hiện khá dễ dàng bằng cách thêm phần sau vào style. css img {
height: auto;
max-width: 100%;
}Với điều này, bạn tuyên bố rằng hình ảnh sẽ được hiển thị ở kích thước ban đầu cho đến khi phần tử vùng chứa của chúng (hoặc màn hình) đặt giới hạn cho nó Đơn giản mà hiệu quả Tất nhiên, bạn cũng cần xem qua biểu định kiểu để xem có khai báo nào khác đang ghi đè lên điều này không. Tìm kiếm img giúp với điều đó Trong trường hợp bạn cần xây dựng lại hình ảnh ở kích thước mới để phù hợp với thiết kế phản hồi mới của mình, thư mục WordPress có plugin phù hợp để thực hiện việc đó 4. Thực hiện (Quyền) Điểm ngắtSau khi giới thiệu khả năng đáp ứng cơ bản (hay đó là trách nhiệm?), bây giờ chúng ta chuyển sang các điểm dừng cho các thay đổi thiết kế của bạn Đây là những điểm giới hạn mà trang web sẽ thực hiện một số điều chỉnh thiết kế chính để tiếp tục cung cấp bố cục tốt nhất cho người dùng của bạn Hai điều về điều này
Lần đầu tiên bạn thu nhỏ cửa sổ trình duyệt của mình bằng kích thước màn hình điện thoại, có thể đó sẽ không phải là một trang web đẹp Một trong những vấn đề kinh điển tại thời điểm này là các phần tử được đặt cạnh nhau vẫn được hiển thị theo chiều rộng tương ứng của chúng, nhưng trong một không gian nhỏ hơn nhiều, khiến mọi thứ không thể đọc được Do đó, thứ tự đầu tiên trong ngày là làm cho các yếu tố này di chuyển bên dưới nhau Một ví dụ cổ điển về điều này là di chuyển thanh bên bên dưới nội dung bằng cách thay đổi thuộc tính CSS bằng truy vấn phương tiện Điều này có thể trông giống như vậy @media only screen and (max-width: 500px) {
.content {
float: none;
display: block;
width: 100%;
}
.sidebar {
float: none;
display: block;
width: 100%;
}
}
Thêm truy vấn vào cuối biểu định kiểu của bạn. Mã ở trên cũng đảm bảo nội dung của bạn mở rộng trên toàn bộ màn hình và dễ đọc Sau đó, đã đến lúc xem phần còn lại của trang và thực hiện bất kỳ thay đổi CSS cần thiết nào để trang có vẻ đẹp ở định dạng hiện tại Cam kết tất cả các thay đổi đối với truy vấn phương tiện mới tạo của bạn và lưu biểu định kiểu. Tốt lắm Bây giờ bạn có thể từ từ mở rộng cửa sổ trình duyệt ra bên ngoài để xác định khi nào bố cục bắt đầu trông không hấp dẫn và bạn cần điều chỉnh Tại thời điểm này, hãy thiết lập truy vấn phương tiện mới và điều chỉnh thiết kế cho phù hợp Để biết cửa sổ trình duyệt của bạn thực sự lớn đến mức nào, tôi có thể đề xuất Công cụ dành cho nhà phát triển Chrome hoặc plugin Firefox này Sao chép mã ở trên, điều chỉnh khai báo độ rộng tối đa của truy vấn phương tiện và sau đó nhập bất kỳ thay đổi CSS nào bạn cần để triển khai Đảm bảo thêm các truy vấn phương tiện mới ở cuối biểu định kiểu nhưng phía trên biểu định kiểu hiện có Vì các kiểu CSS bên dưới sẽ ghi đè lên các kiểu bên trên chúng, nên điều quan trọng là các truy vấn phương tiện chuyển từ kích thước màn hình lớn hơn sang nhỏ hơn Lý tưởng nhất là bạn nên kết thúc với khoảng 3-5 điểm dừng chính và một trang hiển thị bố cục dễ đọc và hấp dẫn ở mọi kích thước cửa sổ trong đó tất cả các thành phần trang web vẫn nguyên vẹn trong suốt Nó sẽ mất một chút thử nghiệm và sai sót nhưng bạn sẽ hoàn thành nó, tôi chắc chắn 4. Tạo Menu di độngTạo một menu đáp ứng có thể là một trong những phần khó nhất, đặc biệt nếu bạn muốn nó có thể thu gọn được Tuy nhiên, bạn sẽ rất vui khi biết rằng trong trường hợp đó, bạn có một số hướng dẫn và plugin WordPress để giúp bạn giải quyết
Tuy nhiên, một trong những cách dễ nhất để tạo menu cũng có thể sử dụng được trên thiết bị di động là đặt kích thước của nó từ cố định thành linh hoạt. Bằng cách đó, khi không gian thưa thớt, menu sẽ tự gấp lại Bạn có thể phải thêm một số khoảng cách bổ sung (thông qua truy vấn phương tiện) để phù hợp với những người sử dụng ngón tay của họ để truy cập nhưng chỉ vậy thôi Trong trường hợp bạn muốn thứ gì đó phức tạp hơn, bạn có thể sử dụng các tài nguyên được đề cập ở trên 5. Điều chỉnh phông chữTiếp theo, chúng tôi hướng sự chú ý của mình đến nội dung, đặc biệt là văn bản trên trang web của bạn vì rất có thể đến một lúc nào đó bạn sẽ phải loay hoay với kích thước của nó Văn bản tiêu đề đặc biệt thường không vừa vặn trên màn hình nhỏ hơn. Hãy chú ý đến điều này khi bạn xem trang web của mình trên các thiết bị khác nhau và trong các cửa sổ trình duyệt khác nhau Rất may, kích thước phông chữ cũng có thể được kiểm soát dễ dàng thông qua CSS bên trong các truy vấn phương tiện, như thế này @media only screen and (max-width: 450px) {
.site-title, h1 {
font-size: 22px;
}
}Ngoài ra, bạn có thể muốn thay đổi kích thước phông chữ tổng thể tùy thuộc vào kích thước của màn hình mà nó đang được xem trên đó. Varvy có một hướng dẫn tuyệt vời về cách giữ cho văn bản dễ đọc ở các kích thước khác nhau mà tôi hết lòng giới thiệu 6. Những thay đổi khácNhư đã đề cập trong bài viết đầu tiên, thiết kế đáp ứng không chỉ là làm cho mọi thứ vừa với màn hình, mà còn là giữ cho trang web có thể sử dụng được Do đó, ở bước cuối cùng, bạn nên kiểm tra trang web của mình về khả năng sử dụng trên các thiết bị khác nhau Ví dụ: đôi khi có thể ẩn các thành phần trên màn hình nhỏ hơn nếu chúng khó sử dụng nếu không có chuột hoặc phần bị che khuất của trang Đó là một trong những lý do cho sự tồn tại của các menu có thể thu gọn. Không có nhiều bất động sản có sẵn trên màn hình điện thoại. Tôi cũng đã xóa các thanh trượt khỏi phiên bản trang web dành cho thiết bị di động vì chúng hầu như không thể sử dụng được Vì vậy, hãy lướt qua trang web của bạn với những suy nghĩ này trong đầu. Nếu bạn là khách, điều gì sẽ làm cho cuộc sống của bạn dễ dàng hơn? Ngoài ra, trong khi bạn đang ở đó, bạn có thể muốn chạy trang web phản hồi mới của mình thông qua một số công cụ kiểm tra trình duyệt chéo để đảm bảo mọi thứ hoạt động tốt trong các tình huống khác nhau 7. Kết thúc và ăn mừngNếu bạn đã đi xa đến mức này, xin chúc mừng. Trang web của bạn bây giờ sẽ hoàn toàn đáp ứng và thích ứng với mọi kích thước màn hình Bây giờ không quá khó phải không? Tổng hợp…Thiết kế đáp ứng gần như là bắt buộc đối với các trang web ngày nay và may mắn thay, WordPress cung cấp vô số chủ đề tương thích với thiết bị di động theo mặc định Nếu chủ đề của bạn không phải là một trong số họ, đừng bao giờ sợ. Với kiến thức cơ bản của chúng tôi về thiết kế đáp ứng và các mẹo ở trên, giờ đây bạn có thể khắc phục tình trạng này Mặc dù bài viết này chỉ có thể hướng dẫn bạn các nguyên tắc và không đi sâu vào mọi trường hợp có thể xảy ra, nhưng nó cũng đủ để giúp bạn bắt đầu và cho phép bạn tự tìm hiểu chi tiết Đừng lo lắng, bạn sẽ hiểu ngay thôi Trải nghiệm của bạn với việc tạo các chủ đề WordPress đáp ứng là gì? |
