Hướng dẫn chèn thanh liên hệ tự co giãn cho Website tuyệt đẹp

Chào bạn, nếu bạn đang tìm một mẫu liên hệ nhanh để chèn cho Website thì trong bài này, Dipigo xin gửi đến các bạn hướng dẫn cách thêm thanh có nút liên hệ nhanh cho Website WordPress để các bạn làm đẹp Website hơn.

Hướng dẫn tạo nút liên hệ nhanh cho Website WordPress

Copy đoạn code dưới đây và dán vào giữa 2 thẻ đóng và của file Footer.php là được.
				
					<div class="contact-nav">
        <ul>
    <li><a rel="nofollow"  href="https://dipigo.com/" class="chat_animation">
            <i class="ticon-chat-sms" aria-hidden="true" title="cart"></i>
                Mua Hàng</a>
            </li>
            <li><a href="http://zalo.me/0334162788" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Zalo</a></li>
                        <li class="phone-mobile">
                            <a href="tel:0343758125" rel="nofollow" class="button">
                                <span class="phone_animation animation-shadow">
                                    <i class="icon-phone-w" aria-hidden="true"></i>
                                </span>
                                <span class="btn_phone_txt">Gọi điện</span>
                            </a>
                        </li>
            <li><a href="https://www.youtube.com/channel/UCd5MLY1zDMa0bko_gXUNW0g?sub_confirmation=1" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Youtube</a></li>
            <li><a href="https://www.facebook.com/messages/t/dipigo/" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
            <li class="to-top-pc">
                <a href="tel:0343758125" rel="nofollow">
                    <i class="ticon-angle-up" aria-hidden="true" title="Gọi ngay"></i>Gọi ngay
                </a>
            </li>
        </ul>
    </div>

<style>
.phone-mobile {display: none;}
.contact-nav {
    position: fixed;
    right: 13px;
    background: #fff;
    border-radius: 5px;
    width: auto;
    z-index: 150;
    bottom: 80px;
    padding: 10px 0;
    border: 1px solid #f2f2f2;
    box-shadow: 2px 2px 0.2em;
}
.contact-nav ul {list-style: none;padding: 0;margin: 0;}
.contact-nav ul li {list-style: none!important;}
.contact-nav ul>li a {
    border:none;
    padding: 3px;
    display: block;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    line-height: 15px;
    color: #515151;
    font-weight: 700;
    max-width: 72.19px;
    max-height: 54px;
    text-decoration: none;
}
.contact-nav ul>li .chat_animation{display:none}
.contact-nav ul>li a i.ticon-heart {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/youtube-200.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}
.contact-nav ul>li a i.ticon-zalo-circle2 {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/zalo.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav li .button {
    background: transparent;
}.contact-nav ul>li a i.ticon-angle-up {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/Call.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav ul>li a i {
    width: 33px;
    height: 33px;
    display: block;
    margin: auto;
}.contact-nav ul li .button .btn_phone_txt {
    position: relative; top:35px;
    font-size: 10px;
    font-weight: bold;
    text-transform: none;
}
.contact-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}.contact-nav ul>li a.chat_animation svg {
    margin: -13px 0 -20px;
}
.contact-nav ul>li a i.ticon-messenger {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/Message.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}
.contact-nav ul>li a i.ticon-chat-sms {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/cart-200.png) no-repeat;
    background-size: contain;
    width: 38px;
    height: 36px;
    display: block;
 border: 1px solid;
border-radius: 50%;

}
.contact-nav ul>li a i.icon-phone-w {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/Call.png) no-repeat;
       background-size: contain;
    width: 38px;
    height: 38px;
    display: block;
}
.contact-nav ul li .button .btn_phone_txt {
    position: relative;
}
@media only screen and (max-width: 600px){
.contact-nav li .chat_animation{display:block !Important}
 
.contact-nav li .button .phone_animation {box-shadow: none;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%,0);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #6cb917;
    line-height: 15px;
    border: 2px solid white;
}
.contact-nav ul>li a{padding:0; margin:0 auto}
.contact-nav {
    background: white;
    width: 100%; border-radius:0;
    color: #fff;
    height: 60px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    padding: 5px;
    margin: 0;
    box-shadow: 0 4px 10px 0 #000;
}
.contact-nav li {
    float: right;
    width: 20%;
    list-style: none;
    height: 50px;
}
.phone-mobile{display:block !important}}
</style>
				
			
Chúc bạn thành công!

Hướng Dẫn Thêm Chat Messenger Vào Website

Khi bạn tìm đến bài này tôi sẽ không giới thiệu thêm về tính năng và công dụng của việc chèn chat facebook vào website. Mà tôi sẽ đi vào hướng dẫn luôn nhé!

1. Lấy Code Chèn Chat Message

Bước 1: Truy cập vào link fanpage của bạn

Bước 2: Vào “cài đặt” chọn “Nhắn Tin” chọn “Thêm message và trang website” bắt đầu

Bắt Đầu Thiết Lập
Bắt Đầu Thiết Lập

Bước 3: Chọn thiết lập

Thiết Lập Plugin
Thiết Lập Plugin

Bước 4: Chọn Ngôn Ngữ

Chọn Ngôn Ngữ Cho Plugin
Chọn Ngôn Ngữ Cho Plugin

Bước 5: Thêm trang Web

Thêm Website Vào Plugin
Thêm Website Vào Plugin

Bước 6: Sao chép mã

Copy Code Chat Message
Copy Code Chat Message

Bước 7: Dán mã (Dán mã vào plugin ở mục 2)

Bước 8: Nhập và thay thế các thông tin mặc định bằng thông tin bạn muốn. Chọn Đăng

Hoàn Tất Cài Đặt Plugin Chat
Hoàn Tất Cài Đặt Plugin Chat

2. Cài Đặt Plugin Và Chèn Code

Ở đây mình hướng dẫn 1 cách mà bất kỳ website nào cũng có thể làm được là cài plugin

Bước 1: Truy cập admin website

Bước 2: Vào Plugin chọn “Cài mới”

Cài Đặt Plugin
Cài Đặt Plugin

Gõ tên plugin: “Insert headers and footers”

Tìm Kiếm Plugin Insert Headers And Footers
Tìm Kiếm Plugin Insert Headers And Footers

Bước 3: Chọn Cài Đặt

Cài Đặt Plugin Insert Headers And Footers
Cài Đặt Plugin Insert Headers And Footers

Bước 4: Kích Hoạt chờ 1 lúc sau khi hệ thống cài đặt sẽ có nút “Kích hoạt”

Bước 5: Vào “Cài đặt” chọn “Insert Headers and Footers”

Cách Chọn Plugin
Cách Chọn Plugin

Bước 6: Dán mã đã copy ở trên vào ô “Script ở Footer” chọn “Lưu”

Chèn Code Vào Plugin
Chèn Code Vào Plugin

Bước 7: Mở website lên để xem thành quả nhé!

Chúc bạn thành công!

Thay Đổi Tên Website – Slogan – Favicon Website WordPress

Tên website, slogan hay favicon là các thành phần không thể thiếu của một website. Nếu trong quá trình sử dụng website bạn muốn thay đổi thì bài viết này mình hướng dẫn các bạn cách thực hiện.

1. Thay Đổi Tên Và Slogan Của Website WordPress Bất Kỳ

Bước 1: Để thay bạn vào: Trang quản trị >> Cài Đặt >> Tổng Quan.

Bước 2: Tại 2 ô đầu tiên bạn là “Tên website” và “Khẩu hiệu” bạn nhấp vào và thay đổi.

Bước 3: kéo xuống dưới cùng chọn “Lưu Thay Đổi“.

2. Thay Đổi Tên Và Slogan Của Website Do Dipigo Thiết Kế

Nếu chỉ thay đổi tên hay slogan bạn có thể dùng cách trên để thay. Nhưng bạn muốn thay đổi favicon thì dùng cách này nhé! Với cách này bạn cũng có thể thay thế cả tên, slogan hay favicon của website do Dipigo thiết kế.

Bước 1: Trang quản trị >> Flatsome >> Theme Option >> Header >> Logo & Site Identity.

Bước 2: Sau khi vào giao diện này bạn sẽ thấy các vị trí cần chỉnh

    • Tên website: nằm trên cùng
    • Khẩu hiệu: là slogan nằm dưới tên website
    • Favicon: chính là biểu tưởng nằm trên thanh tab của google hoặc các trình duyệt khác. nằm ở dưới cùng

Bước 3: Cuối cùng, khi đã thay đổi phù hợp bạn chọn “Đăng” để cập nhật thay đổi nhé!

Hướng Dẫn Cài Đặt Plugin Cho Website WordPress

Đây là cách cài đặt plugin WordPress đơn giản nhất. Bạn chỉ có thể cài đặt plugin miễn phí có sẵn trong thư viện của nền tảng này.

1. Cài Đặt Plugin Miễn Phí Có Sẵn Trên Nền Tảng

Để cài đặt plugin bạn cần thực hiện những bước sau:

Bước 1: Đăng nhập vào trang “Quản trị” của website. Sau đó chọn menu Plugin >> Thêm Mới.

Bước 2: Gõ tên plugin cần tìm vào ô tìm kiếm rồi nhấn phím enter.


Bước 3: Lúc này, hệ thống sẽ trả về một loạt danh sách các plugin liên quan. Chọn plugin bạn muốn và nhấn “Install Now” để cài đặt. Sau đó, WordPress sẽ tải plugin về và cài đặt tự động.

Bước 4: Sau khi hoàn thành giai đoạn cài đặt, bạn sẽ nhận được một thông báo yêu cầu kích hoạt plugin (tham khảo hình bên dưới).


Hãy click vào “Activate Plugin” để kích hoạt plugin.

Như vậy, plugin đã được cài đặt hoàn tất và hoạt động bình thường trên WordPress.

2. Cài đặt plugin bằng cách upload

Ngoài cách cài đặt plugin WordPress trực tiếp từ kho plugin của WordPress, bạn cũng có thể upload plugin lên từ máy tính cá nhân. Cách này thường được dùng để cài những plugin trả phí.

Cách làm như sau:

Bước 1: Download plugin muốn cài đặt với định dạng file là .zip.

Bước 2: Đăng nhập vào trang “Trang quản trị” của WordPress. Tiếp đến chọn Plugin >> Thêm mới.

Bước 3: Nhấn vào nút Upload Plugin.

Hệ thống sẽ hiển thị một mục thông báo để bạn upload file.

Ở mục này, Nhấn vào nút “Choose File” để tải plugin từ máy tính lên WordPress. Sau đó nhấn “Install Now” để cài đặt.

Bước 4: Sau khi cài đặt xong, WordPress sẽ hiển thị một thông báo cho người dùng trên màn hình. Bấm “Activate Plugin” để kích hoạt plugin.

Tạo Mới Menu Và Chỉnh Sửa Menu Cho Website WordPress

Thao tác chung: Sau khi bạn đăng nhập và trang quản trị website. Vào giao diện ở thanh menu bên trái >> chọn menu

1. Tạo menu mới trong WordPress

Bước 1: Chọn tạo mới menu

Bước 2: Nhập tên và chọn trình tạo menu

Bước 3: Chọn các thành phần tương ứng vào menu ( ở đây chúng ta có thể thêm trang, bài viết chuyên mục, liên kết tự tạo,…). Bằng mở thành phần cân thêm chọn nội dung cần thêm sau đó chọn “Thêm Vào Menu

Bước 4: Sau khi đã lấy ra các thành phần cần thiết chọn “Lưu menu” để hoàn tất

2. Chỉnh Sửa Menu

Để chỉnh sửa menu bạn thực hiên như sau:

Bước 1: Chọn thanh sổ xuống chọn menu cần xoá sau đó nhấp “Chọn” để mở menu cần xoá

Bước 2: Thêm thành phần cho menu (nếu không thêm chuyển qua bước 3). bạn chỉ cần chọn các thành phần ở bên trái và chọn thêm vào menu để thêm.

Bước 3: Xoá thành phần menu

Kéo xuống dưới có nút “Xoá bỏ” chọn để xoá menu

Bước 4: Thay đổi vị trí các thành phần: bạn nhấp và giữ chuột kéo thả ở vị trí mình mong muốn

Bước 5: Thay đổi tên của thành phần

  • Nhấp vào ô cần thay đổi tên

  • Thay đổi tên ở ô trên cùng “Nhãn điều hướng”

3. Chọn Vị Trí Cho Menu

Kéo xuống dưới cùng tại vị trí “Thiết lập menu” bạn chọn vị trí muốn menu xuất hiện sau đó chọn lưu để hoàn tất

4. Xoá Menu

Để xoá menu khỏi website bạn thực hiện như sau:

Bước 1: Chọn thanh sổ xuống chọn menu cần xoá sau đó nhấp “Chọn” để mở menu cần xoá

Bước 2: Kéo xuống dưới cùng chọn “Xoá menu

Hướng Dẫn Cài Đặt Công Cụ Đo Lường Google Search Console

Các công cụ đo lường đóng vai trò vô cùng quan trọng đối với một website. Bài viết này mình hướng dẫn các bạn các cài đặt các công cụ đo lường nhé!

Bước 1: Truy cập link: https://search.google.com/search-console/

Bước 2: Nhập tên miền của bạn theo định dạng phù hợp chỉ cần nhập 1 trong 2 bên sau đó chọn Tiếp Tục. Mình chọn nhập cái thứ 2 nhé! (Tiền Tố URL)

Bước 3: Giao diện mới mở ra kéo xuống dưới tìm đến Thẻ HTML chọn nó

Bước 4: Tại đây bạn chọn Sao Chép

Bước 5: Quay lại trang quản trị website: Chọn Flatsome >> Advanced >> Global Setting

Bước 6: Dán mã vừa copy vào ô tương ứng.

Ví dụ mã google search console yêu cầu dán trong thẻ header. Vị trí các mã sẽ được nhắc đến tại vị trí bạn lấy mã

Bước 7: Quay lại giao diện google search console chọn xác minh để hoàn thành.

Nếu bạn không biết cách sử dụng google seaarch console như thế nào có thể truy cập link.

Hướng Dẫn Cách Tạo Post (Bài Viết) Mới Cho Website WordPress

Hướng Dẫn Viết Bài WordPress

Bài viết trong website sẽ giúp bạn có thể thu hút một lượng khách hàng đến với website với các nội dung chia sẽ kiến thức, kinh nghiệm,… liên quan đến ngành.

Để đăng bài viết bạn truy cập Trang quản trị của WordPress >> Bài viết >> Viết bài mới.

Tạo Bài Viết
Tạo Bài Viết

Một giao diện mới mở ra bao gồm các khu nhập tiêu đề, nội dung, khung soạn thảo, chọn chuyên mục, nhập tag,…

Giao Diện Bài Viết
Giao Diện Bài Viết

Bây giờ bạn nhập tiêu đề và nội dung cho bài viết tuỳ thích. Bạn có thể dùng các chức năng tại khung soạn thảo.

Tiếp đến bạn chọn chuyên mục để chứa bài viết ở ô chuyên mục bên phải. Nếu chưa có chuyên mục bạn có thể chọn Thêm Chuyên Mục bên dưới nhập tên cho chuyên mục và chọn Thêm Chuyên Mục.

Thêm Chuyên Mục
Thêm Chuyên Mục

Kế đến là nhập Thẻ cho bài viết

Thêm Thẻ
Thêm Thẻ

Cuối cùng là chọn ảnh đại diện cho bài viết đó.

Thêm Ảnh Đại Diện
Thêm Ảnh Đại Diện

Sau khi đã hoàn tất mọi thứ bạn chọn Đăng để cập nhật bài viết ra bên ngoài website.

Đăng Bài Website
Đăng Bài Website

Cách Tạo Và Quản Lý Thành Viên Trong Website WordPress

Hầu hết chủ sở hữu trang web không biết rằng họ có thể cung cấp quyền truy cập hạn chế vào Bảng điều khiển theo tài khoản cụ thể. Hành động này đảm bảo rằng chỉ một nhóm người cụ thể có quyền truy cập tới các tùy chọn và khu vực bảng quản trị cụ thể. Vai trò tải khoản trên WordPress tùy chỉnh cũng giúp giảm thiểu khả năng xảy ra tai nạn có thể làm sập toàn bộ trang web.

1. Thêm Thành Viên Mới

Để tạo thêm người dùng, bạn truy cập vào Trang quản trị >> Thành viên >> Thêm mới, ở đây bạn sẽ cần khai báo các thông tin cho người dùng mới. Các thông tin có chữ required là bắt buộc khai báo (không được bỏ trống).

Thêm Thành Viên Mới
Thêm Thành Viên Mới

Khi tạo user, bạn có thể phân quyền cho từng user đó tại Role:

    • Administrator (Quản trị viên): Nhóm người dùng có quyền sử dụng toàn bộ các tính năng có trong một website WordPress, không bao gồm các website khác trong mạng website nội bộ.
    • Editor (Biên tập viên): Nhóm này có quyền đăng bài viết lên website (publish) và quản lý các post khác của những người dùng khác.
    • Author (Tác giả): Nhóm này sẽ có quyền đăng bài lên website và quản lý các post của họ.
    • Contributor (Người đóng góp): Nhóm này sẽ có quyền viết bài mới nhưng không được phép đăng lên mà chỉ có thể gửi để xét duyệt (Save as Review) và quản lý post của họ.
    • Subscriber (Người đăng ký): Người dùng trong nhóm này chỉ có thể quản lý thông tin cá nhân của họ.

2. Thay Đổi Email Và Mật Khẩu Của Tài Khoản

Bạn có thể thay đổi Email, mật khẩu quản trị WordPress trong Your Profile (Hồ Sơ).

Thay Đổi Thông Tin Thành Viên
Thay Đổi Thông Tin Thành Viên

3. Xoá Thành Viên

Để xóa User người dùng, bạn truy cập vào Trang quản trị >> Thành viên >> Thêm mới, tại đây bạn sẽ thấy danh sách các User.

Danh Sách Thành Viên
Danh Sách Thành Viên

Tiếp theo, di chuyển con trỏ chuột lên tới Tên User cần xóa và bấm chọn Delete, website sẽ chuyển hướng sang trang xác nhận thao tác → nhấn Confirm Deletion để hoàn tất xóa User.

Xoá Thành Viên
Xoá Thành Viên

Lưu ý: Có 2 tùy chọn trước khi xác nhận Xóa User mà bạn cần phải kiểm tra.

    • Delete all content: Xóa tất cả các nội dung từ User này đăng tải trên website.
    • Attribute all content to: Chuyển tồn bộ nội dung được đăng tải của User bị xóa tới User đang tồn tại (Chúng tôi khuyến khích các bạn lựa chọn phương án này để bảo tồn dữ liệu website).

Đăng Nhập Vào Trang Quản Trị – Sơ Lược Về Giao Diện

Đăng Nhập Trang Quản Trị Website

Đây là video đầu tiên trong chuỗi hướng dẫn sử dụng website của Dipigo. Trước tiên Dipigo cám ơn quý khách hàng đã tin tưởng và sử dụng dịch vụ thiết kế website của chúng tôi. Video này chúng tôi sẽ hướng dẫn các bạn các đăng nhập vào trang quản trị của website và sơ lược về giao diện và chức năng tại đây.

1. Đăng Nhập Vào Website

Để đăng nhập vào trang quản trị thì bạn chỉ cần thêm tiền tố “/wp-admin” và sau tên website của mình. Ví dụ: https://dipigo.com/wp-admin/ nhấn “Enter” để vào giao diện đăng nhập.

Tại đây bạn nhập “Tài Khoản – Mật Khẩu” hoặc “Email – Mật Khẩu” và chọn “Đăng Nhập” để vào.

2. Tổng Quan Về Giao Diện

Giao diện trang quản trị có 3 phần:

Giao Diện Website WordPress
Giao Diện Website WordPress

 

    • Phần 1: Thanh công cụ thao tác nhanh thường dùng (1)
    • Phần 2: Menu quản lý nhanh WordPress chi tiết (2)
    • Phần 3: Khung hiển thị thông tin, nội dung thao tác,… (3)

3. Chức Năng Cơ Bản

Các chức năng cơ bản chúng ta sẽ thao tác tại phần 2 của giao diện quản trị như sau:

    • Tạo và quản lý bài viết
    • Tạo chuyên mục chứa bài viết
    • Quản lý thư viện bao gồm ảnh, video, file,..
    • Tạo và quản lý các trang của website
    • Quản lý bình luận (phản hồi)
    • Quản lý giao diện ( Theme, Menu, Cài đặt, plugin mặc định,…)
    • Quản lý thành viên
    • Cài đặt cho website