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

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

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;';
}