Thêm Instagram Feed vào chân trang trong genesis

Instagram là mạng xã hội chuyên về chia sẻ hình ảnh lớn nhất thế giới, với khoảng 400 triệu người dùng hàng tháng trên toàn thế giới, riêng tại việt nam 70% giới trẻ từ 15 đến 25 tuổi thường xuyên lướt Instagram hàng ngày trên di động, giúp mạng xã hội này đứng thứ 2 về độ phổ biến tại việt nam, chỉ sau facebook vì vậy nếu bạn biết quảng bá thương hiệu cá nhân của mình tốt đây sẽ là tiềm năng lớn giúp bạn phát triển doanh nghiệp của mình, và hướng dẫn này tôi sẽ hướng dẫn bạn cách thêm nguồn cấp dữ liệu Instagram vào chân trang, có vẻ như đây là một tính năng rất phổ biến hiện nay, vì vậy tôi nghĩ rằng bạn sẽ thích nó.

Hướng dẫn thêm Instagram Feed vào footer genesis framework

Sau khi thực hiện theo các bước hướng dẫn này, nó sẽ hoạt động một cách tự động và hiển thị một loạt ảnh đẹp ở cuối trang web của bạn, có một chút hấp dẫn và nó sẽ tốt cho các blogger, nhà bán lẻ và bất kỳ ai khác đang hy vọng phát triển thương hiệu của họ trên Instagram.

Dưới đây hình ảnh của việc thêm nguồn cung cấp dữ liệu vào Instagram.

Tôi nghĩ nó sẽ rất hữu ích nếu bạn làm thế, việc này sẽ thực hiện bằng cách chèn các đoạn mã chức năng vào ngay chủ đề của bạn. Và dưới đây là các bước tôi đã sử dụng để thêm nguồn cấp dữ liệu Instagram vào footer trang web của tôi.

1. Đăng ký khu vực tiện ích “Instagram” trong tệp tin chức năng

<?php
// Do NOT include the opening php tag.

// Register Instagram widget area.
genesis_register_sidebar( array(
 'id' => 'instagram',
 'name' => __( 'Instagram', 'theme-name' ),
 'description' => __( 'This is the instagram widget area.', 'theme-name' ),
) );

2. Kích hoạt tiện ích “Instagram” trước chân trang

<?php
// Do NOT include the opening php tag.

// Add Instagram widget before footer.
add_action( 'genesis_before_footer', 'instagram_feed_widget' );
function instagram_feed_widget() {

genesis_widget_area( 'instagram', array(
 'before' => '<div class="instagram"><div class="wrap">',
 'after' => '</div></div>',
 ) );

}

3. Tải về và cài đặt plugin Widget Instagram WP

4. Thêm tiện ích vào widgets

Truy cập Appearance > Widgets trong bảng điều khiển WordPress của bạn và di chuyển Widget Instagram WP vào khu vực Instagram widget. Tôi đã chọn để hiển thị 6 ảnh, với kích thước nhỏ bạn có thể tùy chỉnh nó khi cần thiết.

5. Thêm CSS cho hình ảnh nguồn cấp dữ liệu Instagram trong bảng kiểu chủ đề

/* Instagram
---------------------------------------------------------------------------------------------------- */

.instagram {
 overflow: hidden;
}

.instagram .wrap {
 border-top: 1px solid #eee;
 margin-left: auto;
 margin-right: auto;
 max-width: 1280px;
 padding-bottom: 30px;
 padding-top: 40px;
 text-align: center;
}

.instagram .widget-title {
 font-family: 'Miller Ban It';
 font-size: 24px;
 font-style: italic;
 margin-bottom: 20px;
}

.instagram ul {
 display: inline-block;
 margin-left: auto;
 margin-right: auto;
}

.instagram ul li {
 float: left;
 margin-left: 15px;
 margin-right: 15px; 
}

.instagram img {
 height: 160px;
 vertical-align: top;
 width: 160px;
}

Nếu bạn đang tìm kiếm cách để thêm nguồn cấp dữ liệu Instagram của bạn ở một vị trí khác, bạn có thể tham khảo một số bài viết về genesis hook để sử dụng làm tài liệu tham khảo nhé.

Hướng dẫn thêm Instagram Feed vào genesis
5 (2) votes

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here