چگونه می توان یک پوشش جستجوی تمام صفحه در وردپرس اضافه کرد

اخیراً ، یکی از خوانندگان ما س ifال کرده است که آیا می توانیم آموزشی در مورد چگونگی افزودن پوشش جستجوی تمام صفحه در وردپرس بنویسیم؟ احتمالاً این مورد را در سایت های معروف مانند Wired دیده اید. وقتی کاربر روی نماد جستجو کلیک می کند ، کادر جستجو باز می شود و کل صفحه را پوشش می دهد که می تواند تجربه کاربر را در دستگاه های تلفن همراه بهبود بخشد. در این مقاله ، ما به شما نحوه افزودن یک لایه جستجوی تمام صفحه در وردپرس را نشان خواهیم داد.

جستجوی تمام صفحه به آرامی در حال تبدیل شدن به یک روند است زیرا تجربه جستجو را برای کاربران تلفن همراه به شدت بهبود می بخشد. از آنجا که صفحه نمایش موبایل بسیار کوچک است ، با ارائه یک پوشش تمام صفحه ، تایپ کردن و جستجو در وب سایت خود را برای کاربران آسان می کنید.

هنگامی که برای اولین بار این درخواست آموزشی را دریافت کردیم ، می دانستیم که به کد خاصی احتیاج دارد. هدف ما در WPBeginner این است که کارها را به ساده ترین شکل ممکن انجام دهیم.

هنگامی که نگارش آموزش را به پایان رساندیم ، فهمیدیم که این فرآیند بیش از حد پیچیده است و بهتر است آن را در یک پلاگین ساده قرار دهید.

برای سهولت کار ، ما یک آموزش ویدئویی در مورد نحوه افزودن یک پوشش جستجوی تمام صفحه ایجاد کرده ایم که می توانید در زیر مشاهده کنید.

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

افزودن پوشش جستجوی تمام صفحه در وردپرس h4>

اولین کاری که باید انجام دهید این است که وردپرس صفحه جستجوی تمام صفحه جستجو برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .

افزونه Search Alllay Overlay Search WordPress خارج از جعبه کار می کند و هیچ تنظیماتی برای پیکربندی شما وجود ندارد.

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

لطفاً توجه داشته باشید که این افزونه با ویژگی جستجوی پیش فرض وردپرس کار می کند. همچنین با SearchWP عالی است که یک پلاگین ممتاز که بهبود جستجوی پیش فرض وردپرس a >

متأسفانه ، این افزونه با عنوان جستجوی سفارشی Google .

سفارشی سازی پوشش صفحه نمایش تمام صفحه h4>

افزونه Search All Screen Search Full Screen WordPress همراه با سبک خاص خود است. برای تغییر شکل پوشش جستجو ، باید فایل CSS پلاگین را ویرایش کنید یا از! مهم در CSS استفاده کنید.

ابتدا شما باید با استفاده از سرویس گیرنده FTP . اگر در استفاده از FTP تازه وارد هستید ، به راهنمای ما در نحوه بارگذاری پرونده در وردپرس با استفاده از FTP .

پس از اتصال ، باید پوشه CSS پلاگین را پیدا کنید. آن را در مسیر زیر پیدا خواهید کرد:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

درون پوشه css یک فایل تمام صفحه-جستجو. css پیدا خواهید کرد. شما باید این فایل را در رایانه خود بارگیری کنید.

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

/ **
* تنظیم مجدد
* - از استفاده مضامین و سایر پلاگین ها از سبک های خاص خود برای جستجوی تمام صفحه ما جلوگیری می کند
* /
# جستجوی تمام صفحه ،
# دکمه جستجوی تمام صفحه ،
# دکمه جستجوی تمام صفحه. بستن ،
# فرم جستجوی تمام صفحه ،
# فرم جستجوی تمام صفحه div
# فرم جستجوی تمام صفحه div ورودی ،
# فرم جستجوی تمام صفحه div input.search {
    font-family: Arial، sans-serif؛
    زمینه: هیچ؛
    حاشیه: 0 هیچ؛
    شعاع مرز: 0؛
    -شعاع مرز وب-کیت: 0؛
    -moz-border-radius: 0؛
    شناور: هیچ؛
    اندازه قلم: 100٪؛
    ارتفاع: خودکار؛
    فاصله نامه: طبیعی؛
    سبک لیست: هیچ؛
    رئوس مطالب: هیچ؛
    موقعیت: ساکن؛
    دکوراسیون متن: هیچ؛
    text-indent: 0؛
    text-shadow: هیچ؛
    تبدیل متن: هیچ؛
    عرض: خودکار؛
    دید: قابل مشاهده؛
    سرریز: قابل مشاهده
    حاشیه: 0؛
    بالشتک: 0؛
    ارتفاع خط: 1؛
    جعبه اندازه: حاشیه جعبه؛
    -webkit-box-sizing: حاشیه-جعبه؛
    -moz-box-sizing: حاشیه-جعبه؛
    -webkit-box-shadow: هیچ؛
    -moz-box-shadow: هیچ؛
    -ms-box-shadow: هیچ؛
    -o-box-shadow: هیچ؛
    جعبه سایه: هیچ؛
    -webkit-ظاهر: هیچ؛
    انتقال: هیچ؛
    -webkit-transfer: هیچ؛
    -moz-گذار: هیچ؛
    -o-گذار: هیچ؛
    -ms-گذار: هیچ؛
}

/ **
* زمینه
* /
# جستجوی تمام صفحه {
    دید: پنهان
    تیرگی: 0؛
    z-index: 999998؛
    بالا: 0؛
    سمت چپ: 0؛
    عرض: 100٪
    قد: 100٪
    پس زمینه: # 1bc69e؛

    / **
    * برخی از انتقال های CSS3 را برای نمایش جستجوی تمام صفحه اضافه کنید
    * /
    انتقال: کدری 0.5s خطی ؛
}

/ **
* هنگام باز کردن ، جستجوی تمام صفحه را نمایش دهید
* /
# جستجوی تمام صفحه. باز کردن {
    / **
    * از آنجا که ما برای پشتیبانی از انتقال CSS از قابلیت مشاهده و تیرگی استفاده می کنیم ،
    * موقعیت را تعریف می کنیم: ثابت ؛ در اینجا تا جستجوی تمام صفحه مسدود نشود
    * عناصر زیرین HTML در صورت باز نبودن
    * /
    موقعیت: ثابت
    دید: قابل مشاهده؛
    تیرگی: 1؛
}

/ **
* فرم جستجو
* /
# فرم جستجوی تمام صفحه {
    موقعیت: نسبی؛
    عرض: 100٪
    قد: 100٪
}

/ **
* دکمه بستن
* /
# دکمه جستجوی تمام صفحه. بستن {
    موقعیت: مطلق؛
    z-index: 999999؛
    بالا: 20 پیکسل؛
    راست: 20px؛
    اندازه قلم: 30 پیکسل؛
    وزن قلم: 300؛
    رنگ: # 999؛
    مکان نما: اشاره گر؛
}

/ **
* فرم جستجو Div
* /
# فرم جستجوی تمام صفحه div {
    موقعیت: مطلق؛
    عرض: 50٪
    ارتفاع: 100 پیکسل
    بالا: 50٪؛
    سمت چپ: 50٪؛
    حاشیه: -50px 0 0 -25٪؛
}

/ **
* فرم جستجو رنگ محل نگهدارنده ورودی
* /
# فرم جستجوی تمام صفحه div input :: - webkit-input-placeholder {
    font-family: Arial، sans-serif؛
    رنگ: #ccc؛
}
# فرم کامل صفحه جستجو ورودی div: -moz-placeholder {
    font-family: Arial، sans-serif؛
    رنگ: #ccc؛
}
# فرم جستجوی تمام صفحه div input :: - moz-placeholder {
    font-family: Arial، sans-serif؛
    رنگ: #ccc؛
}
# فرم جستجوی تمام صفحه div input: -ms-input-placeholder {
    font-family: Arial، sans-serif؛
    رنگ: #ccc؛
}

/ **
* ورودی فرم جستجو
* /
# فرم جستجوی تمام صفحه div input {
    عرض: 100٪
    ارتفاع: 100 پیکسل
    زمینه: #eee؛
    بالشتک: 20px؛
    اندازه قلم: 40px؛
    ارتفاع خط: 60 پیکسل
    / * ما رنگ قلم خود را در اینجا اضافه کرده ایم * /
    رنگ: # 50B0A6؛
}

در این کد ، ما فقط رنگ پس زمینه را در خط 62 تغییر داده ایم و رنگ خط را نیز در خط 150 اضافه کرده ایم. اگر مهارت خوبی در CSS دارید ، در صورت تمایل سایر قوانین سبک را نیز تغییر دهید.

پس از پایان کار ، می توانید این فایل را با استفاده از FTP دوباره به پوشه CSS پلاگین بارگذاری کنید. اکنون می توانید با مراجعه به وب سایت خود تغییرات خود را مشاهده کنید.

نکته مهم:

اگر از این موضوع در زمینه خود استفاده می کنید ، بهتر است از برچسب های مهم استفاده کنید تا به روزرسانی های افزونه هیچ تغییری را نادیده نگیرد.

برای توسعه دهندگان و مشاوران ، همچنین می توانید پلاگین را تغییر نام دهید و آن را به عنوان بخشی از موضوع یا خدمات خود قرار دهید.

ما فقط این افزونه را ایجاد کردیم زیرا سایر روشهای نوشتن این آموزش برای کاربران مبتدی بسیار پیچیده بوده است.

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .