Hướng dẫn how do you show phone number in html? - làm cách nào để bạn hiển thị số điện thoại trong html?
|
Nhiều trang web kinh doanh hiển thị một số điện thoại để khách hàng của họ có thể liên hệ với họ. Khi máy tính để bàn là cách phổ biến nhất để truy cập các trang web, người dùng sẽ ghi chú số điện thoại và gọi từ một thiết bị riêng biệt. Tất nhiên, hầu hết người dùng hiện truy cập trang web và thực hiện cuộc gọi điện thoại từ cùng một thiết bị. Điều này mở ra một cơ hội để thêm một liên kết cuộc gọi - tạo một số điện thoại HTML mà có thể nhấp được. Show
Trong bài viết này, chúng tôi sẽ xem xét cách thêm liên kết cuộc gọi cũng như một vài liên kết có thể nhấp khác như email và các CTA khác. Đăng ký kênh YouTube của chúng tôi Liên kết cuộc gọi hoạt động như thế nàoLàm số điện thoại có thể nhấp dễ dàng thực hiện với HTML. HTML5 bao gồm các giao thức như TEL: và Mailto: Trình duyệt có thể sử dụng. Các trình duyệt đáp ứng khác nhau với các giao thức này. Một số sẽ khởi chạy ứng dụng điện thoại và thêm số vào màn hình trong khi chờ bạn nhấp vào nút Gọi. Những người khác sẽ thực hiện cuộc gọi, trong khi những người khác sẽ hỏi liệu nó có ổn không. Vì nó HTML, bạn có thể thêm các giao thức ở bất cứ đâu trên trang web của bạn bao gồm tiêu đề, chân trang, thanh bên, trong nội dung của các bài đăng và trang và trong các tiện ích. Thêm liên kết cuộc gọi số điện thoại HTML vào trang web của bạnThêm mã làm văn bản vào vị trí bạn muốn liên kết xuất hiện: 123-456-7890 Href = tel: Tạo liên kết cuộc gọi. Điều này cho biết trình duyệt cách sử dụng số. Tel Tel: 123-456-7890 Tạo số điện thoại HTML. Số trong báo giá là số nó sẽ gọi. Số trong các thẻ> Hiển thị tin nhắn thay vì số sẽ trông như thế này: Khách truy cập của bạn sẽ thấy văn bản nhưng khi họ nhấp vào nó, họ thấy màn hình quay số điện thoại của họ với số của bạn sẵn sàng để họ nhấp vào nút Gọi. Một số số điện thoại có một phần mở rộng. Bạn có thể thêm mã sẽ tạo tạm dừng ngắn gọn trước khi quay số mở rộng. Thêm P trước phần mở rộng sẽ thêm tạm dừng một giây. Mã có thể trông như thế này: Điều này quay số số, chờ một giây và sau đó quay số mở rộng. Bạn có thể có nó để chờ một giai điệu quay số bằng cách sử dụng & nbsp; w & nbsp; thay vì & nbsp; p. Mã quốc gia có thể được thêm vào bằng cách bao gồm a & nbsp;+& nbsp; cùng với mã quốc gia của bạn trước số điện thoại. Một ví dụ có thể trông như thế này: Một trong những tiện ích yêu thích của tôi khi mang theo điện thoại thông minh là khi tôi tìm kiếm một doanh nghiệp địa phương và kết quả trong Google cho tôi một số điện thoại có thể nhấp. Tôi có thể nhấp vào số để thực hiện cuộc gọi mà không cần phải viết nó ra hoặc cố gắng ghi nhớ nó. Tính năng này bây giờ là một điều cần thiết. May mắn thay, bạn có thể thêm nó vào trang web của mình để Google có thể cung cấp số điện thoại của bạn trong các tìm kiếm địa phương. Điều này được thực hiện với microdata. Microdata thông báo cho các công cụ tìm kiếm rằng các số là số điện thoại để chúng được hiển thị dưới dạng liên kết cuộc gọi có thể nhấp. Bạn có thể tạo điều này bằng cách làm phong phú thêm đánh dấu với một vài thẻ cho các tìm kiếm cục bộ. Ví dụ: mã có thể trông như thế này:
Các cuộc gọi hành động khácVới HTML5, bạn không giới hạn số điện thoại. Bạn có thể thêm các cuộc gọi khác vào hành động như email, nhắn tin, fax, v.v. Các giao thức HTML5 bao gồm:
Tất cả các giao thức này được sử dụng theo cùng một cách như chúng ta đã thấy ở trên. Hãy cùng nhìn vào một vài ví dụ. Thêm mã vào trang liên hệ của bạnMột trong những nơi tốt nhất để thêm liên kết cuộc gọi là trong thông tin liên hệ của bạn trên trang Liên hệ với chúng tôi. Cho dù bạn sử dụng trình soạn thảo cổ điển hay trình soạn thảo Gutenberg mới, bạn sẽ cần xem phiên bản văn bản của trang. Trong trình soạn thảo cổ điển, nhấp vào tab Văn bản. Trong Gutenberg, nhấp vào ba dấu chấm ở phía trên bên phải và chọn Trình chỉnh sửa mã.Text tab. In Gutenberg, click the three dots in the upper right and select Code Editor. Thêm mã thay cho số điện thoại của bạn. Thoát khỏi trình chỉnh sửa mã hoặc xem trước trang và bạn sẽ thấy rằng số điện thoại của bạn hiện là một liên kết có thể nhấp. Tạo mã cho một liên kết email hoặc URLMã HTML cho email là Mailto: địa chỉ email được thêm vào cuối, như thế này: [email protected] Just like the phone link, you can use the visual portion to add a message, such as: Click here to send me an email Giống như liên kết điện thoại, bạn có thể sử dụng phần trực quan để thêm thông báo, chẳng hạn như: < href="mailto: [email protected]"; Click here to send me an email Dưới đây, một ví dụ từ trang liên hệ Gói bố trí spa. Tôi đã thêm một mô -đun Blurb với một biểu tượng và văn bản gửi email. Tôi đã chọn tab Văn bản và thêm email HTML. Văn bản hiện có thể nhấp và sẽ mở ứng dụng email của bạn. Thêm mã vào URL mởBạn có thể có HTML để mở bất kỳ URL nào bạn muốn. Điều này là tốt nếu bạn muốn gửi độc giả đến các trang để đăng ký bản tin, sự kiện, v.v. Để liên kết với họ, mã HTML của bạn sẽ bao gồm URL. Ví dụ: See the sample page> Tôi đã thêm một blurb khác với mã để xem trang sự kiện. Tắt trên máy tính để bàn và máy tính bảngMột vấn đề với các liên kết cuộc gọi là chúng không hữu ích cho máy tính để bàn hoặc máy tính bảng. Bạn có thể giải quyết vấn đề này bằng Divi bằng cách tạo các mô -đun dành riêng cho từng loại thiết bị, sau đó vô hiệu hóa chúng trên các thiết bị khác. Ở đây, tôi đã tạo ra hai mô -đun với số điện thoại: một mô -đun bao gồm số điện thoại HTML và phần còn lại không có. Tôi đã vô hiệu hóa cái có số có thể nhấp trên máy tính bảng và máy tính để bàn, vì vậy họ sẽ không bao giờ thấy liên kết. Tôi cũng đã vô hiệu hóa mô -đun mà không có liên kết cho điện thoại, vì vậy người dùng điện thoại sẽ chỉ thấy mô -đun với liên kết. Thêm mã vào tiêu đề hoặc chân trang của bạnBạn có thể thêm mã vào tiêu đề hoặc chân trang của bạn bằng trình chỉnh sửa chủ đề. Luôn luôn sử dụng A & nbsp; chủ đề con hoặc mã PHP của bạn sẽ bị ghi đè khi bạn cập nhật chủ đề. Điều này sẽ yêu cầu một số kiểu dáng CSS để trông tốt. Trong bảng điều khiển của bạn, hãy truy cập & nbsp; ngoại hình & nbsp;> biên tập viên> tiêu đề chủ đề (hoặc chân trang chủ đề). Đặt mã trong phần mã. Tôi đã tìm một thẻ kết thúc, nhấp vào Enter để thêm một vài dòng và dán vào mã của tôi. Bạn có thể thấy mã ở đây trên các dòng 28 và 29. Đây là những gì nó trông giống như khi tôi đặt liên kết cuộc gọi và liên kết email trong tiêu đề của chủ đề hai mươi chín mươi. Nó ở đó và nó hoạt động, nhưng nó không đẹp lắm. Điều này có thể sửa được bằng cách thêm màu sắc và không gian lề để họ sẽ tách biệt với nhau. Tất nhiên, điều này được thực hiện trong CSS. Tạo kiểu cho các liên kếtBạn cần phải thêm mã vào trường CSS bổ sung trong tùy chỉnh. Mã của bạn có thể trông như thế này: a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}
Điều này cho CSS làm thế nào để tạo kiểu văn bản cho tel: và mailto:. Nó thay đổi phông chữ số điện thoại thành màu nâu, phông chữ email màu cam và thêm một biên độ nhỏ ở bên phải của mỗi liên kết. CSS hoạt động bất cứ nơi nào mã bao gồm trong các widget, bài đăng, v.v. Bạn thậm chí có thể sử dụng & nbsp; biểu tượng & nbsp; thay vì văn bản. Thêm mã vào menu thứ cấp DiviDivi có thể bao gồm số điện thoại và email của bạn trong menu thứ cấp phía trên tiêu đề. Nút email đã có thể nhấp theo mặc định, nhưng số điện thoại không phải là. Số điện thoại có thể được biến thành một liên kết cuộc gọi bằng cách sử dụng số điện thoại HTML tương tự mà chúng tôi đã sử dụng trong các ví dụ trước. Truy cập & nbsp; tùy chỉnh chủ đề> tiêu đề & điều hướng> & nbsp; các yếu tố tiêu đề. Điều này sẽ cung cấp cho bạn một hộp văn bản nơi bạn có thể thêm số điện thoại của mình. May mắn thay, bạn không giới hạn ở những con số. Bạn cũng có thể thêm HTML. Tôi đã thêm HTML từ các ví dụ trước. Tôi cũng tăng kích thước phông chữ điện thoại để giúp bạn dễ dàng nhìn thấy hình ảnh hơn. Bạn có thể nói rõ rằng nó có thể nhấp bằng cách thêm một thông báo vào phần trực quan của liên kết. Bạn có thể thay thế số bằng tin nhắn hoặc thêm thông báo vào cuối số. Nó có thể trông như thế này: 123-456-7890 CLICK TO CALL Ví dụ này chỉ hiển thị văn bản. Trong cái này, tôi đã thêm số điện thoại cùng với văn bản. Kiểm tra trên thiết bị di độngTôi khuyên bạn nên kiểm tra các liên kết với các thiết bị di động để đảm bảo nó hoạt động. Nếu bạn không có quyền truy cập vào điện thoại thông minh, bạn có thể sử dụng các công cụ nhà phát triển Google Chrome. Nhấp chuột phải vào trang chủ của bạn và chọn & nbsp; kiểm tra. Ở góc trên cùng bên trái màn hình của bạn, bạn sẽ thấy một danh sách các thiết bị. Chọn một để xem trang web của bạn trông như thế nào trên màn hình đó. Nhấp vào liên kết Số điện thoại HTML sẽ mở hộp thoại yêu cầu bạn chọn một ứng dụng. Nếu bạn thấy điều này, liên kết hoạt động. Tôi vẫn khuyên bạn nên thử nó trên một điện thoại thông minh thực tế, nhưng đây là một dấu hiệu tốt cho thấy liên kết nó đang làm gì đó. Thêm liên kết cuộc gọi với các pluginBạn cũng có thể thêm một liên kết cuộc gọi vào tiêu đề của bạn với một plugin. Chúng thường bao gồm các tính năng để tạo kiểu, thêm nhiều cuộc gọi vào hành động và khả năng bật hoặc tắt dựa trên thiết bị của khách truy cập. Họ cũng dễ dàng thiết lập và sử dụng. Đây là những lựa chọn tuyệt vời nếu bạn không muốn xử lý mã. Dưới đây là một vài trong số các lựa chọn tốt nhất. Gọi ngay nútNút Gọi ngay thêm nút Nhấp để gọi vào cuối màn hình cho khách truy cập di động của bạn. Nó không hiển thị trên các thiết bị khác. Bạn cũng có thể thêm văn bản nếu bạn muốn. Nút là một biểu tượng điện thoại để nó dễ hiểu nó để làm gì. Tất cả những gì bạn phải làm là bật nút và nhập số điện thoại của bạn. Bạn có thể thay đổi hành vi mặc định trong cài đặt nâng cao. Thêm thông tin Nút bên dínhPlugin này cho phép bạn thêm các nút dính vào bên cạnh trang web của bạn và vẫn ở trên màn hình khi người dùng cuộn. Bạn có thể thêm một số điện thoại có thể nhấp, địa chỉ email, biểu tượng phương tiện truyền thông xã hội và vị trí lưu trữ. Đặt chúng ở bên phải hoặc bên trái, chọn phong cách hoạt hình và rollover, tùy chỉnh màu sắc và chọn nơi chúng hiển thị. Thêm thông tin Thanh liên hệ tốc độCái này thêm một thanh liên hệ bao gồm các liên kết có thể nhấp cho số điện thoại, số fax, tiêu đề, địa chỉ, email, mạng xã hội và URL tùy chỉnh. Đặt thanh lên trên cùng hoặc dưới cùng và điều chỉnh kích thước, màu sắc, màu sắc của văn bản và liên kết, và cách thanh phản ứng. Bạn cũng có thể điều chỉnh kích thước. Bạn có thể thêm nhiều nội dung bằng cách sử dụng móc lọc. Thêm thông tin Thanh liên hệ di độngPlugin này thêm các liên kết vào trang web của bạn khi được xem trên thiết bị di động. Bạn có thể chọn các liên kết nào được hiển thị từ 13 tùy chọn bao gồm điện thoại, email, skype, URL tùy chỉnh và mạng xã hội. Nó có tích hợp fontawgie cho các biểu tượng. Bạn có thể tạo kiểu cho các liên kết và chọn kích thước, đường viền, độ mờ, vv Đặt menu ở trên cùng hoặc dưới cùng của màn hình. Menu vẫn còn trên màn hình khi người dùng cuộn. Nó cũng bao gồm Cuộn đến Top và WooC Commerce Giỏ hàng với các nút truy cập vật phẩm. Thêm thông tin Suy nghĩ cuối cùngSự phổ biến của điện thoại thông minh để truy cập các trang web đang tăng lên mỗi ngày. Sự nổi tiếng này lấy các liên kết cuộc gọi từ một sự tiện lợi đơn giản đến một sự cần thiết hoàn toàn. Thêm số điện thoại có thể nhấp có thể tạo ra sự khác biệt giữa người dùng gọi cho doanh nghiệp của bạn hoặc đối thủ cạnh tranh của bạn. May mắn thay, thật khó để tạo các liên kết có thể nhấp để thêm số điện thoại HTML vào tiêu đề, chân trang, tiện ích, trang và bài đăng của trang web WordPress của bạn. Chúng tôi muốn nghe từ bạn. Bạn đã thêm một liên kết cuộc gọi vào trang web của bạn chưa? Hãy cho chúng tôi biết về kinh nghiệm của bạn trong các ý kiến dưới đây. Hình ảnh nổi bật qua Jane Kelly / Shutterstock.com Mẫu cho số điện thoại di động trong HTML là gì?Trong trường hợp số điện thoại di động, chúng tôi viết một mẫu mã hóa như chỉ nên có 7/8/9 vì chữ số đầu tiên và phần còn lại có thể là bất kỳ hoặc mẫu số điện thoại di động phải là 9887-654-321 hoặc +91-9963-258-741.Do đó, khi chúng tôi muốn định dạng cụ thể của số điện thoại trong HTML.
Loại đầu vào HTML 5 nào cho số điện thoại di động?Loại đầu vào Tel được sử dụng cho các trường đầu vào nên chứa số điện thoại. is used for input fields that should contain a telephone number.
Loại đầu vào cho số trong HTML là gì?Xác định một trường để nhập một số.Sử dụng các thuộc tính sau để chỉ định các hạn chế: Max - Chỉ định giá trị tối đa được phép.Min - Chỉ định giá trị tối thiểu được phép. defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed. min - specifies the minimum value allowed. |
