آموزش مخفی کردن توسط ابزار 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 استفاده کنید . پس از انجام تغییرات مشاهده خواهید کرد که منو اصلی در صفحه ای که مد نظر ما میباشد مخفی شده است .

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

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