به نام خدا و سلام

اگر توسعه دهنده پلاگین های وردپرس هستید یا بیشتر سمت ادمین وردپرس کار می کنید و نیاز دارید تا استایلهای شما با استایلهای وردپرس همخوانی داشته باشه بهتر از کلاسهای اماده خود وردپرس استفاده کنید.

این کلاس ها در این مسیر قابل رویته:

    wp-admin/css/common.css
    wp-admin/css/dashboard.css

در ادامه لیست پرکاربردی که از هوش مصنوعی استخراج شده تقدیم شما میشه:

🎨 کلاس‌های Layout و چیدمان

Containerها و Wrapperها:

.wrap           /* کانتینر اصلی صفحات ادمین */
.widefat        /* المنت با عرض کامل */
.card           /* کارت با استایل وردپرس */
.postbox        /* باکس شبیه ویرایش پست */
.metabox-holder /* نگهدارنده متاباکس */

Columns و Grid:

.columns-2      /* دو ستونه */
.columns-3      /* سه ستونه */
.column         /* ستون تکی */
.col-2          /* عرض 50% */
.col-3          /* عرض 33% */
.auto-fold      /* حالت responsive */

📊 کلاس‌های جدول (Tables)

ساختار جدول:

echo '<table class="widefat fixed striped">';
echo '<table class="wp-list-table widefat fixed striped">';

استایل‌های جدول:

.widefat        /* عرض کامل */
.fixed          /* عرض ثابت برای ستون‌ها */
.striped        /* خطوط راه‌راه */
.has-actions    /* دارای اکشن‌ها */

وضعیت ردیف‌ها:

.alternate      /* ردیف متناوب */
.active         /* فعال */
.inactive       /* غیرفعال */
.deleted        /* حذف شده */

🎯 کلاس‌های فرم (Forms)

فیلدهای فرم:

.form-table     /* جدول فرم */
.form-wrap      /* دورپیچ فرم */
.form-field     /* فیلد فرم */
.description    /* توضیحات فیلد */

Inputها:

.regular-text   /* فیلد متن معمولی */
.large-text     /* فیلد متن بزرگ */
.small-text     /* فیلد متن کوچک */
.code           /* برای نمایش کد */

Select و Button:

.button         /* دکمه معمولی */
.button-primary /* دکمه اصلی */
.button-secondary /* دکمه ثانویه */
.button-link    /* دکمه لینک‌مانند */

📝 کلاس‌های تایپوگرافی

متن‌ها:

.description    /* متن توضیحی */
.howto          /* متن راهنما */
.help-tab       /* تب کمک */
.code           /* نمایش کد */

عنوان‌ها:

.hndle          /* دسته کارت (برای درگ کردن) */
.inside         /* محتوای داخل کارت */

🔔 کلاس‌های اعلان (Notices)

انواع Notice:

echo '<div class="notice">';
echo '<div class="notice notice-success">';  /* ✅ موفقیت */
echo '<div class="notice notice-warning">';  /* ⚠️ اخطار */
echo '<div class="notice notice-error">';    /* ❌ خطا */
echo '<div class="notice notice-info">';     /* ℹ️ اطلاعات */

وضعیت Notice:

.is-dismissible /* قابل بستن */
.notice-alt     /* آلترنتیو */

🎮 کلاس‌های تعاملی (Interactive)

Tabها و Navigation:

.nav-tab-wrapper    /* دورپیچ تب‌ها */
.nav-tab            /* تب معمولی */
.nav-tab-active     /* تب فعال */

Accordion:

.accordion-container    /* کانتینر آکاردیون */
.accordion-section     /* بخش آکاردیون */
.control-section       /* بخش کنترل */

📋 کلاس‌های لیست (Lists)

لیست‌های وردپرس:

.wp-list-table        /* لیست استاندارد وردپرس */
.subsubsub            /* زیرمنوها */

آیتم‌های لیست:

.plugin-card         /* کارت پلاگین */
.theme-browser       /* مرورگر تم */
.upload-theme        /* آپلود تم */

🎪 کلاس‌های وضعیت (Status)

وضعیت‌های مختلف:

.updated            /* بروزرسانی شده */
.error              /* خطا */
.fade               /* fade effect */
.hidden             /* مخفی */

رنگ‌ها:

.color-picker       /* انتخابگر رنگ */
.wp-color-result    /* نتیجه رنگ */

🔧 کلاس‌های ابزار (Utilities)

Alignment:

.alignleft         /* چپ‌چین */
.alignright        /* راست‌چین */
.aligncenter       /* وسط‌چین */

Spacing:

.margin-top        /* فاصله بالا */
.margin-bottom     /* فاصله پایین */
.padding           /* پدینگ */

💡 مثال‌های کاربردی

ساخت یک صفحه ادمین استاندارد:

echo '<div class="wrap">';
    echo '<h1>عنوان صفحه</h1>';
    
    echo '<div class="card">';
        echo '<h2 class="title">بخش اول</h2>';
        echo '<table class="form-table">';
            echo '<tr>';
                echo '<th scope="row"><label>فیلد اول</label></th>';
                echo '<td><input type="text" class="regular-text"></td>';
            echo '</tr>';
        echo '</table>';
    echo '</div>';
    
    echo '<div class="notice notice-success is-dismissible">';
        echo '<p>عملیات با موفقیت انجام شد.</p>';
    echo '</div>';
echo '</div>';

ساخت جدول لیست:

echo '<table class="wp-list-table widefat fixed striped">';
    echo '<thead>';
        echo '<tr>';
            echo '<th scope="col" class="manage-column">ستون اول</th>';
            echo '<th scope="col" class="manage-column">ستون دوم</th>';
        echo '</tr>';
    echo '</thead>';
    echo '<tbody>';
        echo '<tr class="alternate">';
            echo '<td>داده اول</td>';
            echo '<td>داده دوم</td>';
        echo '</tr>';
    echo '</tbody>';
echo '</table>';

ساخت تب‌های ناوبری:

echo '<div class="wrap">';
    echo '<h2 class="nav-tab-wrapper">';
        echo '<a href="#" class="nav-tab nav-tab-active">تب اول</a>';
        echo '<a href="#" class="nav-tab">تب دوم</a>';
    echo '</h2>';
echo '</div>';