Tạo Widget đăng ký Email Google Feedburner cho WordPress

Google Feedburner là một ứng dụng mà google mua lại từ năm 2007, giúp tối ưu hóa, quảng bá web và rất nhiều lợi ích khác từ ngồn RSS của website đó. Hôm nay mình sẽ giới thiệu đến các bạn cách tạo Widget Google Feedburner cho WordPress.

Bài hôm nay, mình sẽ nói tiếp theo vấn đề mà bạn đã có tài khoản Google Feedburner và đã thêm feed cho tài khoản đó rồi, công việc này cũng khá là đơn giản bạn chỉ việc vào http://feedburner.google.com và làm theo từng bước là được.

Việc đăng ký Email với Google Feedburner sẽ giúp giữ bài mới qua Email của người quan tâm đến website của mình, là một hình thức quảng bá web hiệu quả, giúp cho người dùng không có thời gian lên site mình vẫn có thể đọc được các bài viết mới.

google feedburner wordpress

google feedburner wordpress


Tạo Widget đăng ký Email với Google Feedburner cho WordPress thật sự sẽ rất cần thiết nếu như khi bạn vài đặt WordPress, viết theme cho khách hàng, học sẽ chỉ cần nhập ID của Feedburner là sẽ có được Form đăng ký ngon lành, và mình làm blog có phần hỗ trợ này cũng tiện lợi.

Để đến với bài hôm nay bạn có thể xem lại hai bài sử dụng Widget trong WordPresscách thiết kế Widget cho wordpres hai bài đó là cơ bản cho việc mình làm việc với Widget trong WordPress.

Tạo Widget Feedburner trong WordPress

Đầu tiên bạn vào trong file functions.php khai báo cấu trúc của Widget WordPress như sau, Chú ý, nếu đã khai báo rồi thì bạn không cần làm điều này nữa, ở đây là mình làm cho theme chưa có khai báo gì.

<!--
add_action( 'widgets_init', 'bcdonline_widgets_init' );
function bcdonline_widgets_init() {
	$before_widget =  '<div id="%1$s" class="widget %2$s">';
	$after_widget  =  '</div></div><!-- .widget /-->';
	$before_title  =  '<div class="widget-top"><h4>';
	$after_title   =  '</h4></div>
						<div class="widget-container">';
					
	register_sidebar( array(
		'name' =>  __( 'Primary Widget Area', 'tie' ),
		'id' => 'primary-widget-area',
		'description' => __( 'The Primary widget area', 'tie' ),
		'before_widget' => $before_widget , 'after_widget' => $after_widget , 'before_title' => $before_title , 'after_title' => $after_title ,
	) );
}
-->

Trong phần Widget ở admin bạn sẽ thấy được như sau:

The Primary widget area

Tiếp đến bạn xác định vị trí để khung widget khi bạn cho hiển thị, phần này gần như là lập lại của hai bài trước đó, bạn chú ý đến id trong widget này là primary-widget-area nếu bạn đổi id thì update cho đúng.

<!--
<?php dynamic_sidebar( 'primary-widget-area' );	?>
-->

Sau đó tiếp tục ở trang functions.php khai báo một hành động sử dụng hàm bcdonline_feedburner_widget và đăng ký bằng register_widget có sẳn trong framework của WordPress.

<!--
add_action( 'widgets_init', 'bcdonline_feedburner_widget' );
function bcdonline_feedburner_widget() {
	register_widget( 'feedburner_widget' );
}
-->

Bạn tham khảo hai bài mình nói ở trên để rõ hơn về cấu trúc để viết một widget cho WordPress tiếp theo mình sẽ khai báo một CLASS kế thừa WP_Widget.

<!--
     class feedburner_widget extends WP_Widget {
}
-->

Bên trong sẽ có 4 hàm:

  • feedburner_widget: Qui định hiển thị control của widget bao gồm tiêu đề để người dùng nhìn thấy được.
  • widget( $args, $instance ): Qui định giao diện khi mình xuất ra trang chủ.
  • update: Để cập nhật dữ liệu vào trong CSDL cho Widget WordPress
  • form: Thể hiện giao diện trong admin thu thập thông tin.
<!--
	function feedburner_widget() {
		$widget_ops = array( 'classname' => 'widget-feedburner' , 'description' => 'Subscribe to feedburner via email' );
		$control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'widget-feedburner' );
		$this->WP_Widget( 'widget-feedburner',' BCDONLINE.NET - Feedburner Widget ', $widget_ops, $control_ops );
	}

function widget( $args, $instance ) {
		extract( $args );

		$title = apply_filters('widget_title', $instance['title'] );
		$text_code = $instance['text_code'];
		$feedburner = $instance['feedburner'];
		
		echo $before_widget;
		echo $before_title;
		echo $title ; 
		echo $after_title;
		echo '<div class="widget-feedburner-counter">
		<p>'.do_shortcode( $text_code ).'</p>' ; ?>
		<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo $feedburner ; ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
			<input class="feedburner-email" type="text" name="email" value="<?php _e( 'Enter your e-mail address' , 'tie') ; ?>" onfocus="if (this.value == '<?php _e( 'Enter your e-mail address' , 'tie') ; ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e( 'Enter your e-mail address' , 'tie') ; ?>';}">
			<input type="hidden" value="<?php echo $feedburner ; ?>" name="uri">
			<input type="hidden" name="loc" value="en_US">			
			<input class="feedburner-subscribe" type="submit" name="submit" value="<?php _e( 'Subscribe' , 'tie') ; ?>"> 
		</form>
		</div>
		<?php
		echo $after_widget;			
	}

	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['text_code'] = $new_instance['text_code'] ;
		$instance['feedburner'] = strip_tags( $new_instance['feedburner'] );
		return $instance;
	}

	function form( $instance ) {
		$defaults = array( 'title' =>__( 'FeedBurner Widget' , 'tie') , 'text_code' => __( 'Subscribe to our email newsletter.' , 'tie') );
		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>">Title : </label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" type="text" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'text_code' ); ?>">Text above Email Input Field : <small>( support : Html & Shortcodes )</small> </label>
			<textarea rows="5" id="<?php echo $this->get_field_id( 'text_code' ); ?>" name="<?php echo $this->get_field_name( 'text_code' ); ?>" class="widefat" ><?php echo $instance['text_code']; ?></textarea>
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'feedburner' ); ?>">Feedburner ID : </label>
			<input id="<?php echo $this->get_field_id( 'feedburner' ); ?>" name="<?php echo $this->get_field_name( 'feedburner' ); ?>" value="<?php echo $instance['feedburner']; ?>" class="widefat" type="text" />
		</p>

	<?php
	}
-->

Cũng xin nói lại, ở đây mình chi cho các bạn cách làm các vấn đề thắc mắc về hàm trong đó bạn sẽ tham khảo hai bài mình giới liệu lúc trên. Thì cốt lõi của vấn đề là Form đăng ký Email với Google Feedburner ở ngoài trang chủ, nó có cấu trúc như ở hàm widget đã khai báo. Do đó sẽ phát sinh ra Tiêu đề, vài dòng ghi chú và ID của Google Feedburner.

Giao dien Widget google feedburner subscribers WordPress

Tiếp theo bạn sẽ định dạng CSS cho form đăng ký cho đẹp và bắt mắt, đoạn CSS sau là một khung mình tạo ra sẳn cho bạn, có thể chưa đầy đủ bạn có thể thêm vào nếu muốn.

.widget{

}
.widget .widget-feedburner{

}
.widget .widget-top{

}
.widget .widget-top h4{

}
.widget .widget-container{

}
.widget .widget-container .widget-feedburner-counter{

}
.widget .widget-container p{

}
.widget .widget-container input.feedburner-email{

}
.widget .widget-container input.feedburner-subscribe{

}

Sau đây là một giao diện mẫu sau khi hoàn thành định dạng CSS, các bạn có thể tham khảo.

Google feedburner subscribers

Google feedburner subscribers

Kết luận: Vậy coi như mình đã hoàn thành một Widget đăng ký Email với Google Feedburner cho WordPress, một tính năng nhỏ tuy nhiên rất hưu ích. Chúc các bạn thành công!

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
Tạo Widget đăng ký Email Google Feedburner cho WordPress, 10.0 out of 10 based on 2 ratings
Share This