WooCommerce Plugin Development Plan: Text Engraving Preview

با توجه به توضیحات ارائه شده، برای توسعه افزونه مورد نظر برای ووکامرس، می‌بایست چندین فایل مختلف را ایجاد نماییم. در زیر، کدهای مورد نیاز را به تفکیک فایل‌ها ارائه می‌کنیم:

فایل plugin.php

<?php
/*
Plugin Name: پیش نمایش حکاکی متن روی محصول
Description: افزونه پیش نمایش حکاکی متن روی محصول برای ووکامرس
Version: 1.0
Author: نام نویسنده
*/
// ثبت دسترسی
function wc_text_preview_add_capabilities() {
$capabilities = array(
'manage_options' => true,
);
foreach (array('administrator') as $role) {
$role = get_role($role);
foreach ($capabilities as $cap => $grant) {
$role->add_cap($cap);
}
}
}
add_action('admin_init', 'wc_text_preview_add_capabilities');
// افزودن صفحه تنظیمات
function wc_text_preview_settings_page() {
add_options_page(
'پیش نمایش حکاکی متن روی محصول',
'پیش نمایش حکاکی متن روی محصول',
'manage_options',
'wc_text_preview_settings',
'wc_text_preview_settings_callback'
);
}
add_action('admin_menu', 'wc_text_preview_settings_page');
// صفحه تنظیمات
function wc_text_preview_settings_callback() {
?>
<div class="wrap">
<h1>پیش نمایش حکاکی متن روی محصول</h1>
<form method="post" action="options.php">
<?php
settings_fields('wc_text_preview_settings');
do_settings_sections('wc_text_preview_settings');
?>
<table class="form-table">
<tr>
<th scope="row">فونت پیش‌فرض:</th>
<td>
<select name="wc_text_preview_font" id="wc_text_preview_font">
<?php
$fonts = scandir(WP_PLUGIN_DIR . '/wc-text-preview/fonts');
foreach ($fonts as $font) {
if ($font != '.' && $font != '..') {
?>
<option value="<?php echo $font; ?>"><?php echo $font; ?></option>
<?php
}
}
?>
</select>
</td>
</tr>
<tr>
<th scope="row">رنگ پیش‌فرض:</th>
<td>
<input type="text" name="wc_text_preview_color" id="wc_text_preview_color" value="#000000">
</td>
</tr>
</table>
<?php
submit_button();
?>
</form>
</div>
<?php
}
// ثبت تنظیمات
function wc_text_preview_settings_init() {
add_settings_section(
'wc_text_preview_settings_section',
'',
'',
'wc_text_preview_settings'
);
add_settings_field(
'wc_text_preview_font',
'فونت پیش‌فرض:',
'wc_text_preview_font_callback',
'wc_text_preview_settings',
'wc_text_preview_settings_section'
);
add_settings_field(
'wc_text_preview_color',
'رنگ پیش‌فرض:',
'wc_text_preview_color_callback',
'wc_text_preview_settings',
'wc_text_preview_settings_section'
);
register_setting('wc_text_preview_settings', 'wc_text_preview_font');
register_setting('wc_text_preview_settings', 'wc_text_preview_color');
}
add_action('admin_init', 'wc_text_preview_settings_init');
// 콜‌بک فونت پیش‌فرض
function wc_text_preview_font_callback() {
?>
<select name="wc_text_preview_font" id="wc_text_preview_font">
<?php
$fonts = scandir(WP_PLUGIN_DIR . '/wc-text-preview/fonts');
foreach ($fonts as $font) {
if ($font != '.' && $font != '..') {
?>
<option value="<?php echo $font; ?>"><?php echo $font; ?></option>
<?php
}
}
?>
</select>
<?php
}
// کال‌بک رنگ پیش‌فرض
function wc_text_preview_color_callback() {
?>
<input type="text" name="wc_text_preview_color" id="wc_text_preview_color" value="#000000">
<?php
}
// افزودن کد به صفحه محصول
function wc_text_preview_product_page() {
?>
<script>
jQuery(document).ready(function($) {
$('#wc_text_preview_checkbox').change(function() {
if ($(this).is(':checked')) {
$('#wc_text_preview_fields').show();
} else {
$('#wc_text_preview_fields').hide();
}
});
});
</script>
<?php
if (get_option('wc_text_preview_checkbox')) {
?>
<div id="wc_text_preview_fields" style="display:<?php echo get_option('wc_text_preview_checkbox') ? 'block' : 'none'; ?>">
<input type="text" id="wc_text_preview_text" placeholder="متن">
<select id="wc_text_preview_font">
<?php
$fonts = scandir(WP_PLUGIN_DIR . '/wc-text-preview/fonts');
foreach ($fonts as $font) {
if ($font != '.' && $font != '..') {
?>
<option value="<?php echo $font; ?>"><?php echo $font; ?></option>
<?php
}
}
?>
</select>
<input type="text" id="wc_text_preview_color" value="#000000">
<button id="wc_text_preview_button">پیش نمایش</button>
<div id="wc_text_preview_preview"></div>
</div>
<?php
}
}
add_action('woocommerce_after_add_to_cart_form', 'wc_text_preview_product_page');
// افزودن چک باکس به صفحه ویرایش محصول
function wc_text_preview_product_edit_page() {
?>
<div>
<label for="wc_text_preview_checkbox">
<input type="checkbox" id="wc_text_preview_checkbox" name="wc_text_preview_checkbox" <?php echo get_option('wc_text_preview_checkbox') ? 'checked' : ''; ?>>
فعال کردن پیش نمایش حکاکی متن روی محصول
</label>
</div>
<?php
}
add_action('woocommerce_product_options_general_product_data', 'wc_text_preview_product_edit_page');
// ثبت چک باکس
function wc_text_preview_checkbox_callback() {
?>
<input type="checkbox" id="wc_text_preview_checkbox" name="wc_text_preview_checkbox" <?php echo get_option('wc_text_preview_checkbox') ? 'checked' : ''; ?>>
<?php
}
// افزودن کد به صفحه ویرایش محصول
function wc_text_preview_product_edit_page_js() {
?>
<script>
jQuery(document).ready(function($) {
$('#wc_text_preview_checkbox').change(function() {
if ($(this).is(':checked')) {
$('#wc_text_preview_fields').show();
} else {
$('#wc_text_preview_fields').hide();
}
});
});
</script>
<?php
}
add_action('admin_footer', 'wc_text_preview_product_edit_page_js');
// تولید تصویر با GD
function wc_text_preview_generate_image($text, $font, $color, $image) {
$image = imagecreatefromstring(file_get_contents($image));
$text_color = imagecolorallocate($image, hexdec(substr($color, 1, 2)), hexdec(substr($color, 3, 2)), hexdec(substr($color, 5, 2)));
$font_path = WP_PLUGIN_DIR . '/wc-text-preview/fonts/' . $font;
imagettftext($image, 20, 0, 10, 20, $text_color, $font_path, $text);
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
}
// تولید تصویر با Imagick
function wc_text_preview_generate_image_imagick($text, $font, $color, $image) {
$imagick = new Imagick();
$imagick->readImage($image);
$draw = new ImagickDraw();
$draw->setFont(WP_PLUGIN_DIR . '/wc-text-preview/fonts/' . $font);
$draw->setFontSize(20);
$draw->setFillColor('#' . substr($color, 1));
$draw->annotation(10, 20, $text);
$imagick->drawImage($draw);
header('Content-Type: image/png');
echo $imagick->getImageBlob();
}

فایل js/product-page.js

jQuery(document).ready(function($) {
$('#wc_text_preview_button').click(function() {
var text = $('#wc_text_preview_text').val();
var font = $('#wc_text_preview_font').val();
var color = $('#wc_text_preview_color').val();
var image = $('#product_image').attr('src');
$.ajax({
type: 'POST',
url: ajax_object.ajax_url,
data: {
action: 'wc_text_preview_generate_image',
text: text,
font: font,
color: color,
image: image
},
success: function(response) {
$('#wc_text_preview_preview').html(response);
}
});
});
});

فایل js/product-edit-page.js

jQuery(document).ready(function($) {
$('#wc_text_preview_checkbox').change(function() {
if ($(this).is(':checked')) {
$('#wc_text_preview_fields').show();
} else {
$('#wc_text_preview_fields').hide();
}
});
});

فایل functions.php

function wc_text_preview_generate_image_ajax() {
$text = $_POST['text'];
$font = $_POST['font'];
$color = $_POST['color'];
$image = $_POST['image'];
wc_text_preview_generate_image($text, $font, $color, $image);
exit;
}
add_action('wp_ajax_wc_text_preview_generate_image', 'wc_text_preview_generate_image_ajax');
add_action('wp_ajax_nopriv_wc_text_preview_generate_image', 'wc_text_preview_generate_image_ajax');

فایل css/product-page.css

#wc_text_preview_fields {
display: none;
}

فایل css/product-edit-page.css

#wc_text_preview_fields {
display: none;
}

فایل fonts

در پوشه fonts فایل‌های فونت مورد نظر را قرار دهید.

فایل images

در پوشه images فایل‌های تصویر مورد نظر را قرار دهید.

فایل plugin.php

در این فایل کدهای افزونه را قرار دادیم.

فایل js

در این پوشه فایل‌های جاوا اسکریپت را قرار دادیم.

فایل css

در این پوشه فایل‌های سی‌اس‌اس را قرار دادیم.

فایل functions.php

در این فایل تابع ajax را قرار دادیم.

فایل ajax-object.php

در این فایل آبجکت ajax را قرار دادیم.

wp_localize_script( 'wc_text_preview_script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

فایل wc_text_preview_script.php

در این فایل اسکریپت جاوا اسکریپت را قرار دادیم.

wp_enqueue_script( 'wc_text_preview_script', WP_PLUGIN_URL . '/wc-text-preview/js/product-page.js', array( 'jquery' ) );

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