جستجوی تمام صفحه سایت با WordPress Full Screen Search Overlay

جستجوی تمام صفحه سایت با WordPress Full Screen Search Overlayجستجوی تمام صفحه سایت

سلام دوستان

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

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

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

در ضمن قالب کلی آن را هم می توانید تغییر دهید و استایل مورد علاقه تان را با تغییر فایل css آن ایجاد نمایید.

افزونه WordPress Full Screen Search Overlay

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

استایل دهی به قالب افزونه

برای دسترسی به فایل استایل (css.) افزونه باید به آدرس wp-contents/plugins/full-screen-search-overlay/assets/css مراجعه نمایید. سپس فایل full-screen-search.css را با برنامه های ویرایشگر متنی مثل Notepad باز نمایید تا به کدهای مربوط به استایل افزونه دسترسی پیدا کنید.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
font-family: Arial, sans-serif;
background:none;
border:0 none;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
float:none;
font-size:100%;
height:auto;
letter-spacing:normal;
list-style:none;
outline:none;
position:static;
text-decoration:none;
text-indent:0;
text-shadow:none;
text-transform:none;
width:auto;
visibility:visible;
overflow:visible;
margin:0;
padding:0;
line-height:1;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
-webkit-appearance:none;
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
visibility: hidden;
opacity: 0;
z-index: 999998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.95);

/**
* Add some CSS3 transitions for showing the Full Screen Search
*/
transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
/**
* Because we're using visibility and opacity for CSS transition support,
* we define position: fixed; here so that the Full Screen Search doesn't block
* the underlying HTML elements when not open
*/
position: fixed;
visibility: visible;
opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
position: relative;
width: 100%;
height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
position: absolute;
z-index: 999999;
top: 20px;
right: 20px;
font-size: 30px;
font-weight: 300;
color: #999;
cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
position: absolute;
width: 50%;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input:-moz-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input::-moz-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder {
font-family: Arial, sans-serif;
color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
width: 100%;
height: 100px;
background: #eee;
padding: 20px;
font-size: 40px;
line-height: 60px;
}

کد بالا همان کد استایل افزونه است که به بخش های مختلف آن میپردازیم:

  ارسال ایمیل دلخواه بعد از ثبت نام به کاربر با SB Welcome Email Editor

توضیحات کد

  1. در ابتدای کد شما می توانید فونت های استفاده شده را مشاهده نمایید که با تغییر آن ها می توانید فونت دلخواهتان را در افزونه درج نمایید.
  2. در خط ۵۲ به کلمه Background میرسیم که مربوط به پس زمینه پاپ آپ که کل سایت را می پوشاند، می شود. در این بخش با تغییر کد background: rgba(255,255,255,0.95) در خط ۶۲ می توانید رنگ پس زمینه را عوض کنید. المان های این کد به ترتیت از راست به چپ «میزان شفافیت، r،g،b» است.
  3. خط ۶۵ هم نحوه نمایان شدن پس زمینه را مشخص می نماید که نشان دهنده افزایش آرام شفافیت است.
  4. خط ۹۴ هم ویژه تغییر استایل ضربدر پاپ آپ است که با تغییر ویژگی color  می توانید رنگ آن را عوض نمایید.
  5. در خط ۱۲۰ و ۱۴۰ هم می توانید به ترتیب رنگ نوشته پیش فرض جعبه جستجو و رنگ پس زمینه جعبه را تغییر دهید.

جمع بندی!

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

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

 دانلود افزونه WordPress Full Screen Search Overlay

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

دیدگاهتان را بنویسید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. اینو از کجا اضافه کنیم به سایت!!!
    مسقیم میره تو ابزارک ها یا کد نویسی میخواد؟

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

  3. 6 سال عضو همیار وردپرس

    پیش نمایش نشان داده نمی شود.

  4. سلام

    پیشنمایش کار نمیکنه !

  5. سلام
    لینک پیش نمایش مشکل داره,
    بجای Demo نوشته شده Dmeo

    موفق باشید

  6. 5 سال عضو همیار وردپرس

    سلام جناب مجیدی.
    لینک پیش نمایش به نظر ارور DNS میده.

مطالب زیر را حتما بخوانید

دوره‌های آموزشی