程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> PHP基礎知識 >> 如何給wordpress增加一個隨機文章按鈕

如何給wordpress增加一個隨機文章按鈕

編輯:PHP基礎知識
 

不少網站都有隨機文章的功能,包括之前我的寫過一個,但是那個實現方法比較蛋疼,這次的實現方式更先進一些,樣式還可以。按鈕你可以隨便放在哪,只要注意給dom綁定事件就可以了。

把下面的代碼放到functions.php中
wp_enqueue_script( 'base', true);
wp_localize_script('base', 'Bigfa', array(
"ajaxurl" => admin_url('admin-ajax.php')
));
add_action( 'wp_ajax_random_post', 'bigfa_random_post' );
add_action( 'wp_ajax_nopriv_random_post', 'bigfa_random_post' );
function bigfa_random_post() {
$posts = get_posts('post_type=post&orderby=rand&numberposts=1');
foreach($posts as $post) {
$link = get_permalink($post);
}
echo $link;
exit;
}

JS代碼,需要1.7以上版本的JQ庫
jQuery('.random_post').on('click', function(e) {
e.preventDefault();
jQuery.post(Bigfa.ajaxurl, {
action : 'random_post',
}, function(data) {
window.location.href = data;
});
});

在你想使用的地方放上按鈕,我是直接仍在了footer.php中
<?php if(!wp_is_mobile()) echo '<a href="javascript:void(0)"> </a>';?>

css參考樣式
.random_post {background-color: #E8E8E8;background-image: url("img/random_icon_normal.png");background-position: center center;background-repeat: no-repeat;height: 16px;margin-top: -60px;padding: 20px 10px;position: fixed;right: 0;top: 50%;width: 19px;}
.random_post:hover{background-color:#F36639;background-image: url("img/random
 

 
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved