براتی طراح سایت

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

مشخصات مقاله:
بروزرسانی: اردیبهشت ۱۴۰۴
نمایش نوار اطلاعیه سفارشی در پیشخوان
فهرست مطالب
نمایش دائمی نمایش موقت کدهای فانکشن
آموزش ویدیو کد سی اس اس مقایسه

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

مقدمه

در این مقاله قصد داریم نحوه نمایش نوار اطلاعیه سفارشی در پیشخوان وردپرس را آموزش دهیم. این ویژگی به شما امکان می‌دهد اطلاعیه‌های سفارشی شامل متن، لینک، تصویر، و استایل‌های اختصاصی 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;”;
}
 

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

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

 

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

4 پاسخ

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

چهار − دو =