Trang chủ » WordPress » Tối ưu hóa tốc độ WordPress với các biểu tượng chia sẻ xã hội tùy chỉnh
Tối ưu hóa tốc độ WordPress với các biểu tượng chia sẻ xã hội tùy chỉnh
Nó có vẻ là một nhiệm vụ dễ dàng nhưng việc thêm các nút chia sẻ xã hội ứng xử tốt vào một trang web WordPress có thể là một rắc rối. Khi tôi nói cư xử tốt, tôi có nghĩa là đơn giản, nhẹ, thân thiện với tài nguyên, nhanh chóng - hầu hết các plugin chia sẻ xã hội ngoài kia không giống như vậy. Họ có xu hướng ăn hết tài nguyên như điên, và tại sao bất cứ ai cũng muốn tăng thời gian tải plugin lên 25 - 35% chỉ để hiển thị một số biểu tượng trên trang web của họ?
Tin tốt là bạn không nhất thiết cần một plugin để hoàn thành nhiệm vụ này. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn có thể dễ dàng thêm các nút chia sẻ xã hội tùy chỉnh đến cuối bài viết trên trang web WordPress của bạn với chỉ một vài dòng mã.
Bước 1: Tạo các nút chia sẻ xã hội
Chúng tôi sẽ sử dụng Trình tạo nút chia sẻ đơn giản, một công cụ web tiện dụng và dễ sử dụng để tạo các biểu tượng chia sẻ. Ưu điểm chính của ứng dụng này là các nút mà nó tạo ra chạy trên frontend, do đó họ sẽ không làm gánh nặng máy chủ của bạn và bạn cũng có thể giữ kín các hoạt động của người dùng của mình.
Để tạo các nút tùy chỉnh của bạn, hãy vào đây và nhấn Bắt đầu. Chọn 1 trong số 6 kiểu nút khác nhau. Nhấp chuột kế tiếp và đánh dấu vào mạng xã hội bạn muốn thêm vào trang web của bạn. Khi bạn kết thúc, bạn sẽ phải điền thông tin trang web của bạn.
Trên màn hình này (bên dưới), bạn sẽ tìm thấy hai tùy chọn: 'Không có JavaScript' và 'JavaScript'. Đánh dấu JavaScript, vì nó sẽ cho phép trình duyệt phát hiện URL một cách linh hoạt do đó khách truy cập của bạn sẽ có thể chia sẻ từng bài đăng riêng lẻ chứ không chỉ URL của trang chủ.
Cuối cùng hãy xem bản xem trước trực tiếp, tải xuống bộ biểu tượng đã chọn và lấy mã bạn đã tạo.
Bước 2: Tạo chủ đề con
Bây giờ bạn sẽ phải thêm các biểu tượng và mã được tạo vào trang web của bạn. Trước hết bạn sẽ cần tạo một chủ đề con.
Bạn có thể dễ dàng tạo một chủ đề con WP với sự trợ giúp của hướng dẫn của chúng tôi hoặc bạn có thể làm theo các bước của bài viết WP Codex này. Nếu bạn đã có, bạn có thể chuyển sang Bước 3.
Chủ đề con liên quan đến chủ đề bạn hiện đang sử dụng - theo cách hơi giống như một đứa trẻ liên quan đến cha mẹ của mình. Nó kế thừa mọi thứ (kiểu dáng và chức năng) từ chủ đề gốc nhưng bạn có thể thêm chức năng bổ sung với nó.
Trong trường hợp của chúng tôi, chức năng bổ sung sẽ là các nút chia sẻ xã hội tùy chỉnh.
Bước 3: Tạo một chức năng tùy chỉnh hiển thị các biểu tượng
Chúng tôi sẽ thêm một chức năng tùy chỉnh vào tệp tin.php của chủ đề con.
Với sự trợ giúp của chức năng này, bạn sẽ có thể thêm các biểu tượng xã hội bất cứ nơi nào bạn muốn trên trang web của mình bằng cách sử dụng móc hành động tùy chỉnh. Nếu chủ đề con của bạn chưa có tệp tin.php. Hãy tạo một tệp văn bản trống trong thư mục gốc của chủ đề con bạn với các hàm tên và thay đổi phần mở rộng của nó thành .php.
Chèn dòng mã sau vào tệp trống này:
Khi bạn Hàm.php tập tin được thiết lập thêm đoạn mã sau vào nó:
/ * * Thêm các biểu tượng chia sẻ xã hội tùy chỉnh * / function add_social_shared () ?>
Chia sẻ bài viết này
Cuối cùng xóa dòng bình luận HTML từ đoạn mã trên và thay thế nó bằng mã HTML bạn đã tạo ở Bước 1 với Trình tạo nút chia sẻ xã hội.
Bước 4: Sao chép tệp mẫu phù hợp vào thư mục chủ đề con
Theo mặc định, các bài đăng đơn lẻ được cai trị bởi một tệp mẫu có tên đơn.php. Đôi khi - đặc biệt là trong các chủ đề hiện đại hơn - cấu trúc của đơn.php phức tạp hơn, vì nó cũng tải các tệp mẫu bổ sung. Trong bước này, chúng ta cần tìm tệp mẫu thích hợp để có thể thêm các biểu tượng sau.
Để xác định đúng vị trí cho các nút xã hội, chúng ta cần tìm tệp mẫu chứa chức năng tải nội dung của các bài viết đơn.
Hãy mở trình chỉnh sửa chủ đề trong bảng điều khiển quản trị viên WordPress bên dưới Ngoại hình> Biên tập. Ở góc trên bên phải, bạn tìm thấy một danh sách thả xuống nơi bạn có thể chọn chủ đề chính. Bên dưới danh sách thả xuống, bạn có thể thấy tất cả các tệp mẫu mà chủ đề gốc của bạn chứa. Cuộn xuống cho đến khi bạn tìm thấy Mẫu bài duy nhất (được gọi là single.php) và mở nó.
Nếu chủ đề chính sử dụng get_template_part () Chức năng WP trong đơn.php tệp có nghĩa là nó sử dụng một tệp mẫu bổ sung để tải nội dung của một bài đăng.
Đầu tiên bạn phải tìm ra cái nào là cái này Tên của tệp mẫu bổ sung là tham số đầu tiên của get_template_part () chức năng.
Tham số đầu tiên là 'Nội dung' có nghĩa là chúng tôi tìm tệp mẫu được gọi là nội dung.php. Bạn cần sao chép tệp này từ thư mục gốc của chủ đề gốc sang thư mục gốc của chủ đề con để sửa đổi nó.
Bước 5: Thêm Hook hành động vào đúng tệp mẫu
Chúng tôi đã tạo ra một chức năng gọi là add_social_shared () trong Bước 3 và chúng tôi đã gắn nó vào một móc hành động tùy chỉnh được gọi là custom_social_share. Bây giờ chúng ta sẽ phải thêm hook này vào vị trí mà chúng ta muốn hàm được thực thi.
Đây là đoạn mã bạn sẽ cần chèn vào đúng chỗ:
Tiếp theo, hãy tìm đúng nơi.
Mở tệp mẫu bạn đã thêm vào chủ đề con của mình trong Bước 4 trong trình chỉnh sửa mã hoặc bên trong trình chỉnh sửa chủ đề của bảng điều khiển quản trị viên WordPress và tìm kiếm Nội dung() chức năng.
Kiểm tra nếu có wp_link_pages () hoạt động ngay sau Nội dung() chức năng. Nếu có, đoạn mã ở trên xuất hiện sau đó; nếu không thì nó theo Nội dung() chức năng.
Bước 6: Thêm mã CSS vào chủ đề con
Mở style.css tệp của chủ đề con bạn trong trình chỉnh sửa mã của bạn hoặc trong trình chỉnh sửa chủ đề của bảng điều khiển quản trị viên WordPress, sao chép mã CSS mà bạn đã tạo ở Bước 1, dán nó vào cuối tệp và lưu nó.
Chúng tôi sẽ thêm hai dòng bổ sung vào tệp CSS để làm cho các biểu tượng chia sẻ xã hội hiển thị đúng trong mỗi chủ đề. Sao chép và dán đoạn mã sau vào cuối style.css tập tin:
ul.share-nút li a viền: 0; ul.share-nút li img display: inline;
Bước 7: Tải biểu tượng phương tiện truyền thông xã hội lên máy chủ
Tải lên biểu tượng phương tiện truyền thông xã hội đã chọn mà bạn đã tải xuống ở Bước 1 vào thư mục chủ đề con. Kết nối máy chủ của bạn qua FTP, tạo một thư mục mới gọi là hình ảnh bên trong thư mục gốc của thư mục chủ đề con của bạn (/ wp-content / Themes / your-child-theme / hình ảnh) và tải lên biểu tượng được đặt ở đây.
Chúng tôi đặt tên cho thư mục hình ảnh bởi vì đây là tên mặc định của thư mục hình ảnh mà Trình tạo nút chia sẻ đơn giản sử dụng.
Bước 8: Kiểm tra đường dẫn của tệp biểu tượng
Sau khi bạn tải các biểu tượng phương tiện truyền thông xã hội lên máy chủ của mình ở Bước 7, điều quan trọng là kiểm tra đường dẫn của các tệp biểu tượng để đảm bảo chúng sẽ được tải.
Đường dẫn của tệp hình ảnh đưa ra gợi ý cho trình duyệt về vị trí của nó trên máy chủ. Hãy kiểm tra đường dẫn hình ảnh bên trong Hàm.php tập tin của chủ đề con. Mở tệp trong trình chỉnh sửa mã của bạn và điều hướng đến add_social_shared () chức năng nơi bạn cần kiểm tra mã HTML bạn đã tạo bằng Trình tạo nút chia sẻ đơn giản.
Trong mã HTML, bạn sẽ tìm thấy một gắn thẻ src thuộc tính cho mỗi biểu tượng. Kiểm tra nếu mỗi src các thuộc tính trỏ đến vị trí chính xác nơi bộ biểu tượng của bạn được tải lên trong Bước 7.
Trình tạo nút chia sẻ đơn giản thêm đường dẫn tương đối vào các tập tin. Đôi khi trình duyệt không thể hiển thị hình ảnh nếu bạn sử dụng đường dẫn tương đối, vì vậy đó là một ý tưởng tốt để sử dụng đường dẫn tuyệt đối thay thế. Bằng cách này, mỗi trình duyệt có khả năng được khách truy cập của bạn sử dụng có thể chắc chắn về vị trí của các tệp biểu tượng được yêu cầu.
Đường dẫn hình ảnh tương đối được thêm bởi trình tạo trông giống như thế này:
Hãy thay đổi src thuộc tính của mỗi biểu tượng cho một đường dẫn tuyệt đối có nghĩa là nó sẽ bao gồm URL đầy đủ của tệp.
Đường dẫn URL ở trên sẽ trông như thế này:
Bước 9: Tải lên các tệp đã sửa đổi và kích hoạt chủ đề con
Kết nối máy chủ của bạn qua FTP và tải lên tất cả các tệp chúng tôi đã tạo trong hướng dẫn này mà bạn chưa tải lên: Hàm.php, các style.css, và tệp mẫu thích hợp (trong hướng dẫn này hoặc đơn.php hoặc là nội dung.php).
Cuối cùng kích hoạt chủ đề con trong bảng điều khiển quản trị viên WP bên dưới Ngoại hình> Chủ đề thực đơn.
Bây giờ bạn đã sẵn sàng với các biểu tượng chia sẻ xã hội siêu nhẹ, tiết kiệm tài nguyên, tùy chỉnh của bạn. Bạn có thể lên mạng và kiểm tra trực tiếp trên trang của bạn.
Phần kết luận
Trong hướng dẫn này, tôi đã chỉ cho bạn cách thêm các nút chia sẻ xã hội tùy chỉnh vào cuối các bài đăng đơn lẻ. Bạn có thể thêm các biểu tượng chia sẻ vào bất kỳ vị trí nào khác trên trang web của mình với sự trợ giúp của hook hành động mà chúng tôi đã tạo.
Chỉ cần thêm mã chúng tôi đã sử dụng trong Bước 5 vào vị trí bạn muốn hiển thị các nút:
Bạn cũng sẽ phải tìm đúng tệp mẫu nếu bạn muốn đặt các biểu tượng ở nơi khác. Các trang đơn được cai trị bởi một tệp mẫu có tên trang.php, trong khi các tệp đính kèm phương tiện như hình ảnh được tải bởi file đính kèm.php.
Nếu bạn muốn hiển thị các nút chia sẻ xã hội ở một vị trí khác trên trang web của mình, bạn có thể sử dụng Phân cấp Mẫu WordPress để tìm thấy nó.
