Webstarist-طراحی سایت
1.14K subscribers
107 photos
60 videos
28 files
86 links
تو این کانال یاد می گیری چطوری طراحی سایت کنی
آموزش های بیشتر: Webstarist.com
Download Telegram
من آموزش واضح تر این مطلب رو برات میزارم تا بهتر متوجه شی باید چیکار کنی
👍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
💥چک‌لیست سئو سایت فروشگاهی

1) نسخه سایت

☐ سایت فقط با یک آدرس نهایی باز می‌شود (مثلاً فقط https://site.com)
☐ بقیه حالت‌ها اتومات ریدایرکت می‌شوند

2) سرعت و فنی

☐ سرعت موبایل مناسب است (کاربر معطل نمی‌شود)
☐ تصاویر فشرده و بهینه‌اند
☐ خطای 404 مهم وجود ندارد

3) صفحه محصول

☐ هر محصول توضیح اختصاصی دارد
☐ عنوان محصول شامل مزیت یا کاربرد است
☐ قیمت و موجودی شفاف نمایش داده می‌شود
☐ دکمه «افزودن به سبد» واضح است
☐ اسکیما محصول (قیمت، موجودی، امتیاز) فعال است

4) صفحه دسته‌بندی

☐ هر دسته‌بندی متن معرفی دارد
☐ عنوان دسته‌بندی بر اساس نیت خرید نوشته شده
☐ محصولات مهم در دسته لینک شده‌اند
☐ فیلترها باعث ساخت صفحه ایندکس‌شده جدید نمی‌شوند

5) لینک‌سازی داخلی

☐ از دسته به محصول لینک وجود دارد
☐ از محصولات پرفروش به محصولات ضعیف لینک شده
☐ بردکرامب فعال است

🌐Webstarist.com
@webstarist
1
💥چک لیست کامل سئو سایت شرکتی (۰ تا ۱۰۰)

🌐webstarist.com
@webstarist
1🤔1
1️⃣ معماری و ساختار سایت (Foundation)

☐ هر خدمت یک صفحه مستقل دارد
☐ صفحه «خدمات» فقط معرفی است، نه صفحه هدف سئو
☐ همه خدمات مهم در منوی اصلی یا زیرمنو هستند
☐ حداکثر عمق دسترسی به صفحات: 2 تا 3 کلیک
☐ URLها کوتاه، خوانا و انگلیسی هستند
☐ ساختار سایت منطقی است (خانه ← خدمات ← صفحه خدمت)

2️⃣ صفحات ضروری سایت شرکتی

☐ صفحه اصلی (Home)
☐ درباره ما
☐ تماس با ما
☐ صفحه خدمات (مادر)
☐ صفحات اختصاصی هر خدمت
☐ بلاگ / مقالات
☐ قوانین / حریم خصوصی (اعتماد + سئو)

حداقل استاندارد:
7 تا 10 صفحه واقعی، نه صوری

3️⃣ سئوی صفحه اصلی (Home)

☐ عنوان صفحه شامل برند + خدمت اصلی
☐ توضیح متا اختصاصی
☐ معرفی شفاف خدمات در بالای صفحه
☐ لینک مستقیم به خدمات اصلی
☐ CTA واضح (تماس، مشاوره، سفارش)
☐ اسکیما Organization یا LocalBusiness

4️⃣ سئوی صفحات خدمات (مهم‌ترین بخش)

☐ هر صفحه فقط روی یک خدمت تمرکز دارد
☐ عنوان صفحه = نام خدمت + مزیت یا موقعیت
☐ توضیح متا اختصاصی
☐ حداقل 800 تا 1200 کلمه محتوای مفید
☐ توضیح فرآیند انجام کار
☐ مزایا و تفاوت با رقبا
☐ پاسخ به سوالات متداول کاربران
☐ نمونه‌کار یا مثال واقعی
☐ CTA در چند نقطه صفحه
☐ اسکیما Service (در صورت نیاز)

5️⃣ سئو محلی (برای خدمات حضوری)

☐ نام شهر / منطقه در عنوان صفحات خدمات
☐ صفحه تماس با اطلاعات کامل (نام، آدرس، تلفن)
☐ گوگل مپ فعال
☐ Google Business Profile ساخته شده
☐ اسکیما LocalBusiness تنظیم شده

6️⃣ لینک‌سازی داخلی (قدرت پنهان)

☐ لینک از صفحه اصلی به خدمات مهم
☐ لینک بین خدمات مرتبط
☐ لینک از مقالات به صفحات خدمات
☐ انکر تکست طبیعی و متنوع
☐ صفحه یتیم (Orphan Page) وجود ندارد

7️⃣ سئوی محتوا (بلاگ هدفمند)

☐ مقالات بر اساس سوالات واقعی مشتری نوشته شده‌اند
☐ هر مقاله حداقل به یک صفحه خدمت لینک دارد
☐ محتوای بلاگ مکمل فروش است
☐ مقالات بی‌هدف حذف یا ادغام شده‌اند
☐ عنوان مقالات بر اساس نیت جستجو نوشته شده

8️⃣ تجربه کاربری (UX = سئو نامرئی)

☐ سرعت سایت مناسب است
☐ طراحی موبایل‌فرست (Mobile First)
☐ فونت خوانا و فاصله خطوط استاندارد
☐ CTA واضح و قابل لمس در موبایل
☐ پاپ‌آپ مزاحم ندارد
☐ مسیر تماس یا درخواست خدمات ساده است

9️⃣ سئوی فنی (Technical SEO)

☐ سایت فقط یک نسخه ایندکس شده (https + www یا بدون www)
☐ HTTPS فعال
☐ صفحات مهم noindex نیستند
☐ صفحات کم‌ارزش noindex شده‌اند
☐ نقشه سایت XML درست است
☐ فایل robots.txt اصولی تنظیم شده
☐ خطای 404 مهم وجود ندارد
☐ ریدایرکت‌های اشتباه نداریم

🔟 اعتمادسازی (تبدیل سئو به تماس)

☐ صفحه درباره ما واقعی و انسانی است
☐ نمونه‌کار واقعی نمایش داده شده
☐ رضایت مشتری یا لوگوی مشتریان وجود دارد
☐ راه‌های تماس واضح و در دسترس‌اند
☐ اطلاعات شرکت شفاف است
10👍2
💥بهترین اکستنشن های گوگل کروم برای سئوکارها و وبمسترها

🌐Webstarist.com
@webstarist
👍4
💥نکات بهینه سازی فونت ها

1️⃣ 🎯 تعداد فونت‌ها رو محدود کن
حداکثر ۱ یا ۲ فونت. هر فونت اضافه = کندی سایت.

2️⃣ ⚖️ وزن فونت‌ها رو کم کن
فقط وزن‌های ضروری (معمولاً 400 و 700). هر وزن یک فایل جداست.

3️⃣ 📥 فونت گوگل رو لوکال کن
لود خارجی نداشته باش. فونت روی هاست خودت باشه.

4️⃣ 🚫 Disable Default Fonts المنتور
Elementor → Settings → Advanced → Enable = Yes
جلو لود فونت اضافی رو می‌گیره.

5️⃣ 🎛️ فونت رو فقط یک‌جا تعریف کن
یا قالب، یا المنتور (ترجیحاً Global Fonts). چندمنبعی نکن.

6️⃣ 🧬 فرمت WOFF2 استفاده کن
کم‌حجم‌ترین و سریع‌ترین فرمت فونت.

7️⃣ font-display: swap
جلو متن نامرئی رو می‌گیره و CLS رو بهتر می‌کنه.

8️⃣ 🧹 فونت‌های بلااستفاده رو حذف کن
هر فونتی که استفاده نمی‌شه = بار اضافی.

9️⃣ 🌍 Global Typography المنتور
فونت‌دهی سراسری = کد کمتر، سرعت بیشتر.

🔟 🔣 فونت آیکن اضافی رو غیرفعال کن
اگه SVG داری، Font Awesome کامل لازم نیست.

1️⃣1️⃣ 🚀 Preload فونت‌های مهم
فونت متن یا تیتر اصلی زودتر لود می‌شه.

1️⃣2️⃣ 🇮🇷 فونت فارسی رو از نظر حجم تست کن
بعضی فونت‌ها خیلی سنگینن؛ حجم واقعی مهمه

🌐webstarist.com
7👍3