نحوه ایجاد صفحه جستجوی تمام صفحه در وردپرس

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


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

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

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

 

نحوه ایجاد صفحه جستجوی تمام صفحه در وردپرس

 

لطفا توجه داشته باشید که این افزونه با ویژگی پیش فرض وردپرس کار می کند. متاسفانه این افزونه با Google Custom Search کار نمی کند.

 

سفارشی سازی جستجو به تمام صفحه

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

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

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

شما یک فایل full-screen-search.css در پوشه css پیدا خواهید کرد. باید این فایل را در کامپیوتر خود دانلود کنید.

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/**
* 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: #1bc69e;
 
    /**
    * 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;
    /* We have added our own font color here */
    color:#50B0A6;
}

 

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

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

 

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

به بالای صفحه بردن