آموزش مخفی کردن عناصر در صفحات خاص Inspect Element مرورگر

آموزش مخفی کردن عناصر در صفحات خاص

آموزش مخفی کردن عناصر در صفحات خاص

آموزش

آموزش مخفی کردن توسط ابزار Inspect Element

با سلام خدمت شما . امروز میخواهیم کمی با کدهای css و قالبمان بازی کنیم ! امروز برای شما آموزش مخفی کردن عناصر در صفحات خاص را آماده کرده ام . در این مطلب به شما میگوییم که چگونه یک عنصر یا عناصر خاص را برای صفحات خاص وردپرسی خودمان مخفی کنیم . برخی صفحات هستند که نباید همه چیز در آنها نمایان باشد . به عنوان مثال یک منو یا ابزارک یا عنصر خاص دیگر نباید قابل مشاهده باشد . اما به دلیل طراحی قالب ما و اینکه اکثر قالب ها در نوشته ها و برگه هایشان از یک قالب مشابه استفاده میشود و یا تنها یک قالب برگه وجود دارد اما در هر برگه میخواهید بعضی از عناصر را مخفی کنید . این کار رابا همراهی یکدیگر در این مطلب انجام خواهیم داد . اکثر مرورگر ها ابزاری به نام Inspect Element دارند .

معرفی ابزار Inspect Element

احتمالا اکثر شما با ابزار Inspect Element آشنا هستید اما برخی از عزیزان هستند که آشنایی چندانی با این مورد ندارند . اگر بخواهیم به صورت ساده برای شما توضیح دهیم ابزار Inspect Element به عنوان ابزاری جهت تغییر در css ، جاوا اسکریپت و کدهای Html سایت شما بدون دستکاری فایل های موجود در هاست شما میباشد . البته باید توجه داشته باشید که این تغییرات درون سیستم شما رخ خواهد داد و در صورت رفرش کردن سایت مجددا ظاهر سایت مانند گذشته خواهد شد ولی با استفاده از این ابزار به راحتی و بدون خراب کردن کدها و فایل های خود میتوانید به صورت آنی تغییراتی در کدهای موجود سایت خود دهید و نتیجه را مشاهده کنید . خب حالا که با کلیات کار آشنا شدیم به سراغ آموزش امروز خواهیم رفت . فرض کنید در سایت شما یک منو اصلی وجود دارد که میخواهیم این منو در یک صفحه خاص نمایش داده نشود . ابتدا باید کلاس مربوط به این منو را پیدا کنیم که این کار را با استفاده از ابزار Inspect Element انجام میدهیم .

آموزش مخفی کردن عناصر در صفحات خاص
آموزش مخفی کردن عناصر در صفحات خاص

در تصویر بالا مشخص است که کلاس مد نظر ما #mainmenu نام دارد . پس از آن باید به دنبال کلاس مربوط به صفحه بگردیم . توجه کنید که هر صفحه یک شناسه اختصاصی مربوط به خود دارد . با بررسی تگ body میتوانید آن را پیدا کنید . در تصویر زیر این شناسه پیدا شده است .

آموزش مخفی کردن عناصر در صفحات خاص
آموزش مخفی کردن عناصر در صفحات خاص

شناسه صفحه ا با علامت فلش در تصویر بالا مشخص شده است . .postid-1762 کلاسی است که مربوط به نوشته ما است . قدم بعدی این است که دو عنصر به دست آمده را در کد زیر قرار دهید :

.unique-body-class #element-to-hide {
    display: none;
}

اگر بر اساس مثال بالا بخواهیم جاسازی را انجام دهیم ، این کد مانند کد زیر خواهد شد :

.postid-1762 #mainmenu {
    display: none;
}

حال باید این کد را درون فایل استایل قالب خودمان قرار دهیم . این فایل با نام Style.css درون پوشه قالب شما وجود دارد . البته در صورتی که میترسید به مشکل برخورد کنید میتوانید از افزونه های ویرایش css استفاده کنید . پس از انجام تغییرات مشاهده خواهید کرد که منو اصلی در صفحه ای که مد نظر ما میباشد مخفی شده است .

آموزش مخفی کردن عناصر در صفحات خاص
آموزش مخفی کردن عناصر در صفحات خاص

امیدوارم از این آموزش استفاده کافی برده باشید . خوشحال میشویم نظرات خودتان را با ما در میان بگذارید .

امتیاز شما در رابطه با این مقاله ؟
بدبدمعمولیخوبخیلی عالی
3 رای, 3٫33 از 5
Loading...

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

مشاهده مقاله من : درگاه های واسط پرداخت و مزایا نسبت به PSP

دیدگاه شما عزیزان
  • هادی
    8 مرداد 1398

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

کادر ارسال دیدگاه شما کاربر عزیز

iwmf