چگونگی ایجاد صفحه جستجوی تمام صفحه در وردپرس
شما می توانید به سادگی از وبسایت خود بازدید کنید و بر روی جعبه جستجو کلیک کنید تا عملکرد افزونه وردپرسی را در عمل ببینید.
سفارشی سازی جستجو به تمام صفحه
شما باید اول وارد هاست خود شوید سپس ، شما باید پوشه 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.5 s 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 ; } |
پس از اتمام کار، شما می توانید این فایل را به پوشه CSS افزونه با استفاده از هاست آپلود کنید. شما هم اکنون می توانید تغییرات خود را با بازدید از وب سایت خود ببینید.