آموزش ساخت افزونه وردپرسی نمایش تبلیغات به صورت تصادفی در سایت

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

ساختار کلی افزونه

1. 1. ایجاد فایل اصلی افزونه:
      • در پوشه wp-content/plugins/، یک پوشه جدید برای افزونه ایجاد کنید، مانند random-ad-images.
      • درون این پوشه، یک فایل PHP به نام random-ad-images.php بسازید.
   2. کد اصلی افزونه: در فایل random-ad-images.php، کد زیر را اضافه کنید تا افزونه اصلی و ابتدایی ایجاد شود.

<?php
/*
Plugin Name: Random Ad Images
Description: نمایش تصاویر تبلیغاتی به صورت تصادفی در گوشه‌های سایت.
Version: 1.0
Author: Your Name
*/

// جلوگیری از دسترسی مستقیم به افزونه
if (!defined('ABSPATH')) {
exit;
}

// اضافه کردن منوی تنظیمات به بخش مدیریت
add_action('admin_menu', 'random_ad_images_menu');

function random_ad_images_menu() {
add_menu_page(
'تنظیمات افزونه تصاویر تصادفی',
'تصاویر تصادفی',
'manage_options',
'random-ad-images-settings',
'random_ad_images_settings_page'
);
}

// محتوای صفحه تنظیمات افزونه
function random_ad_images_settings_page() {
?>
<div class="wrap">
<h1>تنظیمات افزونه تصاویر تصادفی</h1>
<form method="post" action="options.php">
<?php
settings_fields('random_ad_images_settings_group');
do_settings_sections('random-ad-images-settings');
submit_button();
?>
</form>
</div>
<?php
}

// ثبت تنظیمات افزونه
add_action('admin_init', 'random_ad_images_settings');

function random_ad_images_settings() {
// تنظیمات گوشه نمایش تصاویر
register_setting('random_ad_images_settings_group', 'random_ad_images_position');
add_settings_section('random_ad_images_section', 'تنظیمات نمایش', null, 'random-ad-images-settings');

add_settings_field(
'random_ad_images_position_field',
'موقعیت نمایش تصویر',
'random_ad_images_position_callback',
'random-ad-images-settings',
'random_ad_images_section'
);
}

function random_ad_images_position_callback() {
$position = get_option('random_ad_images_position', 'bottom-right');
?>
<select name="random_ad_images_position">
<option value="bottom-right" <?php selected($position, 'bottom-right'); ?>>پایین راست</option>
<option value="bottom-left" <?php selected($position, 'bottom-left'); ?>>پایین چپ</option>
<option value="top-right" <?php selected($position, 'top-right'); ?>>بالا راست</option>
<option value="top-left" <?php selected($position, 'top-left'); ?>>بالا چپ</option>
</select>
<?php

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

افزودن انتخاب تصاویر و افکت نمایش

1. انتخاب تصاویر از گالری وردپرس:
   • در تنظیمات افزونه، باید بتوانید تصاویری را برای نمایش انتخاب کنید. از قابلیت wp.media استفاده کنید تا یک دکمه برای انتخاب تصاویر ایجاد شود.

add_settings_field(
'random_ad_images_field',
'انتخاب تصاویر',
'random_ad_images_callback',
'random-ad-images-settings',
'random_ad_images_section'
);

function random_ad_images_callback() {
$images = get_option('random_ad_images', []);
?>
<button id="upload_images_button" class="button">انتخاب تصاویر</button>
<div id="image_preview">
<?php
if (!empty($images)) {
foreach ($images as $image) {
echo '<img src="' . wp_get_attachment_url($image) . '" style="max-width:100px;margin:5px;">';
}
}
?>
</div>
<input type="hidden" name="random_ad_images" id="random_ad_images" value="<?php echo implode(',', $images); ?>">
<script>
jQuery(document).ready(function ($) {
$('#upload_images_button').click(function (e) {
e.preventDefault();
var frame = wp.media({
title: 'انتخاب تصاویر',
multiple: true,
library: { type: 'image' },
button: { text: 'افزودن تصاویر' }
});

frame.on('select', function () {
var images = frame.state().get('selection').toJSON();
var image_ids = images.map(image => image.id);
$('#random_ad_images').val(image_ids.join(','));

$('#image_preview').html('');
images.forEach(image => {
$('#image_preview').append('<img src="' + image.url + '" style="max-width:100px;margin:5px;">');
});
});

frame.open();
});
});
</script>
<?php

این کد یک دکمه ایجاد می‌کند که با کلیک بر روی آن می‌توانید تصاویر را از گالری وردپرس انتخاب کنید و آن‌ها را به عنوان تبلیغ برای نمایش ذخیره کنید.

2. افکت‌های نمایش تصاویر:
   • افزودن یک تنظیم برای انتخاب افکت نمایش (مانند فید، اسلاید، زوم) به شکل زیر:

add_settings_field(
'random_ad_images_effect_field',
'افکت نمایش',
'random_ad_images_effect_callback',
'random-ad-images-settings',
'random_ad_images_section'
);

function random_ad_images_effect_callback() {
$effect = get_option('random_ad_images_effect', 'fade');
?>
<select name="random_ad_images_effect">
<option value="fade" <?php selected($effect, 'fade'); ?>>فید</option>
<option value="slide" <?php selected($effect, 'slide'); ?>>اسلاید</option>
<option value="zoom" <?php selected($effect, 'zoom'); ?>>زوم</option>
</select>
<?php

نمایش تصاویر در سایت:

• در فایل افزونه، یک تابع برای نمایش تصادفی تصاویر بر اساس تنظیمات کاربر در گوشه سایت ایجاد کنید.

add_action('wp_footer', 'display_random_ad_images');

function display_random_ad_images() {
$images = get_option('random_ad_images', []);
$position = get_option('random_ad_images_position', 'bottom-right');
$effect = get_option('random_ad_images_effect', 'fade');

if (!empty($images)) {
$image_id = $images[array_rand($images)];
$image_url = wp_get_attachment_url($image_id);

echo '<div id="random-ad-image" style="position: fixed; ' . get_position_style($position) . '">';
echo '<img src="' . esc_url($image_url) . '" alt="تبلیغ" style="max-width:200px;">';
echo '</div>';

?>
<script>
jQuery(document).ready(function ($) {
$('#random-ad-image img').hide().<?php echo esc_js($effect); ?>(1000);
});
</script>
<?php
}
}

function get_position_style($position) {
switch ($position) {
case 'bottom-right':
return 'bottom: 10px; right: 10px;';
case 'bottom-left':
return 'bottom: 10px; left: 10px;';
case 'top-right':
return 'top: 10px; right: 10px;';
case 'top-left':
return 'top: 10px; left: 10px;';
default:
return 'bottom: 10px; right: 10px;';
}