Tạo menu hiển thị bài viết ngẫu nhiên

Đối với các thêm thông thường, ta sử dụng đoạn code sau để chèn vào file footer.php, phía sau thẻ </body>

<?php
	echo '<div class="float-bottom">';
	$args=array(
                'showposts'=>'1',
		'orderby'=>rand);
	$my_query = new wp_query($args);
        while ($my_query->have_posts()){
             $my_query->the_post(); ?>
	     <p><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
	<?php }
	echo '</div>'; 
?>

Đối với các bạn sử dụng Genesis Child Theme, ta sẽ chèn đoạn code sau vào file function.php

add_action('genesis_after','rayno_float_bottom');
function rayno_float_bottom(){
     if(function_exists(rayno_float_button)){
	return;
     }else {
	echo '<div class="float-bottom">';
	$args=array(
                'showposts'=>'1',
		'orderby'=>rand);
	$my_query = new wp_query($args);
        while ($my_query->have_posts()){
             $my_query->the_post(); ?>
	     <p><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
	<?php }
        echo '</div>';
	}
}

Cố định cho menu

Trong đoạn code trên, ta đã khai báo một lớp tên là float-bottom, ta sẽ bổ sung lớp này vào file style.css trong theme của bạn

.float-bottom {
	background: #272727;
	background:rgba(0,0,0,0.9);
	width: 100%;
	overflow: hidden;
	z-index: 999999;
	position: fixed;
	bottom: 0;
	text-align: center;
	padding: 10px;
}
.float-bottom a{
	font-size: 24px;
	color: #FFFFFF;
}
.float-bottom a:hover {
	font-size: 24px;
	color: #CCCCCC;
}

Thuộc tính background:rgba sẽ tạo hiệu ứng trong suốt cho nền của menu, thuộc tính position: fixed; và bottom: 0; sẽ cố định menu ở bên dưới cùng của màng hình. Để tạo menu cố định phía trên, bạn có thể áp dụng các thuộc tính trên vào các lớp đã có sẵn như #nav hoặc #subnav tùy theo theme của bạn.

The post Tạo menu cố định đơn giản cho WordPress appeared first on Raynoblog.

Để làm được điều này, chúng ta sẽ thực hiện theo các bước sau:

Thêm lớp CSS cho mỗi menu

Chúng ta sẽ làm việc này bằng cách vào Appearance -> Menus, click vào Screen Options ở góc trên bên phải.

Trong hộp hiện ra, bạn đánh dấu tick vào mục CSS Classes.

Tiếp theo, ở mỗi menu mà bạn tạo, bạn sẽ thấy có thêm một mục là CSS Classes, bạn điền tên lớp CSS vào đó và lưu lại.

Chú ý ở mỗi menu bạn chọn một tên lớp CSS khác nhau để có thể tạo màu sắc khác nhau.

Thêm CSS code cho mỗi menu

Việc này khá đơn giản đối với các bạn biết về CSS. Ta sẽ thêm các lớp đã tạo ở bước trên vào file style.css. Ở đây lớp mình tạo có tên là home-nav như bạn thấy ở trên.

.home-nav {
	background: #fff !important;
	color: #000;
}
.home-nav a:hover {
	background: #e3e3e3 !important;
}

Hai lớp CSS này sẽ giúp thay đổi màu nền của mục “Trang Chủ” và màu nền khi rê chuột lên menu này. Các bạn chú ý ta có thể thêm thuộc tính !important ở phía sau để tạo độ mạnh cho màu sắc bạn chọn, phủ định các thuộc tính đã có sẵn.

Cứ như vậy với mỗi menu bạn tạo một lớp CSS khác nhau và chọn một màu nền khác nhau, vậy là bạn đã có được một menu với nhiều màu sắc đẹp mắt. Chúc bạn thành công!

The post Tạo thanh menu nhiều màu sắc bằng CSS appeared first on Raynoblog.

Sử dụng Secondary Navigation Menu

Cách đơn giản nhất để tạo Top Navigation Menu là sử dụng Secondary Navigation Menu. Nếu thanh Secondary Navigation nằm ở bên dưới, chúng ta sẽ chuyển nó lên trên top bằng cách thêm code sau vào file funstion.php trong childtheme:

remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_before_header', 'genesis_do_subnav' );

Tạo thêm thanh menu mới

Trong trường hợp bạn vừa muốn sử dụng thanh Secondary Navigation Menu, vừa muốn có một thanh menu trên top. Khi đó chúng ta sẽ tạo thêm một thanh menu thứ ba. Để làm việc này, trước tiên chúng ta phải khai báo thêm một thanh menu mà mình đặt là Top Navigation Menu bằng cách sử dụng code:

add_theme_support ( 'genesis-menus' , array ( 
	'primary' => 'Primary Navigation Menu' , 
	'secondary' => 'Secondary Navigation Menu' ,
	'top' => 'Top Navigation Menu' ) );

Sau khi chèn code này vào file funstion.php, bạn vào Appearance -> Menus bạn sẽ thấy có thêm một thanh menu nữa có tên là Top Navigation Menu.

Tiếp theo chúng ta sẽ thêm nội dung cho menu này bằng cách dùng code:

function top_navigation_menu() {
	if ( ! genesis_nav_menu_supported( 'top' ) )
		return;
	if ( has_nav_menu( 'top' ) ) {
		$args = array(
			'theme_location' => 'top',
			'container'      => '',
			'menu_class'     => genesis_get_option( 'nav_superfish' ) ? 'menu genesis-nav-menu menu-top superfish' : 'menu genesis-nav-menu menu-top',
			'echo'           => 0,
		);
		$nav = wp_nav_menu( $args );
		$pattern = genesis_markup( '<nav class="top">%2$s%1$s%3$s</nav>', '<div id="topnav">%2$s%1$s%3$s</div>', 0 );
		$nav_output = sprintf( $pattern, $nav, genesis_structural_wrap( 'nav', 'open', 0 ), genesis_structural_wrap( 'nav', 'close', 0 ) );
		echo apply_filters( 'third_navigation_menu', $nav_output, $nav, $args );
}}

Bây giờ bạn đã có được một thanh menu thứ ba, bạn có thể thêm các đối tượng cho thanh menu này giống như đối với Primary Navigation Menu và Secondary Navigation Menu.

Công việc cuối cùng là đưa Top Navigation Menu ra ngoài. Ta tiếp tục sử dụng code:

add_action( 'genesis_before_header', 'top_navigation_menu' );

Còn một việc nữa là chúng ta sẽ design thanh Top Navigation Menu sao cho phù hợp với giao diện của blog. Để làm việc này chúng ta sẽ thêm một số lớp css sau vào file style.css:

/* Top Navigation
------------------------------------------------------------*/
#topnav {
	background: #000;
	clear: both;
	overflow: hidden;
}
#topnav .wrap {
	color: #fff;
	font-size: 13px;
	margin: 0 auto;
	width: 960px;
}
#topnav ul {
	float: right;
	margin: 0px;
	width: 100%;
}
#topnav li {
	float: right;
	text-align: center;
	list-style-type: none;
	font-family:"Times New Roman", Times, serif;
	font-size: 13px;
	margin: 0 0 0 10px;
}
#topnav li a {
	color: #fff;
	display: block;
	font-size: 15px;
	padding: 5px 17px 5px 15px;
	position: relative;
	text-decoration: none;
}
#topnav li a:hover,
#topnav li a:active,
#topnav .current_page_item a,
#topnav .current-cat a,
#topnav .current-menu-item a {
	background: #333;
	color: #fff;
}
#topnav li a .sf-sub-indicator {
	overflow: hidden;
	text-indent: -9999px;
}
#topnav li li a,
#topnav li li a:link,
#topnav li li a:visited {
	background: #fff;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	color: #CC0000;
	font-size: 13px;
	padding: 5px 10px;
	text-transform: none;
	width: 100px;
	text-align: left;
}
#topnav li li a:hover,
#topnav li li a:active {
	background: #E0E0E0;
}
#topnav li ul {
	height: auto;
	left: -9999px;
	margin: 0 0 0 -10px;
	position: absolute;
	width: 100px;
	z-index: 9999;
}

Đây là code mình sử dụng, các bạn có thể thiết kế lại cho phù hợp với blog của mình.

Như vậy là bạn đã có được một thanh Top Navigation Menu hoàn chỉnh. Trong quá trình thực hiện nếu có vấn đề thắc mắc bạn hãy để lại comment bên dưới. Chúc bạn thành công! {c1}

The post Top Navigation cho Genesis Childthemes không hỗ trợ appeared first on Raynoblog.