بله، ما در وب‌دنج این درد را به خوبی می‌فهمیم! وقتی عنوان یک محصول یک خط است و عنوان محصول کناری سه خط، دکمه‌های «افزودن به سبد خرید» دیگر در یک راستا قرار نمی‌گیرند. این بهم‌ریختگی ظاهری، نه تنها ظاهر سایت شما را آماتور جلوه می‌دهد، بلکه تاثیر مستقیمی روی کاهش اعتماد کاربر و در نتیجه افت فروش شما دارد. اما نگران نباشید؛ امروز قرار است با یک ترفند فوق‌العاده ساده اما قدرتمند، این کابوس را برای همیشه تمام کنیم. با ما همراه باشید تا یاد بگیریم چگونه عنوان هر صفحه یا محصولی را به زیبایی در یک خط خلاصه کنیم و در انتهای آن سه نقطه (…) قرار دهیم.

چرا عناوین طولانی، قاتل خاموش رابط کاربری (UI) شما هستند؟

در دنیای طراحی سایت و رابط کاربری، تقارن و نظم حرف اول را می‌زند. چشم کاربر به صورت ناخودآگاه به دنبال الگوهای منظم می‌گردد. زمانی که در صفحه فروشگاه (Shop Page) یا حتی صفحه اصلی، باکس محصولات شما ارتفاع‌های متفاوتی داشته باشند، ذهن کاربر خسته می‌شود. از طرفی، در طراحی واکنش‌گرا (ریسپانسیو) برای موبایل، عناوین طولانی می‌توانند بخش عظیمی از صفحه نمایشگر گوشی را اشغال کنند و کاربر را مجبور به اسکرول‌های افقی و خسته‌کننده نمایند.

راه حل چیست؟ آیا باید از نویسندگان سایت بخواهیم عناوین را کوتاه بنویسند؟ قطعا خیر! عناوین طولانی برای سئو (SEO) و هدف‌گیری کلمات کلیدی دم‌دراز (Long-tail Keywords) بسیار حیاتی هستند. راه حل مهندسی و اصولی این است که عنوان در کدهای سایت (HTML) به صورت کامل وجود داشته باشد تا گوگل آن را بخواند، اما در ظاهر سایت (توسط CSS) برای کاربر کوتاه و منظم نمایش داده شود.

سه تفنگدار CSS: کدی که قالب شما را نجات می‌دهد

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

این سه خط کد جادویی به شرح زیر است:

/* 
 * کد محدود کردن متن در یک خط
 * منبع: وب‌دنج (WebDenj.ir) 
 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

کالبدشکافی کد: این سه خط دقیقا چه کار می‌کنند؟

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

خط اول (white-space: nowrap): این کد به مرورگر دستور می‌دهد که به هیچ وجه متن را نشکند و به خط بعدی نبرد. یعنی حتی اگر متن ۱۰۰ کلمه هم باشد، باید همه آن‌ها در همان خط اول پشت سر هم ردیف شوند.

خط دوم (overflow: hidden): حالا که متن در یک خط طولانی قرار گرفت، قطعا از کادر و باکسی که برای آن در نظر گرفته‌ایم بیرون می‌زند. این کد به مرورگر می‌گوید: «هر قسمتی از متن که از مرز تعیین شده (باکس محصول) بیرون زد را مخفی کن و نمایش نده!»

خط سوم (text-overflow: ellipsis): حالا متن در یک خط قرار گرفته و قسمت‌های اضافی آن هم مخفی شده است. اما کاربر از کجا بفهمد که این متن ادامه دارد؟ اینجاست که این خط کد وارد عمل می‌شود و به جای متنی که مخفی شده (دقیقا در لبه مرز کادر)، سه نقطه (…) قرار می‌دهد. این کار ظاهری بسیار حرفه‌ای و استاندارد به سایت شما می‌بخشد.

چگونه این کد را در المنتور پرو و جت انجین اجرا کنیم؟

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

مرحله اول: کافیست وارد ویرایشگر المنتور شوید و روی المان عنوان محصول (Product Title) یا هر متنی که می‌خواهید کوتاه شود کلیک کنید.
مرحله دوم: به تب پیشرفته (Advanced) بروید و بخش CSS سفارشی (Custom CSS) را باز کنید.
مرحله سوم: کد زیر را در آنجا قرار دهید (توجه کنید که کلمه selector در المنتور به همان المانی که انتخاب کرده‌اید اشاره می‌کند):

/* 
 * کد محدود کردن متن در یک خط
 * منبع: وب‌دنج (WebDenj.ir) 
 */
selector {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

یک پیشنهاد دوستانه و حرفه‌ای: برای اجرای این قابلیت‌های داینامیک و کنترل کامل روی ظاهر فروشگاه، داشتن ابزارهای اورجینال یک ضرورت است. شما دوستان و طراحان عزیز می‌توانید جدیدترین و امن‌ترین نسخه افزونه المنتور پرو (Elementor Pro) و همچنین ابزار بی‌رقیب ساخت شبکه‌های داینامیک یعنی افزونه جت انجین (JetEngine) را به صورت کاملاً اورجینال و بدون دستکاری کدهای مخرب، از مخزن امن وب‌دنج دانلود کنید. با ترکیب این دو افزونه، شما می‌توانید پیچیده‌ترین فروشگاه‌های اینترنتی را با چند کلیک و بدون نیاز به دانش برنامه‌نویسی پیشرفته خلق کنید.

سوالات متداول (FAQ)

آیا مخفی کردن بخشی از متن با CSS به سئوی سایت ضربه می‌زند؟
خیر، به هیچ وجه! ربات‌های گوگل کدهای HTML سایت شما را می‌خوانند و تمام متن عنوان در آنجا حضور دارد. این کد فقط ظاهر قضیه را برای کاربر زیباتر می‌کند و هیچ تاثیر منفی روی سئو یا رتبه‌بندی شما در نتایج جستجو نخواهد داشت.

آیا می‌توانم به جای یک خط، متن را در دو یا سه خط محدود کنم؟
بله! اگر می‌خواهید متن شما مثلاً بعد از ۲ خط سه نقطه بگیرد، باید از کدهای مربوط به Line-clamp استفاده کنید که ساختار متفاوتی دارد (شامل کدهای webkit-box می‌شود). اما برای محدود کردن به صورت تک‌خطی، همین سه خط کدی که در این مقاله معرفی کردیم بهترین، استانداردترین و سبک‌ترین انتخاب ممکن است.

نتیجه‌گیری: زیبایی در سادگی است. با همین چند خط کد ساده توانستید یکی از بزرگترین مشکلات ظاهری فروشگاه‌های اینترنتی را برطرف کنید. فراموش نکنید که وب‌دنج همیشه در کنار شماست تا با آموزش‌های کاربردی و ارائه افزونه‌های اورجینال، مسیر شما را برای تبدیل شدن به یک طراح وب حرفه‌ای هموار کند.

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

چرا افزودن فیلد کد ملی در ووکامرس اهمیت دارد؟

کد ملی یک شناسه یکتای ۱۰ رقمی برای هر فرد ایرانی است. داشتن این داده در فروشگاه اینترنتی می‌تواند تحولی جدی در مدیریت سفارش‌ها ایجاد کند.

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

• • مدیریت دقیق سفارش‌ها: شما می‌توانید سفارش‌های یک فرد را تنها با جستجوی کد ملی در پنل مدیریت پیدا کنید.
  • جلوگیری از ثبت سفارش‌های تکراری یا سوءاستفاده: با اعتبارسنجی الگوریتمی، از ورود کدهای جعلی جلوگیری می‌شود.
  • گزارش‌گیری حرفه‌ای: در خروجی اکسل یا سیستم‌های حسابداری، وجود کد ملی باعث یکپارچگی اطلاعات می‌شود.
  • دسته‌بندی مشتریان: امکان ایجاد کمپین‌های تخفیفی برای مشتریان خاص یا VIP فراهم می‌شود.
  • استفاده در فاکتور رسمی: در بسیاری از فروشگاه‌ها برای صدور فاکتور رسمی، دریافت کد ملی ضروری است.

ساختار و الگوریتم کد ملی ایرانی

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

ویژگی‌های اصلی کد ملی معتبر:

• • • طول دقیق آن باید ۱۰ رقم باشد.
    • فقط شامل اعداد ۰ تا ۹ باشد.
    • کدهای تکراری مانند 1111111111 یا 0000000000 معتبر نیستند.
    • رقم دهم به عنوان چک‌دیجیت طبق الگوریتم مشخصی محاسبه می‌شود.

در این آموزش، تمام این موارد در کد لحاظ شده است تا هیچ کد ملی جعلی در دیتابیس شما ذخیره نشود.

کد کامل افزودن فیلد کد ملی به ووکامرس

<?php
// تابع بررسی صحت کد ملی (اصلاح شده)
function check_national_code($code) {
    // بررسی طول و فقط اعداد
    if (!preg_match('/^[0-9]{10}$/', $code)) {
        return false;
    }
    
    // بررسی کدهای تکراری (0000000000 تا 9999999999)
    for ($i = 0; $i < 10; $i++) {
        if (preg_match('/^' . $i . '{10}$/', $code)) {
            return false;
        }
    }
    
    // الگوریتم محاسبه چک دیجیت
    $sum = 0;
    for ($i = 0; $i < 9; $i++) {
        $sum += (10 - $i) * intval(substr($code, $i, 1));
    }
    
    $ret = $sum % 11;
    $parity = intval(substr($code, 9, 1));
    
    if (($ret < 2 && $ret == $parity) || ($ret >= 2 && $ret == 11 - $parity)) {
        return true;
    }
    
    return false;
}

// اضافه کردن فیلد کد ملی به صفحه پرداخت
function add_custom_national_code_field() {
    ?>
    <div class="form-row form-row-wide woocommerce-additional-fields__field-wrapper">
        <label for="billing_national_code"><?php _e('کد ملی', 'woocommerce'); ?> <span class="required">*</span></label>
        <span class="woocommerce-input-wrapper">
            <input type="text" 
                   class="input-text" 
                   name="billing_national_code" 
                   id="billing_national_code" 
                   value="<?php echo esc_attr(wp_unslash($_POST['billing_national_code'] ?? '')); ?>"
                   maxlength="10"
                   pattern="[0-9]{10}"
                   placeholder="1234567890"
                   autocomplete="off" />
        </span>
    </div>
    <?php
}
add_action('woocommerce_after_checkout_billing_form', 'add_custom_national_code_field');

// اعتبارسنجی فیلد
function validate_custom_national_code_field() {
    $code = isset($_POST['billing_national_code']) ? sanitize_text_field(wp_unslash($_POST['billing_national_code'])) : '';
    
    if (empty($code)) {
        wc_add_notice(__('لطفاً کد ملی خود را وارد کنید.', 'woocommerce'), 'error');
        return;
    }
    
    if (!check_national_code($code)) {
        wc_add_notice(__('کد ملی وارد شده معتبر نیست.', 'woocommerce'), 'error');
    }
}
add_action('woocommerce_checkout_process', 'validate_custom_national_code_field');

// ذخیره کد ملی در سفارش
function save_custom_national_code_field($order_id) {
    if (!empty($_POST['billing_national_code'])) {
        $code = sanitize_text_field(wp_unslash($_POST['billing_national_code']));
        if (check_national_code($code)) {
            update_post_meta($order_id, '_billing_national_code', $code);
        }
    }
}
add_action('woocommerce_checkout_update_order_meta', 'save_custom_national_code_field');

// نمایش در پنل مدیریت (اصلاح شده)
function display_admin_order_national_code($order) {
    $national_code = get_post_meta($order->get_id(), '_billing_national_code', true);
    if ($national_code) {
        echo '<p><strong>' . __('کد ملی', 'woocommerce') . ':</strong> ' . esc_html($national_code) . '</p>';
    }
}
add_action('woocommerce_admin_order_data_after_billing_address', 'display_admin_order_national_code', 10, 1);

// نمایش در ایمیل‌ها و My Account
function display_national_code_in_order($order) {
    $national_code = get_post_meta($order->get_id(), '_billing_national_code', true);
    if ($national_code) {
        echo '<p><strong>کد ملی:</strong> ' . esc_html($national_code) . '</p>';
    }
}
add_action('woocommerce_order_details_after_order_table', 'display_national_code_in_order');
?>

نحوه نصب کد در وردپرس

برای اضافه کردن این قابلیت به سایت خود دو روش استاندارد دارید.

روش اول: افزودن به فایل functions.php

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

روش دوم: ساخت افزونه اختصاصی

یک پوشه جدید در مسیر wp-content/plugins ایجاد کنید. یک فایل PHP داخل آن قرار دهید و کد بالا را در آن قرار دهید. سپس افزونه را از پنل وردپرس فعال کنید. این روش حرفه‌ای‌تر است و وابسته به قالب نخواهد بود.

نمایش کد ملی در پنل مدیریت و سفارش‌ها

پس از ثبت سفارش، کد ملی در متای سفارش ذخیره می‌شود. شما می‌توانید آن را در بخش جزئیات سفارش، زیر اطلاعات صورتحساب مشاهده کنید. همچنین امکان توسعه کد برای نمایش در ایمیل‌ها، پنل کاربری مشتری و حتی فاکتورهای PDF وجود دارد.

نکات امنیتی مهم در ذخیره کد ملی

در این پیاده‌سازی از توابع sanitize_text_field برای پاکسازی ورودی و ساختار استاندارد هوک‌های ووکامرس استفاده شده است. این موضوع از حملات XSS جلوگیری می‌کند و باعث می‌شود اطلاعات به شکل ایمن در دیتابیس ذخیره شوند.

همچنین اعتبارسنجی الگوریتمی باعث می‌شود هیچ داده اشتباهی وارد سیستم نشود و دیتابیس شما تمیز و قابل اعتماد باقی بماند.

مشکلات رایج و راه‌حل‌ها

اگر فیلد نمایش داده نمی‌شود، ابتدا کش سایت و افزونه‌های کش را پاک کنید. در صورتی که خطای PHP دریافت کردید، مطمئن شوید کد را به درستی داخل تگ php قرار داده‌اید. اگر مقدار ذخیره نمی‌شود، بررسی کنید که هوک woocommerce_checkout_update_order_meta به درستی اجرا شود.

آیا این کد با بروزرسانی ووکامرس سازگار است؟

بله. چون از هوک‌های استاندارد ووکامرس استفاده شده، با بروزرسانی‌های آینده دچار مشکل نخواهد شد. این روش کاملاً اصولی و مطابق با استاندارد توسعه وردپرس است.

جمع‌بندی نهایی

افزودن فیلد کد ملی به صفحه تسویه حساب ووکامرس یک قابلیت حرفه‌ای و ضروری برای فروشگاه‌های ایرانی است. با استفاده از کدی که در این مقاله از وب دنج ارائه شد، شما می‌توانید یک سیستم کامل، امن و استاندارد برای دریافت و اعتبارسنجی کد ملی پیاده‌سازی کنید.

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