NộI Dung
- 1. Luôn coi người dùng là quản trị viên
- 2. Khai thác menu của bạn
- 3. Xử lý phương tiện
- 4. Làm chủ các mã ngắn
- 5. JavaScript giúp chúng ta lành mạnh
WordPress nhanh chóng trở thành một cái tên quen thuộc và là tiêu chuẩn vàng của hệ thống quản lý nội dung. Trong khi việc dựa vào WordPress đang trở thành tiêu chuẩn để cung cấp nội dung, người dùng đang ngày càng sử dụng thiết bị di động để sử dụng nội dung đó. Trên thực tế, vào năm 2015, hơn 50% Internet dự kiến sẽ được sử dụng bởi thiết bị di động. Với việc tải xuống 4G và sử dụng thiết bị di động trong nhà hoặc văn phòng, những người dùng di động này không phải lúc nào cũng bị hạn chế về băng thông kém.
Vậy làm cách nào để chúng tôi đảm bảo rằng trang web được hỗ trợ bởi WordPress của chúng tôi sẽ hoạt động tốt trong khi vẫn duy trì thiết kế đẹp mắt đó trên thiết bị di động, máy tính để bàn và thậm chí cả màn hình rộng lớn? Thiết kế web đáp ứng (đến nay gần trở thành tên gọi riêng của nó), do Ethan Marcotte đặt ra, là một cách xây dựng trang web thích ứng với môi trường xung quanh, đảm bảo thiết kế và chức năng nhất quán cho tất cả các thiết bị và kích thước màn hình.
Chủ đề WordPress đáp ứng có những ưu điểm của nó nhưng cũng có một số yếu tố của WordPress mà chúng ta cần khắc phục. Dưới đây, chúng tôi sẽ trình bày cách khai thác những khả năng đó và ngược lại là cách vượt qua một số trở ngại.
1. Luôn coi người dùng là quản trị viên
Là một nhà phát triển CMS, cụ thể là một nhà phát triển WordPress, bạn luôn phải suy nghĩ về hai loại người dùng cho các trang web mà chúng tôi xây dựng. Điều đầu tiên là hiển nhiên và đó là khách truy cập điển hình của trang web. Loại người dùng thứ hai là quản trị viên người dùng, người chịu trách nhiệm thay đổi nội dung và quản lý phần phụ trợ WordPress.
Việc giao các quyền điều khiển cho một người mới sử dụng internet có thể khó khăn và cho dù bạn có cung cấp bao nhiêu khóa đào tạo thì mọi thứ cuối cùng vẫn đi sai. Tôi đã yêu cầu quản trị viên người dùng làm mọi thứ từ việc thêm hơn 50 trang vào menu thả xuống một cấp để lên lịch cho tất cả các bài đăng của họ để phát hành trong tương lai và tự hỏi tại sao chúng lại 'biến mất' khỏi trang web.
Rất khó để dự đoán những gì quản trị viên người dùng của bạn có thể làm đối với trang web mới sáng bóng của họ, nhưng bạn nên thử và lập kế hoạch cho một số điều dễ dàng hơn. Đặc biệt khi xây dựng một trang web đáp ứng, chúng ta cần phải lên kế hoạch trước. Một số mẹo hay bao gồm:
- Đặt độ sâu của lệnh gọi menu của bạn ngăn menu thả xuống hai tầng biến thành menu thả xuống sáu tầng bị hỏng.
- Xác định chiều rộng và chiều cao của hình ảnh để WordPress có thể thực hiện công việc tự động thay đổi kích thước và cắt hình ảnh nếu cần.
- Ngăn chặn quyền truy cập vào các trình cắm để ngăn cài đặt mã xung đột
- Enqueue Scripts để ngăn chặn xung đột sau này.
2. Khai thác menu của bạn
Tôi nhớ khi WordPress thông qua menu và đó là một ngày tuyệt vời cho các nhà phát triển. Chúng tôi không còn phải tạo ra các giải pháp phức tạp để xây dựng các menu động. Ngày nay, chúng tôi thực sự kéo các trang vào menu, sắp xếp chúng theo cách chúng tôi muốn và thậm chí có khả năng tạo hệ thống phân cấp một cách dễ dàng. WordPress thậm chí còn cung cấp cho chúng tôi khả năng xác định trước các menu để sử dụng trên toàn bộ trang web.
Điều này giúp bạn dễ dàng xác định hai menu, một cho máy tính để bàn và một cho thiết bị di động. Nếu bạn đang xây dựng một trang web lớn với nhiều trang, bạn có thể không muốn hy sinh không gian tiêu đề có giá trị cho một menu điều hướng lớn mà người dùng di động thậm chí có thể không cần.
Với một vài dòng mã, chúng ta có thể xác định menu di động và menu trên máy tính để bàn được sử dụng cho phù hợp.
Các register_nav_menu chức năng sẽ được đặt trong functions.php tệp trong chủ đề của bạn. Bạn có thể đăng ký nhiều menu cùng một lúc. Để tìm hiểu thêm về chức năng này, vui lòng tham khảo WordPress Codex.
Khi chúng tôi tạo menu, chúng tôi có thể chỉ cần xác định cái nào sẽ hiển thị trong chế độ xem trên máy tính để bàn hoặc thiết bị di động.
Trong các tệp chủ đề của chúng ta, chúng ta có thể sử dụng một lớp PHP như PHP-Mobile-Detect để hỏi menu nào sẽ hiển thị hoặc chúng ta có thể chỉ hiển thị cả hai menu và ẩn một menu bằng CSS.
Đối với những thứ đơn giản như menu, tôi có xu hướng sử dụng lớp 'thiết bị di động' và lớp 'máy tính để bàn', sau đó sử dụng truy vấn phương tiện CSS để không trưng bày đúng lớp.
Dấu: Bạn có thể thêm các lớp này trực tiếp vào menu điều hướng cụ thể ngay trong khu vực quản trị. Nếu bạn không thấy tùy chọn cho các lớp học, hãy chuyển đến đầu màn hình, nhấp vào tùy chọn màn hình và kiểm tra các lớp học.
3. Xử lý phương tiện
Một trong những vấn đề phức tạp hơn với CMS và các trang web đáp ứng là nhà phát triển không còn quyền kiểm soát nội dung. Quản trị viên người dùng tiếp quản và thêm nội dung nếu cần. Trong hầu hết các trường hợp, những người dùng này quản trị viên không biết HTML. Khi chúng tôi kết hợp sự thiếu kiến thức HTML này với WordPress luôn thêm thuộc tính chiều rộng và chiều cao vào mọi hình ảnh được chèn, chúng tôi có thể gặp phải xung đột đáp ứng.
Tôi có một giải pháp để ghi đè các thuộc tính này khi hình ảnh và video được chèn vào trình chỉnh sửa nội dung, bên dưới. Tuy nhiên, chúng ta thường sử dụng 'hình ảnh nổi bật' trong các chủ đề của chúng tôi trên trang chủ, trang lưu trữ, kết quả tìm kiếm và trong các thanh bên. Những hình ảnh nổi bật này vẫn được tải lên bởi quản trị viên người dùng nhưng được coi là một giá trị meta hơn là một phần nội dung. Nói cách khác, chúng tôi có thể gọi hình ảnh nổi bật trong các tệp chủ đề của chúng tôi bên ngoài phần còn lại của nội dung.
Chúng tôi không chỉ có thể gọi những hình ảnh này trực tiếp trong các tệp PHP của mình mà còn có thể xác định kích thước đầu ra của chúng và WordPress sẽ tự động thay đổi kích thước và cắt chúng.
Khi chúng tôi đã thêm hỗ trợ chủ đề cho hình thu nhỏ của bài đăng, chúng tôi có thể thêm nhiều kích thước khác nhau bằng cách sử dụng add_image_size chức năng. Bạn có thể đọc thêm về chức năng này trong Codex.
Đoạn mã ở trên bổ sung hỗ trợ chủ đề cho các hình ảnh nổi bật, sau đó xác định tên và kích thước hình thu nhỏ mà chúng tôi cần cho chủ đề này. Tham số cuối cùng hỏi bạn có muốn WordPress cắt ảnh nếu cần thiết hay không. Trong trường hợp này, tôi không muốn hình ảnh bị biến dạng nên tôi đặt nó thành true.
Việc xác định trước kích thước hình ảnh của chúng tôi giúp quản trị viên người dùng của chúng tôi có thể xảy ra lỗi. Nếu không có các lệnh gọi hàm đơn giản này, quản trị viên người dùng có thể đặt ảnh 2400x1800px làm ảnh nổi bật mà trong hầu hết các trường hợp cần phải nhỏ hơn đáng kể. Chúng ta có thể nhanh chóng nhận thấy lợi ích của việc không phải tải một hình ảnh khổng lồ như vậy trên thiết bị di động.
Sử dụng một hàm PHP để xác định loại thiết bị sẽ cho phép chúng tôi cung cấp hình ảnh nhỏ hơn đáng kể cho thiết bị di động và ảnh có độ phân giải lớn hơn cho máy tính để bàn.
4. Làm chủ các mã ngắn
Các mã ngắn cho phép chúng ta tạo các lệnh gọi đơn giản đến các hàm mà không cần phải biết bất kỳ mã nào. Chúng ta chỉ có thể định nghĩa một đoạn mã ngắn là [myshortcode] hoặc thậm chí có các mã ngắn đóng gói như [myshortcode] my content [/ myshortcode].
API Shortcode cho phép cung cấp nhiều chức năng và hỗ trợ thêm chủ đề. API được ghi chép đầy đủ và đọc tuyệt vời.
Trên trang web của mình, tôi sử dụng mã ngắn để xác định các phần tử 'ghi chú' hoặc sang một bên. Trên màn hình máy tính để bàn rộng hơn, ghi chú hiển thị ở thanh bên bên trái nhưng trên thiết bị di động, thanh bên được tích hợp thành một cột duy nhất.
Điều này không hoàn toàn thổi bay mái nhà một cách khéo léo nhưng nó giải quyết được vấn đề cho quản trị viên người dùng. Tất cả những gì tôi đang làm là đóng một div, mở một div khác và sau đó đóng chúng lại. Nếu bạn biết HTML, đây không phải là thách thức lớn (ngoại trừ việc bạn có thể luôn cố gắng ghi nhớ các lớp học của mình). Tuy nhiên, đối với một người không biết HTML, tất cả những gì họ phải làm là gói gọn nội dung của họ vào [note] [/ note].
WordPress thậm chí còn cung cấp cho chúng tôi khả năng sửa đổi thanh soạn thảo và thêm các mã ngắn của chúng tôi vào đó. Việc dễ dàng thêm các mã ngắn và tính khả dụng của chúng cho quản trị viên người dùng khiến chúng trở thành một giải pháp tuyệt vời cho:
- Ẩn nội dung trên thiết bị di động hoặc hiển thị nội dung trên màn hình máy tính để bàn rộng.
- Phân phát quảng cáo (điện thoại di động so với máy tính để bàn).
- Các liên kết mã hóa cứng trong nội dung.
- và nhiều hơn nữa ...
5. JavaScript giúp chúng ta lành mạnh
Chúng tôi đã đề cập đến quản trị viên người dùng nhiều lần. Vì chúng tôi không phải là người nắm giữ tay họ nên chúng tôi phải đảm bảo các trang web chúng tôi xây dựng không bị phá vỡ và chúng tôi không đánh mất khả năng đáp ứng mà chúng tôi đã nỗ lực phát triển.
Khi quản trị viên người dùng chèn hình ảnh vào vùng nội dung hoặc sử dụng oembed để tải lên video, chúng tôi có rất ít quyền kiểm soát đối với các thuộc tính HTML kế thừa sẽ phá vỡ các trang web đáp ứng của chúng tôi. JavaScript và cụ thể hơn là jQuery có thể giúp giảm bớt những tai ương này bằng cách ghi đè lên các thuộc tính chiều rộng được liên kết với các phần tử phương tiện.
Đoạn mã jQuery bên dưới là một tập lệnh đơn giản được sử dụng để xóa thuộc tính 'style' khỏi div được tạo bởi một trình cắm thêm. Trên trang web của tôi có ba nút chia sẻ phương tiện truyền thông xã hội được thêm vào bởi một trình cắm thêm đơn giản mà vì một số lý do đã quyết định sử dụng trong các kiểu dòng. Trong nỗ lực ngăn chặn xung đột với các bản nâng cấp trong tương lai của plugin, tôi không muốn chỉnh sửa các tệp của plugin. Thay vào đó, tôi có thể sử dụng JavaScript để xóa các thuộc tính xung đột.
jQuery có thể được sử dụng để loại bỏ các thuộc tính không cần thiết nhưng được thêm tự động xung đột với nỗ lực của chúng tôi để duy trì phản ứng. Các removeAttr () chức năng có thể được triển khai trên toàn cục hoặc cụ thể tùy thuộc vào cách bạn định nghĩa nó. Chúng tôi cũng có thể sử dụng JavaScript để giúp việc xây dựng các trang web đáp ứng dễ dàng hơn với các công cụ như Modernizr và các công cụ khác giúp phát hiện trình duyệt và loại thiết bị.
Đây chỉ là một số mẹo để giúp bạn khai thác một số chức năng kế thừa của WordPress và cũng để khắc phục một số phức tạp của nó. Một điều tôi muốn để lại cho bạn là Thiết kế web đáp ứng là không phải chỉ về thiết bị di động. Chúng ta có thể làm những điều phi thường với màn hình rộng và tận dụng thêm khoảng trắng đó. Đặc biệt với WordPress, nơi bạn thường có nội dung để dự phòng, việc thêm một cột bổ sung trên các trình duyệt rộng là rất hợp lý. Trên trang web của tôi, bạn có thể thấy trên các trình duyệt rộng, tôi thực sự đưa ra phần nhận xét của mình dọc theo bài viết. Tôi thích điều này vì những người dùng đọc lướt các bài báo có thể biết được nội dung đang được nhận xét đồng thời và chúng tôi lấp đầy màn hình một cách độc đáo.
Nếu bạn đang thảo luận thêm về WordPress, vui lòng liên hệ với tôi trên Twitter. Tôi cũng sẽ tìm hiểu sâu hơn về chủ đề này cả trong một bài báo trên tạp chí .net trong số tháng 5 (227) và cuốn sách của tôi (đang được xuất bản bởi New Riders trong bộ sách 'Voices That Matter') sẽ được lên kệ mùa hè này.
