Làm cách nào để tạo nút chia sẻ trên mạng xã hội trong GeneratorPress?

Trong hướng dẫn này, chúng ta sẽ xem xét Cách tạo nút chia sẻ trên mạng xã hội trong GeneratorPress?

Điều này chắc chắn sẽ giúp bạn tăng cường quảng cáo đa kênh cho bài đăng trên blog của mình. Điều đó sẽ làm tăng sự hiện diện web của bạn.

Tôi sẽ chỉ cho bạn cách tạo các nút chia sẻ xã hội cố định nổi ở mặt trước của các mục blog của bạn. Có nghĩa là chúng sẽ luôn hiển thị với khán giả của bạn.

Chúng ta có thể đạt được điều này thông qua một plugin, nhưng điều tốt nhất là xây dựng chúng theo cách thủ công. Bằng cách đó, bạn biết mình đang tránh thêm JavaScript (làm giảm hiệu suất trang web) trên trang web của mình.

Bài học này yêu cầu bạn phải có bản trả phí của GeneratorPress vì chúng tôi sẽ sử dụng mô-đun Elements.

Tạo nút chia sẻ trên mạng xã hội trong GeneratorPress không cần plugin

Việc tạo các nút chia sẻ trên mạng xã hội trong chủ đề GeneratorPress không cần plugin đòi hỏi bạn phải biết về các biểu tượng SVG.

SVG là đồ họa vectơ có thể mở rộng. Chúng là những hình ảnh tiêu chuẩn mở (chủ yếu được sử dụng làm biểu tượng) được phát triển bởi W3C (World Wide Web Consortium) (World Wide Web Consortium).

Lợi ích của việc sử dụng SVG

• Chúng có kích thước tệp nhỏ không bao giờ ảnh hưởng đến tốc độ trang web.
• Bạn có thể dễ dàng thêm siêu liên kết vào biểu tượng SVG.
• Chúng có thể dễ dàng sửa đổi với bất kỳ phần mềm đồ họa vector nào.
• Các biểu tượng SVG có độ phân giải độc lập, khiến chúng trở nên tuyệt vời khi xem trên máy tính để bàn, máy tính bảng và thiết bị di động.
• Hình ảnh SVG thân thiện với SEO hơn so với hình ảnh thông thường.

Chúng tôi sẽ sử dụng SVG từ Iconmonstr. Có nghĩa là, không chỉ biểu tượng mà còn cả biểu tượng có mã XML của nó.

Bước 1: Thêm mã nút chia sẻ trên mạng xã hội để tạo móc phần tử GeneratorPress

Để thực hiện điều này, trước tiên bạn cần tạo Phần tử mới trong GeneratorPress. Chuyển đến Bảng điều khiển WordPress của bạn, bên dưới Giao diện, Nhấp vào Thành phần. Thao tác này sẽ mở trang Thành phần, nhấp vào Thêm thành phần mới.

Ngay sau khi bạn nhấp vào Thêm phần tử mới, GeneratePress sẽ hiển thị một cửa sổ hộp thoại. Bấm vào Móc. Điều đó chính xác, bạn cần một hook tùy chỉnh GeneratorPress cho hành động này.

Đặt tên cho Phần tử mới và thêm mã.

Chọn hook làm tiêu đề tạo sau, thực thi PHP và đặt quy tắc hiển thị thành Bài viết – Tất cả bài viết.

Vì chúng tôi cần các biểu tượng chia sẻ trên mạng xã hội nổi trên chế độ xem màn hình của mình. Tốt nhất nên chọn Tạo sau móc tiêu đề.

Lý do chúng tôi chọn cài đặt hiển thị là Tất cả bài đăng là vì bạn muốn người dùng chia sẻ nội dung của bạn trên trang xã hội của họ.

Đừng quên nhấn nút Xuất bản.

Sao chép mã sau đây để triển khai tương tự trên trang web của bạn.

Bước 2: Thực hiện tạo kiểu CSS cho các biểu tượng chia sẻ trên mạng xã hội

Để làm như vậy, hãy truy cập bảng điều khiển WordPress, trong Giao diện, nhấp vào Tùy chỉnh.

Thao tác này sẽ mở tùy biến chủ đề GeneratorPress. Ở đây hãy đi xuống hết và nhấp vào CSS bổ sung.

Dán mã CSS sau để có kiểu dáng tương đương. Bạn được phép điều chỉnh CSS theo yêu cầu của mình.

Bước 3: Kết quả cuối cùng của Nút chia sẻ trên mạng xã hội trong GeneratorPress

Cuối cùng, đây là cách chia sẻ xã hội các biểu tượng sẽ trông giống như trên trang web của bạn. Hãy nhớ rằng chúng tôi đã làm cho chúng nổi từ trên xuống ở 70% khung nhìn màn hình.

Lợi ích của các nút chia sẻ trên mạng xã hội trong GeneratorPress (Không có Plugin) (Không có Plugin)

Việc sử dụng SVG từ Iconmonstr làm cho biểu tượng của bạn rất nhẹ
Không có bất kỳ loại mã JavaScript nào liên quan.

Bằng cách sử dụng chiến lược này, bạn không cài đặt bất kỳ plugin của bên thứ 3 nào
Nó có khả năng đáp ứng.

Tất cả các nút sẽ hoạt động cực kỳ nhanh chóng cho mục đích chia sẻ.

Kết luận : Làm cách nào để tạo nút chia sẻ trên mạng xã hội trong GeneratorPress?

Bây giờ bạn đã khám phá ra cách tạo các nút chia sẻ trên mạng xã hội trong GeneratorPress bằng cách sử dụng mã và plugin.

Sử dụng tùy chọn dễ dàng cho bạn và đáp ứng yêu cầu của bạn. Vui lòng chỉnh sửa mã PHP và/hoặc CSS từ bài viết.