شرح تغير شكل رسالة البريد الالكتروني لمنتديات الزين فورو

مهدي حميد · اليوم في 01:06

فن تصميم رسائل البريد الإلكتروني: كيف تجعل رسائل منتداك أكثر احترافية؟

دليل مخصص ومقدم من مجتمع فورارنت التقني

مقدمة:
تعتبر رسائل البريد الإلكتروني (Email Notifications) هي الواجهة الخارجية لمنتداك. عندما يتلقى المستخدم إشعاراً بتسجيل جديد أو استعادة كلمة مرور، فإن أول ما يقع عليه عينه هو التصميم. التصميم الباهت قد يعطي انطباعاً بعدم الاهتمام، بينما التصميم المنسق يعكس احترافية منصة فورارنت | 4rnet.

في هذا المقال، نسلط الضوء على كيفية تحويل رسائل البريد التقليدية إلى لوحة فنية تقنية من خلال تعديل القوالب الأساسية في سكربت XenForo واستخدام أكواد حديثة تتناسب مع تطلعات المستخدمين.

سحر الخطوط العربية (Typography) استخدام خطوط انسيابية مثل Cairo يوفر مساحات مريحة بين الحروف، مما يجعل قراءة الرسائل على الجوال أمراً ممتعاً وغير مجهد للعين.
الهيدر (Header) بلمسة الهوية البصرية
استخدام التدرج اللوني (Gradients) مع الألوان الزرقاء العميقة يعطي عمقاً للتصميم ويعزز العلامة التجارية في ذاكرة المستخدم منذ اللحظة الأولى.
هيكلة المحتوى بنظام "البطاقات" (Card UI)
وضع المحتوى داخل "حاوية" بيضاء بخلفية رمادية فاتحة يركز انتباه القارئ على نص الرسالة فقط ويقلل من التشتت البصري.

كود القالب المطور (MAIL_CONTAINER):
قم بنسخ الكود أدناه واستبداله بالكامل داخل قالب MAIL_CONTAINER في منتداك:

HTML:

<!DOCTYPE html>
<html lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}">
<head>
    <meta data-fr-http-equiv="Content-Type" content="text/html; charset=utf-8">
    <base href="{$xf.options.boardUrl}/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    <title>{$subject}</title>
    <style>
        body { background-color: #f8f9fa; font-family: 'Cairo', Tahoma, sans-serif; margin: 0; padding: 0; }
        .container { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #e1e8ed; max-width: 600px; margin: 20px auto; }
        .header { background: linear-gradient(135deg, #185abd 0%, #114692 100%); padding: 40px 20px; text-align: center; }
        .header a { color: #ffffff; text-decoration: none; font-size: 26px; font-weight: 700; }
        .content { padding: 40px 30px; color: #333333; line-height: 1.8; font-size: 16px; }
        .footer { background-color: #f1f4f7; padding: 30px 20px; text-align: center; color: #657786; font-size: 13px; border-top: 1px solid #e1e8ed; }
        .copyright { margin-top: 15px; color: #185abd; font-weight: bold; font-size: 14px; }
    </style>
</head>
<body dir="{$xf.language.text_direction}">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
                <tr>
                    <td class="header">
                        <a href="{{ link('canonical:index') }}">{$xf.options.boardTitle}</a>
                    </td>
                </tr>
                <tr>
                    <td class="content" align="{{ $xf.isRtl ? 'right' : 'left' }}">
                        {$html|raw}
                    </td>
                </tr>
                <tr>
                    <td class="footer">
                        {{ phrase('visit_board_html', {'board_url': link('canonical:index'), 'board_title': $xf.options.boardTitle}) }}
                        <xf:if contentcheck="true">
                            <div class="footerExtra"><xf:contentcheck>{{ phrase('email_footer_html') }}</xf:contentcheck></div>
                        </xf:if>
                        <div class="copyright">
                            جميع الحقوق محفوظة &copy; {{ date($xf.time, 'Y') }}
                            <br>
                            فورارنت | 4rnet
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

<mail:text>
{$text}

-----------------------------
{{ phrase('visit_board_text', {'board_title': $xf.options.boardTitle, 'board_url': link('canonical:index')}) }}
{{ phrase('email_footer_text') }}

جميع الحقوق محفوظة فورارنت | 4rnet
</mail:text>

طريقة التركيب:

توجه إلى لوحة تحكم الإدارة > المظهر > القوالب.
ابحث عن القالب: MAIL_CONTAINER.
استبدل محتوى القالب بالكامل بالكود الموجود أعلاه (تأكد من شمول كود الـ text في الأسفل).
اضغط على حفظ.
يمكنك معاينة النتيجة عبر أداة اختبار خروج البريد في لوحة التحكم.

معاينة :

خلاصة
التفاصيل الصغيرة هي ما يصنع الفارق بين المواقع العادية والمواقع الاحترافية. بريد موقعك هو سفيرك في صندوق وارد المستخدم، فاجعله يليق بمنصتك.

تم إعداد المقال بواسطة: مهدي حميد

shqawe · اليوم في 11:31

بارك الله فيك اخي مهدي على هذا الشرح الاكثر من رائع والمفيد حقيقة لاهمية استخدامه فالزين فورو تستخدم رسائل البريد اكثر من اي سكربت منتديات آخر وتنسيق البريد شيء مهم

نقطة بسيطة احببت ان اضيفها للشرح وهي

يفضل استخدام العبارات بدلا من كتابة الكلام مباشرة داخل القوالب وذلك لسهولة قرائة الكود وترجمته عند طباعته وايضا لسهولة ترجمة الكود لعدة لغات

احترامي وتقديري
اخوك
شقاوي

مهدي حميد · اليوم في 12:42

shqawe قال:
بارك الله فيك اخي مهدي على هذا الشرح الاكثر من رائع والمفيد حقيقة لاهمية استخدامه فالزين فورو تستخدم رسائل البريد اكثر من اي سكربت منتديات آخر وتنسيق البريد شيء مهم

نقطة بسيطة احببت ان اضيفها للشرح وهي

يفضل استخدام العبارات بدلا من كتابة الكلام مباشرة داخل القوالب وذلك لسهولة قرائة الكود وترجمته عند طباعته وايضا لسهولة ترجمة الكود لعدة لغات

احترامي وتقديري
اخوك
شقاوي

شكرًا جزيلاً ..
اخي تركي على هذا التنبية .. في المواضيع المقبله ساستخدم العبارات ان شاء الله

البحث

شرح تغير شكل رسالة البريد الالكتروني لمنتديات الزين فورو

فن تصميم رسائل البريد الإلكتروني: كيف تجعل رسائل منتداك أكثر احترافية؟ دليل مخصص ومقدم من مجتمع فورارنت التقني مقدمة: تعتبر رسائل البريد الإلكتروني...

مهدي حميد

عضو جديد

shqawe

.:: تركي الودعاني ::.

مهدي حميد

عضو جديد