آموزش کپی کردن استایل سایت با Inspect؛ انتقال CSS به سایت وردپرس

سلام خدمت همه کاربران عزیز سون پلاگین.

یکی از سوالاتی که معمولاً هنگام طراحی سایت مطرح می‌شود این است که اگر ظاهر یا استایل یک بخش از یک سایت را دوست داشته باشیم، آیا می‌توانیم کدهای مربوط به آن را بررسی کنیم و از همان ایده در سایت خودمان استفاده کنیم؟

پاسخ کوتاه این است که با استفاده از Inspect Element می‌توان ساختار HTML و CSS یک صفحه را بررسی کرد و از کدهای CSS مناسب برای پیاده‌سازی یک طراحی مشابه در سایت خود استفاده کرد.

البته یک نکته مهم وجود دارد: Inspect Element ابزاری برای «کپی کامل یک سایت» نیست. شما با این ابزار می‌توانید کدهای سمت کاربر، ساختار HTML و فایل‌ها و قوانین CSS قابل مشاهده را بررسی کنید، اما برای انتقال یک طراحی به سایت خودتان معمولاً باید کدها را متناسب با ساختار سایت جدید اصلاح کنید.

در این آموزش به صورت کامل بررسی می‌کنیم که چگونه با استفاده از Inspect Element استایل یک بخش از سایت را پیدا کنیم، CSS آن را بررسی کنیم و سپس آن را در سایت وردپرسی خودمان پیاده‌سازی کنیم.

Inspect Element چیست؟

Inspect Element یکی از ابزارهای توسعه‌دهندگان مرورگر است که به شما اجازه می‌دهد ساختار یک صفحه وب را بررسی کنید.

با استفاده از این ابزار می‌توانید HTML، CSS و برخی اطلاعات مربوط به عناصر مختلف صفحه را مشاهده کنید و حتی به صورت موقت تغییراتی در ظاهر صفحه ایجاد کنید.

مرورگرهای معروف مانند Chrome، Firefox و Edge ابزارهای توسعه‌دهنده یا Developer Tools را در اختیار کاربران قرار می‌دهند.

برای باز کردن Inspect در بسیاری از مرورگرها می‌توانید روی یک بخش از صفحه کلیک راست کرده و گزینه Inspect یا Inspect Element را انتخاب کنید.

آیا می‌توان با Inspect Element کدهای یک سایت را کپی کرد؟

بله، اما باید منظور از «کپی کردن کد» را به درستی درک کنیم.

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

اما معمولاً نمی‌توانید با یک کلیک، تمام طراحی و امکانات یک سایت را به سایت خود منتقل کنید.

دلیل این موضوع این است که ظاهر یک سایت فقط به CSS محدود نمی‌شود. ساختار HTML، تصاویر، فونت‌ها، JavaScript، افزونه‌ها، فایل‌های قالب و حتی کدهای سمت سرور می‌توانند در ظاهر و عملکرد سایت نقش داشته باشند.

چه چیزهایی را می‌توان با Inspect بررسی کرد؟

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

• ساختار HTML صفحه
• کلاس‌های CSS
• شناسه‌های ID
• رنگ متن و پس‌زمینه
• اندازه و نوع فونت
• فاصله داخلی و خارجی عناصر
• حاشیه‌ها
• گوشه‌های گرد عناصر
• سایه‌ها
• اندازه و ابعاد عناصر
• نحوه نمایش عناصر
• برخی قوانین مربوط به واکنش‌گرایی

چگونه Inspect Element را باز کنیم؟

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

سپس روی بخشی از صفحه که قصد بررسی آن را دارید کلیک راست کنید و گزینه Inspect را انتخاب کنید.

همچنین در بسیاری از مرورگرها می‌توانید از میانبرهای زیر استفاده کنید:

• F12 برای باز کردن Developer Tools
• Ctrl + Shift + I در ویندوز و لینوکس
• Command + Option + I در macOS

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

چگونه CSS یک بخش از سایت را پیدا کنیم؟

فرض کنید در یک سایت یک دکمه زیبا مشاهده کرده‌اید و می‌خواهید بفهمید چه کد CSS باعث ایجاد ظاهر آن شده است.

ابتدا روی همان دکمه کلیک راست کرده و گزینه Inspect را انتخاب کنید.

مرورگر عنصر مربوط به آن بخش را در قسمت HTML مشخص می‌کند. در سمت دیگر یا بخش مربوط به Styles نیز قوانین CSS مرتبط با همان عنصر نمایش داده می‌شوند.

در این قسمت ممکن است مواردی مانند موارد زیر را مشاهده کنید:

.button {
    background: #222;
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
}

این کد فقط یک نمونه است. CSS واقعی هر سایت ممکن است ساختار کاملاً متفاوتی داشته باشد.

چگونه بفهمیم کدام CSS مربوط به عنصر موردنظر است؟

یکی از نکات مهم هنگام کار با Inspect این است که همه کدهایی که مشاهده می‌کنید الزاماً مربوط به همان عنصری نیستند که انتخاب کرده‌اید.

مرورگر قوانین CSS را از منابع مختلف دریافت می‌کند و ممکن است چند قانون روی یک عنصر تأثیر داشته باشند.

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

بنابراین هنگام انتقال CSS به سایت خودتان باید مشخص کنید کدام قوانین واقعاً برای ظاهر موردنظر ضروری هستند.

مفهوم Class و ID در Inspect Element

هنگام بررسی HTML معمولاً با دو مفهوم مهم یعنی Class و ID مواجه می‌شوید.

برای مثال ممکن است ساختار HTML یک عنصر به شکل زیر باشد:

<div class="box">
    محتوای بخش
</div>

در این مثال، کلاس عنصر box است و می‌توان CSS مربوط به آن را با سلکتور زیر هدف قرار داد:

.box {
    padding: 20px;
}

اگر عنصر دارای ID باشد، سلکتور CSS معمولاً با علامت # نوشته می‌شود:

#header {
    background: #fff;
}

شناخت Class و ID هنگام انتقال استایل از یک سایت به سایت دیگر اهمیت زیادی دارد.

آیا می‌توان CSS را مستقیماً از Inspect کپی کرد؟

در بسیاری از موارد می‌توانید قوانین CSS قابل مشاهده در بخش Styles را کپی کنید، اما این به معنای آن نیست که کد بدون تغییر در سایت شما کار خواهد کرد.

ممکن است CSS سایت اصلی به کلاس‌های خاص، ساختار HTML مشخص یا فایل‌های دیگری وابسته باشد.

برای مثال اگر سایت اصلی چنین HTMLای داشته باشد:

<div class="custom-button">
    مشاهده محصول
</div>

و CSS آن به صورت زیر باشد:

.custom-button {
    background: #111;
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
}

اگر بخواهید همین ظاهر را در سایت خود استفاده کنید، باید HTML و CSS را با ساختار سایت خودتان هماهنگ کنید.

چگونه استایل یک سایت را در وردپرس خودمان استفاده کنیم؟

اگر سایت شما با وردپرس ساخته شده باشد، چند روش مختلف برای اضافه کردن CSS وجود دارد.

روش اول: استفاده از CSS سفارشی وردپرس

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

در بسیاری از قالب‌ها می‌توانید از مسیر زیر به این بخش دسترسی داشته باشید:

نمایش ← سفارشی‌سازی ← CSS اضافی

سپس می‌توانید CSS موردنظر خود را در این بخش قرار دهید.

روش دوم: استفاده از فایل CSS قالب یا Child Theme

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

یکی از روش‌های مناسب، استفاده از Child Theme است تا تغییرات شما با به‌روزرسانی قالب اصلی از بین نروند.

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

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

اگر از چنین ابزاری استفاده می‌کنید، می‌توانید CSS موردنظر را در همان بخش قرار دهید؛ البته باید توجه کنید که سلکتورهای CSS با ساختار HTML سایت شما مطابقت داشته باشند.

چرا CSS کپی‌شده در سایت من کار نمی‌کند؟

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

ممکن است کد CSS را دقیقاً کپی کرده باشید، اما ظاهر موردنظر ایجاد نشود. دلایل مختلفی برای این اتفاق وجود دارد.

• کلاس HTML در سایت شما وجود ندارد.
• ساختار HTML سایت شما با سایت اصلی متفاوت است.
• یک قانون CSS دیگر اولویت بیشتری دارد.
• CSS قالب شما کد جدید را Override می‌کند.
• کد JavaScript سایت اصلی نیز در ظاهر عنصر نقش دارد.
• فونت مورد استفاده در سایت اصلی در سایت شما وجود ندارد.
• تصاویر یا فایل‌های وابسته منتقل نشده‌اند.
• استایل به یک کتابخانه یا فریم‌ورک خاص وابسته است.

مفهوم !important در CSS چیست؟

گاهی هنگام انتقال CSS متوجه می‌شوید که قانون شما توسط CSS قالب نادیده گرفته می‌شود. در چنین شرایطی ممکن است در کد سایت اصلی با عبارت !important مواجه شوید.

برای مثال:

.custom-button {
    color: red !important;
}

این دستور اولویت قانون موردنظر را افزایش می‌دهد.

با این حال توصیه نمی‌شود برای حل تمام مشکلات CSS از !important استفاده کنید. استفاده بیش از حد از آن می‌تواند مدیریت CSS را در آینده دشوارتر کند.

چگونه با Inspect ظاهر یک دکمه را تغییر دهیم؟

یکی از بهترین روش‌ها برای یادگیری CSS این است که تغییرات را مستقیماً در Inspect آزمایش کنید.

فرض کنید می‌خواهید رنگ یک دکمه را تغییر دهید.

ابتدا دکمه را با Inspect انتخاب کنید و سپس در بخش Styles مقدار رنگ پس‌زمینه را تغییر دهید.

مثلاً:

background-color: red;

تغییر بلافاصله در مرورگر نمایش داده می‌شود.

نکته مهم این است که این تغییرات معمولاً موقتی هستند و با Refresh کردن صفحه از بین می‌روند.

برای دائمی کردن تغییرات باید CSS اصلاح‌شده را در سایت خودتان قرار دهید.

چگونه CSS اصلاح‌شده را از Inspect استخراج کنیم؟

بعد از اینکه در Inspect به ظاهر موردنظر رسیدید، می‌توانید قوانین CSS موردنیاز را شناسایی و آن‌ها را در فایل یا بخش CSS سایت خود قرار دهید.

بهتر است فقط کدهای موردنیاز را منتقل کنید و از کپی کردن حجم زیادی از CSS سایت دیگر خودداری کنید.

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

آیا می‌توان کل طراحی یک سایت را با Inspect کپی کرد؟

از نظر فنی می‌توانید بخش زیادی از HTML و CSS قابل مشاهده یک صفحه را بررسی کنید، اما انتقال کامل یک سایت با Inspect روش مناسبی نیست.

یک وب‌سایت معمولاً از بخش‌های مختلفی تشکیل شده است:

• HTML
• CSS
• JavaScript
• تصاویر
• فونت‌ها
• فایل‌های قالب
• کدهای سمت سرور
• پایگاه داده
• افزونه‌ها و کتابخانه‌ها

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

تفاوت Inspect با مشاهده سورس صفحه چیست؟

ممکن است تصور کنید Inspect و View Source دقیقاً یک کار انجام می‌دهند، اما تفاوت‌هایی بین آن‌ها وجود دارد.

View Source معمولاً HTML اولیه‌ای را که سرور برای مرورگر ارسال کرده نمایش می‌دهد، در حالی که Inspect امکان مشاهده وضعیت فعلی DOM و بررسی تغییراتی که توسط JavaScript ایجاد شده‌اند را نیز فراهم می‌کند.

به همین دلیل برای بررسی دقیق‌تر عناصر و CSS، Developer Tools معمولاً ابزار کاربردی‌تری است.

آیا کپی کردن CSS سایت‌های دیگر قانونی است؟

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

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

اگر هدف شما الهام گرفتن از یک طراحی است، بهتر است ظاهر موردنظر را تحلیل کرده و سپس نسخه اختصاصی خودتان را با HTML و CSS خودتان پیاده‌سازی کنید.

بهترین روش برای استفاده از استایل سایت‌های دیگر

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

برای مثال مشخص کنید:

• رنگ اصلی سایت چیست؟
• چه فونتی استفاده شده است؟
• فاصله بین عناصر چقدر است؟
• دکمه‌ها چه شکل و اندازه‌ای دارند؟
• گوشه عناصر گرد است یا تیز؟
• از چه نوع سایه‌ای استفاده شده است؟
• ساختار بخش‌ها چگونه طراحی شده است؟
• در موبایل چه تغییری در طراحی ایجاد می‌شود؟

سپس می‌توانید بر اساس این اطلاعات یک طراحی اختصاصی برای سایت خود ایجاد کنید.

آیا برای این کار باید CSS بلد باشیم؟

آشنایی با CSS برای استفاده مؤثر از Inspect Element بسیار مفید است.

اگر با مفاهیمی مانند Selector، Class، ID، Margin، Padding، Border، Display، Position، Flexbox و Media Query آشنایی داشته باشید، بسیار راحت‌تر می‌توانید کدهای یک سایت را بررسی و در سایت خودتان پیاده‌سازی کنید.

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

پیش‌نیاز این آموزش

برای اینکه بتوانید از این آموزش بهتر استفاده کنید، پیشنهاد می‌کنیم با مفاهیم پایه CSS و HTML آشنا باشید.

اگر با Inspect Element آشنایی ندارید، ابتدا آموزش زیر را مطالعه کنید:

آموزش کار با اینسپکت المنت Inspect Element

ویدئوی آموزش کپی کردن استایل سایت

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

دانلود ویدئو با کیفیت 720

در صورتی که نسخه دانلودی ویدئو را در اختیار کاربران قرار می‌دهید، لینک دانلود را می‌توانید در این بخش قرار دهید.

جمع‌بندی

Inspect Element یکی از ابزارهای بسیار کاربردی برای طراحان و توسعه‌دهندگان وب است. با استفاده از این ابزار می‌توانید ساختار HTML و قوانین CSS عناصر مختلف یک سایت را بررسی کنید و از این اطلاعات برای یادگیری یا پیاده‌سازی طراحی مشابه در سایت خودتان استفاده کنید.

برای کپی کردن استایل سایت بهتر است به جای انتقال کورکورانه تمام کدها، ابتدا عنصر موردنظر را با Inspect بررسی کنید، CSS مربوط به آن را پیدا کنید و سپس کدهای موردنیاز را با ساختار HTML و CSS سایت خودتان هماهنگ کنید.

همچنین توجه داشته باشید که Inspect Element برای دسترسی به کدهای سمت سرور یا اطلاعات محرمانه سایت طراحی نشده است و نمی‌تواند یک سایت را به صورت کامل کپی کند.

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

سوالات متداول درباره کپی کردن استایل سایت با Inspect

آیا می‌توان CSS یک سایت را با Inspect کپی کرد؟

بله، می‌توانید CSS قابل مشاهده و قوانین مربوط به عناصر صفحه را با Inspect بررسی کنید و در صورت نیاز کدهای موردنظر را برای پیاده‌سازی یک طراحی مشابه در سایت خود استفاده کنید. با این حال، ممکن است لازم باشد کدها را با ساختار سایت خودتان تطبیق دهید.

چرا CSS کپی شده در سایت من کار نمی‌کند؟

ممکن است CSS به ساختار HTML، کلاس‌ها، فونت‌ها، تصاویر یا فایل‌های دیگری در سایت اصلی وابسته باشد. همچنین ممکن است قوانین CSS قالب سایت شما اولویت بیشتری داشته باشند.

آیا Inspect Element می‌تواند کل سایت را کپی کند؟

خیر. Inspect برای بررسی کدهایی است که مرورگر دریافت و نمایش می‌دهد. کدهای سمت سرور، PHP، پایگاه داده و منطق داخلی سایت از طریق Inspect قابل مشاهده نیستند.

چگونه CSS یک دکمه را از سایت دیگر پیدا کنیم؟

روی دکمه موردنظر کلیک راست کنید، گزینه Inspect را انتخاب کنید و سپس در بخش Styles قوانین CSS مربوط به آن عنصر را بررسی کنید. در این بخش می‌توانید رنگ، فاصله، اندازه، حاشیه و سایر ویژگی‌های ظاهری را مشاهده کنید.

آیا تغییرات ایجاد شده در Inspect دائمی هستند؟

خیر. تغییراتی که مستقیماً در Developer Tools ایجاد می‌کنید معمولاً موقتی هستند و با Refresh کردن صفحه از بین می‌روند. برای دائمی کردن تغییرات باید CSS اصلاح‌شده را در سایت خود قرار دهید.

آیا برای استفاده از Inspect باید CSS بلد باشیم؟

برای تغییرات ساده ممکن است بدون دانش زیاد CSS هم بتوانید از Inspect استفاده کنید، اما آشنایی با HTML و CSS باعث می‌شود بتوانید کدها را بهتر درک و اصلاح کنید.

آیا استفاده از CSS سایت‌های دیگر از نظر قانونی مجاز است؟

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

بهترین روش انتقال استایل یک سایت به وردپرس چیست؟

ابتدا عنصر موردنظر را با Inspect بررسی کنید، ساختار HTML و CSS آن را بشناسید، سپس کدهای موردنیاز را با ساختار قالب وردپرس خود هماهنگ کنید و CSS را از طریق CSS سفارشی، Child Theme یا امکانات قالب اضافه کنید.