Hướng dẫn chèn code từ github vào wordpress

Hướng dẫn chèn code từ github vào wordpress

Bài viết này tôi sẽ hướng dẫn bạn cách chèn code từ github vào wordpress, một cách nhanh và đơn giản. Giúp bạn có thể làm đẹp đoạn mã khi chia sẻ đến đọc giả ngay trên trang website của mình.

GitHub là gì?

GitHub là một dịch vụ cung cấp kho lưu trữ mã nguồn của Git. GitHub sẽ cung cấp luôn các phiên bản trả tiền và miễn phí cho tất cả các tài khoản. Các dự án của mã nguồn mở sẽ được cung cấp một kho lưu trữ miễn phí. Tính đến tháng 4 của năm 2016, GitHub đã có hơn 14 triệu người dùng sử dụng. Với hơn 35 triệu kho lưu trữ mã nguồn, làm cho github trở thành một máy chủ chứa mã nguồn mở lớn trên thế giới.

Các bài viết liên quan:

Lý do chèn code từ github 

  • Đối với những người hay viết  về blog trên wordpress như mình. Thì việc sự dụng mã (code) để dán vào bài viết là một chuyện rất thường xuyên xảy ra. Đôi khi trong quá trình cắt dán nội dung, chỉnh sửa bài post code thường gặp nhiều lỗi, làm không hiển thị được ra ngoài blog.

Lợi ích của github:

  • Bạn có thể một cách đơn giản hơn .
  • Chèn code dễ dàng hơn .
  • Không cần phải chỉnh sửa từng một bài viết
  • Viện chèn mã code một cách diễn ra dễ ràng hơn bao giờ hết.
  • Khắc phục tất cả các lỗi không hiển thị được hết các code muốn chia sẻ.
  • Làm đẹp cho nội dung bài viết khi được hiển thị trên website.
  • Thao tác chỉnh sửa rất đơn giản bạn không cần phải mất thời gian vào từng bài viết.

CÁCH KẾT NỐI GITHUB GIST SNIPPETS TRONG WORDPRESS

Với EmbedPress, bạn có thể nhúng Mã Github vào WordPress mà chỉ cần sử dụng một URL.

Github là một dịch vụ cực kỳ phổ biến cho phép các nhà phát triển tải lên / cập nhật và chia sẻ mã nguồn trực tuyến.

Có thể nhúng Github nhưng không dễ sử dụng chúng bằng các phương pháp thông thường. EmbedPress thì khác. Với EmbedPress, bạn không phải loay hoay với mã nhúng. Tất cả những gì bạn cần là URL đoạn mã Github.

Dưới đây là cách nhúng bất kỳ Github nào vào trang web WordPress của bạn bằng cách sử dụng plugin EmbedPress.

Hướng dẫn chèn code từ github vào wordpress

Bước 1. Cài đặt plugin EmbedPress

EmbedPress là một plugin rất hữu ích giúp mở rộng và cải thiện các khả năng của WordPress. Cài đặt EmbedPress và trang web WordPress của bạn sẽ trở nên mạnh mẽ hơn rất nhiều. Nhấp vào đây để tìm EmbedPress trên WordPress.org.

Bước 2. Thiết lập tài khoản Github của bạn 

1.Đăng nhập / Đăng ký tài khoản Github của bạn

Hướng dẫn chèn code từ github vào wordpress

2. Viết mã của bạn, đặt tên tệp của bạn với phần mở rộng thích hợp chẳng hạn như “Index.php” như hình dưới đây và nhấp vào nút “Create Public Gist”.

Hướng dẫn chèn code từ github vào wordpress

3. Khi Gist của bạn được tạo, tất cả những gì bạn phải làm là sao chép URL sẽ được sử dụng để nhúng EmbedPress.

Hướng dẫn chèn code từ github vào wordpress

Bước 3. Nhúng Github Gist & Publish #

Bây giờ bạn có URL Github Gist, bạn có thể thêm nó vào WordPress.

1.Truy cập trang web WordPress của bạn.

2.Chỉnh sửa một bài đăng hoặc trang.

3.Thêm URL Github Gist của bạn vào khu vực nội dung, với tab “Trực quan” được bật.

4.Bạn sẽ thấy nền màu tím với thông báo “Đang tải nội dung nhúng của bạn…”:

5.URL của bạn sẽ tự động được chuyển thành bản nhúng Gist Embed của bạn.

Bước 4. Chỉnh sửa Github Gist Embeds # của bạn

Trong khi chỉnh sửa nội dung WordPress, bạn cũng có thể chỉnh sửa nội dung nhúng của mình nhờ EmbedPress.

1.Di chuột qua phần nhúng và một nút màu tím sẽ xuất hiện.

2.Nhấp vào bút chì và màn hình bật lên sẽ xuất hiện với nhiều tùy chọn hơn.

Hướng dẫn chèn code từ github vào wordpress

3. Giờ đây, bạn có thể thay đổi URL nhúng, ngoài ra bạn cũng có thể kiểm soát chiều rộng và chiều cao tối đa của tệp nhúng.

Viết cộng tác với WordPress và GitHub

WordPress GitHub Sync giúp bạn có thể chấp nhận các yêu cầu Pull đến các bài đăng WordPress của mình. Ngoài ra, nếu bạn đang viết blog với Jekyll. Plugin cho phép bạn tạo trang Jekyll của mình với giao diện web thân thiện với người dùng của WordPress.

Balter phác thảo ba lợi ích chính của WordPress GitHub Sync:

  • Cho phép nhà xuất bản nội dung phiên bản nội dung của họ trong GitHub. Cho người đọc biết “ai đã thực hiện thay đổi khi nào”
  • Cho phép người đọc gửi các cải tiến được đề xuất cho nội dung do WordPress phân phát thông qua mô hình Yêu cầu kéo của GitHub
  • Cho phép người viết không chuyên về kỹ thuật soạn thảo và chỉnh sửa trang web Jekyll trong giao diện chỉnh sửa tốt nhất của WordPress.

Bất cứ khi nào hook save_post của WordPress được gọi. Plugin sẽ kích hoạt đồng bộ hóa theo phản hồi và sẽ đẩy nội dung lên GitHub. Đổi lại, webhook đẩy của GitHub sẽ kích hoạt đồng bộ hóa tất cả các tệp đã thay đổi trở lại WordPress.

Khi cài đặt plugin, bạn cần nhập tên máy chủ GitHub của mình và chỉ định kho lưu trữ để cam kết. Bạn cũng sẽ cần nhập Mã thông báo Oauth và Bí mật Webhook của mình. Ở cuối trang cài đặt, bạn sẽ thấy các hành động để xuất sang GitHub và nhập từ GitHub. Nó không nhất thiết phải được bắt đầu trên một blog hoàn toàn mới.

Trong tương lai, Balter cho biết plugin có thể cho phép bạn làm nhiều việc hơn nữa, chẳng hạn như đồng bộ hóa nội dung của hai bản cài đặt WordPress khác nhau thông qua GitHub. Nó cũng có thể được điều chỉnh để cho phép bạn phân đoạn và xem trước nội dung trước khi “triển khai” lên máy chủ sản xuất của mình.

Đối với nhiều nhà văn, ý tưởng viết trước công chúng có vẻ hơi khó khăn, nhưng cách thực hành và lợi ích rất giống với việc viết mã nguồn mở. Các bản sửa đổi công khai và kết hợp các cải tiến mang lại sự minh bạch mới cho quy trình của người viết và biến tác phẩm thành một tài liệu cộng đồng được chia sẻ. Các ấn phẩm bao gồm cách viết cộng tác có tiềm năng mang lại một mức độ tham gia hoàn toàn mới của cộng đồng cho báo chí trực tuyến.

Cách thực hiện

Đầu tiên bạn hãy vào trang https://github.com/ và bấm Sign up để tạo một tài khoản.

Hướng dẫn chèn code từ github vào wordpress

Tạo tài khoản xong vào trang : https://gist.github.com/ để tạo một gist mới.

Hướng dẫn chèn code từ github vào wordpress

Ở đây có 2 phần lưu ý : 

  • Gist description: là mô tả về file vd: trỏ link bài viết trang web…
  • Filename including extension: để đặt tên cho file vd: index.html, action.php

Và khung to to là để bạn nhập code và chọn Create public gist để tạo.

Hướng dẫn chèn code từ github vào wordpress

Tiếp theo là copy đường dẫn để dán vào wordpress của bạn

Hướng dẫn chèn code từ github vào wordpress

Bạn có thể thêm bất cứ đâu bạn muốn. Vd như thêm vào footer 

Hướng dẫn chèn code từ github vào wordpress

Chúng đã giới thiệu xong cách hướng dẫn chèn code từ github vào wordpress đến các bạn!

Chúc các bạn thành công!

Xem thêm: Hướng dẫn chèn zalo chat vào wordpress

Xem thêm: Hướng dẫn sử dụng wordpress cho người mới bắt đầu!

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply