Thêm biểu tượng MXH sidebar WordPress

2 tháng ago, WordPress Plugin, Views

Giới Thiệu Về Biểu Tượng Mạng Xã Hội Trong WordPress

Trong thế giới kỹ thuật số ngày nay, việc hiện diện trên mạng xã hội là vô cùng quan trọng đối với bất kỳ trang web nào, đặc biệt là các trang web WordPress. Biểu tượng mạng xã hội (MXH) không chỉ giúp người dùng dễ dàng chia sẻ nội dung của bạn, mà còn là một phương tiện hiệu quả để tăng tương tác, xây dựng cộng đồng và quảng bá thương hiệu. Việc đặt các biểu tượng này ở vị trí dễ thấy, như sidebar, là một chiến lược thông minh để tối đa hóa hiệu quả.

Bài viết này sẽ hướng dẫn chi tiết cách thêm biểu tượng MXH vào sidebar của trang WordPress của bạn, bao gồm các phương pháp sử dụng plugin, code tùy chỉnh, và widget mặc định. Chúng ta sẽ khám phá những ưu điểm và nhược điểm của từng phương pháp, giúp bạn lựa chọn giải pháp phù hợp nhất với nhu cầu và trình độ kỹ thuật của mình.

Tại Sao Nên Thêm Biểu Tượng Mạng Xã Hội Vào Sidebar?

Việc tích hợp biểu tượng mạng xã hội vào sidebar của trang WordPress mang lại nhiều lợi ích thiết thực:

Tăng Tương Tác Người Dùng: Khuyến khích người dùng chia sẻ bài viết và nội dung của bạn lên các nền tảng mạng xã hội mà họ sử dụng.
Mở Rộng Phạm Vi Tiếp Cận: Giúp nội dung của bạn tiếp cận được nhiều người hơn thông qua việc chia sẻ trên mạng xã hội.
Xây Dựng Thương Hiệu: Tăng cường nhận diện thương hiệu và xây dựng cộng đồng trực tuyến xung quanh trang web của bạn.
Cải Thiện SEO: Các liên kết chia sẻ trên mạng xã hội có thể góp phần cải thiện thứ hạng trang web của bạn trên các công cụ tìm kiếm.

Sidebar là một vị trí lý tưởng để đặt các biểu tượng MXH vì nó thường hiển thị trên mọi trang hoặc bài viết, đảm bảo người dùng luôn dễ dàng tiếp cận và chia sẻ nội dung của bạn.

Các Phương Pháp Thêm Biểu Tượng Mạng Xã Hội Vào Sidebar WordPress

Có nhiều cách để thêm biểu tượng mạng xã hội vào sidebar của WordPress. Dưới đây là ba phương pháp phổ biến nhất:

Sử Dụng Plugin WordPress

Đây là phương pháp đơn giản và phổ biến nhất, đặc biệt phù hợp với những người không có nhiều kinh nghiệm về code. Có rất nhiều plugin WordPress miễn phí và trả phí được thiết kế để giúp bạn dễ dàng thêm và quản lý các biểu tượng MXH. Một số plugin phổ biến bao gồm:

Social Warfare: Một plugin mạnh mẽ với nhiều tính năng tùy chỉnh và khả năng theo dõi số lượng chia sẻ.
AddToAny Share Buttons: Plugin miễn phí, nhẹ và hỗ trợ nhiều nền tảng mạng xã hội.
Simple Social Icons: Một plugin đơn giản, dễ sử dụng, cho phép bạn thêm các biểu tượng MXH cơ bản với các tùy chọn màu sắc và kích thước.

Hướng dẫn sử dụng plugin:

Tìm và cài đặt plugin bạn chọn từ kho plugin WordPress.
Kích hoạt plugin.
Truy cập trang cài đặt của plugin (thường nằm trong mục “Cài đặt” hoặc “Social” trên bảng điều khiển WordPress).
Chọn các mạng xã hội bạn muốn hiển thị, nhập URL cho các trang mạng xã hội của bạn, và tùy chỉnh giao diện của các biểu tượng.
Kéo và thả widget của plugin vào sidebar của bạn trong mục “Giao diện” -> “Widgets”.
Lưu các thay đổi.

Sử Dụng Widget Mặc Định Của WordPress

WordPress đi kèm với một số widget mặc định có thể được sử dụng để thêm các biểu tượng MXH. Mặc dù phương pháp này có thể không cung cấp nhiều tùy chỉnh như sử dụng plugin, nhưng nó là một lựa chọn nhanh chóng và đơn giản nếu bạn chỉ cần thêm các biểu tượng cơ bản.

Hướng dẫn sử dụng widget mặc định:

Truy cập “Giao diện” -> “Widgets” trên bảng điều khiển WordPress.
Tìm widget “Văn bản” (Text) hoặc “HTML tùy chỉnh” (Custom HTML).
Kéo và thả widget vào sidebar của bạn.
Trong nội dung của widget, nhập mã HTML cho các biểu tượng MXH của bạn. Bạn có thể sử dụng các dịch vụ như Font Awesome hoặc các hình ảnh biểu tượng MXH mà bạn đã tải lên thư viện media của WordPress.
Thêm các liên kết đến trang mạng xã hội của bạn vào mã HTML.
Lưu các thay đổi.

Ví dụ về mã HTML:


<a href="https://www.facebook.com/yourpage" target="_blank"><img src="path/to/facebook-icon.png" alt="Facebook"></a>
<a href="https://twitter.com/yourtwitter" target="_blank"><img src="path/to/twitter-icon.png" alt="Twitter"></a>
<a href="https://www.instagram.com/yourinstagram" target="_blank"><img src="path/to/instagram-icon.png" alt="Instagram"></a>

Lưu ý: Thay thế “path/to/facebook-icon.png”, “path/to/twitter-icon.png”, và “path/to/instagram-icon.png” bằng đường dẫn thực tế đến các hình ảnh biểu tượng của bạn.

Sử Dụng Code Tùy Chỉnh

Phương pháp này đòi hỏi kiến thức về HTML, CSS và PHP. Nó cho phép bạn hoàn toàn kiểm soát giao diện và chức năng của các biểu tượng MXH. Bạn có thể thêm code tùy chỉnh vào file `functions.php` của theme hoặc tạo một plugin tùy chỉnh.

Hướng dẫn sử dụng code tùy chỉnh:

Xác định vị trí bạn muốn thêm các biểu tượng MXH vào sidebar. Thường thì bạn sẽ cần chỉnh sửa file `sidebar.php` của theme.
Thêm mã HTML cho các biểu tượng MXH của bạn vào file `sidebar.php`. Sử dụng các hình ảnh biểu tượng hoặc Font Awesome như đã đề cập ở trên.
Thêm CSS để tạo kiểu cho các biểu tượng MXH của bạn. Bạn có thể thêm CSS vào file `style.css` của theme hoặc sử dụng trình tùy biến CSS của WordPress.
(Tùy chọn) Tạo một widget tùy chỉnh để dễ dàng quản lý các biểu tượng MXH từ bảng điều khiển WordPress.

Ví dụ về code PHP để tạo một widget tùy chỉnh:


<?php
class Social_Icons_Widget extends WP_Widget {

  function __construct() {
    parent::__construct(
      'social_icons_widget',
      __( 'Social Icons', 'textdomain' ),
      array( 'description' => __( 'Displays social media icons.', 'textdomain' ), )
    );
  }

  public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance['title'] );

    echo $args['before_widget'];
    if ( ! empty( $title ) )
      echo $args['before_title'] . $title . $args['after_title'];

    // Output social icons here
    echo '<div class="social-icons">';
    echo '<a href="' . $instance['facebook'] . '" target="_blank"><img src="' . get_template_directory_uri() . '/images/facebook.png" alt="Facebook"></a>';
    echo '<a href="' . $instance['twitter'] . '" target="_blank"><img src="' . get_template_directory_uri() . '/images/twitter.png" alt="Twitter"></a>';
    echo '</div>';

    echo $args['after_widget'];
  }

  public function form( $instance ) {
    $title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Social Media', 'textdomain' );
    $facebook = ( ! empty( $instance['facebook'] ) ) ? $instance['facebook'] : '';
    $twitter = ( ! empty( $instance['twitter'] ) ) ? $instance['twitter'] : '';
    ?>
    <p>
      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'facebook' ); ?>"><?php _e( 'Facebook URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'facebook' ); ?>" name="<?php echo $this->get_field_name( 'facebook' ); ?>" type="text" value="<?php echo esc_attr( $facebook ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'twitter' ); ?>"><?php _e( 'Twitter URL:' ); ?></label>
      <input class="widefat" id="<?php echo $this->get_field_id( 'twitter' ); ?>" name="<?php echo $this->get_field_name( 'twitter' ); ?>" type="text" value="<?php echo esc_attr( $twitter ); ?>" />
    </p>
    <?php
  }

  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['facebook'] = ( ! empty( $new_instance['facebook'] ) ) ? strip_tags( $new_instance['facebook'] ) : '';
    $instance['twitter'] = ( ! empty( $new_instance['twitter'] ) ) ? strip_tags( $new_instance['twitter'] ) : '';
    return $instance;
  }
}

function register_social_icons_widget() {
    register_widget( 'Social_Icons_Widget' );
}
add_action( 'widgets_init', 'register_social_icons_widget' );
?>

Lưu ý: Code trên chỉ là một ví dụ cơ bản. Bạn cần điều chỉnh nó để phù hợp với nhu cầu của bạn. Hãy cẩn thận khi chỉnh sửa file `functions.php` của theme, vì một lỗi nhỏ có thể làm hỏng trang web của bạn.

Lời Khuyên Khi Chọn Biểu Tượng Mạng Xã Hội

Khi chọn biểu tượng mạng xã hội cho trang web của bạn, hãy cân nhắc các yếu tố sau:

Thiết Kế: Chọn biểu tượng có thiết kế phù hợp với phong cách và thương hiệu của trang web của bạn.
Kích Thước: Đảm bảo biểu tượng có kích thước phù hợp với sidebar và không làm rối bố cục trang web.
Màu Sắc: Chọn màu sắc phù hợp với bảng màu của trang web của bạn.
Khả Năng Tùy Chỉnh: Chọn phương pháp cho phép bạn tùy chỉnh giao diện và chức năng của các biểu tượng.

Kết Luận

Việc thêm biểu tượng mạng xã hội vào sidebar của trang WordPress là một cách hiệu quả để tăng tương tác người dùng, mở rộng phạm vi tiếp cận và xây dựng thương hiệu. Bài viết này đã trình bày ba phương pháp phổ biến để thực hiện việc này: sử dụng plugin, sử dụng widget mặc định, và sử dụng code tùy chỉnh. Hãy lựa chọn phương pháp phù hợp nhất với nhu cầu và trình độ kỹ thuật của bạn. Chúc bạn thành công!

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa