امنیت وردپرس روی Nginx: راهنمای جامع تحکیم امنیت وبسایت
در دنیای دیجیتال امروز، وبسایتها به مثابه ویترین کسبوکارها و پلتفرمهای ارتباطی عمل میکنند. وردپرس، به عنوان محبوبترین سیستم مدیریت محتوا (CMS)، سهم عظیمی از وب را به خود اختصاص داده است. اما محبوبیت بالا، آن را به هدفی جذاب برای مهاجمان تبدیل کرده است. از سوی دیگر، Nginx به عنوان یک وبسرور قدرتمند و کارآمد، انتخابی ایدهآل برای میزبانی وردپرس است که با پیکربندی صحیح، میتواند لایههای دفاعی مستحکمی در برابر تهدیدات سایبری ایجاد کند. این مقاله به بررسی جامع راهکارهای افزایش امنیت وردپرس روی Nginx میپردازد و اصول، گامها و استراتژیهای پیشرفتهای را برای محافظت از وبسایت شما ارائه میدهد.
مقدمه: چرا امنیت وردپرس روی Nginx حیاتی است؟
تعداد فزاینده حملات سایبری، سرقت اطلاعات و خرابکاری وبسایتها، ضرورت توجه به امنیت را بیش از پیش آشکار میسازد. وردپرس، با وجود انعطافپذیری و قابلیتهای فراوان، به دلیل ماهیت متنباز بودن و استفاده گسترده از افزونهها و پوستههای شخص ثالث، مستعد آسیبپذیریهای امنیتی است. Nginx، با معماری رویدادمحور و بهینه خود، میتواند پایهای مستحکم برای وردپرس فراهم کند، اما تنها با پیکربندی دقیق و آگاهانه است که پتانسیل امنیتی آن به طور کامل محقق میشود.
تفاوتهای Nginx و Apache در زمینه امنیت
درک تفاوتهای اساسی بین Nginx و Apache برای پیادهسازی استراتژیهای امنیتی مؤثر ضروری است. Apache، با معماری مبتنی بر فرآیند (process-driven) و پشتیبانی گسترده از فایلهای .htaccess، امکان پیکربندی محلی و داینامیک را فراهم میکند که میتواند هم یک مزیت و هم یک ضعف امنیتی باشد. از سوی دیگر، Nginx با معماری رویدادمحور (event-driven) و کارایی بالاتر در مدیریت همزمان اتصالات، تمامی پیکربندیها را در فایلهای اصلی خود (معمولاً nginx.conf و فایلهای موجود در sites-available) متمرکز میکند. این رویکرد، اگرچه نیازمند دسترسی روت (root) به سرور برای تغییرات است، اما کنترل متمرکز و دقیقتری بر دسترسیها و قوانین امنیتی فراهم میآورد و از پیچیدگیهای امنیتی ناشی از فایلهای .htaccess متعدد جلوگیری میکند.
تهدیدات رایج امنیتی وردپرس
شناخت تهدیدات رایج، اولین گام در ایجاد یک دفاع مستحکم است. این تهدیدات شامل موارد زیر میشوند:
- حملات Brute Force: تلاش مکرر برای حدس زدن رمز عبور پنل مدیریت.
- اکسپلویتهای افزونهها و پوستهها: سوءاستفاده از آسیبپذیریهای موجود در کدهای افزونهها و قالبهای شخص ثالث.
- Cross-Site Scripting (XSS): تزریق کدهای مخرب به صفحات وب که توسط مرورگر کاربران اجرا میشوند.
- SQL Injection: تزریق دستورات SQL به پایگاه داده برای دسترسی یا تغییر اطلاعات.
- Distributed Denial of Service (DDoS): از کار انداختن وبسایت با ارسال حجم عظیمی از ترافیک مخرب.
- File Inclusion Vulnerabilities: شامل Local File Inclusion (LFI) و Remote File Inclusion (RFI) که مهاجم را قادر میسازد فایلهای دلخواه را روی سرور اجرا کند.
- دسترسی غیرمجاز به فایلها: تلاش برای مشاهده یا دستکاری فایلهای حساس مانند
wp-config.php.
اصول پیکربندی امن Nginx برای وردپرس
پیکربندی صحیح Nginx هسته اصلی تأمین امنیت وردپرس است. در این بخش، به مهمترین جنبههای این پیکربندی میپردازیم.
`location` بلاکها و کنترل دسترسی
بلاکهای `location` در Nginx امکان کنترل دقیق بر نحوه سرویسدهی فایلها و دایرکتوریها را فراهم میکنند. برای وردپرس، میتوان از این قابلیت برای محدود کردن دسترسی به فایلها و مسیرهای حساس استفاده کرد.
# جلوگیری از دسترسی به فایلهای پنهان (.ht* و .git*)
location ~ /.(git|ht) {
deny all;
}
# مسدودسازی دسترسی به فایلهای پیکربندی Nginx
location ~ /.(conf|yaml|yml) {
deny all;
}
# جلوگیری از اجرای فایلهای PHP در دایرکتوری آپلود (مثلاً در wp-content/uploads)
location ~* /(wp-content|wp-includes)/.*.php$ {
deny all;
}
# محدود کردن دسترسی به wp-config.php
location ~ wp-config.php {
deny all;
}
این پیکربندیها از دسترسی مستقیم به فایلهای حساس جلوگیری میکنند و لایه امنیتی قابل توجهی را به سایت اضافه میکنند.
`fastcgi_param` و امنیت PHP-FPM
وردپرس بر پایه PHP اجرا میشود و Nginx از طریق PHP-FPM با آن ارتباط برقرار میکند. پیکربندی امن `fastcgi_param` حیاتی است تا از اجرای کدهای مخرب جلوگیری شود. مهمترین پارامتر SCRIPT_FILENAME است که باید به طور صریح مسیر فایل PHP را مشخص کند:
location ~ .php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php8.2-fpm.sock; # مسیر سوکت PHP-FPM شما
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
# جلوگیری از اجرای فایلهای PHP ناشناخته
fastcgi_intercept_errors on;
}
با try_files $uri =404;، اطمینان حاصل میشود که تنها فایلهای PHP موجود در سرور پردازش میشوند و از تلاش برای اجرای فایلهای غیرموجود جلوگیری میشود.
تنظیمات SSL/TLS و HTTPS
رمزنگاری ترافیک با HTTPS از طریق SSL/TLS یک ضرورت اساسی برای امنیت وبسایت است. Nginx امکان پیکربندی قوی SSL را فراهم میکند. استفاده از گواهینامههای Let’s Encrypt یا سایر مراجع معتبر توصیه میشود. حتماً از پروتکل TLSv1.2 و TLSv1.3 و مجموعههای رمزنگاری (cipher suites) قوی استفاده کنید و پروتکلهای قدیمیتر مانند SSLv2 و SSLv3 و TLSv1.0 و TLSv1.1 را غیرفعال کنید.
listen 443 ssl http2;
listen [::]:443 ssl http2;
ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers “EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH”;
ssl_session_timeout 1d;
ssl_session_cache shared:SSL:10m;
ssl_session_tickets off;
ssl_dhparam /etc/ssl/certs/dhparam.pem; # تولید شده با openssl dhparam -out dhparam.pem 4096
برای هدایت تمامی ترافیک HTTP به HTTPS، از ریدایرکت 301 استفاده کنید:
server {
listen 80;
listen [::]:80;
server_name yourdomain.com www.yourdomain.com;
return 301 https://$server_name$request_uri;
}
افزایش امنیت وردپرس از طریق Nginx: گامهای پیشرفته
فراتر از پیکربندیهای پایه، Nginx ابزارهایی برای مقابله با حملات پیچیدهتر ارائه میدهد.
Web Application Firewall (WAF) با Nginx
ادغام Nginx با یک WAF مانند ModSecurity، لایه امنیتی قدرتمندی در برابر حملات تزریق SQL، XSS و سایر آسیبپذیریهای وب فراهم میکند. ModSecurity به عنوان یک ماژول Nginx، ترافیک ورودی را تحلیل کرده و بر اساس مجموعهای از قوانین، حملات را شناسایی و مسدود میکند. این یک دفاع حیاتی در برابر حملات لایه 7 است.
محدودسازی نرخ درخواست (Rate Limiting) برای جلوگیری از حملات Brute Force و DoS
حملات Brute Force و DoS میتوانند با ارسال حجم زیادی از درخواستها، وبسایت را از دسترس خارج کنند. Nginx با ماژول limit_req امکان محدودسازی نرخ درخواستها را فراهم میکند.
# در بخش http{}
limit_req_zone $binary_remote_addr zone=login:10m rate=5r/s;
# در بخش server{} و برای مسیر wp-login.php
location /wp-login.php {
limit_req zone=login burst=10 nodelay;
include fastcgi_params;
fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
این پیکربندی، دسترسی به wp-login.php را به ۵ درخواست در ثانیه محدود میکند و در صورت افزایش ناگهانی درخواستها، ۱۰ درخواست اضافی را به صورت موقت بافر میکند.
HTTP/2 و Brotli برای بهبود عملکرد و امنیت
استفاده از HTTP/2 نه تنها عملکرد بارگذاری صفحات را بهبود میبخشد، بلکه با پروتکل HTTPS همراه شده و امنیت ترافیک را تضمین میکند. فشردهسازی Brotli نیز به کاهش حجم دادههای منتقل شده کمک میکند که خود به طور غیرمستقیم با کاهش زمان نمایش محتوا و پایداری سرور، به امنیت نیز کمک میکند.
تنظیمات هدرهای امنیتی (HSTS, CSP, X-Frame-Options)
هدرهای امنیتی HTTP، دفاع در برابر حملات رایج مرورگرمحور را فراهم میکنند:
Strict-Transport-Security (HSTS): مرورگر را مجبور میکند تا همیشه از HTTPS استفاده کند و از حملات Downngrade و Man-in-the-Middle جلوگیری میکند.Content-Security-Policy (CSP): کنترل میکند که چه منابعی (اسکریپتها، استایلها، تصاویر) میتوانند توسط مرورگر بارگذاری شوند و از حملات XSS جلوگیری میکند.X-Frame-Options: از بارگذاری سایت شما در یک<iframe>جلوگیری میکند و حملات Clickjacking را خنثی میسازد.X-Content-Type-Options: nosniff: از حدس زدن Content-Type توسط مرورگر جلوگیری کرده و جلوی حملات MIME-sniffing را میگیرد.Referrer-Policy: کنترل میکند که چه اطلاعاتی در هدرReferrerارسال شود.
add_header Strict-Transport-Security “max-age=31536000; includeSubDomains; preload” always;
add_header X-Frame-Options “SAMEORIGIN” always;
add_header X-Content-Type-Options “nosniff” always;
add_header X-XSS-Protection “1; mode=block” always;
add_header Referrer-Policy “no-referrer-when-downgrade” always;
# Content-Security-Policy باید با دقت پیکربندی شود تا سایت را خراب نکند.
# add_header Content-Security-Policy “default-src ‘self’;” always;
پیکربندی امنیتی وردپرس: لایهای مکمل
امنیت وبسایت تنها به وبسرور محدود نمیشود؛ خود وردپرس نیز نیازمند توجه ویژه است. این لایه دفاعی به عنوان مکمل پیکربندی Nginx عمل میکند.
بهروزرسانی منظم هسته، افزونهها و پوستهها
بخش عمدهای از حملات سایبری از طریق سوءاستفاده از آسیبپذیریهای شناخته شده در نسخههای قدیمی وردپرس، افزونهها و پوستهها انجام میشود. اطمینان از بهروز بودن تمامی اجزای وردپرس، اولین و حیاتیترین گام در حفظ امنیت است. همیشه قبل از بهروزرسانیهای عمده، از سایت خود بکآپ تهیه کنید.
استفاده از رمزهای عبور قوی و احراز هویت دو مرحلهای (2FA)
رمزهای عبور قوی و منحصربهفرد برای تمامی کاربران وردپرس (به ویژه مدیران) ضروری هستند. فعالسازی احراز هویت دو مرحلهای (2FA) با استفاده از افزونههای معتبر، لایه امنیتی قدرتمندی را در برابر حملات Brute Force فراهم میکند. این امر به ویژه برای پنل مدیریت وردپرس بسیار مهم است.
محدود کردن دسترسی به پنل مدیریت (wp-admin)
میتوانید با استفاده از پیکربندی Nginx، دسترسی به دایرکتوری /wp-admin را به آدرسهای IP خاص محدود کنید. این کار به شدت امنیت پنل مدیریت شما را افزایش میدهد.
location /wp-admin {
allow YOUR_IP_ADDRESS; # آدرس IP خود را وارد کنید
deny all;
# سایر پیکربندیهای مربوط به وردپرس را در اینجا قرار دهید
include fastcgi_params;
fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
به یاد داشته باشید که در صورت تغییر آدرس IP خود، این تنظیمات را بهروز کنید.
پیکربندی فایل `wp-config.php`
فایل wp-config.php حاوی اطلاعات بسیار حساس پایگاه داده است. علاوه بر محدود کردن دسترسی Nginx به این فایل، میتوانید با افزودن تنظیمات زیر، امنیت آن را افزایش دهید:
- کلیدهای امنیتی وردپرس (Salts): همیشه از کلیدهای منحصربهفرد و طولانی استفاده کنید و آنها را مرتباً بهروز کنید.
- غیرفعال کردن ویرایشگر فایلها: با افزودن
define('DISALLOW_FILE_EDIT', true);، از ویرایش فایلهای افزونه و پوسته از طریق پنل مدیریت جلوگیری کنید. - تغییر پیشوند جداول پایگاه داده: پیشوند
wp_را به یک پیشوند تصادفی و پیچیده تغییر دهید تا حملات SQL Injection را دشوارتر کنید.
بکآپگیری منظم و استراتژی بازیابی
حتی با قویترین اقدامات امنیتی، هیچ سیستمی ۱۰۰٪ ایمن نیست. بکآپگیری منظم از تمامی فایلهای وردپرس و پایگاه داده، آخرین خط دفاعی شماست. اطمینان حاصل کنید که بکآپها در مکانی امن و خارج از سرور اصلی نگهداری میشوند و استراتژی بازیابی واضحی برای بازگرداندن سایت در صورت وقوع حمله دارید.
مانیتورینگ و واکنش به حوادث امنیتی
امنیت یک فرآیند مداوم است، نه یک رویداد یکباره. مانیتورینگ فعال و داشتن یک برنامه واکنش به حوادث ضروری است.
بررسی لاگهای Nginx و وردپرس
لاگهای دسترسی Nginx (access logs) و لاگهای خطا (error logs) منابع ارزشمندی برای شناسایی الگوهای ترافیک غیرعادی و تلاش برای حملات هستند. همچنین، افزونههای امنیتی وردپرس میتوانند لاگهای فعالیت کاربران و رویدادهای امنیتی را ثبت کنند. بررسی منظم این لاگها میتواند به شناسایی زودهنگام نفوذها کمک کند. برای کسب اطلاعات بیشتر و مشاوره تخصصی در زمینه امنیت وبسایت، میتوانید از محتوای آموزشی مرتبط با امنیت وردپرس دیدن کنید.
ابزارهای اسکن امنیتی
استفاده از ابزارهای اسکن امنیتی آنلاین و افزونههای وردپرسی (مانند Wordfence، Sucuri) برای شناسایی آسیبپذیریها و بدافزارها ضروری است. این ابزارها میتوانند به شما در یافتن نقاط ضعف و رفع آنها قبل از سوءاستفاده مهاجمان کمک کنند.
پروتکل واکنش به حمله
یک برنامه مشخص برای واکنش به حوادث امنیتی داشته باشید. این برنامه باید شامل گامهایی برای شناسایی، containment (محدودسازی نفوذ)، ریشهیابی، بازیابی و پس از آن، ارزیابی و بهبود سیستم باشد.
جدول مقایسه اقدامات امنیتی Nginx و وردپرس
این جدول به شما کمک میکند تا نقش هر بخش را در تأمین امنیت وردپرس روی Nginx بهتر درک کنید.
| حوزه مسئولیت | اقدامات امنیتی کلیدی |
|---|---|
| Nginx (وبسرور) |
|
| وردپرس (CMS) |
|
نمونه اینفوگرافیک متنی: لایههای دفاعی امنیت وردپرس و Nginx
برای درک بهتر رویکرد لایهای به امنیت، یک نمای کلی از اجزای دفاعی را در قالب یک اینفوگرافیک متنی مشاهده میکنید. هر لایه، مسئولیتهای امنیتی خاص خود را دارد و همگی در کنار هم، یک سیستم دفاعی جامع را تشکیل میدهند.
🔒 ساختار لایهای امنیت وردپرس روی Nginx 🔒
- 🔹 فایروال سرور (UFW/firewalld)
- 🔹 امنیت SSH (Port Change, Key-based Auth, Fail2Ban)
- 🔹 شبکه خصوصی مجازی (VPN) برای دسترسی مدیریت (اختیاری)
- 🔸 HTTPS/SSL/TLS: رمزنگاری کامل ترافیک (پروتکلها و رمزنگاریهای قوی)
- 🔸 Location Blocking: مسدودسازی دسترسی به فایلهای حساس (.htaccess, .git, wp-config.php)
- 🔸 PHP-FPM Security: پیکربندی دقیق `fastcgi_param` و جلوگیری از اجرای PHP در دایرکتوری آپلود
- 🔸 Rate Limiting: محدود کردن درخواستها (مخصوصاً برای `/wp-login.php`)
- 🔸 Security Headers: تنظیم HSTS, X-Frame-Options, CSP, X-XSS-Protection
- 🔸 WAF Integration: ادغام با فایروال برنامه وب (ModSecurity)
- 🔹 PHP Hardening: غیرفعال کردن توابع خطرناک (`disable_functions`), فعال کردن `open_basedir`
- 🔹 Database Credentials: رمزهای عبور قوی و منحصربهفرد برای کاربر دیتابیس
- 🔹 Database Isolation: کاربر دیتابیس با حداقل دسترسی لازم
- 🔸 Core, Plugins, Themes Updates: بهروزرسانی منظم و سریع
- 🔸 Strong Passwords & 2FA: برای تمامی حسابها، به ویژه مدیران
- 🔸 `wp-config.php` Hardening: کلیدهای امنیتی, `DISALLOW_FILE_EDIT`
- 🔸 File Permissions: تنظیم دسترسیهای صحیح (644/755)
- 🔸 Plugin/Theme Hygiene: حذف موارد بلااستفاده و نصب از منابع معتبر
- 🔸 Security Plugins: استفاده از افزونههای امنیتی برای مانیتورینگ و اسکن
- 🔹 Regular Backups: بکآپگیری منظم و خارج از سرور
- 🔹 Log Analysis: بررسی لاگهای Nginx و وردپرس
- 🔹 Incident Response Plan: برنامه مشخص برای واکنش به حوادث
- 🔹 Security Scans: اسکن منظم با ابزارهای داخلی و خارجی
هر یک از این لایهها نقش حیاتی در ایجاد یک دفاع جامع و مقاوم در برابر تهدیدات سایبری ایفا میکند.
نتیجهگیری: رویکرد جامع به امنیت وبسایت
تأمین امنیت وردپرس روی Nginx نیازمند یک رویکرد جامع و چندلایه است. این تنها به معنای پیکربندی صحیح Nginx نیست، بلکه شامل تقویت امنیت خود وردپرس، مانیتورینگ فعال و داشتن یک استراتژی مشخص برای واکنش به حوادث امنیتی نیز میشود. با پیادهسازی گامهای ذکر شده در این مقاله، میتوانید وبسایت وردپرسی خود را در برابر طیف وسیعی از تهدیدات سایبری محافظت کرده و اطمینان خاطر بیشتری برای خود و کاربران سایتتان فراهم آورید. امنیت یک مسیر پیوسته است و نیازمند بهروزرسانی مداوم دانش و پیکربندیها در پاسخ به تهدیدات جدید است. همواره منابع معتبر را پیگیری کنید و از متخصصین امنیت در صورت نیاز کمک بگیرید. برای مشاوره بیشتر و دسترسی به خدمات تخصصی، میتوانید به وبسایت ما مراجعه نمایید یا با شماره 09202232789 تماس بگیرید تا در این مسیر همراه شما باشیم.
—
نکات فنی برای کپی در ویرایشگر بلوک:
برای اعمال صحیح فرمت هدینگها (H1, H2, H3) و ظاهر زیبا و رسپانسیو، لطفا پس از کپی این متن در ویرایشگر بلوک (مانند گوتنبرگ در وردپرس)، برای هر خطی که با `
`, `
`, یا `
` شروع میشود، از بلوک “Heading” استفاده کرده و سپس استایلهای CSS ارائهشده در کد را در بخش “Advanced” (کلاسهای CSS اضافی) یا ویرایشگر CSS سفارشی قالب خود اعمال کنید. همینطور، برای بلوکهای کد (`
`), جدول و لیستها از بلوکهای مربوطه استفاده نمایید و استایلهای موجود را اعمال کنید. این کار تضمین میکند که مقاله شما هم از نظر معنایی (هدینگهای HTML) و هم از نظر بصری (اندازه، ضخامت، رنگ و رسپانسیو بودن) به بهترین شکل نمایش داده شود.
/* این CSS برای راهنمایی است و باید در بخش سفارشیسازی CSS قالب شما قرار گیرد */
/* Mobile First – Smaller screens */
body {
font-family: ‘Open Sans’, ‘IRANSans’, Arial, sans-serif;
line-height: 1.6;
color: #34495E;
margin: 0;
padding: 15px;
background-color: #F8F9FA;
}
h1 {
font-size: 1.8em;
font-weight: bold;
color: #2C3E50;
text-align: center;
margin-bottom: 25px;
line-height: 1.3;
}
h2 {
font-size: 1.5em;
font-weight: bold;
color: #2C3E50;
margin-top: 25px;
margin-bottom: 15px;
border-bottom: 2px solid #3498DB;
padding-bottom: 8px;
}
h3 {
font-size: 1.2em;
font-weight: bold;
color: #34495E;
margin-top: 20px;
margin-bottom: 10px;
border-left: 4px solid #3498DB;
padding-left: 10px;
}
p {
font-size: 1em;
line-height: 1.7;
color: #34495E;
text-align: justify;
margin-bottom: 1em;
}
ul {
font-size: 1em;
line-height: 1.7;
color: #34495E;
list-style-type: disc;
margin-left: 25px;
margin-bottom: 1em;
}
ul li {
margin-bottom: 5px;
}
a {
color: #3498DB;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #2980B9;
text-decoration: underline;
}
code {
background-color: #ECF0F1;
padding: 2px 4px;
border-radius: 3px;
font-family: ‘Consolas’, ‘Monaco’, monospace;
color: #C0392B;
font-size: 0.9em;
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to children */
}
th, td {
padding: 12px 15px;
text-align: left;
border: 1px solid #BDC3C7;
font-size: 0.95em;
}
th {
background-color: #3498DB;
color: white;
font-weight: bold;
font-size: 1.1em;
}
tr:nth-child(even) {
background-color: #ECF0F1;
}
tr:hover {
background-color: #D6EAF8;
}
/* Code blocks (div with specific style) */
div[style*=”background-color: #ECF0F1;”] {
background-color: #ECF0F1;
border-left: 5px solid #3498DB;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
overflow-x: auto; /* For horizontal scrolling on small screens */
}
div[style*=”background-color: #ECF0F1;”] p {
font-family: ‘Consolas’, ‘Monaco’, monospace;
font-size: 0.95em;
color: #2C3E50;
margin: 0;
line-height: 1.5;
}
div[style*=”background-color: #ECF0F1;”] span {
font-size: 0.95em;
}
/* Textual Infographic styling */
div[style*=”background-color: #F8F9FA;”] {
background-color: #F8F9FA;
border: 2px solid #ABB2B9;
padding: 20px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 1.6em;
font-weight: bold;
color: #2C3E50;
text-align: center;
margin-bottom: 20px;
border: none; /* Override general h3 border */
padding-left: 0;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.1em;
font-weight: bold;
color: #34495E;
display: block;
margin-top: 15px;
border-bottom: 1px dashed #BDC3C7;
padding-bottom: 5px;
}
div[style*=”background-color: #F8F9FA;”] ul {
list-style-type: none;
padding-left: 15px;
margin-top: 8px;
margin-bottom: 0;
}
div[style*=”background-color: #F8F9FA;”] ul li {
margin-bottom: 6px;
color: #5D6D7E;
font-size: 0.95em;
}
div[style*=”background-color: #F8F9FA;”] ul li b { /* For bold elements within list item */
color: #34495E;
}
/* Tablet and Desktop Screens */
@media (min-width: 768px) {
body {
padding: 30px 50px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
margin-top: 40px;
margin-bottom: 25px;
}
h3 {
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 18px;
}
p {
font-size: 1.1em;
}
ul {
font-size: 1.1em;
margin-left: 30px;
}
code {
font-size: 1em;
}
th, td {
font-size: 1em;
}
div[style*=”background-color: #ECF0F1;”] p, div[style*=”background-color: #ECF0F1;”] span {
font-size: 1em;
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 1.8em;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.3em;
}
div[style*=”background-color: #F8F9FA;”] ul {
padding-left: 20px;
}
div[style*=”background-color: #F8F9FA;”] ul li {
font-size: 1em;
}
}
/* Larger Desktop Screens */
@media (min-width: 1200px) {
body {
padding: 40px 100px;
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 3em;
margin-bottom: 50px;
}
h2 {
font-size: 2.2em;
margin-top: 50px;
margin-bottom: 30px;
}
h3 {
font-size: 1.7em;
margin-top: 35px;
margin-bottom: 20px;
}
p {
font-size: 1.15em;
}
ul {
font-size: 1.15em;
}
th, td {
font-size: 1.05em;
}
div[style*=”background-color: #ECF0F1;”] p, div[style*=”background-color: #ECF0F1;”] span {
font-size: 1.05em;
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 2em;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.4em;
}
div[style*=”background-color: #F8F9FA;”] ul li {
font-size: 1.05em;
}
}
` شروع میشود، از بلوک “Heading” استفاده کرده و سپس استایلهای CSS ارائهشده در کد را در بخش “Advanced” (کلاسهای CSS اضافی) یا ویرایشگر CSS سفارشی قالب خود اعمال کنید. همینطور، برای بلوکهای کد (`
`), جدول و لیستها از بلوکهای مربوطه استفاده نمایید و استایلهای موجود را اعمال کنید. این کار تضمین میکند که مقاله شما هم از نظر معنایی (هدینگهای HTML) و هم از نظر بصری (اندازه، ضخامت، رنگ و رسپانسیو بودن) به بهترین شکل نمایش داده شود.
/* این CSS برای راهنمایی است و باید در بخش سفارشیسازی CSS قالب شما قرار گیرد */
/* Mobile First – Smaller screens */
body {
font-family: ‘Open Sans’, ‘IRANSans’, Arial, sans-serif;
line-height: 1.6;
color: #34495E;
margin: 0;
padding: 15px;
background-color: #F8F9FA;
}
h1 {
font-size: 1.8em;
font-weight: bold;
color: #2C3E50;
text-align: center;
margin-bottom: 25px;
line-height: 1.3;
}
h2 {
font-size: 1.5em;
font-weight: bold;
color: #2C3E50;
margin-top: 25px;
margin-bottom: 15px;
border-bottom: 2px solid #3498DB;
padding-bottom: 8px;
}
h3 {
font-size: 1.2em;
font-weight: bold;
color: #34495E;
margin-top: 20px;
margin-bottom: 10px;
border-left: 4px solid #3498DB;
padding-left: 10px;
}
p {
font-size: 1em;
line-height: 1.7;
color: #34495E;
text-align: justify;
margin-bottom: 1em;
}
ul {
font-size: 1em;
line-height: 1.7;
color: #34495E;
list-style-type: disc;
margin-left: 25px;
margin-bottom: 1em;
}
ul li {
margin-bottom: 5px;
}
a {
color: #3498DB;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #2980B9;
text-decoration: underline;
}
code {
background-color: #ECF0F1;
padding: 2px 4px;
border-radius: 3px;
font-family: ‘Consolas’, ‘Monaco’, monospace;
color: #C0392B;
font-size: 0.9em;
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to children */
}
th, td {
padding: 12px 15px;
text-align: left;
border: 1px solid #BDC3C7;
font-size: 0.95em;
}
th {
background-color: #3498DB;
color: white;
font-weight: bold;
font-size: 1.1em;
}
tr:nth-child(even) {
background-color: #ECF0F1;
}
tr:hover {
background-color: #D6EAF8;
}
/* Code blocks (div with specific style) */
div[style*=”background-color: #ECF0F1;”] {
background-color: #ECF0F1;
border-left: 5px solid #3498DB;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
overflow-x: auto; /* For horizontal scrolling on small screens */
}
div[style*=”background-color: #ECF0F1;”] p {
font-family: ‘Consolas’, ‘Monaco’, monospace;
font-size: 0.95em;
color: #2C3E50;
margin: 0;
line-height: 1.5;
}
div[style*=”background-color: #ECF0F1;”] span {
font-size: 0.95em;
}
/* Textual Infographic styling */
div[style*=”background-color: #F8F9FA;”] {
background-color: #F8F9FA;
border: 2px solid #ABB2B9;
padding: 20px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 1.6em;
font-weight: bold;
color: #2C3E50;
text-align: center;
margin-bottom: 20px;
border: none; /* Override general h3 border */
padding-left: 0;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.1em;
font-weight: bold;
color: #34495E;
display: block;
margin-top: 15px;
border-bottom: 1px dashed #BDC3C7;
padding-bottom: 5px;
}
div[style*=”background-color: #F8F9FA;”] ul {
list-style-type: none;
padding-left: 15px;
margin-top: 8px;
margin-bottom: 0;
}
div[style*=”background-color: #F8F9FA;”] ul li {
margin-bottom: 6px;
color: #5D6D7E;
font-size: 0.95em;
}
div[style*=”background-color: #F8F9FA;”] ul li b { /* For bold elements within list item */
color: #34495E;
}
/* Tablet and Desktop Screens */
@media (min-width: 768px) {
body {
padding: 30px 50px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
margin-top: 40px;
margin-bottom: 25px;
}
h3 {
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 18px;
}
p {
font-size: 1.1em;
}
ul {
font-size: 1.1em;
margin-left: 30px;
}
code {
font-size: 1em;
}
th, td {
font-size: 1em;
}
div[style*=”background-color: #ECF0F1;”] p, div[style*=”background-color: #ECF0F1;”] span {
font-size: 1em;
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 1.8em;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.3em;
}
div[style*=”background-color: #F8F9FA;”] ul {
padding-left: 20px;
}
div[style*=”background-color: #F8F9FA;”] ul li {
font-size: 1em;
}
}
/* Larger Desktop Screens */
@media (min-width: 1200px) {
body {
padding: 40px 100px;
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 3em;
margin-bottom: 50px;
}
h2 {
font-size: 2.2em;
margin-top: 50px;
margin-bottom: 30px;
}
h3 {
font-size: 1.7em;
margin-top: 35px;
margin-bottom: 20px;
}
p {
font-size: 1.15em;
}
ul {
font-size: 1.15em;
}
th, td {
font-size: 1.05em;
}
div[style*=”background-color: #ECF0F1;”] p, div[style*=”background-color: #ECF0F1;”] span {
font-size: 1.05em;
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 2em;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.4em;
}
div[style*=”background-color: #F8F9FA;”] ul li {
font-size: 1.05em;
}
}
/* این CSS برای راهنمایی است و باید در بخش سفارشیسازی CSS قالب شما قرار گیرد */
/* Mobile First – Smaller screens */
body {
font-family: ‘Open Sans’, ‘IRANSans’, Arial, sans-serif;
line-height: 1.6;
color: #34495E;
margin: 0;
padding: 15px;
background-color: #F8F9FA;
}
h1 {
font-size: 1.8em;
font-weight: bold;
color: #2C3E50;
text-align: center;
margin-bottom: 25px;
line-height: 1.3;
}
h2 {
font-size: 1.5em;
font-weight: bold;
color: #2C3E50;
margin-top: 25px;
margin-bottom: 15px;
border-bottom: 2px solid #3498DB;
padding-bottom: 8px;
}
h3 {
font-size: 1.2em;
font-weight: bold;
color: #34495E;
margin-top: 20px;
margin-bottom: 10px;
border-left: 4px solid #3498DB;
padding-left: 10px;
}
p {
font-size: 1em;
line-height: 1.7;
color: #34495E;
text-align: justify;
margin-bottom: 1em;
}
ul {
font-size: 1em;
line-height: 1.7;
color: #34495E;
list-style-type: disc;
margin-left: 25px;
margin-bottom: 1em;
}
ul li {
margin-bottom: 5px;
}
a {
color: #3498DB;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #2980B9;
text-decoration: underline;
}
code {
background-color: #ECF0F1;
padding: 2px 4px;
border-radius: 3px;
font-family: ‘Consolas’, ‘Monaco’, monospace;
color: #C0392B;
font-size: 0.9em;
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to children */
}
th, td {
padding: 12px 15px;
text-align: left;
border: 1px solid #BDC3C7;
font-size: 0.95em;
}
th {
background-color: #3498DB;
color: white;
font-weight: bold;
font-size: 1.1em;
}
tr:nth-child(even) {
background-color: #ECF0F1;
}
tr:hover {
background-color: #D6EAF8;
}
/* Code blocks (div with specific style) */
div[style*=”background-color: #ECF0F1;”] {
background-color: #ECF0F1;
border-left: 5px solid #3498DB;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
overflow-x: auto; /* For horizontal scrolling on small screens */
}
div[style*=”background-color: #ECF0F1;”] p {
font-family: ‘Consolas’, ‘Monaco’, monospace;
font-size: 0.95em;
color: #2C3E50;
margin: 0;
line-height: 1.5;
}
div[style*=”background-color: #ECF0F1;”] span {
font-size: 0.95em;
}
/* Textual Infographic styling */
div[style*=”background-color: #F8F9FA;”] {
background-color: #F8F9FA;
border: 2px solid #ABB2B9;
padding: 20px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 1.6em;
font-weight: bold;
color: #2C3E50;
text-align: center;
margin-bottom: 20px;
border: none; /* Override general h3 border */
padding-left: 0;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.1em;
font-weight: bold;
color: #34495E;
display: block;
margin-top: 15px;
border-bottom: 1px dashed #BDC3C7;
padding-bottom: 5px;
}
div[style*=”background-color: #F8F9FA;”] ul {
list-style-type: none;
padding-left: 15px;
margin-top: 8px;
margin-bottom: 0;
}
div[style*=”background-color: #F8F9FA;”] ul li {
margin-bottom: 6px;
color: #5D6D7E;
font-size: 0.95em;
}
div[style*=”background-color: #F8F9FA;”] ul li b { /* For bold elements within list item */
color: #34495E;
}
/* Tablet and Desktop Screens */
@media (min-width: 768px) {
body {
padding: 30px 50px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
margin-top: 40px;
margin-bottom: 25px;
}
h3 {
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 18px;
}
p {
font-size: 1.1em;
}
ul {
font-size: 1.1em;
margin-left: 30px;
}
code {
font-size: 1em;
}
th, td {
font-size: 1em;
}
div[style*=”background-color: #ECF0F1;”] p, div[style*=”background-color: #ECF0F1;”] span {
font-size: 1em;
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 1.8em;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.3em;
}
div[style*=”background-color: #F8F9FA;”] ul {
padding-left: 20px;
}
div[style*=”background-color: #F8F9FA;”] ul li {
font-size: 1em;
}
}
/* Larger Desktop Screens */
@media (min-width: 1200px) {
body {
padding: 40px 100px;
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 3em;
margin-bottom: 50px;
}
h2 {
font-size: 2.2em;
margin-top: 50px;
margin-bottom: 30px;
}
h3 {
font-size: 1.7em;
margin-top: 35px;
margin-bottom: 20px;
}
p {
font-size: 1.15em;
}
ul {
font-size: 1.15em;
}
th, td {
font-size: 1.05em;
}
div[style*=”background-color: #ECF0F1;”] p, div[style*=”background-color: #ECF0F1;”] span {
font-size: 1.05em;
}
div[style*=”background-color: #F8F9FA;”] h3 {
font-size: 2em;
}
div[style*=”background-color: #F8F9FA;”] span {
font-size: 1.4em;
}
div[style*=”background-color: #F8F9FA;”] ul li {
font-size: 1.05em;
}
}


