dịch vụ SEO

Bài đăng nổi bật

Làm thế nào để tạo một trang đăng nhập tuỳ chỉnh cho WordPress

Bạn có muốn tạo trang đăng nhập tuỳ chỉnh cho trang web WordPress của mình không? Một trang đăng nhập tùy chỉnh cho phép người dùng của bạn ...

Các Dịch Vụ SEO

Cách Thêm lớp phủ Tìm kiếm Toàn màn hình trong WordPress

Gần đây, một trong những độc giả của chúng tôi đã hỏi chúng tôi có thể viết hướng dẫn về cách thêm lớp phủ tìm kiếm toàn màn hình trong WordPress hay không. Bạn có thể đã nhìn thấy điều này trên các trang web phổ biến như Wired. Khi người dùng nhấp vào biểu tượng tìm kiếm, hộp tìm kiếm sẽ mở ra và bao gồm toàn bộ màn hình có thể cải thiện trải nghiệm người dùng trên thiết bị di động. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm lớp phủ tìm kiếm toàn màn hình trong WordPress.

Tham khảo : Đào tạo SEO

Việc tìm kiếm toàn màn hình dần dần trở thành xu hướng bởi vì nó giúp cải thiện đáng kể trải nghiệm tìm kiếm cho người dùng di động. Vì màn hình di động rất nhỏ, bằng cách cung cấp lớp phủ toàn màn hình, bạn giúp người dùng nhập và tìm kiếm trên trang web của bạn dễ dàng.

Khi chúng tôi lần đầu tiên có yêu cầu hướng dẫn này, chúng tôi biết nó sẽ yêu cầu một số mã. Mục tiêu của chúng tôi tại TLSEO là làm mọi thứ đơn giản nhất có thể.

Một khi chúng tôi đã hoàn thành bài hướng dẫn, chúng tôi nhận ra rằng quá trình của nó quá phức tạp và nên được gói gọn trong một plugin đơn giản.

Để làm dễ dàng, chúng tôi đã tạo hướng dẫn bằng video về cách thêm lớp phủ tìm kiếm toàn màn hình mà bạn có thể xem bên dưới.

Xem : http://dichvuseosaigon.com/p/daotaoseowebchuyennghiep.html

Tuy nhiên, nếu bạn chỉ muốn làm theo các hướng dẫn văn bản, sau đó bạn có thể làm theo hướng dẫn từng bước về cách thêm lớp phủ tìm kiếm toàn màn hình vào WordPress.

Thêm lớp phủ Tìm kiếm Toàn màn hình trong WordPress

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Full Screen Search Overlay của WordPress . Để biết thêm chi tiết, hãy xem hướng dẫn từng bước về cách cài đặt plugin WordPress .
WordPress toàn màn hình Lớp phủ Tìm kiếm plugin hoạt động ra khỏi hộp, và không có cài đặt cho bạn để cấu hình.
Bạn có thể chỉ cần truy cập trang web của bạn và nhấp vào hộp tìm kiếm để xem plugin hoạt động.
Xin lưu ý rằng plugin hoạt động với tính năng tìm kiếm WordPress mặc định.Nó cũng hoạt động tốt với SearchWP , đây là một plugin cao cấp cải thiệnđáng kể việc tìm kiếm WordPress mặc định .

Tùy chỉnh Lớp phủ Tìm kiếm Toàn màn hình

Phủ lớp phủ Tìm kiếm Toàn màn hình của WordPress đi kèm với biểu định kiểu của riêng nó. Để thay đổi sự xuất hiện của lớp phủ tìm kiếm, bạn sẽ phải chỉnh sửa tệp tin của tệp plugin hoặc sử dụng! Quan trọng trong CSS.
Đầu tiên, bạn sẽ cần phải kết nối với trang web của bạn bằng cách sử dụng một khách hàng FTP . Nếu bạn là người mới sử dụng FTP, hãy xem hướng dẫn của chúng tôi về cách tải tệp lên WordPress bằng cách sử dụng FTP .
Một khi bạn đã kết nối, bạn cần định vị thư mục CSS của plugin. Bạn sẽ tìm thấy nó dưới con đường sau:
yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/
Bạn sẽ tìm thấy một tập tin full-screen-search.css bên trong thư mục css. Bạn cần phải tải tập tin này về máy tính của bạn.
Mở tập tin, bạn chỉ cần tải về trong một trình soạn thảo văn bản thuần như Notepad. Bạn có thể thực hiện bất kỳ thay đổi nào đối với tệp này. Ví dụ: chúng tôi muốn thay đổi màu nền và màu chữ cho phù hợp với trang web demo của chúng tôi.
1
2
3
4
5
6
7
số 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;
}
Trong mã này, chúng tôi chỉ thay đổi màu nền tại dòng 62 và thêm màu chữ ở dòng 150. Nếu bạn thích CSS, bạn cũng có thể thay đổi các quy tắc kiểu dáng khác.
Một khi bạn đã hoàn tất, bạn có thể tải tệp này lên thư mục CSS của plugin bằng FTP. Giờ đây, bạn có thể thấy các thay đổi của mình bằng cách truy cập trang web của bạn.
Lưu ý quan trọng:
Nếu bạn đang sử dụng tính năng này trong chủ đề của riêng mình, thì tốt hơn nên sử dụng các thẻ quan trọng để cập nhật trình cắm thêm sẽ không ghi đè bất kỳ thay đổi nào.

Xem tiếp : Khóa học SEO

Đối với các nhà phát triển và tư vấn, bạn cũng có thể chỉ cần đổi tên plugin và gói nó như một phần của chủ đề hoặc dịch vụ của bạn.
Chúng tôi chỉ tạo plugin này bởi vì tất cả các cách viết bài hướng dẫn này sẽ quá phức tạp đối với người dùng mới bắt đầu.