Rate this post

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.

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.

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

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”.

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.

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.

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.

Kết nối WordPress và GitHub

WordPress và GitHub Sync là một công cụ tuyệt vời cho những ai muốn làm cho quá trình viết blog trở nên tương tác và cộng tác hơn. Đơn giản là, plugin này giúp bạn kết nối các bài viết trên WordPress với GitHub, một nền tảng phổ biến dùng để lưu trữ và quản lý mã nguồn. Điều này có nghĩa là bạn có thể dễ dàng cập nhật và quản lý nội dung của mình trên GitHub, đồng thời mở cửa cho cộng đồng để đề xuất những cải tiến qua các Pull Request.

Có ba lợi ích chính khi sử dụng WordPress GitHub Sync:

  1. Quản lý Phiên Bản: Bạn có thể theo dõi ai đã thay đổi nội dung và khi nào, giúp quản lý phiên bản nội dung dễ dàng hơn.
  2. Cải Tiến Cộng Đồng: Người đọc có thể đề xuất cải tiến cho nội dung, giúp tăng cường chất lượng và sự tương tác.
  3. Giao Diện Thân Thiện: Ngay cả những người không chuyên về kỹ thuật cũng có thể dễ dàng chỉnh sửa và soạn thảo trang web Jekyll thông qua giao diện WordPress.

Khi bạn lưu một bài viết, plugin tự động đồng bộ hóa nội dung với GitHub và ngược lại, nhờ vào các webhook, giữ cho nội dung luôn cập nhật giữa hai nền tảng.

Để bắt đầu, bạn chỉ cần thiết lập tên máy chủ GitHub, chọn kho lưu trữ, và nhập các thông tin cần thiết như Mã thông báo Oauth và Bí mật Webhook. Cài đặt plugin không giới hạn ở những blog mới; bạn có thể bắt đầu sử dụng nó bất kỳ lúc nào.

Nhìn về tương lai, plugin này hứa hẹn sẽ mở rộng khả năng, ví dụ như đồng bộ hóa nội dung giữa hai trang WordPress khác nhau hoặc cho phép bạn xem trước nội dung trước khi “triển khai” chính thức.

Việc viết cộng tác mở cửa cho việc tham gia của cộng đồng và mang lại sự minh bạch cho quy trình sáng tạo nội dung, tương tự như việc viết mã nguồn mở. Điều này không chỉ giúp cải thiện chất lượng nội dung mà còn biến việc viết lách thành một hoạt động cộng đồng, tăng cường sự tương tác và tham gia của người đọc.

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.

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

Ở đâ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

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

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

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!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now