Webstarist-طراحی سایت
1.14K subscribers
107 photos
60 videos
28 files
86 links
تو این کانال یاد می گیری چطوری طراحی سایت کنی
آموزش های بیشتر: Webstarist.com
Download Telegram
🔹 ۱. کد و ساختار شلوغ

دموها معمولاً پر از کدهای اضافی، CSSهای بی‌مصرف، ویجت‌های آزمایشی و ماژول‌هایی هستن که تو اصلاً لازمشون نداری.
نتیجه؟ سرعت سایت پایین، سئوی ضعیف، و مشکلات در بهینه‌سازی بعدی.
مثلاً قالب Woodmart وقتی دمو نصب می‌کنی، ده‌ها CSS مختلف برای صفحات خاص می‌سازه که هیچ‌وقت استفاده نمی‌کنی.

🔹 ۲. وابستگی به طرح و داده دمو

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

به زبان فنی: «دمو برای داده‌ی خودش optimize شده، نه برای داده‌ی تو.»

🔹 ۳. اشباع از افزونه‌ها

اکثر دموها برای نمایش ظاهر، چندین افزونه غیرضروری نصب می‌کنن (مثلاً برای پاپ‌آپ، فرم، تب‌ها، گالری و غیره).
بعد از مدتی نصفشون غیرفعال می‌شن ولی کدهاشون در دیتابیس می‌مونه و سایت رو کند می‌کنه.

🔹 ۴. سختی در شخصی‌سازی

وقتی طراحی از صفر خودت انجام می‌دی (با المنتور یا طراحی اختصاصی)، دقیقاً می‌دونی چی کجا لود میشه.
ولی توی دمو، خیلی از بخش‌ها با shortcodeهای مخصوص قالب ساخته شدن و ویرایشش سخت و محدود میشه.
مثلاً تو Woodmart دموها از “wpb_js_composer” یا شورت‌کدهای اختصاصی استفاده می‌کنن که با المنتور اصلاً سازگار نیستن.

🔹 ۵. مشکلات سئو و داده‌های جعلی

دموها معمولاً عنوان‌ها، متاها و متن‌های تکراری دارن. اگر تمیز پاکشون نکنی، گوگل اون داده‌ها رو ایندکس می‌کنه و سایتت با داده‌های اشتباه بالا میاد.
(مثلاً هنوز اسم “Woodmart Demo” توی عنوان صفحات دیده میشه!)

🔹 ۶. تجربه کاربری ناپایدار

چون ساختار دمو برای نیاز خاصی طراحی شده، مسیر کاربر در سایت تو ممکنه منطقی نباشه.
مثلاً CTAها در جای اشتباه قرار بگیرن، یا فرم تماس اصلاً به مسیر فروش تو نخوره.

🔹 ۷. هویت برند از بین می‌ره

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

به زبان ساده‌تر:

دمو برای فروش قالب ساخته شده، نه برای فروش خدمات یا محصولات.
4👍3🔥1
Media is too big
VIEW IN TELEGRAM
💥یه گالری تصویر مدرن با فقط المنتور

🌐Webstarist.com
@webstarist
👍32
selector{
transition: all 0.6s ease;
}

selector:hover {
z-index: 10;
flex: 4;
}
👍5
🧠 نکات تخصصی برای مقایسه‌ی هاست ایران و اروپا

🌐webstarist.com
@webstarist
💥سرعت لود برای کاربر ایرانی
وقتی دیتاسنتر داخل ایرانه، مسیر پینگ کوتاه‌تره. یعنی اگر کاربر از تهران وارد سایت بشه، سایت معمولاً سریع‌تر باز میشه. (تفاوتش گاهی تا نیم ثانیه‌ست و همین روی سئو تأثیر می‌ذاره.)

💥تحریم و محدودیت سرویس‌های خارجی
توی هاست ایران گاهی ارسال ایمیل از طرف افزونه‌هایی مثل WP Mail SMTP یا سرویس‌هایی مثل Brevo، Mailchimp سخت‌تره.
ولی در هاست اروپا معمولاً بدون محدودیت کار می‌کنن.

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

💥امنیت و فیلترها
توی هاست ایران، بعضی آی‌پی‌های خارجی فیلتر یا کند می‌شن. اگه سایتت مشتری خارجی داره (یا حتی از سرویس CDN مثل Cloudflare استفاده می‌کنی)، ممکنه اذیت بشی.

💥قیمت
معمولاً هاست ایران قیمت پایین‌تری داره چون هزینه‌ی انتقال داده داخل کشور کمتره.

👈 مناسب‌ترین انتخاب

اگه سایتت فارسیه و کاربرات ایرانی‌ان → هاست ایران.

اگه سایتی داری که مخاطب خارجی داره (مثلاً آموزش انگلیسی یا فروش فایل بین‌المللی) → هاست اروپا.

اگه می‌خوای از Cloudflare، Google Fonts یا CDNهای جهانی استفاده کنی → اروپا بهتره چون تداخل DNS کمتر داره.
👍4
💥 می دونی هیرو سکشن چیه؟

بخش هیرو (Hero Section) در وب‌سایت یعنی همون قسمت بالای صفحه اصلی که اولین چیزی هست که کاربر می‌بینه. معمولاً شامل این چیزهاست:

تصویر یا ویدیو بزرگ پس‌زمینه

عنوان اصلی سایت یا محصول (headline)

توضیح کوتاه یا شعار (tagline)

دکمه یا Call to Action مثل «خرید کنید» یا «مشاهده محصولات»

گاهی عناصر متحرک یا انیمیشن‌ها مثل ذرات، موج، فلش، یا متن حرکت‌کننده

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

مثلاً وقتی وارد سایت یک فروشگاه یا سایت شرکتی می‌شی، اولین چیزی که می‌بینی، تصویر بزرگ + شعار + دکمه است که دقیقاً همون Hero Section هست.

🌐webstarist.com
@webstarist
5👍2
💯 چند قالب وردپرس با Hero انیمیشنی یا پارالکس

Phlox Pro

ویژگی: دموهایی با پس‌زمینه ویدیویی، پارالکس و انیمیشن‌هایی برای سکشن‌ها

مناسب برای طراحی سایت شرکتی، استارت‌آپی یا پرتفولیو

Salient

ویژگی: افکت پارالکس بسیار قدرتمند + انیمیشن‌های ورود (animate on scroll) + بخش‌های هرو (Hero) خیلی قابل تنظیم

مناسب برای سایت‌های خلاقانه، آژانس‌ها یا طراحی پرزنتیشن‌محور

Bridge

ویژگی: همراه با ویژوال کامپوزر (یا WPBakery) + پس‌زمینه ویدیویی یا اسلایدر + امکان انیمیشن لایه‌ای در هرو

مناسب برای سایت شرکتی، نمونه‌کار، یا استارت‌آپ

Uncode

ویژگی: شبکه‌های خلاقانه + انیمیشن smooth + بخش هرو با گزینه پس‌زمینه ثابت، پارالکس یا ویدیو

مناسب برای دیزاینرها، بلاگرها و آژانس‌ها

TheGem

ویژگی: دموهای متنوع با اسلایدرهای موشن + انیمیشن لایه‌ای در هرو + افکت پارالکس

مناسب برای سایت‌هایی که ظاهرسازی قدرتمند می‌خوان و تجربه کاربری مدرن
5👍1
Media is too big
VIEW IN TELEGRAM
💥تاثیر منفی اینماد و مجوزها روی سرعت سایت

🌐Webstarist.com
@webstarist
5👍4
من آموزش واضح تر این مطلب رو برات میزارم تا بهتر متوجه شی باید چیکار کنی
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
💥تاثیر منفی اینماد و مجوزها روی سرعت سایت

🌐webstarist.com
@webstarist
3👍3
😱امنیت: پنهان کردن ورژن پلاگین ها

هکرها اول حمله نمی‌کنن، اول شناسایی می‌کنن.
یکی از اولین چیزهایی که چک می‌کنن اینه:

«این سایت دقیقاً از چه نسخه‌ای از چه افزونه‌ای استفاده می‌کنه؟»

چرا؟ چون دیتابیس‌های عمومی آسیب‌پذیری وجود داره که میگه:

فلان افزونه نسخه 2.4.1 → آسیب‌پذیر
فلان افزونه نسخه 3.1 → امن

اگر ورژن لو رفته باشه، حمله هدفمند می‌شه، نه شانسی.

🌐Webstarist.com
@webstarist
👍2
«امنیت یعنی نذاری مهاجم بدونه دقیقاً به چی حمله کنه.»

چطور بفهمیم ورژن افزونه‌ها لو میره؟

معمولاً از این راه‌ها:

سورس سایت (?ver=1.2.3 کنار فایل‌های css/js)
هدرهای HTML
RSS Feed
سورس لاگین و REST API

👈 روش ۱: روش اصولی با کد (پیشنهادی)

این کد رو داخل functions.php قالب چایلد یا پلاگین اختصاصی بذار:

<?php
// حذف ورژن از فایل های css و js
function remove_version_from_assets($src) {
if (strpos($src, 'ver=')) {
$src = remove_query_arg('ver', $src);
}
return $src;
}
add_filter('style_loader_src', 'remove_version_from_assets', 999);
add_filter('script_loader_src', 'remove_version_from_assets', 999);
?>
👍31
روش ۲: حذف اطلاعات اضافی وردپرس (تکمیلی ولی مهم)


// حذف وردپرس ورژن
remove_action('wp_head', 'wp_generator');

// حذف ورژن از RSS
add_filter('the_generator', '__return_empty_string');
Media is too big
VIEW IN TELEGRAM
💥پیدا کردن بهترین رنگ بندی برای سایت

🌐Webstarist.com
@webstarist
3🔥1
Media is too big
VIEW IN TELEGRAM
💥اتصال فرم المنتور به واتساپ

🌐Webstarist.com
@webstarist
7🔥1
<script>
document.addEventListener("DOMContentLoaded", function () {

const waBtn = document.querySelector(".send-to-whatsapp");
const form = document.querySelector("form.elementor-form");

if (!waBtn || !form) return;

waBtn.addEventListener("click", function (e) {
e.preventDefault();

const data = new FormData(form);

const map = {
"form_fields[name]": "👤 نام",
"form_fields[field_8605952]": "📞 تلفن",
"form_fields[field_5bb175e]": "✉️ ایمیل",
"form_fields[message]": "💬 پیام"
};

let text = "📋 اطلاعات فرم:\n\n";

for (const [key, value] of data.entries()) {
if (map[key] && value.trim()) {
text += map[key] + ": " + value + "\n";
}
}

if (text.trim() === "📋 اطلاعات فرم:") return;

const phone = "989XXXXXXXXX";
const url = "https://wa.me/" + phone + "?text=" + encodeURIComponent(text);

window.open(url, "_blank");
});

});
</script>
7🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
💥وردپرس studio برای طراحی سایت بدون هاست و دامنه

استودیو دقیقاً چیه؟
یک نرم‌افزار رسمی وردپرس را لوکال (روی سیستم خودت) اجرا کنی
بدون هاست و دامنه
بدون دردسر XAMPP و تنظیمات دستی
یعنی:
سایتت فقط روی همان کامپیوتر بالا می‌آید

🌐Webstarist.com
@webstarist
👍42
استودیو برای چه کاری خوبه؟

اگر اینا رو می‌خوای، عالیه:

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

👈تفاوت استودیو با XAMPP / LocalWP

زبون خودمونی:

XAMPP → قدرت‌مند ولی خشک و اعصاب‌خردکن

LocalWP → حرفه‌ای‌تر، اما بعضی نسخه‌ها محدودیت دارن

Studio → ساده، مینیمال، رسمی، مخصوص وردپرسی‌ها

استودیو مخصوص کسیه که می‌خواد وردپرس کار کنه، نه سرور بازی.

💢سؤال مهم: بعدش چطوری آنلاینش کنم؟

دو راه:
راه حرفه‌ای

از سایت لوکال Export / Backup می‌گیری می‌بری روی هاست واقعی
ایمپورت می‌کنی
(با افزونه‌هایی مثل All-in-One WP Migration)
3👍3
💥TCP HANDSHAKE💥

مرورگر در لحظه لود سایت، یک صف مخفی می‌سازد

وقتی وردپرس اجرا می‌شود، ده‌ها فایل در صف دانلود می‌رود:
JS افزونه‌ها
CSS قالب
فونت‌ها
تصاویر
اسکریپت‌های خارجی
اما هر فایل یک «اهمیت» دارد.
مرورگر خودش تصمیم می‌گیرد کدام فایل اول بیاید و کدام یکی را نگه دارد.

💢فایل‌هایی که از دامین‌های مختلف می‌آیند، اولویت متفاوت دارند.

وردپرس معمولاً:
یک فایل از fonts.gstatic
یکی از Google APIs
چندتا از CDN افزونه‌ها
یک سری از host خودت
شاید هم چند درخواست تبلیغ یا آمارگیر
وقتی منابع از چند دامنه می‌آیند، مرورگر به‌شدت کندتر می‌شود؛ چون:
برای هر دامین یک "کانال ارتباطی" جدا باز می‌کند
به نام: TCP handshake و TLS handshake

راه حل ها:
مرحله اول: Network رو باز کن
داخل کروم، F12 رو بزن، برو تب Network، بعد صفحه رو رفرش کن.
حالا یه لیست می‌بینی از همه فایل‌هایی که لود شدن.

کار تو اینه که دنبال چیزای «غریبه» بگردی؛ چیزایی که اسمشون به قالب یا افزونه‌های خودت نمی‌خوره.

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

مرحله سوم: فونت‌ها، اولویت اول
مسیر /fonts.googleapis.com یا هر فونت خارجی رو دقیق چک کن.
بعضی قالب‌ها یه وزن فونت اضافه لود می‌کنن که تو حتی استفاده‌اش نمی‌کنی.

مرحله چهارم: SVGها رو وارسی کن
عجیب اما واقعی:
خیلی وقت‌ها یک فایل SVG داخلش لینک CSS یا JS داره!
این رو هیچ‌کس چک نمی‌کنه.
اگر SVG داری، بازش کن با Notepad و ببین داخلش http هست یا نه.

مرحله پنجم: افزونه‌ها، ولی نه غیرفعال‌ها… “نیمه‌فعال‌ها”
بعضی افزونه‌ها حتی وقتی خاموشن، فایل‌های استاتیکشون باقی می‌مونه.
برو تو پوشه:
/wp-content/plugins/
و دنبال فایل‌هایی بگرد که به دنیای واقعی سایت ربط ندارن اما در Network دیده می‌شن.

مرحله ششم: قالب‌های قدیمی
اگه توی /wp-content/themes/ چند قالب داری، ولی فقط یکیش فعاله،
گاهی فایل‌های قالب غیرفعال هم توسط یک هوک بدقلق لود می‌شن.
Network کمک می‌کنه بفهمی.


مرحله هفتم: فایل‌هایی که از ریموت لود می‌شن
اگه تو Network دیدی URL این‌جوریه:

cdn.something.com/...
یا
randomhost.net/...
یا
script…something.io

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

مرحله هشتم: جمع‌بندی
وقتی فایل مشکوک پیدا شد:
یا منبعش رو می‌فهمی و حذف/جایگزین می‌کنی
یا با wp_dequeue_script() و wp_dequeue_style() غیرفعالش می‌کنی.
4
This media is not supported in your browser
VIEW IN TELEGRAM
💥یکی از قاتلین سرعت سایت TCP handshake

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

🌐webstarist.com
@webstarist
👍3