WordPress ngoài phần core ra thì có 2 thành phần rất quan trọng đó là Theme và Plugin. Hai thành phần này giúp developer xây dựng hoàn chỉnh một Website WordPress. Bài viết này chúng ta sẽ được giới thiệu, xây dựng một plugin cho WordPress.
WordPress Plugin là gì?
WordPress Plugin là một gói mã code giúp mở rộng các chức năng của trang web được xây dựng bằng mã nguồn mở WordPress. Chúng có thể thêm các thành phần giao diện bằng việc thêm các file style, javascript.
Xây dựng một WordPress Plugin
Bước 1: Tạo thư mục cho plugin
Một plugin của WordPress là một thư mục được đặt tại thư mục /<root>/wp-content/plugins/
VD: Mình tạo một plugin DMCA Reports với chức năng là cho người dùng gửi các báo cáo về các bài viết vi phạm. Mình sẽ tạo 1 thư mục cho plugin với đường dẫn là /<root>/wp-content/plugins/dmca-report/
Bước 2: Tạo file main của plugin.
Trong thư mục của plugin vừa tạo ở trên, bạn cần tạo file một file main chứa source code của plugin. File main này sẽ include các thành phần của plugin như các file php, js, css khác. Tên của file main là do bạn quyết định nhưng thông thường nó chính là tên của plugin. VD: dmca-reports.php
File main bắt buộc phải chưa phần Doc Block chứa các thông tin khai báo cho plugin.
Tạo file /<root>/wp-content/plugins/dmca-report/dmca-report.php với nội dung như sau:
<?php /** * Plugin Name: DMCA Reports * Plugin URI: https://vinasupport.com/plugins/dmca-report * Description: DMCA Link Reports Management * Version: 1.0 * Requires at least: 5.2 * Requires PHP: 7.4 * Author: Manlivo * Author URI: https://vinasupport.com * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Update URI: https://vinasupport.com/plugins/dmca-reports * Text Domain: dmca-report * Domain Path: /languages */
Nó sẽ hiển thị thông tin trong phần cài đặt plugin ở [ Settings ] => [ Plugins ]
Để kích hoạt chúng ta bấm [ Active ]. Plugin sẽ được kích hoạt thành công.
Đó là bước cơ bản để tạo một plugin cho WordPress nhưng quan trọng nhất vẫn là nội dung plugin của bạn như thế nào? Ở đây mình muốn xây dựng 1 plugin cho việc báo cáo bản quyền DMCA để người dùng có thể báo cáo lại các bài viết trên website của bạn đã vi phạm bản quyền.
Ở file /<root>/wp-content/plugins/dmca-report/dmca-report.php mình có đoạn code load các file và thư mục mà sẽ được sử dụng trong plugin
<?php
// Plugin Directory
define('DMCA_REPORT_PATH', plugin_dir_path(__FILE__));
$includeDirs = [
'includes',
'database',
];
// Load all files in folder
foreach ($includeDirs as $dir) {
foreach (glob(DMCA_REPORT_PATH . "/src/{$dir}/*.php") as $filename) {
include_once $filename;
}
}
Bước 2: Tạo database cho plugin.
Mình sẽ tạo một database có thiết kế như sau:
Tạo 1 file php có đường dẫn /<root>/wp-content/plugins/dmca-report/src/database/dmca-report-table.php chứa đoạn code tạo database.
<?php
global $dmcaReportDbVersion;
// DMCA Report DB Version
$dmcaReportDbVersion = '1';
/**
* @return void
*/
function dmcaReportInstall(): void
{
global $wpdb,
$dmcaReportDbVersion;
// Table Name
$tableName = $wpdb->prefix . 'dmca_report_links';
// Charset Collate
$charsetCollate = $wpdb->get_charset_collate();
// Run SQL
require_once ABSPATH . 'wp-admin/includes/upgrade.php';
dbDelta( "
CREATE TABLE $tableName (
`report_link_id` bigint(20) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
`post_id` bigint(20) UNSIGNED NOT NULL,
`post_title` tinytext COLLATE utf8mb4_unicode_ci NOT NULL,
`post_link` tinytext COLLATE utf8mb4_unicode_ci NOT NULL,
`report_date` datetime NOT NULL,
`report_name` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL,
`report_email` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL,
`report_content` text COLLATE utf8mb4_unicode_ci NOT NULL,
`report_ip_address` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL,
`user_agent` text COLLATE utf8mb4_unicode_ci NOT NULL,
`ignored` tinyint(1) UNSIGNED NOT NULL DEFAULT '0',
`deleted_at` datetime DEFAULT NULL
) ENGINE=InnoDB $charsetCollate;
" );
// Add index
$wpdb->query("ALTER TABLE $tableName ADD KEY `post_id_idx` (`post_id`);");
// Add option
add_option( 'dmca_report_db_version', $dmcaReportDbVersion );
}
Ở file main của plugin /<root>/wp-content/plugins/dmca-report/dmca-report.php thêm đoạn hook sau:
register_activation_hook( __FILE__, 'dmcaReportInstall' );
Đoạn hook này sẽ được kích hoạt gọi đến function xử lý tạo database khi bạn bấm active 1 plugin.
Bước 3: Tạo một button ở trang bài viết để báo cáo DMCA
Mình tạo thêm 2 thư mục trong plugin là /src/includes là nhúng các file xử lý php vào, và thư mục /src/views để chứa giao diện hiển thị.
Sau đó mình tạo file /src/includes/functions.php để xử lý đoạn code hiển thị sau:
// Add button to post content
add_filter( 'the_content', function ($content) {
ob_start();
include(DMCA_REPORT_PATH . 'src/views/dmca-button.php');
return $content . ob_get_clean();
}, 1 );
Và tạo một file template cho button /src/views/dmca-button.php
<a class="button" href="<?php bloginfo('wpurl'); ?>/dmca/<?= get_the_ID(); ?>/">DMCA Report</a>
Nó sẽ hiển thị button dmca trong bài viết:
Bước 3: Tạo 1 page chứa form để report bài viết.
Tạo file src/includes/rewrite.php có nội dung như sau:
// Add rule for dmca page
add_action( 'init', function () {
flush_rewrite_rules();
add_rewrite_rule(
'dmca/([0-9]+)/?$',
'index.php?pagename=dmca&dmca_report_post_id=$matches[1]',
'top'
);
} );
// Add query var
add_filter( 'query_vars', function ($query_vars) {
$query_vars[] = 'dmca_report_post_id';
return $query_vars;
});
// Modify include url
add_filter( 'template_include', function ($template) {
if (get_query_var('dmca_report_post_id')) {
return DMCA_REPORT_PATH . 'src/views/dmca-report-form.php';
}
return $template;
});
Và file template src/views/dmca-report-form.php
<?php
$post = get_post(get_query_var('dmca_report_post_id'))
?>
<form action="" method="post">
<p>
Report URL: <?php echo get_permalink($post->ID); ?>
</p>
<p>
<label for="report_name">Name:</label><br />
<input type="text" name="report_name" id="report_name" value="" />
</p>
<p>
<label for="report_email">Email:</label><br />
<input type="text" name="report_email" id="report_email" value="" />
</p>
<p>
<label for="report_content">Message:</label><br />
<textarea name="report_content" id="report_content"></textarea>
</p>
<p>
<input type="hidden" name="post_id" value="<?= $post->ID; ?>">
<input type="submit" name="dmca_report_submit" value="Submit" />
</p>
</form>
Nó sẽ tạo ra một form giống như là:
Bước 4: Tạo xử lý update dữ liệu vào database WordPress
Sửa file src/includes/functions.php thêm đoạn code sau:
// Update data for dmca
add_action('init', function (){
global $wpdb;
if (isset($_POST['dmca_report_submit'])) {
// get Post ID
$postId = intval($_POST['post_id']);
if ($postId > 0) {
// Get Post
$post = get_post($postId);
if ($post) {
$data = [
'post_id' => $postId,
'post_title' => $post->post_title,
'post_link' => get_permalink($postId),
'report_date' => current_time('Y-m-d H:i:s'),
'report_name' => sanitize_text_field($_POST['report_name']),
'report_email' => sanitize_email($_POST['report_email']),
'report_content' => sanitize_textarea_field($_POST['report_content']),
'report_ip_address' => $_SERVER['REMOTE_ADDR'] ?? '',
'user_agent' => $_SERVER['HTTP_USER_AGENT'] ?? '',
];
$table = $wpdb->prefix . 'dmca_report_links';
// Insert to database
$wpdb->insert($table, $data);
}
}
}
});
Sau khi submit form đoạn code này sẽ lưu vào database.
Kết luận
Ở bài viết này mình chỉ hướng dẫn cách xây dựng 1 plugin với thao tác cơ bản như sửa 1 chức năng của WordPress, tạo giao diện, tạo và update database. Nó vẫn chưa hoàn chỉnh nên bạn hãy phát triển thêm.
Bạn có thể down đoạn source code demo tại đây:
Nguồn: vinasupport.com
