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

				
					<?php
/**
 * WordPress Media SVG Converter
 * اضافه کردن دکمه تبدیل به SVG در کتابخانه رسانه
 */

// اجازه آپلود فایل‌های SVG
function allow_svg_upload($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'allow_svg_upload');

// نمایش صحیح فایل‌های SVG در کتابخانه رسانه
function fix_svg_display() {
    echo '<style>
        .attachment-266x266, .thumbnail img {
            width: 100% !important;
            height: auto !important;
        }
    </style>';
}
add_action('admin_head', 'fix_svg_display');

// اضافه کردن دکمه تبدیل به SVG
function add_svg_convert_button($form_fields, $post) {
    // فقط برای تصاویر
    if (strpos($post->post_mime_type, 'image') !== false && $post->post_mime_type !== 'image/svg+xml') {
        $form_fields['convert_to_svg'] = array(
            'label' => 'تبدیل به SVG',
            'input' => 'html',
            'html' => '<button type="button" class="button-secondary" onclick="convertToSVG(' . $post->ID . ')">
                        تبدیل به SVG
                      </button>
                      <div id="svg-convert-status-' . $post->ID . '" style="margin-top: 10px;"></div>'
        );
    }
    return $form_fields;
}
add_filter('attachment_fields_to_edit', 'add_svg_convert_button', 10, 2);

// اضافه کردن JavaScript برای تبدیل
function add_svg_converter_scripts() {
    global $pagenow;
    
    if ($pagenow == 'upload.php' || $pagenow == 'post.php' || $pagenow == 'media-upload.php') {
        ?>
        <script type="pmdelayedscript" data-perfmatters-type="text/javascript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1">
        function convertToSVG(attachmentId) {
            var statusDiv = document.getElementById('svg-convert-status-' + attachmentId);
            statusDiv.innerHTML = '<span style="color: #0073aa;">در حال تبدیل...</span>';
            
            var data = {
                'action': 'convert_image_to_svg',
                'attachment_id': attachmentId,
                'nonce': '<?php echo wp_create_nonce('convert_svg_nonce'); ?>'
            };
            
            jQuery.post(ajaxurl, data, function(response) {
                if (response.success) {
                    statusDiv.innerHTML = '<span style="color: #46b450;">✓ تبدیل شد! <a href="' + response.data.url + '" target="_blank">مشاهده SVG</a></span>';
                } else {
                    statusDiv.innerHTML = '<span style="color: #dc3232;">خطا: ' + response.data + '</span>';
                }
            });
        }
        </script>
        <?php
    }
}
add_action('admin_footer', 'add_svg_converter_scripts');

// تابع AJAX برای تبدیل تصویر به SVG
function convert_image_to_svg_ajax() {
    // بررسی nonce
    if (!wp_verify_nonce($_POST['nonce'], 'convert_svg_nonce')) {
        wp_die('خطای امنیتی');
    }
    
    $attachment_id = intval($_POST['attachment_id']);
    $image_path = get_attached_file($attachment_id);
    
    if (!file_exists($image_path)) {
        wp_send_json_error('فایل تصویر پیدا نشد');
        return;
    }
    
    // تبدیل تصویر به SVG
    $svg_content = create_svg_from_image($image_path, $attachment_id);
    
    if ($svg_content) {
        // ذخیره فایل SVG
        $upload_dir = wp_upload_dir();
        $original_filename = basename($image_path);
        $svg_filename = pathinfo($original_filename, PATHINFO_FILENAME) . '.svg';
        $svg_path = $upload_dir['path'] . '/' . $svg_filename;
        
        file_put_contents($svg_path, $svg_content);
        
        // اضافه کردن به کتابخانه رسانه
        $attachment = array(
            'guid' => $upload_dir['url'] . '/' . $svg_filename,
            'post_mime_type' => 'image/svg+xml',
            'post_title' => pathinfo($svg_filename, PATHINFO_FILENAME),
            'post_content' => '',
            'post_status' => 'inherit'
        );
        
        $svg_attachment_id = wp_insert_attachment($attachment, $svg_path);
        
        if ($svg_attachment_id) {
            wp_send_json_success(array(
                'id' => $svg_attachment_id,
                'url' => wp_get_attachment_url($svg_attachment_id)
            ));
        } else {
            wp_send_json_error('خطا در ایجاد فایل SVG در کتابخانه');
        }
    } else {
        wp_send_json_error('خطا در تبدیل تصویر');
    }
}
add_action('wp_ajax_convert_image_to_svg', 'convert_image_to_svg_ajax');

// تابع تبدیل تصویر به SVG
function create_svg_from_image($image_path, $attachment_id) {
    // گرفتن اطلاعات تصویر
    $image_info = getimagesize($image_path);
    if (!$image_info) return false;
    
    $width = $image_info[0];
    $height = $image_info[1];
    $mime_type = $image_info['mime'];
    
    // تبدیل تصویر به base64
    $image_data = file_get_contents($image_path);
    $base64 = base64_encode($image_data);
    
    // ایجاد SVG
    $svg_content = '<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="' . $width . '" height="' . $height . '" viewBox="0 0 ' . $width . ' ' . $height . '">
    <image x="0" y="0" width="' . $width . '" height="' . $height . '" 
           xlink:href="data:' . $mime_type . ';base64,' . $base64 . '"/>
</svg>';
    
    return $svg_content;
}

// نسخه بهتر: استفاده از Potrace برای تبدیل به SVG واقعی (اختیاری)
function create_traced_svg($image_path) {
    // این تابع برای استفاده از ابزارهای خارجی مثل Potrace
    // نیاز به نصب Potrace روی سرور دارد
    
    $output_path = pathinfo($image_path, PATHINFO_DIRNAME) . '/' . 
                   pathinfo($image_path, PATHINFO_FILENAME) . '_traced.svg';
    
    // تبدیل به bitmap اول
    $bitmap_path = pathinfo($image_path, PATHINFO_DIRNAME) . '/' . 
                   pathinfo($image_path, PATHINFO_FILENAME) . '.bmp';
    
    // فقط در صورت وجود ImageMagick
    if (extension_loaded('imagick')) {
        try {
            $imagick = new Imagick($image_path);
            $imagick->setImageFormat('bmp');
            $imagick->writeImage($bitmap_path);
            
            // اجرای Potrace (اگر نصب باشد)
            $command = "potrace -s -o " . escapeshellarg($output_path) . " " . escapeshellarg($bitmap_path);
            exec($command, $output, $return_code);
            
            // پاک کردن فایل موقت
            unlink($bitmap_path);
            
            if ($return_code === 0 && file_exists($output_path)) {
                return file_get_contents($output_path);
            }
        } catch (Exception $e) {
            // در صورت خطا از روش قبلی استفاده می‌کنیم
        }
    }
    
    return false;
}

// اضافه کردن ستون SVG در لیست رسانه‌ها
function add_svg_column($columns) {
    $columns['svg_status'] = 'SVG';
    return $columns;
}
add_filter('manage_media_columns', 'add_svg_column');

function show_svg_column_content($column_name, $attachment_id) {
    if ($column_name === 'svg_status') {
        $mime_type = get_post_mime_type($attachment_id);
        if ($mime_type === 'image/svg+xml') {
            echo '<span style="color: #46b450;">✓ SVG</span>';
        } elseif (strpos($mime_type, 'image') !== false) {
            echo '<button class="button-small" onclick="convertToSVG(' . $attachment_id . ')">تبدیل</button>';
        }
    }
}
add_action('manage_media_custom_column', 'show_svg_column_content', 10, 2);

// CSS برای بهبود نمایش
function add_svg_admin_styles() {
    echo '<style>
        .column-svg_status {
            width: 80px;
            text-align: center;
        }
        #svg-convert-status-' . get_the_ID() . ' {
            font-size: 12px;
            margin-top: 5px;
        }
    </style>';
}
add_action('admin_head', 'add_svg_admin_styles');
?>