Mình đã có ý định viết bài hướng dẫn cách chia sẻ code trên bài viết của WordPress từ lâu nhưng vẫn chưa thực hiện được. Hôm nay, Sáu sẽ hướng dẫn cho bạn cách dùng Gist GitHub để thay thế cho các plugin hiển thị highlighting cho source code.
Ngoài ra, cũng vì theo yêu cầu của một số bạn đã gửi cho mình, đặc biệt là câu hỏi của bạn Minh Nhựt đã gửi cho mình tại bài viết Nhận biết thiết bị di động cho WordPress.
Mục lục nội dung
Giới thiệu Gist
Gist là dịch vụ chia sẻ code trực tuyến của GitHub, nó tương tự như một loại mạng xã hội nho nhỏ. Mọi người có thể chia sẻ code cho nhau, hoặc chỉ đơn giản là lưu trữ code trên trang này và chỉ cho phép một mình bạn được xem
Dịch vụ lưu trữ mã nguồn mở của GitHub đã được rất nhiều người sử dụng. Bạn có thể upload dự án của bạn lên đây và mời nhiều người cùng tham gia vào coding.
Tại sao lựa chọn Gist
Có thể bạn sẽ hỏi rằng hiện đang có rất nhiều plugin giúp WordPress hiển thị source code trên bài viết, tại sao lại không dùng mà phải lựa chọn kiểu nhờ hosting khác rồi share lại trên trang của mình?
Vâng, đúng là đang có nhiều plugin khác nhau cho phép bạn làm việc này. Nhưng đặc điểm chung của các plugin này đều có sử dụng nhiều mã javascript cũng như css và các tính năng hỗ trợ khác, trang của bạn sẽ load lâu hơn một chút nếu như bạn sử dụng các plugin như Crayon Syntax Highlighter, WP-Syntax,…
Mặc khác, so với kiểu chia sẻ lại code trong bài viết thì cách viết code trực tiếp trong bài viết sẽ lại cho nội dung lưu trữ trên cơ sở dữ liệu lớn, trong quá trình sử dụng các plugin mà Sáu nói trên thì mình đã gặp phải nhiều vấn đề đối với quá trình SEO trên blog, đôi khi sẽ có hiện tượng là nội dung không được hiểu là code viết lại trong bài viết mà chúng sẽ là đường dẫn trên trang của bạn, kết quả sẽ có lỗi 404 trên Google Webmaster.
Cách sử dụng
Cách sử dụng Gist rất đơn giản, vì đây là dịch vụ con của GitHub nên bạn phải có tài khoản trên trang của họ.
Hãy đăng ký ngay một tài khoản miễn phí và bắt đầu chia sẻ code. Bạn có thể tạo ra nhiều tập tin chứa code khác nhau trên trang này, và mỗi tập tin sẽ có một đường dẫn có chứa id riêng.
Sau khi có tài khoản và bạn đã tạo thử một tập tin php hay là css trên dịch vụ Gist của GitHub, bạn hãy chú ý tới cách embed của nó. Nếu bạn biết viết shortcode cho WordPress thì bạn có thể tự làm lấy, nhưng nếu bạn không biết thì cũng đừng lo vì đã có plugin khác hỗ trợ việc này.
Bạn hãy tìm plugin với tên Embed GitHub Gist hoặc bạn tải trực tiếp từ link mà Sáu cho ở đây. Sau khi cài đặt xong thì bạn chỉ cần đọc hướng dẫn của họ và sử dụng.
Và bên trên là demo Sáu đang sử dụng trên Blog Học WordPress, bạn có thể chỉnh sửa lại một vài thông tin css để code hiển thị đẹp theo ý của bạn.
Tóm lại
Việc chia sẻ code là chuyện hay làm trên các blog hướng dẫn có liên quan đến lập trình, Gist là dịch vụ rất tốt cho bạn sử dụng. Bạn có thể dùng nó để thay thế cho các plugin syntax đã mang tiếng là tải nặng trên trang của bạn. So với các plugin kia, cách này nhanh hơn, tiện hơn và tốt hơn theo ý kiến riêng của mình.
hay, thx mod nhiều nhé :3
Rất kết dịch vụ này, quản lí phiên bản tốt. Mình dùng cái này để quản lí code khi làm việc trong nhóm.
Đúng vậy, quản lý làm việc nhóm trên này thì tốt phải biết. I love GitHub.
Nhưng khi nhúng vào wordpress thì có vẻ không tốt cho SEO vì mình thấy nội dung của page html ko có nội dung như bài viết hiển thị.
Bạn có thể dùng các plugin Syntax Highlighter để viết source code lên WordPress.