Black Studio TinyMCE Widget là một plugin miễn phí, bạn chỉ cần tải về, cài đặt và active là có thể sử dụng được mà không phải tùy chỉnh gì thêm. Bạn có thể thêm nội dung cho widget này dễ dàng như khi bạn soạn thảo bài viết nhờ khung soạn thảo Visual editor với hai chế độ là visual và text.

Sau khi cài đặt và active plugin Black Studio TinyMCE Widget, bạn sẽ thấy có thêm widget Visual editor trong danh sách widget. Bạn chỉ cần kéo thả widget này vào vị trí bạn muốn.

Soạn thảo nội dung widget và save lại để hoàn tất. Quá tiện lợi phải không nào. Plugin này rất phù hợp với những bạn không rành về ngôn ngữ HTML hoặc các bạn cần sự đơn giản và nhanh chóng. Việc soạn thảo với visual editor sẽ dễ dàng và nhanh chóng hơn nhiều khi sử dụng widget text thông thường.

The post Thêm Visual editor Widget trong WordPress appeared first on Raynoblog.

Xem thêm: Tạo Widget recent comments với ảnh Avatar

Kích hoạt widget recent comments

Như đã nói ở trên, widget này là mặc định có sẵn của WordPress nên để sử dụng bạn chỉ cần vào Appearance » Widgets, kéo thả nó vào vị trị bạn muốn và đặt số lượng bình luận mới được hiển thị là xong.

Xem thêm: 5 plugin thu hút độc giả comments trong WordPress

Loại bỏ bình luận của tác giả khỏi widget recent comments

Tại sao mình phải bỏ comments của tác giả khỏi danh sách? Có lúc vài ngày mình không trả lời các comments thắc mắc của đọc giả, vì vậy khi mình trả lời thì một lúc trả lời rất nhiều nên thành ra trong widget hiển thị 5 bình luận mới toàn là của mình :D. chính vì vậy mình nghĩ tới việc phải loại bỏ các bình luận đó khỏi danh sách chỉ để lại bình luận của đọc giả.

Rất may để làm việc này rất đơn giản, chỉ cần sử dụng đoạn code dưới đây chèn vào file functions.php là xong.

/** remove author comment in widget*/
function ra_recent_comments_less_author( $array ) {
	global $post;
	$array['user_id'] = !$post->post_author;
	return $array;
}
add_action( 'widget_comments_args', 'ra_recent_comments_less_author' );

Xem thêm: Tùy chỉnh comments trong WordPress

Thay đổi chữ “on” trong widget recent comments

Như bạn thấy mình đã thay đổi chữ “on” trong widget bình luận mới nhất trên Raynoblog thành “bình luận trên“. Để làm được điều này, bạn chỉ cần mở file default-widgets.php theo đường dẫn tenmien.com/wp-includes/default-widgets.php, tìm đoạn code:

$output .= sprintf( _x( '%1$s on %2$s', 'widgets' )

Xóa chữ “on” trong đoạn code kia đi và sửa lại theo ý của bạn là được.

Trên đây là hai thủ thuật nhỏ để chỉnh sửa cho widget recent comments mặc định của WordPress, bạn cũng có thể tự tạo cho mình một widget recent comments mới hoặc sử dụng một plugins có chức năng tạo widget này để có nhiều tùy chọn hơn.

The post Chỉnh sửa widget recent comments trong WordPress appeared first on Raynoblog.

Cài đặt plugin Dynamic Widgets

Bạn có thể tải plugin này về từ wordpress.org hoặc có thể sử dụng chức năng search plugins với từ khóa là Dynamic Widgets.

Sau khi tải về bạn cài đặt và activate plugin này giống như tất cả các plugins khác. Sau khi activate, bạn vào mục Appearance  sẽ có thêm mục con là Dynamic Widgets, đây là khu vực quản lý và cài đặt của plugin này.

Hướng dẫn sử dụng plugin Dynamic Widgets

Sau khi active, bạn vào Appearance » Dynamic Widgets sẽ thấy nhìn thấy tất cả các widgets mà bạn đang sử dụng. Để cài đặt tùy chỉnh cho widget nào thì bạn để chuột vào widget đó sẽ thấy xuất hiện chữ “edit” bên dưới, click vào đó để đến trang tùy chỉnh.

Tại đây bạn sẽ thấy có rất nhiều tùy chọn cài đặt như hình bên dưới:

Mình xin giải thích một số tùy chọn cơ bản như:

Role: hiển thị widget đối với tất cả mọi người hoặc chỉ hiển thị với người có quyền admin, quyền tác giả….

Bạn chọn yes để hiện thị widget với tất cả mọi người hoặc chọn no để chọn những người có thể nhìn thấy widget.

Date: Thời gian hiển thị widget.

Chọn yes để luôn hiển thị widget hoặc chọn no để cài đặt ngày xuất hiện và ngày kết thúc widget.

Tương tự cho hai tùy chọn Days và Weeks.

Browser: Chỉ hiện thị widget với một số trình duyệt web.

Single post: Không hiển thị widget đối với các bài viết thuộc một số chuyên mục hoặc tác giả.

Đánh giấu tick vào ô vuông phía trước các mục bài viết mà bạn không muốn hiển thị widgets.

Tương tự cho các mục Pages, Category Pages….

Còn nhiều tùy chọn khác bạn có thể tự tìm hiểu thêm, nó cũng khá đơn giản.

Hy vọng plugin Dynamic Widgets có thể giúp các bạn dễ dàng hơn trong việc quản lý các widgets trên blog của mình. Ngoài ra còn một số plugins khác có thể giúp bạn quản lý widgets mà bạn có thể tham khảo thêm như: Widgets Controller, Widget Logic, Display widgets…

The post Tùy chỉnh hiển thị Widgets với plugin Dynamic Widgets appeared first on Raynoblog.

Vòng vo vậy chắc đủ rồi, giờ mình vào nội dung chính. Trong quá trình thiết kế giao diện lần này, mình đã cố gắng tích hợp vào một widget hiễn thị nhưng bình luận mới kèm với hình ảnh avatar. Tất nhiên bạn có thể làm điều này một cách đơn giản bằng cách sử dụng các plugins. Nhưng vì mình đã sử dụng quá nhiều plugin nên không muốn cài thêm nữa.

Xem thêm: Chỉnh sửa widget recent comments trong WordPress

Trước tiên bạn cần đăng ký một widget. Ở đây mình đặt tên cho widget là Recent comments with avatar, ta sử dụng đoạn code sau:

/*recent comment width avatar */
class recent_comment_avatar extends WP_Widget
{
  function recent_comment_avatar()
  {
    $widget_ops = array(
          'classname' => 'recent_comment_avatar', 
          'description' => 'Hiển thị comment mới với ảnh avatar' );
    $this->WP_Widget('recent_comment_avatar', 'Recent comment with avatar', $widget_ops);
  }
  function form($instance)
  {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
  }
  function update($new_instance, $old_instance)
  {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }
  function widget($args, $instance)
  {
    extract($args, EXTR_SKIP);
    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
    if (!empty($title))
      echo $before_title . $title . $after_title;;

  		//NỘI DUNG WIDGET

    echo $after_widget;
  } 
}
add_action( 'widgets_init', create_function('', 'return register_widget("recent_comment_avatar");') );

Bây giờ bạn vào Appearance >> Widgets sẽ thấy xuất hiện widgets có tên là Recent comments with avatar, bạn có thể kéo nó qua sidebar để sử dụng. Bạn có thể sử dụng đoạn code trên để tạo ra các widget khác, chỉ cần thay tên hàm recent_comment_avatar thành một tên khác.

Giờ ta sẽ bổ sung nội dung cho widget mới đăng ký bằng cách sử dụng đoạn code sau chèn vào vị trí NỘI DUNG WIDGET trong đoạn code trên:

$no_comments = 5;
			$comment_len = 80;
			$avatar_size = 60;
		    $comments_query = new WP_Comment_Query();
			$comments = $comments_query->query( array( 'number' => $no_comments ) );
			$comm = '';
			echo '<ul class="recentcomment">';
			if ( $comments ) : foreach ( $comments as $comment ) :
				$comm .= '<li><div class="ava">' . get_avatar( $comment->comment_author_email, $avatar_size );
				$comm .= '</div><div class="aut"><a class="author" href="' . get_permalink( $comment->comment_post_ID ) . '#comment-' . $comment->comment_ID . '">';
				$comm .= get_comment_author( $comment->comment_ID ) . ':</a>';
				$comm .= strip_tags( substr( apply_filters( 'get_comment_text', $comment->comment_content ), 0, $comment_len ) ) . '</div></li>';

			endforeach; else :
				$comm .= 'No comments.';
			endif;
			echo $comm;	
			echo '<li></li></ul>';

Trong đoạn code trên thì số comments hiễn thị là 5, độ dài comments hiễn thị là 80 ký tự, kích thước avatar là 60px. Bạn có thể thay đổi các số này nếu muốn.

Ngoài ra nếu bạn không muốn hiễn thị trích dẫn comment mà muốn hiễn thị tiêu đề bài viết thì bạn có thể sử dụng đoạn code sau thay cho đoạn code ở trên:

$no_comments = 5;
			$comment_len = 80;
			$avatar_size = 60;
		    $comments_query = new WP_Comment_Query();
			$comments = $comments_query->query( array( 'number' => $no_comments ) );
			$comm = '';
			echo '<ul class="recentcomment">';
			if ( $comments ) : foreach ( $comments as $comment ) :
				$comm .= '<li><div class="ava">' . get_avatar( $comment->comment_author_email, $avatar_size );
				$comm .= '</div><div class="aut"><a class="author" href="' . get_permalink( $comment->post_ID ) . '#comment-' . $comment->comment_ID . '">';
				$comm .= get_comment_author( $comment->comment_ID ) . ':</a> on <a href="'. get_comment_link($comment->comment_ID) . '">' . get_the_title($comment->comment_post_ID) . '</a></div></li>';

			endforeach; else :
				$comm .= 'No comments.';
			endif;
			echo $comm;	
			echo '<li></li></ul>';

Cuối cùng là bổ sung vào một số lớp css để widget hiễn thị đẹp hơn:

.recentcomment {
    padding: 5px;
    margin: 0px !important;
}
.recentcomment li{
    list-style: none !important;
    clear: both;
    padding: 5px;
}
.ava {
    width: 70px; height: 70px;
    float: left;
    margin: 2px 8px 0 -10px;
    padding: 7px;
    background: #fff;
}
.aut {
	padding-top: 5px;
}
.aut a{
	color: #0052A4;
	font-size: 14px;
}

Vậy là bạn đã tạo đươc một widget hoàn chỉnh và có thể sử dụng.

Nếu bạn nào ngại sử dụng code thì có thể tìm một số plugins có thể giúp bạn tạo ra widget recent comments với ảnh avatar rất đơn giản như WP Recent Comments With Avatars, Recent Comments with Avatars và còn nhiều plugins khác nữa. Chúc bạn thành công!

The post Tạo Widget recent comments với ảnh Avatar appeared first on Raynoblog.

Tạo Widget trong WordPress

Trước tiên ta cần tạo ra một widget. Đây là phương pháp chung để đăng ký thêm một widget bổ sung vào danh sách các widget được cung cấp sẳn. Ta sử dụng đoạn code sau thêm vào file functions.php:

class my_widget extends WP_Widget
{
  function my_widget()
  {
    $widget_ops = array(
          'classname' => 'my_widget', 
          'description' => 'Hiển thị bài viết ngẫu nhiên' );
    $this->WP_Widget('my_widget', 'Random Post', $widget_ops);
  }
  function form($instance)
  {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
  }
  function update($new_instance, $old_instance)
  {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }
  function widget($args, $instance)
  {
    extract($args, EXTR_SKIP);
    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
    if (!empty($title))
      echo $before_title . $title . $after_title;;

    // CODE CỦA WIDGET ĐẶT Ở ĐÂY

    echo $after_widget;
  } 
}
add_action( 'widgets_init', create_function('', 'return register_widget("my_widget");') );

Ở đây mình đã tạo một widget có tên là Random post. Bạn có thể sử dụng đoạn code trên để tạo ra nhiều widget khác với tên bất kì. Bây giờ khi vào Appearance => Widgets bạn sẽ thấy có thêm một widget tên là Random post và bạn có thể kéo vào một vị trí trên sidebar để hiển thị ra bên ngoài nhưng chỉ mới là một widget trắng.

Code bài viết ngẫu nhiên

Bây giờ ta sẽ bổ sung đoạn code sau vào vị trí mình đã đánh dấu trong đoạn code bên trên để tạo ra một widget random post hoàn chỉnh.

query_posts('posts_per_page=5&orderby=rand');
	if (have_posts()) : 
		echo '<ul class="random">';
		while (have_posts()) : the_post(); 
			echo '<li><div class="imgthum">';
			echo the_post_thumbnail(array(50,50));
			echo '</div><div class="titlerandom"><a href="'.get_permalink().'">'.get_the_title();
			echo '</a><br>'.get_the_date().' - '.get_comments_number().' comment';//.do_shortcode("[post_date]");
			echo "</div></li>";	
		endwhile;
		echo "<li></li></ul>";
	endif; 
	wp_reset_query();

Với đoạn code trên thì số bài viết hiển thị là 5, và kích thước ảnh thumbnail là 50 x 50. Bạn có thể thay đổi theo ý muốn. Ở đây ta có sử dụng một số hàm quen thuộc như:

• the_post_thumbnail(): Lấy ảnh thumnail của bài viết.
• get_the_date(): Ngày xuất bản bài viết.
• get_comments_number(): Đếm số lượt bình luận trên bài viết.

Nếu bạn không muốn hiển thị các nội dung trên thì có thể bỏ đi các hàm này.

Cuối cùng ta sẽ bổ sung một số lớp css vào file style.css để thiết kế cho widget vừa tạo đẹp mắt hơn.

.random {
	border: 1px solid #996600;
	padding: 5px;
	margin: 0px !important;
}
.random li{
	list-style: none !important;
	clear: both;
	padding: 5px;
}
.imgthum {
	border: 1px #000 solid;
	width: 50px; height: 50px;
	float: left;
	margin: 2px 8px;
	padding: 3px;
}
.titlerandom {
}

Bạn chú ý, để tạo ảnh thumnail cho bài viết thì khi bạn phải Set featured image cho bài viết trong quá trình soạn thảo.

Ngoài ra, nếu bạn không thích hiển thị bài viết ngẫu nhiên ở khu vực widget, bạn có thể sử dụng code trên chèn vào vị trí bất kì mà bạn muốn trên theme của bạn. Chẳng hạn như ở đây mình muốn hiển thị danh sách bài viết ngẫu nhiên ở cuối mỗi bài viết trong các blog sử dụng Genesis childtheme mình sẽ sử dụng code:

add_action('genesis_after_post_content','rayno_random_post');
function rayno_random_post() {
	query_posts('posts_per_page = 5 & orderby = rand');
	if (have_posts()) : 
		echo '<ul class="random">';
		while (have_posts()) : the_post(); 
			echo '<li><div class="imgthum">';
			echo the_post_thumbnail(array(50,50));
			echo '</div><div class="titlerandom"><a href="'.get_permalink().'">'.get_the_title();
			echo '</a><br>'.get_the_date().' - '.get_comments_number().' comment';//.do_shortcode("[post_date]");
			echo "</div></li>";	
		endwhile;
		echo "<li></li></ul>";
	endif; 
	wp_reset_query();
}

Giờ bạn đã có thể cho hiện widget random post ra ngoài và tận hưởng kết quả đạt được. Chúc bạn thành công!

The post Tạo Widget bài viết ngẫu nhiên với ảnh thumbnail appeared first on Raynoblog.

Ở đây mình sẽ tạo thêm hai widget area là Home Featured Left và Home Featured Right.

Đăng ký thêm widget area

Để đăng ký hay nói cách khác là tạo thêm hai widget area, ta sẽ theme đoạn code sau vào file functions.php trong childtheme.

genesis_register_sidebar( array(
	'id'				=> 'home-featured-left',
	'name'			=> __( 'Home Featured Left', 'raynoblog' ),
	'description'	=> __( 'Khu vực home featured left.', 'raynoblog' ),
) );
genesis_register_sidebar( array(
	'id'				=> 'home-featured-right',
	'name'			=> __( 'Home Featured Right', 'raynoblog' ),
	'description'	=> __( 'Khu vực home featured right', 'raynoblog' ),
) );

Sau khi đã thêm code trên, bạn vào trang quản lý widget sẽ thấy xuất hiện thêm hai khu vực widget có tên là Home Featured Left và Home Featured Right. Bạn có thể thêm các widget bạn muốn vào hai khu vực này.

Hiện Home Featured Widget ra ngoài

Ta tiếp tục theme code sau vào file functions.php trong childtheme:

add_action( 'genesis_before_content', 'home_featured_widget_area');

function home_featured_widget_area() {
if ( is_home() ) {
echo '<div id="home-featured">';

			echo '<div class="home-featured-left">';
			dynamic_sidebar( 'home-featured-left' );
			echo '</div><!-- end .home-featured-left -->';	

			echo '<div class="home-featured-right">';
			dynamic_sidebar( 'home-featured-right' );
			echo '</div><!-- end .home-featured-right -->';

			echo '<div style="clear:both;"></div></div>';
 }}

Với code này thì Home Featured Widget chỉ xuất hiện ở trang chủ. Nếu bạn muốn nó xuất hiện ở nhiều trang khác thì có thể sửa lại điều kiện của hàm if.

Và cuối cùng, để cho đẹp hơn, ta có thể theme một số lớp css vào file style.css

#home-featured {
	margin: 10px;
	padding: 10px;
	border: 5px solid #fff;
}
.home-featured-left {
	float: left;
	width: 480px;
	border: 5px solid #fff;
}
.home-featured-right {
	float: right;
	width: 480px;
	border: 5px solid #fff;
}
.home-featured-left h4, .home-featured-right h4 {
	text-align: center;
	font-weight: bold;
}

Và như vậy là childtheme của bạn đã được bổ sung thêm Home Featured Widget rồi đấy. Có vấn đề gì thắc mắc bạn hãy để lại comment bên dưới mình sẽ giải đáp nếu có thể.
Chúc bạn thành công!

The post Thêm Home Featured Widget cho Genesis Childtheme không hỗ trợ appeared first on Raynoblog.