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