Hướng dẫn tự tạo Widget đặt mã quảng cáo trong WordPress

Đăng ký tài khoản kiếm tiền với tiếp thị liên kết tại ACCESSTRADE, MasOffer, Lazada Việt Nam

Hướng dẫn tạo Widget đặt mã quảng cáo của bạn như Quảng Cáo Google Adsense, Godaddy hay các chương trình Cộng Tác Viên nào bạn tham gia… Tóm lại bạn có thể đặt bất cứ quảng cáo nào vào các vị trí hỗ trợ đặt Widget trên WordPress Theme bạn đang sử dụng.

Ở bài viết trước Hướng dẫn tạo Widget trong WordPress dễ dàng mình đã cùng các bạn tự mình tạo Widget trong WordPress, tiếp theo hôm nay mình sẽ cùng các bạn tự tạo 1 Widget đơn giản nhưng vô cùng hữu ích (lưu ý bạn: bài viết này cũng chỉ nhằm mục đích chia sẻ những kiến thức cơ bản cho bạn muốn tìm hiểu rõ hơn về phần Widget trong WordPress).
Đó là Widget đặt mã Quảng Cáo Google Adsense, hay bất kỳ banner của chương trình Quảng Cáo nào khác, dĩ nhiên bạn có thể cài Plugin hay can thiệp mã giao diện của Theme, nhưng tự mình có thể viết được Widget và sử dụng nó thì còn gì bằng phải không ?

Đây là hiển thị Quảng Cáo mình dùng Widget đặt mã quảng cáo

Đây là hiển thị Quảng Cáo mình dùng Widget đặt mã quảng cáo tự tạo

Mình mô tả về chức năng Widget đặt mã Quảng Cáo mà chúng ta sẽ làm như sau:
1. Widget cho phép nhập tiêu đề Quảng Cáo (mục này mình nghĩ chỉ để mình nhận diện mã quảng cáo với nhau thôi).
2. Widget cho phép nhập mã Quảng Cáo cung cấp từ nhà cung cấp Quảng Cáo bạn đang cộng tác, hay cũng có thể là Quảng Cáo của bạn.
Ok chỉ 2 chức năng đơn giản vậy thôi nhé ^^ ! Giờ bạn tiến hành code mã Widget như sau:

///////////////////////////////////////
class CKN_Widget_Ads extends WP_Widget {
	function __construct() {
		parent::__construct(
				'CKN_Widget_Ads',
				__('Widget Quảng Cáo', 'cukimngoc_widget_display_ads'),
				array( 'description' => __( 'Widget cho phép hiển thị Quảng Cáo tại các vị trí trên website', 'cukimngoc_widget_display_ads' ), )
		);
	}

	function widget($args, $instance) {
		$cache = wp_cache_get('cukimngoc_widget_display_ads', 'widget');
		if ( !is_array($cache) )
			$cache = array();
		if ( ! isset( $args['widget_id'] ) )
			$args['widget_id'] = $this->id;
		if ( isset( $cache[ $args['widget_id'] ] ) ) {
			echo $cache[ $args['widget_id'] ];
			return;
		}
		ob_start();
		extract($args);
		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : '';
		$scriptads= (! empty( $instance['scriptads'] )) ? $instance['scriptads']: 'Nhập mã quảng cáo';
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
		?>
		<?php
		//Hiển thị quảng cáo tại đây; ?>
			<div class='center' style='padding:8px'>
				<?php echo $scriptads; ?>
			</div>
<?php
		wp_reset_postdata();
		$cache[$args['widget_id']] = ob_get_flush();
		wp_cache_set('cukimngoc_widget_display_ads', $cache, 'widget');
	}

	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['scriptads'] = $new_instance['scriptads'];
		return $instance;
	}
	function form( $instance ) {
		$title     = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : 'Tiêu đề quảng cáo';
		$scriptads= isset( $instance['scriptads'] ) ? $instance['scriptads']: 'Nhập mã quảng cáo';
?>
		<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Tiêu đề:' ); ?></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 $title; ?>" /></p>

		<p><label for="<?php echo $this->get_field_id( 'scriptads' ); ?>"><?php _e( 'Mã quảng cáo:' ); ?></label>
		<textarea class="widefat" id="<?php echo $this->get_field_id('scriptads' ); ?>" name="<?php echo $this->get_field_name( 'scriptads' ); ?>"><?php echo $scriptads; ?></textarea></p>
<?php
	}
}
////////////////////////////////
function CKN_Widget_load_widget() {
	register_widget( 'CKN_Widget_Ads' );
}
add_action( 'widgets_init', 'CKN_Widget_load_widget' );

Vậy là bạn đã hoàn tất việc tự viết cho mình một Widget đặt mã quảng cáo rồi. Trong đoạn mã tạo Widget trên mình không mô tả lại cấu trúc mã lệnh do mình có ghi chú đầy đủ trong bài Hướng dẫn tạo Widget trong WordPress dễ dàng (bạn nào chưa hiểu có thể xem lại nhé). Ở đây mình chỉ nói về các đoạn mã liên quan đến chức năng của Widget đặt mã quảng cáo.

Đầu tiên là hàm form():
Đây là hàm liên quan đến phần soạn thảo, nhập thông tin trong giao diện quản trị của Widget. Ở Widget này mình sẽ cho người dùng nhập vào Tiêu đề quảng cáo và mã quảng cáo như chức năng yêu cầu mình nói trên.
– Đối với tiêu đề mình sử dụng thẻ input để nhận tiêu đề nhập từ người dùng.
– Đối với mã quảng cáo mình sử dụng thẻ textarea để nhận nội dung mã quảng cáo nhập liệu từ người dùng.

$title     = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : 'Tiêu đề quảng cáo';
$scriptads= isset( $instance['scriptads'] ) ? $instance['scriptads']: 'Nhập mã quảng cáo';

Đầu hàm chúng ta khai báo 2 biến để hiển thị tiêu đề và mã quảng cáo đã lưu. Cấu trúc lệnh chắc bạn cũng hiểu rồi mình chỉ nói sơ qua là câu lệnh trên là cách viết shorthand trong lập trình. Bạn có thể hiểu giá trị trên tương đương như sau:

// Kiểm nếu nội dung mã quảng cáo đã lưu trước đó có tồn tại thì gáng nó cho biến $scriptads, ngược lại nếu không có thì giá trị mặc định của nó là "Nhập mã quảng cáo";
if(isset( $instance['scriptads'] )){
       $scriptads=$instance['scriptads'];
}else{
       $scriptads = 'Nhập mã quảng cáo';
}

Giải thích tương tự với biến $title.

Hàm update():
Đây là hàm sẽ xử lý lưu trữ dữ liệu người dùng cung cấp từ hàm form(). Công việc chính hàm này sẽ xử lý thay thế dữ liệu cũ đã lưu nếu có ($old_instance) bằng dữ liệu người dùng mới nhập ($new_instance).

Hàm wiget():
Đây là hàm sẽ xử lý hiển thị dữ liệu trên giao diện website của bạn, vị trí bạn đặt Widget này. Công việc chính của nó là sẽ truy cập dữ liệu để xử lý hiển thị tại vị trí đặt Widget đó. Đầu tiên các giá trị sẽ được xử lý với nguồn dữ liệu sau đó gán cho 2 biến:
$title tiêu đề Widget, ở đây nếu không có nhu cầu sử dụng giá trị của Tiêu đề thì bạn cũng không cần truy xuất ra, mình không dùng nhưng vẫn truy vấn ra nhé.
$scriptads mã quảng cáo chính của bạn sẽ được truy xuất và gán cho biến này.
Tiếp theo bạn chỉ cần quan tâm vị trí hiển thị Quảng Cáo như dưới, thường thì mình cũng chỉ cần hiển thị đơn giản đúng mã quảng cáo thôi nên mình viết thêm 1 thẻ div bao nó để tiện định vị khoảng cách của nó với các thành phần khác trên giao diện. Bạn có thể viết mã CSS và HTML theo ý muốn hiển thị của mình tại đây nhé !

<div class='center' style='padding:8px'>
       <?php echo $scriptads; ?>
</div>

Xong rồi, giờ bạn đăng nhập vào phần quản trị của mình Apperance/ Widgets, bạn sẽ thấy Widget Quảng Cáo sẽ xuất hiện:

Widget Quảng Cáo hiển thị trong quản trị

Widget Quảng Cáo hiển thị trong quản trị

Bạn kéo Widget Quảng Cáo vào vị trí mình cần đặt mã Quảng Cáo sau đó nhập thông tin về quảng cáo của mình, mã quảng cáo:

Widget Quảng Cáo hiển thị tại vị trí đặt Widget

Widget Quảng Cáo hiển thị tại vị trí đặt Widget

Cuối cùng tiến hành lưu lại và quay trở lại website của bạn, tìm vị trí bạn vừa đặt Widget Quảng Cáo của mình vào để xem kết quả nhé. Với việc hiển thị Quảng Cáo ở vị trí khác nữa bạn cũng chỉ cần kéo Widget Quảng Cáo vào vị trí đó và nhập thông tin, sau đó lưu lại thôi là được.

Đây tuy không thực sự là một cách hay để đặt và quản lý mã Quảng Cáo, nhưng sự lựa chọn của mình chỉ đơn giản là đặt VÀI mã Quảng Cáo nên có thể chấp nhận được. Còn nếu đòi hỏi phải có các chức năng quản lý đầy đủ hơn, nhiều mã quảng cáo, nhiều vị trí, ngày đặt, báo cáo thống kê click… thì chắc chắn bạn phải cần đến những Plugin hỗ trợ rồi. Tương lai gần mình cũng sẽ có bài chia sẻ cùng các bạn về Cách viết một Plugin với các chức năng theo yêu cầu như thế !
Chúc các bạn có thể tự mình tạo Widget đặt mã quảng cáo trong WordPress sau chia sẻ của mình nhé ! Mọi thắc mắc bạn cứ để lại thông tin mình sẽ trả lời ngay khi có thể.

Hướng dẫn tự tạo Widget đặt mã quảng cáo trong WordPress 4.14/5 (82.86%) 7 votes
Nếu bạn mong muốn tìm hiểu rõ hơn về chia sẻ này và những chia sẻ khác, bạn có thể kết nối với mình qua các thông tin sau:
Facebook cá nhân: https://www.facebook.com/PExpress
Blog chia sẻ cá nhân: PolygonExpress.com
Group chia sẻ ứng dụng affiliate marketing & services: MMO tools
Web dịch vụ freelance: FMMSPolygon.com
Email liên hệ mình: fmmspolygon@gmail.com
Điện thoại: 0937.798.420 - 0868.929.024 (Kim Ngọc)

Related

Comments

    • say

      Hi ông,
      Uh cái này cũng chia sẻ để mọi người hiểu thêm về cách viết Widget thôi. Còn mặc định thì Text Widget của WordPress đã đáp ứng được rồi 🙂 nếu cần phát triển thêm các tuỳ chỉnh khác như fixed, scroll… thì mới nên viết lại !
      Thân !

      • Phước Đt say

        Đúng rồi Ngọc. Tui chỉ tham khảo thôi. Hiện tại thì tôi đang dùng Text Widget.

  1. thuminh.uct say

    Em mới làm quen wordpress. em muốn làm về một widget đăng những bản tin mới nhất trong danh mục mình phải làm thế nào? Mọi người tư vấn giúp em mới. Thanks!!!

    • say

      Hi bạn,
      Nếu bạn mới làm quen với WordPress nhưng mục đích chỉ sử dụng WordPress làm blog thì bạn nên dùng Themes hỗ trợ widget dạng này như Genesis (Genesis – Featured Posts), nó hỗ trợ đầy đủ hết nhé !.

      Còn nếu bạn làm quen với WordPress để phục vụ việc học tập, lập trình, công việc sau này thì bạn tìm hiểu KỸ cách viết widget như trên đề cập + tìm hiểu cách query trong WordPress (WP_Query) để lấy dữ liệu, sau đó bạn xử lý trong function widget($args, $instance) là đáp ứng được yêu cầu nhé !.

      Thân !

      • thuminh.uct say

        thanks anh nhé!!
        Em mới làm quen với WordPress để lập trình. Giờ em mới tìm hiểu đến cách query trong WordPress.

        • say

          Hi bạn,
          Ok bạn, vậy là đồng nghiệp rồi 🙂 , bạn cứ tìm hiểu nhé, có gì cần thì cứ comment hoặc email cho mình. Trong khả năng có thể mình sẽ chia sẻ cùng bạn.

          P/s: Mình hoan nghênh tinh thần tự tìm tòi, học tập của bạn, mình chắc chắn đó là yếu tố thành công cho 1 lập trình viên 🙂

          Thân !

Related

  1. […] Như bạn thấy Widget đã hoạt động, vậy là bạn đã có thể tự mình tạo Widget trong WordPress. Còn việc hiển thị gì qua Widget đó là tùy vào yêu cầu của bạn mà viết mã ở public function widget( $args, $instance ) nhé. Một số Widget thông dụng bạn nên hỗ trợ cho Theme của bạn là: Widget hiển thị danh sách bài viết mới Widget hiển thị bình luận mới Widget hiển thị danh sách bài viết được xem nhiều Widget hiển thị bài viết được quan tâm nhiều Widget hiển thị hỗ trợ trực tuyến Widget đặt mã quảng cáo trong WordPress […]

Leave a Reply

Your email address will not be published. Required fields are marked *