طراحی اپلیکیشن با فلاتر

آموزش نوشتن پلاگین وردپرس

موضوعات

مطالب آموزشی

برچسب ها

برای نوشتن پلاگین وردپرس، ابتدا باید با ساختار وردپرس و زبان PHP آشنا باشید. سپس، مراحل زیر را برای نوشتن یک پلاگین وردپرس دنبال کنید:

۱. ایجاد پوشه پلاگین: در ابتدا، برای پلاگین خود یک پوشه در دایرکتوری wp-content/plugins ایجاد کنید.

۲. ایجاد فایل اصلی پلاگین: درون پوشه پلاگین، یک فایل اصلی با نام plugin-name.php بسازید و کد های پلاگین خود را درون آن بنویسید.

۳. تعریف تابع اکشن: برای ایجاد اکشن های پلاگین، تابع هایی با نام همان اکشن در فایل اصلی پلاگین تعریف کنید. به عنوان مثال، برای ایجاد یک اکشن قابل استفاده در خود پلاگین و یا در سایر پلاگین ها و قالب ها، تابع my_plugin_action را تعریف کنید.

۴. رجیستر کردن پلاگین: برای اینکه پلاگین شما در وردپرس قابل دیدن باشد، باید آن را در وردپرس رجیستر کنید. برای این کار، کد زیر را در فایل plugin-name.php قرار دهید:

/*
Plugin Name: My Plugin
Plugin URI: http://example.com/my-plugin
Description: Description of my plugin.
Version: 1.0
Author: My Name
Author URI: http://example.com
License: GPL2
*/

// Register plugin
function my_plugin_register() {
    // Code here
}
add_action( 'init', 'my_plugin_register' );

ساختن داشبورد برای پلاگین وردپرس

برای ساختن داشبورد برای پلاگین وردپرس، می‌توانید از کد زیر استفاده کنید:

function my_plugin_dashboard() {
    // Content of the dashboard here
    echo '<h1>Welcome to My Plugin Dashboard</h1>';
}

function my_plugin_add_dashboard_page() {
    // Add dashboard page
    add_menu_page(
        'My Plugin Dashboard', // Page title
        'My Plugin', // Menu title
        'manage_options', // Capability
        'my-plugin-dashboard', // Menu slug
        'my_plugin_dashboard', // Callback function
        'dashicons-admin-plugins' // Icon
    );
}

// Add dashboard page
add_action( 'admin_menu', 'my_plugin_add_dashboard_page' );

در کد بالا، ابتدا یک تابع my_plugin_dashboard برای نمایش محتوای داشبورد تعریف شده است. سپس، با استفاده از تابع add_menu_page، صفحه داشبورد با عنوان “My Plugin Dashboard” و منوی “My Plugin” با آیکون “dashicons-admin-plugins” در منوی وردپرس ایجاد می‌شود و به تابع my_plugin_dashboard وصل می‌شود.

با این کد، می‌توانید یک داشبورد ساده برای پلاگین خود ایجاد کنید و به صورت پیش‌فرض در منوی مدیریت وردپرس قرار دهید. برای گسترش این داشبورد و افزودن بخش‌های مختلف می‌توانید از کد نمونه‌ای که در این پاسخ ارائه شد، الهام گرفته و آن را ویرایش کنید.

گرفتن و نمایش اطلاعات از input در داشبورد

برای گرفتن و نمایش اطلاعات از input در داشبورد پلاگین وردپرس، می‌توانید از کد زیر استفاده کنید:

function my_plugin_dashboard() {
    // Check if form is submitted
    if ( isset( $_POST['my_plugin_input'] ) ) {
        // Save input value in option
        update_option( 'my_plugin_input', $_POST['my_plugin_input'] );
    }

    // Get saved input value
    $input_value = get_option( 'my_plugin_input' );

    // Content of the dashboard here
    echo '<h1>Welcome to My Plugin Dashboard</h1>';
    echo '<form method="POST">';
    echo '<label for="my_plugin_input">Enter your name:</label>';
    echo '<input type="text" name="my_plugin_input" value="' . $input_value . '">';
    echo '<input type="submit" value="Submit">';
    echo '</form>';
}

function my_plugin_add_dashboard_page() {
    // Add dashboard page
    add_menu_page(
        'My Plugin Dashboard', // Page title
        'My Plugin', // Menu title
        'manage_options', // Capability
        'my-plugin-dashboard', // Menu slug
        'my_plugin_dashboard', // Callback function
        'dashicons-admin-plugins' // Icon
    );
}

// Add dashboard page
add_action( 'admin_menu', 'my_plugin_add_dashboard_page' );

در کد بالا، ابتدا در تابع my_plugin_dashboard، با استفاده از isset، بررسی می‌شود که آیا فرم ارسال شده است یا خیر. اگر input با نام my_plugin_input ارسال شده باشد، با استفاده از تابع update_option، مقدار آن در یک option با نام my_plugin_input در پایگاه داده ذخیره می‌شود.

سپس، با استفاده از تابع get_option، مقدار ذخیره شده در option را در متغیر $input_value ذخیره می‌کنیم.

در انتها، فرمی با یک input با نام my_plugin_input و بازهم استفاده از تابع my_plugin_dashboard را ایجاد کرده‌ایم تا کاربر بتواند اطلاعات خود را وارد کرده و با کلیک بر روی دکمه Submit، آن را ارسال کند. در این فرم، مقدار اولیه input از متغیر $input_value استخراج شده و به عنوان مقدار value آن در input قرار می‌گیرد.

با استفاده از این کد، می‌توانید اطلاعاتی را از کاربر گرفته، در پایگاه داده ذخیره کنید و نمایش دهید.

ساخت تب در داشبورد

برای ساخت تب در داشبورد پلاگین وردپرس، می توانید از کد زیر استفاده کنید:

function my_plugin_dashboard() {
    // Check if form is submitted
    if ( isset( $_POST['my_plugin_input'] ) ) {
        // Save input value in option
        update_option( 'my_plugin_input', $_POST['my_plugin_input'] );
    }

    // Get saved input value
    $input_value = get_option( 'my_plugin_input' );

    // Output dashboard tabs
    echo '<h2 class="nav-tab-wrapper">';
    echo '<a href="?page=my-plugin-dashboard" class="nav-tab' . ((empty($_GET['tab'])) ? ' nav-tab-active' : '') . '">General</a>';
    echo '<a href="?page=my-plugin-dashboard&tab=tab1" class="nav-tab' . ((!empty($_GET['tab'])&&($_GET['tab']=='tab1')) ? ' nav-tab-active' : '') . '">Tab 1</a>';
    echo '<a href="?page=my-plugin-dashboard&tab=tab2" class="nav-tab' . ((!empty($_GET['tab'])&&($_GET['tab']=='tab2')) ? ' nav-tab-active' : '') . '">Tab 2</a>';
    echo '</h2>';

    // Output tab content based on current tab
    if ( empty($_GET['tab']) ) {
        echo '<h1>Welcome to My Plugin Dashboard</h1>';
        echo '<form method="POST">';
        echo '<label for="my_plugin_input">Enter your name:</label>';
        echo '<input type="text" name="my_plugin_input" value="' . $input_value . '">';
        echo '<input type="submit" value="Submit">';
        echo '</form>';
    } elseif ( $_GET['tab'] === 'tab1' ) {
        echo '<h1>Tab 1 Content</h1>';
    } elseif ( $_GET['tab'] === 'tab2' ) {
        echo '<h1>Tab 2 Content</h1>';
    }
}

function my_plugin_add_dashboard_page() {
    // Add dashboard page
    add_menu_page(
        'My Plugin Dashboard', // Page title
        'My Plugin', // Menu title
        'manage_options', // Capability
        'my-plugin-dashboard', // Menu slug
        'my_plugin_dashboard', // Callback function
        'dashicons-admin-plugins' // Icon
    );
}

// Add dashboard page
add_action( 'admin_menu', 'my_plugin_add_dashboard_page' );

سپس، با استفاده از تابع get_option، مقدار ذخیره شده در option را در متغیر $input_value ذخیره می‌کنیم.

سپس، با استفاده از تابع add_menu_page، یک منوی جدید با عنوان “My Plugin” در منوی اصلی وردپرس و پس از آن در صفحه پلاگین ایجاد می‌شود.

سپس با استفاده از HTML، تب ها را برای دشبورد پلاگین ایجاد کردیم به این صورت که چک می کنیم کدام تب فعال است. سپس با استفاده از شرط بندی، به محتوای مناسب مربوط به هر تب نمایش داده شده است.

با استفاده از این کد، می‌توانید تب ها و محتوای مختلف را در داشبورد پلاگین خود ایجاد کرده و به صورت Organized اطلاعات خود را به کاربران نمایش دهید.

استفاده از css در صفحات پلاگین وردپرس

برای استفاده از CSS در صفحات پلاگین وردپرس، مراحل زیر را دنبال کنید:

1- به فایل functions.php پلاگین خود مراجعه کنید و کد زیر را در جای مناسبی وارد کنید.

function add_my_stylesheet() { wp_enqueue_style (‘my-style’, my_plugin_dir_url(FILE) . ‘my-style.css’, false, ‘1.0.0’, ‘all’); }

add_action( ‘wp_enqueue_scripts’, ‘add_my_stylesheet’ );

این کد یک فایل CSS برای شما فراهم می‌کند. نام فایل و پوشه my-style.css و my_plugin_dir_url را با نام و محل فایل و پوشه شما جایگزین کنید. پیشنهاد می‌شود این فایل را در دایرکتوری پلاگین خود نگهداری کنید.

2- فایل my-style.css را باز کرده و استایل‌ها و نمایشی که می‌خواهید برای پلاگین خود داشته باشید را تعریف کنید.

3- نوشتن کد CSS و استفاده از آن برای طراحی و نمایش محتوا در پلاگین خود.

4- آخرین قدم تطبیق دادن استایل‌های شما با شخصی سازی پلاگین یا تم وردپرس است.

در نهایت، باید توجه داشته باشید که استفاده از استایل‌های خارجی و وارد کردن فایل‌های CSS اضافی می‌تواند با کاربرانی که از اتصال اینترنت پایین استفاده می‌کنند، مشکلاتی ایجاد کند. در نتیجه بهتر است از استایل‌های محلی و فراخوانی فقط فایل‌های CSS مورد نیاز استفاده کنید.

قرار دادن کد صفحات داشبورد پلاگین وردپرس در فایلهای جداگانه

برای ساخت صفحات داشبورد پلاگین وردپرس در فایل‌های جداگانه، ابتدا باید دایرکتوری جدیدی با نام مورد نظر برای این پلاگین ایجاد کنید. سپس درون این دایرکتوری، یک فایل جدید با نام index.php ایجاد کنید و کد زیر را در ابتدای این فایل قرار دهید:

<?php
// Define the plugin's dashboard menu item
function myplugin_add_menu_item() {
    add_menu_page(
        'My Plugin',
        'My Plugin',
        'manage_options',
        'myplugin',
        'myplugin_render_dashboard'
    );
}
add_action( 'admin_menu', 'myplugin_add_menu_item' );

// Render the dashboard
function myplugin_render_dashboard() {
    // TODO: Render the dashboard
}

در کد بالا، تابع myplugin_add_menu_item ابتدا یک منوی جدید به منوی داشبورد وردپرس اضافه می‌کند. سپس تابع myplugin_render_dashboard به عنوان callback این منوی جدید تعریف شده است که به محض کلیک کردن روی آن، اجرا خواهد شد و صفحه‌ی داشبورد مورد نظر را رندر خواهد کرد.

برای ساخت صفحات دیگر داشبورد، می‌توانید فایل‌های جداگانه‌ای با نام‌های متفاوت ایجاد کنید، ولی تمام آن‌ها باید اول از همه کد بالا را داشته باشند. برای مثال، یک فایل جدید با نام dashboard.php ایجاد کنید و کد زیر را در آن قرار دهید:

<?php
// TODO: Define the dashboard page for this file

سپس می‌توانید از تابع myplugin_render_dashboard برای رندر صفحه‌های دیگر نیز استفاده کنید. برای این کار، فرض کنید که فایل dashboard.php شامل فرمی باشد که شامل یک input است:

<form method="post">
    <label for="my_input">My Input:</label>
    <input type="text" name="my_input" id="my_input">
    <input type="submit" name="submit" value="Save">
</form>

حال برای گرفتن مقدار input ارسال شده به این فرم، می‌توانید از تابع $_POST استفاده کنید. برای مثال، می‌توانید کد زیر را در فایل dashboard.php قرار دهید:

<?php
// Handle form submissions
if ( isset( $_POST['submit'] ) ) {
    $my_input = sanitize_text_field( $_POST['my_input'] );

    // TODO: Save the input value
}

// Render the dashboard
?>
<form method="post">
    <label for="my_input">My Input:</label>
    <input type="text" name="my_input" id="my_input">
    <input type="submit" name="submit" value="Save">
</form>

در کد بالا، تابع sanitize_text_field برای تمیز کردن مقدار input استفاده شده است. همچنین، برای ذخیره‌سازی مقدار input در پایگاه داده، می‌توانید از توابع update_option و get_option استفاده کنید. برای مثال، می‌توانید کد زیر را به بخش if قبلی اضافه کنید:

$update_result = update_option( 'my_input', $my_input );
if ( $update_result ) {
    echo '<p>Input saved successfully!</p>';
}

// Get the saved input value
$saved_input = get_option( 'my_input' );
?>
<form method="post">
    <label for="my_input">My Input:</label>
    <input type="text" name="my_input" id="my_input" value="<?php echo esc_attr( $saved_input ); ?>">
    <input type="submit" name="submit" value="Save">
</form>

در کد بالا، تابع update_option برای ذخیره مقدار input استفاده شده است. همچنین، تابع get_option برای گرفتن مقدار ذخیره شده از پایگاه داده استفاده شده است. برای نمایش مقدار ذخیره شده در فیلد input نیز، تابع esc_attr برای ایمن کردن داده استفاده شده است.