نمایش نوار اطلاعیه سفارشی در پیشخوان وردپرس با کد

بروزرسانی شده در ۱۶ دی ۱۴۰۳
چکیده و هدف مطلب:
نحوه نمایش نوار اطلاعیه سفارشی در پیشخوان وردپرس را آموزش دهیم. اطلاعیه‌های سفارشی شامل متن، لینک، تصویر، و استایل‌های اختصاصی CSS
نمایش نوار اطلاعیه سفارشی در پیشخوان
فهرست مطالب
نمایش دائمی نمایش موقت کدهای فانکشن
آموزش ویدیو کد سی اس اس مقایسه

معرفی نوار اطلاعیه سفارشی در پیشخوان وردپرس

مقدمه

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

نمایش بنر اعلامیه

ویژگی‌های نوار اطلاعیه سفارشی

  1. قابلیت نمایش دائمی یا جمع‌شونده

    • برخی نوارها به‌صورت ثابت نمایش داده می‌شوند و امکان بسته شدن ندارند.
    • برخی دیگر قابل جمع شدن هستند و مدیریت آن‌ها آسان‌تر است.
  2. شخصی‌سازی کامل

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

    • پیشنهاد می‌شود کدهای این آموزش در قالب فرزند (Child Theme) قرار گیرد تا در هنگام بروزرسانی قالب اصلی، اطلاعات شما حفظ شود.

ساخت بنر سفارشی در پیشخوان وردپرس

۱. قرار دادن کدها در فایل فانکشن قالب

ابتدا کدهای مربوطه را دریافت کرده و در فایل functions.php قالب خود قرار دهید. این فایل را می‌توانید از مسیر زیر ویرایش کنید:
پیشخوان وردپرس > نمایش > ویرایشگر پرونده پوسته

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

۲. تنظیم لینک و متن اطلاعیه

  • متن و لینک موردنظر خود را در بین کوتیشن‌ها (گیومه‌ها) قرار دهید.
  • برای مثال:
     
    echo '<a href="لینک شما">متن اطلاعیه شما</a>';

۳. تغییر رنگ پس‌زمینه

  • برای تغییر رنگ پس‌زمینه، از ابزارهای آنلاین مانند Google Color Picker استفاده کنید و کد رنگ دلخواه را در بخش مربوطه وارد کنید.
  • نمونه کد تغییر رنگ:
    background-color: #ffffff;

۴. افزودن تصویر سفارشی

  • تصویر موردنظر را در بخش رسانه‌ها آپلود کنید.
  • از فرمت PNG با ابعاد ۸۰×۸۰ پیکسل استفاده کنید.
  • لینک تصویر را کپی کرده و در کد مربوطه جایگذاری کنید:
     
    <img src="لینک تصویر شما" alt="توضیح تصویر">

تفاوت نوارهای ثابت و جمع‌شونده

  • بنر ثابت:
    • همیشه در پیشخوان نمایش داده می‌شود و قابلیت بسته شدن ندارد.
    • مناسب برای اطلاعیه‌های مهم و ضروری.

 
add_action(‘admin_notices’, ‘es_custom_dashboard_banner’);
function es_custom_dashboard_banner() {
    // فقط در صفحه اصلی داشبورد نمایش داده شود
    $screen = get_current_screen();
    if ($screen->id !== ‘dashboard’) {
        return;
    }
    ?>
    <div style=”background-color: #ffffff; padding: 20px; margin-top: 35px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; position: relative; width: calc(100% – 40px);”>
        <div style=”display: flex; align-items: center; justify-content: space-between;”>
            <div style=”flex: 1;”>
                <ul style=”margin: 0; padding: 0; list-style: none; line-height: 1.8;”>
                    <li>طراحی سایت: <strong>محمد براتی</strong></li>
                    <li>ارتباط با پشتیبان:
                        <strong><a href=”https://mrbarati.com”target=”_blank”
                        style=”color: #0073aa; text-decoration: none;”>https://mrbarati.com</a></strong>
                    </li>
                    <li style=”margin-top: 20px;”>خدمات پشتیبانی ما شامل: تستتتتتتتتتتتتتتتتتتتتتتتتتتتتتتت</li>
                </ul>
            </div>
            <div style=”flex: 0; text-align: center;”>
                <img src=”https://adeldoor.com/wp-content/uploads/2025/01/sali-icon.png”
                     style=”height: auto; margin-left: 5px;” alt=”Logo”>
            </div>
        </div>
    </div>
    <?php
}

  • نوار جمع‌شونده:
    • کاربر می‌تواند آن را بسته یا باز کند.
    • مناسب برای اطلاع‌رسانی‌های اختیاری یا موقت.

 
add_action( ‘wp_dashboard_setup’, ‘es_add_dashboard_widget’ );
function es_add_dashboard_widget() {
    wp_add_dashboard_widget(‘my_dashboard_widget’,’تماس با طراح سایت’,’my_co_info’);
}
function my_co_info() {
    echo “&lt;ul&gt;
        &lt;li&gt;&lt;img src=’https://mrbarati.com/wp-content/uploads/2025/01/sali-icon.png’ style=’margin-right: 370px; margin-bottom: -70px;’&gt;&lt;/li&gt;
        &lt;li&gt;طراحی سایت : &lt;strong&gt;محمد براتی&lt;/strong&gt;&lt;/li&gt;
        &lt;li&gt;ارتباط با پشتیبان : &lt;strong&gt;&lt;a href=’https://mrbarati.com’&gt;mrbarati&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
    &lt;/ul&gt;”;
}
 

مقاله افزایش سرعت المنتور

ستاره⭐⭐⭐⭐مارارنگی کنید

۴/۵ - (۲ امتیاز)

2 پاسخ

دیدگاهتان را بنویسید

20 + 11 =