امکان آپلود تصاویر توسط کاربران بدون نصب افزونه در وردپرس

همانطور که می دانید در پنل مدیریتی وردپرس بخشی به نام “رسانه” وجود دارد که به کمک آن می توانید فایل های آپلود شده مربوط به برگه ها، نوشته ها و … را مدیریت کنید. در واقع هر نوع فایلی که در پنل مدیریتی آپلود می کنید به صورت خودکار در قسمت رسانه نشان داده می شود.

حالا اگر بخواهید امکانی برای کاربران تان فراهم نمائید تا بتوانند تصاویر مدنظرشان را به رسانه وردپرس اضافه کنند چکاری باید انجام دهید؟ مطمئنا آنها به بخش مدیریت دسترسی ندارند تا اینکار را مستقیما انجام دهند! پس باید صفحه ای در اختیارشان قرار دهید تا بتوانند فایل های خود را غیر مستقیم منتقل کنند.

برای درک بهتر موضوع فرض کنید می خواهیم امکان آپلود تصاویر را برای سناریوهای زیر راه اندازی کنیم:

  • آپلود آواتار یا تصویر کاربر از طریق پروفایل کاربری
  • ارسال تصویر خطا به بخش پشتیبانی سایت

در ادامه مراحل کار را به صورت قدم به قدم بررسی می کنیم:

۱- ایجاد فرم آپلود تصویر

در این مرحله یک فرم ساده آپلود تصویر به کاربر نشان می دهیم، برای پیاده سازی این فرم از شورتکد استفاده شده است تا بتوانیم آن را در هر جایی که لازم است فراخوانی کنیم، پس کدهای زیر را در فایل functions.php قرار دهید.

function user_avatar_uploader_shortcode()
{
    ?>
    <form action="<?php echo get_template_directory_uri() . '/user-upload-process.php'; ?>"
          method="post"
          enctype="multipart/form-data">
        <label for="user_avatar">تصویر شما:</label>
        <input type="file" name="user_avatar" size="30" accept="image/*">
        <input type="submit" value="آپلود تصویر" name="user_avatar_upload">
    </form>
    <?php
}

add_shortcode( 'user_avatar_uploader', 'user_avatar_uploader_shortcode' );

 

چند نکته در رابطه با کدهای بالا:

  • برای پردازش درخواست های کاربران از فایل user-upload-process.php استفاده شده است که در ادامه آن را بررسی خواهیم کرد.
  • خصوصیت enctype فرم باید به صورت multipart/form-data تنظیم شود.
  • می توانید به جای استفاده از فایل functions.php یک پلاگین اختصاصی بنویسید.

حالا یک برگه جدید ایجاد کرده و از شورتکد [user_avatar_uploader] به صورت زیر استفاده می کنیم.

شورتکد افزودن تصویر توسط کاربران در وردپرس

 

پس از ذخیره تغییرات و مشاهده برگه “صفحه آپلود تصویر” فرم آپلود بدین صورت خواهد بود.

افزودن شورتکد آپلود تصویر به صفحات وردپرس

۲- پردازش و بررسی تصاویر آپلود شده

در این مرحله فایل user-upload-process.php را در قالب یا تم مدنظرمان ایجاد می کنیم، برای این منظور از کدهای زیر استفاده نمائید.

<?php 

if ( $_SERVER['REQUEST_METHOD']=="POST" ) {

    require( dirname(__FILE__) . '/../../../wp-load.php' );

    $avatar_picture = $_FILES['user_avatar'];
    
    if ( empty( $avatar_picture['name'] ) )
        wp_die('کاربر گرامی فایل انتخاب نشده است');

    $wordpress_upload_dir = wp_upload_dir();
    $i = 1;
    $new_file_path = $wordpress_upload_dir['path'] . '/' . $avatar_picture['name'];
    $new_file_mime = mime_content_type( $avatar_picture['tmp_name'] );


    if ( $avatar_picture['error'] )
        wp_die($avatar_picture['error']);

    if ( $avatar_picture['size'] > wp_max_upload_size() )
        wp_die('کاربر گرامی فایل انتخاب شده حجیم است');

    if ( !in_array( $new_file_mime, get_allowed_mime_types() ) )
        wp_die('کاربر گرامی امکان بارگذاری این نوع فایل وجود ندارد');

    while ( file_exists( $new_file_path ) ) {
        $i++;
        $new_file_path = $wordpress_upload_dir['path'] . '/' . $i . '_' . $avatar_picture['name'];
    }

    if ( move_uploaded_file( $avatar_picture['tmp_name'], $new_file_path ) ) {
        $upload_id = wp_insert_attachment(
            array(
                'guid' => $new_file_path,
                'post_mime_type' => $new_file_mime,
                'post_title' => preg_replace( '/\.[^.]+$/', '', $avatar_picture['name'] ),
                'post_content' => '',
                'post_status' => 'inherit'
            ), $new_file_path );

        require_once( ABSPATH . 'wp-admin/includes/image.php' );
        wp_update_attachment_metadata( $upload_id,
                             wp_generate_attachment_metadata( $upload_id, $new_file_path ) );
        wp_redirect( $wordpress_upload_dir['url'] . '/' . basename( $new_file_path ) );
    }
}

 

چند نکته در رابطه با کدهای بالا:

  • فایل wp-load.php امکان استفاده از توابع، تنظیمات و ثوابت وردپرس را فراهم می کند، در صورتی که به درستی فراخوانی نشود پیغام “Call to undefined function” نشان داده خواهد شد.
  • به کمک تابع ()wp_upload_dir مسیر دایرکتوری uploads که معمولا در دایرکتوری wp-content وجود دارد را بدست می آوریم، مثلا wp-content/uploads/2019/08
  • با استفاده از تابع ()move_uploaded_file تصویر آپلود شده را در سرور ذخیره می کنیم.
  • در صورتی که عملیات انتقال فایل به درستی انجام شود مشخصات تصویر را با تابع ()wp_insert_attachment به جدول wp_posts اضافه می کنیم.
  • اگر فایل image.php فراخوانی نشود تابع ()wp_update_attachment_metadata کار نخواهد کرد، تابع فوق جزئیات فایل را در جدول wp_postmeta ذخیره می کند.
  • در نهایت با تابع ()wp_redirect تصویر آپلود شده را به کاربر نمایش می دهیم.

نتیجه نهایی را در تصویر زیر ملاحظه می کنید، می توانید فایل های آپلود شده کاربران را در رسانه وردپرس مشاهده کنید.

نمایش تصویر آپلود شده کاربران در رسانه وردپرس

جمع بندی

توجه داشته باشید از کدهای فوق می توانید برای آپلود هر نوع فایلی که در وردپرس مجاز است استفاده کنید، فقط حواستان باشد پراپرتی زیر را از فرم آپلود فایل حذف نمائید.

accept=”image/*”

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *