Hướng dẫn code plugin wordpress

Serie hướng dẫn lập trình một plugin đơn giản và cách đưa plugin lên thư viện WordPress.Org.

  • Các kiến thức nền tảng và những lưu ý trước khi tiến hành lập trình plugin dành cho WordPress

  • Đây là bài viết tiếp theo trong serie hướng dẫn viết plugin cho WordPress một cách cơ bản nhất. Trong bài này mình sẽ thảo luận với các bạn về…

  • Chào mừng bạn quay trở lại với serie hướng dẫn lập trình plugin cho WordPress, trong những phần trước thì bạn đã tìm hiểu được cách tạo được một plugin…

  • Bài 4 của serie Lập trình plugin WordPress từ A tới Z, ở bài này sẽ hướng dẫn bạn các bước hoàn thiện một plugin và gửi nó lên WordPress.org

  • Hướng dẫn upload plugin lên thư viện WordPress.org thông qua Subversion (SVN) và cách cập nhật plugin lên phiên bản mới nhất.

  • Việc tạo plugin WordPress khá là dễ dàng so với những gì bạn nghĩ. Trên thực tế, bạn có thể tạo một plugin chỉ với một vài dòng code và bạn chỉ cần rất ít kiến thức hoặc kinh nghiệm.

    Trong bài viết này, Vietnix sẽ giải thích cách hoạt động của các plugin và thảo luận về cách plugin phù hợp như thế nào với WordPress Community. Sau đó là từng bước để bạn có thể tạo Plugin WordPress đầu tiên của mình.

    Hướng dẫn code plugin wordpress
    Plugin WordPress

    Nếu bạn đã quen thuộc với nền tảng WordPress, rất có thể bạn cũng sẽ quen thuộc với các plugin. Như tài liệu của WordPress đã nói “Plugin là cách để mở rộng và thêm các chức năng vào trong WordPress”.

    Bản thân WordPress bao gồm tập hợp các tính năng, được gọi chung là “core” của nền tảng. Các plugin là các tiện ích bổ sung có thể download, chứa các file và code có thể mở rộng hoặc thay đổi chức năng của core đó. Trên thực tế, WordPress đã tuyên bố rằng nếu một tính năng có khả năng được sử dụng không dưới 80% của người dùng, thì nó nên được đưa vào core. Nếu không, nó phải là một plugin.

    Vì lý do này, phạm vi rộng của các chức năng được cung cấp bởi plugin là rất lớn. Bạn có thể sử dụng chúng để thêm form opt-in, slider hoặc là popup.

    Điều này có nghĩa là plugin là một trong những tính năng quan trọng nhất của WordPress. Chúng giúp bạn dễ dàng thêm hầu hết mọi chức năng vào website mà không cần mã hóa. Có hàng nghìn plugin miễn phí để bạn sử dụng hoặc bạn có thể chọn các plugin premium (có trả phí). Hơn nữa, việc download và cài đặt các plugin trong WordPress admin chỉ mất một vài giây.

    Các plugin cũng là một phương tiện quan trọng cho những ai muốn bắt đầu tự dev.

    WordPress và plugin đều là mã nguồn mở, nên mọi người có thể sử dụng và thử nghiệm mã của chúng. Đây là một cách tuyệt vời cho các lập trình viên mới vào nghề tìm hiểu mọi thứ hoạt động đằng sau và tham gia vào việc tạo plugin WordPress.

    Sự khác nhau giữa Plugin và Theme

    Trước khi tiếp tục, hãy phân biệt sự khác nhau giữ plugin và theme. Nhìn bên ngoài thì khá là dễ phân biệt. Nhưng trên thực tế, thật sự khó để phân biệt plugin và theme.

    Một theme cũng có thể thay đổi chức năng của website, trong khi một plugin có thể thay đổi giao diện của nó. Tất cả các theme WordPress đều chứa file functions.php, bao gồm mã bổ sung chức năng cho website của bạn. Trên thực tế, bạn có thể thêm một đoạn code vào plugin hoặc functions.php và nó sẽ hoạt động tương tự nhau trên website của bạn.

    Sự khác biệt là khi bạn thêm đoạn code vào functions.php, nó sẽ được liên kết với theme hiện tại. Điều này có thể hữu ích nếu bạn muốn thay đổi một số chức năng của theme hoặc bạn muốn nhanh chóng thêm một chức năng mà không cần tạo plugin WordPress. Bạn cũng có thể sử dụng phương pháp này nếu bạn đang tạo theme và muốn chèn các chức năng tùy chỉnh.

    Cách Plugin hoạt động: Giới thiệu về Hooks, Actions và Filters

    Bây giờ đã đến lúc tìm hiểu chuyên sâu hơn một chút. Vietnix đã đề cập rằng các plugin hoạt động theo nghĩa đen là plug in vào WordPress core. Điều này được thực hiện bằng cách sử dụng hook, cho phép một đoạn mã tương tác với đoạn mã khác. Như vậy, các hook sẽ xác định thời điểm và vị trí trên website của bạn một plugin thực sự được sử dụng.

    Điều này sẽ hơi khó hiểu nếu bạn chưa làm quen với theme này. Do đó, hãy xem xét một số ví dụ. Hãy tưởng tượng bạn có một plugin thông báo lỗi khi ai đó cố gắng đăng nhập vào website của bạn bằng password sai. Trong trường hợp này, thông báo lỗi có thể là hook. Một plugin có thể kết nối với mã hiển thị thông báo đó và thay đổi văn bản được hiển thị.

    Có hai loại hook mà WordPress hiểu được đó là:

    • Actions: Được sử dụng để thêm hoặc thay đổi chức năng của WordPress.
    • Filters: Được sử dụng để thay đổi chức năng của actions.

    Nếu bạn muốn hiểu thêm về hook và cách hoạt động của nó. Vietnix khuyên bạn nên đọc thêm các loại hook trong Plugin Developer Handbook.

    Những điều cần biết trước khi tạo Plugin WordPress

    Bây giờ, bạn có thể bắt đầu tạo plugin WordPress cho riêng mình. Tuy nhiên, bạn cần đảm bảo đã chuẩn bị kỹ lưỡng.

    Mặc dù không bắt buộc phải làm theo các bước dưới đây, nhưng một số kinh nghiệm lập trình và mã hóa sẽ cực kỳ hữu ích. Điều này cực kỳ đúng nếu bạn muốn tạo plugin WordPress của riêng mình thay vì chỉ đi chỉnh sửa đoạn code của người khác. Có một nền tảng kỹ thuật vững chắc sẽ giúp bạn tuân thủ các tiêu chuẩn mã hóa của WordPress để dev các plugin một cách dễ dàng hơn.

    Trước khi tạo plugin WordPress, bạn cũng nên cân nhắc về việc sử dụng tên cho plugin mà bạn tạo. Vì bạn cần tránh xung đột về tên, nó xảy ra khi nhiều phần tử trên một website có cùng tên.

    Trên thực tế, điều này có nghĩa là quyến định xem bạn sẽ sử dụng một file duy nhất cho đoạn code của mình hoặc là sử dụng nó trên nhiều file khác nhau. Ngoài ra, bạn cũng sẽ muốn lên kế hoạch cho các folder trong plugin của mình.

    Tất nhiên, còn nhiều điều cần xem xét trước khi bạn muốn trở thành một lập trình viên WordPress chính thức. Ví dụ: bảo mật plugin là điều cần thiết để đảm bảo plugin của bạn không chứa bất kỳ lỗ hổng bảo mật nào.

    Cách tạo Plugin WordPress

    Đã đến lúc để tạo Plugin WordPress đầu tiên của bạn, hãy sử dụng một lượng mã hóa tối thiểu. Trong các bước sau, Vietnix sẽ hướng dẫn bạn tạo Plugin WordPress dùng để thay đổi link text khi bạn chèn tag Read More vào post.

    Bước 1: Thiết lập môi trường thử nghiệm

    Khi bạn đang lập trình bất kỳ thứ gì, cho dù đó là tạo plugin WordPress hay thực hiện các thay đổi khác có thể ảnh hưởng đến website của bạn, bạn phải luôn sử dụng môi trường thử nghiệm. Đây còn được gọi là staging site hoặc local enviroment, tùy thuộc vào việc website được lưu trữ trên server bên ngoài hay máy tính của riêng bạn.

    Bất kể vị trí nào, môi trường thử nghiệm phải là một bản sao của website của bạn. Điều này cho phép bạn thêm và chỉnh sửa các file và chức năng của website của mình mà không có nguy cơ gây ra thiệt hại cho website đang hoạt động. Điều này đặc biệt quan trọng khi bạn đang làm việc với các file và plugin core vì những sai lầm có thể gây hại lâu dài cho website của bạn.

    May mắn thay, việc thiết lập một website thử nghiệm khá đơn giản, nhờ vào nhiều công cụ có sẵn để giúp bạn. Để thiết lập, bạn nên sử dụng DesktopServer. Chương trình này giúp bạn dễ dàng cài đặt phiên bản WordPress cục bộ trên máy tính.

    Hướng dẫn code plugin wordpress
    Công cụ DesktopServer

    Bạn cũng có thể tạo một staging site online. Điều này sẽ hoạt động như một bản sao chính của website của bạn, ngoại trừ việc chỉ có bạn và các admin khác mới có thể truy cập nó. Bạn có thể sử dụng DreamHost để dễ dàng tạo một bản sao cho website.

    Hướng dẫn code plugin wordpress
    WordPress Hosing DreamHost

    Sau đó, bạn thậm chí có thể sao chép những thay đổi bạn đã thực hiện trên staging site của mình và nhập chúng trở lại phiên bản trực tiếp.

    Khi bạn đã chắc chắn rằng môi trường thử nghiệm không rủi ro, đã đến lúc tạo plugin WordPress thực tế.

    Bước 2: Tạo một file Plugin mới

    Để bắt đầu kết hợp một plugin mới, bạn sẽ cần quyền truy cập vào directory của website của mình. Cách dễ nhất để thực hiện việc này là sử dụng SFTP, đây là một phương pháp để xem và quản lý các file trên website của bạn khi chúng được đặt trên một server bên ngoài. Vietnix sẽ sử dụng một ứng dụng client có tên là FileZilla để làm ví dụ của vì nó vừa miễn phí vừa dễ sử dụng.

    Khởi động FileZilla và sử dụng thông tin đăng nhập SFTP do web server của bạn cung cấp để truy cập website của bạn. Sau khi đã vào, bạn sẽ cần điều hướng đến directory chứa các plugin của mình, nằm tại /wp-content/plugins/.

    Hướng dẫn code plugin wordpress
    Tạo file plugin mới trong /wp-content/plugins/

    Để thêm plugin mới, bạn cần tạo một thư mục mới bên trong directory này. Làm như vậy ngay bây giờ và đặt cho nó bất kỳ tên duy nhất nào bạn muốn. Vietnix sẽ đặt tên cho directory là very-first-plugin.

    Hướng dẫn code plugin wordpress
    Tạo và đặt tên cho directory chứa Plugin

    Thư mục này là nơi mọi thứ liên quan đến plugin của bạn sẽ được đặt trên website của bạn. Vì plugin này sẽ rất đơn giản, nó chỉ chứa một file duy nhất mà bạn sẽ tạo ngay bây giờ. Đây sẽ là một file PHP, sẽ chứa mã của plugin.

    Tiếp theo, mở directory very-first-plugin và nhấp chuột phải, sau đó chọn Create new file.

    Hướng dẫn code plugin wordpress
    Tạo file mới trong directory

    Bạn sẽ được yêu cầu đặt tên cho file. File này bây giờ sẽ được thêm vào thư mục.

    Hướng dẫn code plugin wordpress
    Đặt tên cho file trong directory

    Tại thời điểm này, bạn sẽ cần thêm một số thông tin cơ bản vào file. Thông tin đó sẽ được WordPress sử dụng để hiển thị tên, nội dung và thông tin khác. Để thực hiện việc này, hãy nhấp chuột phải vào file PHP và chọn View/Edit. Sau đó, bạn sẽ được yêu cầu mở file, bạn có thể thực hiện thao tác này trong bất kỳ trình soạn thảo văn bản nào, chẳng hạn như TextEdit hoặc Notepad.

    Hướng dẫn code plugin wordpress
    Thêm thông tin vào file vey-first-plugin

    File này hiện đang trống, vì vậy hãy dán văn bản sau vào đó:

    Hãy thay đổi thông tin ở đây để phù hợp với những chi tiết của bạn trước khi lưu lại file. Khi được hỏi rằng bạn có muốn trở lại server của website hay không, hãy nhấp Yes.

    Khi hoàn tất, bạn có thể thấy plugin trong admin dashboard của mình. Đăng nhập ngay bây giờ và xem thư viện plugin của bạn.

    Hướng dẫn code plugin wordpress
    Upload Very First Plugin

    Bạn thậm chí có thể tiếp túc và active plugin ngay bây giờ trong admin panel. Tất nhiên, plugin mà bạn tạo vẫn chưa làm được gì. Đó là bởi vì bạn chưa thêm bất kỳ chức năng gì vào nó.

    Bước 3: Thêm code vào Plugin

    Như Vietnix đã đề cập trước đó, plugin này sẽ thay đổi văn bản xuất hiện khi bạn chèn tag Read more. Để xem điều này trông như thế nào, hãy tạo một bài đăng blog mới và nhấp vào Insert Read More tag.

    Hướng dẫn code plugin wordpress
    Sử dụng Insert Read More tag

    Nếu bạn publish bài và kiểm tra nó trên giao diện người dùng của website, bạn sẽ thấy tag đã được thay thế bằng một link có nội dung Continue reading:

    Hướng dẫn code plugin wordpress
    Tag Continue Reading trong bài viết

    Đây là văn bản mà bạn muốn thay đổi. Để làm điều này, mở lại file plugin.php đầu tiên. Sau đó, thêm một dòng mới ở cuối file và dán đoạn code sau:

    function dh_modify_read_more_link() {
    
        return 'Click to Read!';
    
    }
    
    add_filter( 'the_content_more_link', 'dh_modify_read_more_link' );

    Đầu tiên, code này tạo ra một hàm mới, gọi là ‘dh_modify_read_more_link.’ Bạn sẽ thấy rằng chúng tôi đã thêm tiền tố “dh” để đảm bảo rằng tên này là duy nhất.

    Tất cả những gì chức năng này làm là lấy link cho post hiện tại, sau đó áp dụng anchor text “Click to Read!”. Bạn có thể thoải mái thay đổi văn bản này thành bất kỳ thứ gì bạn muốn sử dụng.

    Dòng cuối cùng trong đoạn code này sử dụng một bộ lọc để nối vào một hàm được gọi là the_content_more_link, đại diện cho link Read More.

    Tại thời điểm này, bạn có thể lưu file plugin. Vì bạn đã kích hoạt plugin nên chức năng của nó sẽ hoạt động ngay lập tức. Kiểm tra điều này bằng cách kiểm tra website của bạn để xem liệu văn bản anchor text có thay đổi hay không.

    Hướng dẫn code plugin wordpress
    Thay đổi anchor text thành Click to Read!

    Nếu nó vẫn chưa thay đổi, hãy kiểm tra lại code để đảm bảo rằng bạn đã nhập chính xác. Ngoài ra, hãy kiểm tra xem plugin có đang hoạt động hay không và tất cả các tên của chức năng có chính xác không.

    Bước 4: Xuất và cài đặt plugin trên Live Site

    Plugin mới của bạn hiện đã sẵn sàng để sử dụng trên một live site. Tất cả những gì bạn cần làm là nén thư mục plugin đầu tiên thành một file ZIP. Nếu bạn đang sử dụng môi trường cục bộ để tạo plugin của mình, bạn chỉ cần nhấp chuột phải vào thư mục và chọn Compress.

    Hướng dẫn code plugin wordpress
    Compress very-first-plugin

    Mặt khác, nếu bạn đang sử dụng SFTP, bạn có thể làm điều tương tự bằng cách nhấp chuột phải vào thư mục đầu tiên và chọn Download.

    Hướng dẫn code plugin wordpress
    Tải file very-first-plugin

    Khi thư mục đã tải xuống máy tính của bạn, bạn có thể nén nó giống như cách mà Vietnix đã thực hiện ở trên.

    Sau đó, file zip này có thể được tải lên website của bạn một cách trực tiếp. Mở WordPress admin dashboard của bạn, điều hướng đến Plugin, sau đó nhấp vào Add New.

    Hướng dẫn code plugin wordpress
    Thêm Plugin mới cho website

    Trên màn hình tiếp theo, bạn có thể chọn Upload Plugin, điều này sẽ cho phép bạn chọn file plugin từ máy tính của mình.

    Hướng dẫn code plugin wordpress
    Chọn file để thêm plugin cho website

    Chọn file very-first-plugin.zip bạn đã tạo và nhấp vào Install Now. Bây giờ plugin sẽ được thêm vào website của bạn và bạn có thể kích hoạt nó như bình thường.

    Lời kết

    Như vậy là bạn đã biết cách tạo plugin WordPress để có thể sử dụng những tính năng mới, hy vọng bài viết này cung cấp cho bạn nhiều kiến thức mới và bổ ích, chú bạn thành công! Nếu có bất kỳ thắc mắc nào hãy để lại bình luận ngay phái dưới đây.