欢迎光临
请一秒记住我们的网址:www.xinfangs.com !

WordPress 代码实现自定义分页函数

时间煮雨阅读(974)


WordPress 自己的分页功能比较弱,只能上一页、下一页,要想有详细的分页页码之类的显示,就必需自己动手了。

下面这个函数可以实现分页功能,并有页码显示。

//分页函数
function pagenavi( $before = '', $after = '', $p = 3 ) {
    if ( is_singular() ) return;
    global $wp_query, $paged;
    $max_page = $wp_query->max_num_pages;
    if ( $max_page == 1 ) return;
    if ( emptyempty( $paged ) ) $paged = 1;
    echo $before.'<nav id="pagenavi">'."\n";
    if ( $paged > 1 ) p_link( $paged - 1, '上页', '上页' );
    if ( $paged > $p + 1 ) p_link( 1, '第一页' );
    if ( $paged > $p + 2 ) echo '<span class="pages">...</span>';
    for( $i = $paged - $p; $i <= $paged + $p; $i++ ) {
        if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span>" : p_link( $i );
    }
    if ( $paged < $max_page - $p - 1 ) echo '<span class="pages">...</span>';
    if ( $paged < $max_page - $p ) p_link( $max_page, '最后一页' );
    if ( $paged < $max_page ) p_link( $paged + 1,'下页', '下页' );
    echo '</nav>'.$after."\n";
}
function p_link( $i, $title = '', $linktype = '' ) {
    if ( $title == '' ) $title = "第 {$i} 页";
    if ( $linktype == '' ) { $linktext = $i; } else { $linktext = $linktype; }
    echo "<a class='page-numbers' href='", esc_HTML( get_pagenum_link( $i ) ), "' title='{$title}'>{$linktext}</a>";
}

调用时使用下面的代码即可:

<?php pagenavi(); ?>

WordPress添加本地头像功能代替Gravatar头像功能

时间煮雨阅读(1088)


目前 WordPress 网站几乎都是使用 Gravatar 全球通头像来关联用户头像的,但是由于 Gravatar 的服务器是在国外,国内经常由于某些 XXX 原因而连接不上,为了解决这个问题小 V 之前提到过使用国内的 cdn 服务来镜像 Gravatar 头像,而开放注册性网站则可以使用 simple-local-avatars 插件将网站用户的头像完全本地化,这样就不用担心 Gravatar 头像超时造成网站经常打开缓慢的问题了。

<?php
class Simple_Local_Avatars {
    private $user_id_being_edited;
 
    public function __construct() {
        add_filter( 'get_avatar', array( $this, 'get_avatar' ), 10, 5 );
 
        add_action( 'admin_init', array( $this, 'admin_init' ) );
 
        add_action( 'show_user_profile', array( $this, 'edit_user_profile' ) );
        add_action( 'edit_user_profile', array( $this, 'edit_user_profile' ) );
 
        add_action( 'personal_options_update', array( $this, 'edit_user_profile_update' ) );
        add_action( 'edit_user_profile_update', array( $this, 'edit_user_profile_update' ) );
 
        add_filter( 'avatar_defaults', array( $this, 'avatar_defaults' ) );
    }
 
    public function get_avatar( $avatar = '', $id_or_email, $size = 96, $default = '', $alt = false ) {
 
        if ( is_numeric($id_or_email) )
            $user_id = (int) $id_or_email;
        elseif ( is_string( $id_or_email ) && ( $user = get_user_by( 'email', $id_or_email ) ) )
            $user_id = $user->ID;
        elseif ( is_object( $id_or_email ) && ! empty( $id_or_email->user_id ) )
            $user_id = (int) $id_or_email->user_id;
 
        if ( empty( $user_id ) )
            return $avatar;
 
        $local_avatars = get_user_meta( $user_id, 'simple_local_avatar', true );
 
        if ( empty( $local_avatars ) || empty( $local_avatars['full'] ) )
            return $avatar;
 
        $size = (int) $size;
 
        if ( empty( $alt ) )
            $alt = get_the_author_meta( 'display_name', $user_id );
 
        // generate a new size
        if ( empty( $local_avatars[$size] ) ) {
            $upload_path = wp_upload_dir();
            $avatar_full_path = str_replace( $upload_path['baseurl'], $upload_path['basedir'], $local_avatars['full'] );
            $image_sized = image_resize( $avatar_full_path, $size, $size, true );      
            // deal with original being >= to original image (or lack of sizing ability)
            $local_avatars[$size] = is_wp_error($image_sized) ? $local_avatars[$size] = $local_avatars['full'] : str_replace( $upload_path['basedir'], $upload_path['baseurl'], $image_sized );
            // save updated avatar sizes
            update_user_meta( $user_id, 'simple_local_avatar', $local_avatars );
        } elseif ( substr( $local_avatars[$size], 0, 4 ) != 'http' ) {
            $local_avatars[$size] = home_url( $local_avatars[$size] );
        }
 
        $author_class = is_author( $user_id ) ? ' current-author' : '' ;
        $avatar = "<img alt='" . esc_attr( $alt ) . "' src='" . $local_avatars[$size] . "' class='avatar avatar-{$size}{$author_class} photo' height='{$size}' width='{$size}' />";
 
        return apply_filters( 'simple_local_avatar', $avatar );
    }
 
    public function admin_init() {
        //load_plugin_textdomain( 'simple-local-avatars', false, dirname( plugin_basename( __FILE__ ) ) . '/localization/' );
 
        register_setting( 'discussion', 'simple_local_avatars_caps', array( $this, 'sanitize_options' ) );
        add_settings_field( 'simple-local-avatars-caps', __('Local Avatar Permissions','simple-local-avatars'), array( $this, 'avatar_settings_field' ), 'discussion', 'avatars' );
    }
 
    public function sanitize_options( $input ) {
        $new_input['simple_local_avatars_caps'] = empty( $input['simple_local_avatars_caps'] ) ? 0 : 1;
        return $new_input;
    }
 
    public function avatar_settings_field( $args ) {       
        $options = get_option('simple_local_avatars_caps');
 
        echo '
            <label for="simple_local_avatars_caps">
                <input type="checkbox" name="simple_local_avatars_caps" id="simple_local_avatars_caps" value="1" ' . @checked( $options['simple_local_avatars_caps'], 1, false ) . ' />
                ' . __('仅具有头像上传权限的用户具有设置本地头像权限(作者及更高等级角色)。','simple-local-avatars') . '
            </label>
        ';
    }
 
    public function edit_user_profile( $profileuser ) {
    ?>
    <h3><?php _e( '头像','simple-local-avatars' ); ?></h3>
 
    <table class="form-table">
        <tr>
            <th><label for="simple-local-avatar"><?php _e('上传头像','simple-local-avatars'); ?></label></th>
            <td style="width: 50px;" valign="top">
                <?php echo get_avatar( $profileuser->ID ); ?>
            </td>
            <td>
            <?php
                $options = get_option('simple_local_avatars_caps');
 
                if ( empty($options['simple_local_avatars_caps']) || current_user_can('upload_files') ) {
                    do_action( 'simple_local_avatar_notices' );
                    wp_nonce_field( 'simple_local_avatar_nonce', '_simple_local_avatar_nonce', false );
            ?>
                    <input type="file" name="simple-local-avatar" id="simple-local-avatar" /><br />
            <?php
                    if ( empty( $profileuser->simple_local_avatar ) )
                        echo '<span class="description">' . __('尚未设置本地头像,请点击“浏览”按钮上传本地头像。','simple-local-avatars') . '</span>';
                    else
                        echo '
                            <input type="checkbox" name="simple-local-avatar-erase" value="1" /> ' . __('移除本地头像','simple-local-avatars') . '<br />
                            <span class="description">' . __('如需要修改本地头像,请重新上传新头像。如需要移除本地头像,请选中上方的“移除本地头像”复选框并更新个人资料即可。<br/>移除本地头像后,将恢复使用 Gravatar 头像。','simple-local-avatars') . '</span>
                        ';     
                } else {
                    if ( empty( $profileuser->simple_local_avatar ) )
                        echo '<span class="description">' . __('尚未设置本地头像,请在 Gravatar.com 网站设置头像。','simple-local-avatars') . '</span>';
                    else
                        echo '<span class="description">' . __('你没有头像上传全乡,如需要修改本地头像,请联系站点管理员。','simple-local-avatars') . '</span>';
                }
            ?>
            </td>
        </tr>
    </table>
    <script type="text/javascript">var form = document.getElementById('your-profile');form.encoding = 'multipart/form-data';form.setAttribute('enctype', 'multipart/form-data');</script>
    <?php       
    }
 
    public function edit_user_profile_update( $user_id ) {
        if ( ! isset( $_POST['_simple_local_avatar_nonce'] ) || ! wp_verify_nonce( $_POST['_simple_local_avatar_nonce'], 'simple_local_avatar_nonce' ) )            //security
            return;
 
        if ( ! empty( $_FILES['simple-local-avatar']['name'] ) ) {
            $mimes = array(
                'jpg|jpeg|jpe' => 'image/jpeg',
                'gif' => 'image/gif',
                'png' => 'image/png',
                'bmp' => 'image/bmp',
                'tif|tiff' => 'image/tiff'
            );
 
            // front end (theme my profile etc) support
            if ( ! function_exists( 'wp_handle_upload' ) )
                require_once( ABSPATH . 'wp-admin/includes/file.php' );
 
            $this->avatar_delete( $user_id );    // delete old images if successful
 
            // need to be more secure since low privelege users can upload
            if ( strstr( $_FILES['simple-local-avatar']['name'], '.php' ) )
                wp_die('For security reasons, the extension ".php" cannot be in your file name.');
 
            $this->user_id_being_edited = $user_id; // make user_id known to unique_filename_callback function
            $avatar = wp_handle_upload( $_FILES['simple-local-avatar'], array( 'mimes' => $mimes, 'test_form' => false, 'unique_filename_callback' => array( $this, 'unique_filename_callback' ) ) );
 
            if ( empty($avatar['file']) ) {     // handle failures
                switch ( $avatar['error'] ) {
                    case 'File type does not meet security guidelines. Try another.' :
                        add_action( 'user_profile_update_errors', create_function('$a','$a->add("avatar_error",__("请上传有效的图片文件。","simple-local-avatars"));') );              
                        break;
                    default :
                        add_action( 'user_profile_update_errors', create_function('$a','$a->add("avatar_error","<strong>".__("上传头像过程中出现以下错误:","simple-local-avatars")."</strong> ' . esc_attr( $avatar['error'] ) . '");') );
                }
 
                return;
            }
 
            update_user_meta( $user_id, 'simple_local_avatar', array( 'full' => $avatar['url'] ) );      // save user information (overwriting old)
        } elseif ( ! empty( $_POST['simple-local-avatar-erase'] ) ) {
            $this->avatar_delete( $user_id );
        }
    }
 
    /**
     * remove the custom get_avatar hook for the default avatar list output on options-discussion.php
     */
    public function avatar_defaults( $avatar_defaults ) {
        remove_action( 'get_avatar', array( $this, 'get_avatar' ) );
        return $avatar_defaults;
    }
 
    /**
     * delete avatars based on user_id
     */
    public function avatar_delete( $user_id ) {
        $old_avatars = get_user_meta( $user_id, 'simple_local_avatar', true );
        $upload_path = wp_upload_dir();
 
        if ( is_array($old_avatars) ) {
            foreach ($old_avatars as $old_avatar ) {
                $old_avatar_path = str_replace( $upload_path['baseurl'], $upload_path['basedir'], $old_avatar );
                @unlink( $old_avatar_path );   
            }
        }
 
        delete_user_meta( $user_id, 'simple_local_avatar' );
    }
 
    public function unique_filename_callback( $dir, $name, $ext ) {
        $user = get_user_by( 'id', (int) $this->user_id_being_edited );
        $name = $base_name = sanitize_file_name( $user->user_login . '_avatar' );
        $number = 1;
 
        while ( file_exists( $dir . "/$name$ext" ) ) {
            $name = $base_name . '_' . $number;
            $number++;
        }
 
        return $name . $ext;
    }
}
 
$simple_local_avatars = new Simple_Local_Avatars;
 
function get_simple_local_avatar( $id_or_email, $size = '96', $default = '', $alt = false ) {
    global $simple_local_avatars;
    $avatar = $simple_local_avatars->get_avatar( '', $id_or_email, $size, $default, $alt );
 
    if ( empty ( $avatar ) )
        $avatar = get_avatar( $id_or_email, $size, $default, $alt );
 
    return $avatar;
}


将以上代码加入到 functions.php 或者 functinos.php 引入的 php 文件中即可实现 Gravatar 头像半本地化,最后来张效果图:

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

WordPress站点Gravatar头像前后台不显示的解决办法

时间煮雨阅读(457)


我们很多时候会看到在用WoRDpRESS程序的时候头像不显示的问题,我们可以通过更换头像服务器地址办法来解决。

将以下代码添加到当前主题的functions.php文件中即可:

    add_filter('get_avatar', function ($avatar) {
    return str_replace([
    'www.gravatar.com/avatar/',
    '0.gravatar.com/avatar/',
    '1.gravatar.com/avatar/',
    '2.gravatar.com/avatar/',
    'secure.gravatar.com/avatar/',
    'cn.gravatar.com/avatar/'
    ], 'gravatar.wp-china-yes.net/avatar/', $avatar);
    });

WordPress Tab四分栏文章列表样式制作方法

时间煮雨阅读(705)


很多时候,我们在做页面排版的时候,为了能增加读者的阅读量,我们会在页面中添加站长推荐、热门文章、热评文章、随机推荐等文章列表,如果将这些文章列表制作成四分栏的样子,可以更大的节省空间。当今是个信息共享的时代,好的东西就要拿出来与大家分享,才能体现它的价值。今天我要分享的是如何在wordpress首页展示四分栏文章列表样式,效果如下图所示。

第一步:将下列代码另存为rand-hot-comment.php。

<?php
//按时间获得浏览器最高的文章
function post_viewed_tab($mode = '', $limit ='', $days = '', $display = true) {
global $wpdb, $post;
$today = date("Y-m-d H:i:s"); //获取今天日期时间
$daysago = date( "Y-m-d H:i:s", strtotime($today) - ($days * 24 * 60 * 60) ); //Today - $days
$where = '';
$temp = '';
if(!empty($mode) && $mode != 'both') {
$where = "post_type = '$mode'";
} else {
$where = '1=1';
}
$most_viewed = $wpdb->get_results("SELECT $wpdb->posts.*, (meta_value+0) AS views FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID WHERE post_date < '$today' AND post_date > '$daysago' AND $where AND post_status = 'publish' AND meta_key = 'views' AND post_password = '' ORDER BY views DESC LIMIT $limit");
if($most_viewed) {
foreach ($most_viewed as $post) {
$post_views = intval($post->views);
$post_views = number_format($post_views);
$temp .= "<li class=\"list-title\"><span class=\"tab-icon\"></span><a href=\"".get_permalink()."\" title=\"".get_the_title()."\" target=\"_blank\" rel="noopener noreferrer">".get_the_title()."</a></li>";
}
} else {
$temp = '<a>'.__('N/A', 'Nana').'</a>'."\n";
}
if($display) {
echo $temp;
} else {
return $temp;
}
}
?>
<?php
//按时间获得评论数最多的文章
function hot_comment_viewed_tab($number, $days){
global $wpdb, $post;
$today = date("Y-m-d H:i:s"); //获取今天日期时间
$daysago = date( "Y-m-d H:i:s", strtotime($today) - ($days * 24 * 60 * 60) ); //Today - $days
$sql = "SELECT * FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' AND post_date < '$today' AND post_date > '$daysago' AND post_password = '' ORDER BY comment_count DESC LIMIT 0 , $number ";
$posts = $wpdb->get_results($sql);
$output = "";
if(empty($posts)) {
$output = '<li>None data.</li>';
} else {
foreach ($posts as $post){
$commentcount = $post->comment_count;
if ($commentcount != 0) {
$output .= "<li class=\"list-title\"><span class=\"tab-icon\"></span><a href=\"".get_permalink()."\" title=\"".get_the_title()."\" target=\"_blank\" rel="noopener noreferrer">".get_the_title()."</a></li>";
}
}
}
echo $output;
}
?>
<div class="tab-site wow fadeInUp sort" data-wow-delay="0.3s">
<div id="layout-tab" class="tab-product">
<h2 class="tab-hd">
<span class="tab-hd-con"><a href="javascript:">站长推荐</a></span>
<span class="tab-hd-con"><a href="javascript:">热门文章</a></span>
<span class="tab-hd-con"><a href="javascript:">热评文章</a></span>
<span class="tab-hd-con"><a href="javascript:">随机推荐</a></span>
</h2>
<div class="tab-bd dom-display">
<ul class="tab-bd-con current">
<?php query_posts( array ( 'meta_key' => 'hot', 'meta_value' => 'true','showposts' => 8, 'orderby' => 'rand', 'ignore_sticky_posts' => 1 ) ); while ( have_posts() ) : the_post(); ?>
<li class="list-title"><span class="tab-icon"></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a></li>
<?php endwhile;wp_reset_query();?>
</ul>
<ul class="tab-bd-con">
<?php post_viewed_tab('post',8,90, true, true);wp_reset_query(); ?>
</ul>
<ul class="tab-bd-con">
<?php hot_comment_viewed_tab(8, 90);wp_reset_query(); ?>
</ul>
<ul class="tab-bd-con">
<?php $args = array('numberposts' => 8, 'orderby' => 'rand',);$rand_posts = get_posts($args); foreach( $rand_posts as $post ): ?>
<li class="list-title"><span class="tab-icon"></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; wp_reset_query(); ?>
</ul>
 
</div>
</div>
</div>
<div class="clear"></div>

第二步:将rand-hot-comment.php上传到主题inc文件夹内,并在需要显示的位置插入下列代码。

get_template_part( '/inc/rand-hot-comment' );

第三步:将下列css代码,加入到主题style样式中。

.tab-site {overflow: hidden;margin: 0 0 10px 0;border: 1px solid #ddd;border-radius:0px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);}
.tab-hd {overflow: hidden;height: 40px;line-height: 40px;}
.tab-hd-con {float: left;text-align: center;cursor: pointer;height: 39px;border-right: 1px solid #ddd;font-size: 1pc;}
.tab-hd-con {width: 25%;}
.dom-display .current {display: block;}
.tab-hd .current{border-bottom: 3px solid #c01e22;}
.tab-hd .current a{color:#c01e22;}
.tab-bd-con {display: none; overflow: hidden;}
.tab-bd li {float: left;width: 47.35%;line-height: 210%;margin: 0 20px 0 0;white-space: nowrap; word-wrap: normal;text-overflow: ellipsis;overflow: hidden;}
@media screen and (max-width: 480px) {.tab-bd li {width: 95%;margin: 0 0 0 0;}}
.list-title {width: 84%;line-height: 210%; white-space: nowrap;word-wrap: normal;text-overflow: ellipsis; overflow: hidden;}
.tab-site {overflow:hidden;background:#fff;padding-bottom:10px}
.tab-bd li a{color:#555;}
.tab-bd .list-title .tab-icon:before{content:'\f105'}
.tab-bd .list-title .tab-icon{font-family:fontawesome; margin-right:5px;}
.tab-bd li a:hover{color:#c01e22;text-decoration:underline}
.tab-bd {background: #fff; padding:10px 15px;margin-top:-1px; border-top: 1px solid #ddd;}

第四步:将下列代码加到主题的script.js里。

$(document).ready(function(){
$("#layout-tab span:first").addClass("current");
$("#layout-tab .tab-bd-con:gt(0)").hide();
$("#layout-tab span").mouseover(function(){
$(this).addClass("current").siblings("span").removeClass("current");
$("#layout-tab .tab-bd-con:eq("+$(this).index()+")").show().siblings(".tab-bd-con").hide().addClass("current");
});
});

好了,方法就介绍完成了,大致方法如上所示,可能不能完全适应其它主题,需自行修改。

给WordPress分类目录、标签、页面的url链接添加.html后缀

时间煮雨阅读(919)

用WordPress建站的朋友应该都知道,WordPress的页面链接,分类链接和标签链接默认都是没有 .html 后缀的,这让一些不是很懂SEO优化的 “强迫症患者” 很是难受,因为很多人都说增加了 .html 后缀有利于SEO优化,于是他们就信了。

为了解决部分“强迫症患者”的问题,此文将给你给分类页面、标签页面、独立页面 增加 .html 后缀的方法。

将下面的代码添加至当前使用的WordPress主题的functions.php中即可。

特别注意:添加代码后,到WordPress后台》设置》固定连接,重新保存一下设置。
function xintheme_custom_page_rules() {

global $wp_rewrite;

$wp_rewrite->page_structure = $wp_rewrite->root . 'page/%pagename%.html';

$wp_rewrite->extra_permastructs['post_tag']['with_front'] = '';
$wp_rewrite->extra_permastructs['post_tag']['struct'] = $wp_rewrite->extra_permastructs['post_tag']['with_front'] . 'tag/%post_tag%.html';

$wp_rewrite->extra_permastructs['category']['with_front'] = 'category';
$wp_rewrite->extra_permastructs['category']['struct'] = $wp_rewrite->extra_permastructs['category']['with_front'].'/%category%.html';

}
 
add_action( 'init', 'xintheme_custom_page_rules' );

WordPress 四分栏文章列表样式显示方法

时间煮雨阅读(1091)


当今是个信息共享的时代,好的东西就要拿出来与大家分享,才能体现它的价值。今天我要分享的是如何在WordPress首页展示四分栏文章列表样式,效果如下图所示。

第一步:将下列代码另存为rand-hot-comment.php。

<?php
//按时间获得浏览器最高的文章
function post_viewed_tab($mode = '', $limit ='', $days = '', $display = true) {
  global $wpdb, $post;
  $today = date("Y-m-d H:i:s"); //获取今天日期时间
  $daysago = date( "Y-m-d H:i:s", strtotime($today) - ($days * 24 * 60 * 60) );  //Today - $days
  $where = '';
  $temp = '';
  if(!empty($mode) && $mode != 'both') {
    $where = "post_type = '$mode'";
  } else {
    $where = '1=1';
  }
  $most_viewed = $wpdb->get_results("SELECT $wpdb->posts.*, (meta_value+0) AS views FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID WHERE post_date < '$today' AND post_date > '$daysago' AND $where AND post_status = 'publish' AND meta_key = 'views' AND post_password = '' ORDER  BY views DESC LIMIT $limit");
  if($most_viewed) {
    foreach ($most_viewed as $post) {
      $post_views = intval($post->views);
      $post_views = number_format($post_views);
      $temp .= "<li class=\"list-title\"><span class=\"tab-icon\"></span><a href=\"".get_permalink()."\" title=\"".get_the_title()."\" target=\"_blank\" rel="noopener noreferrer">".get_the_title()."</a></li>";
   }		
  } else {
     $temp = '<a>'.__('N/A', 'Nana').'</a>'."\n";
}
  if($display) {
   echo $temp;
  } else {
    return $temp;
  }
}
?>
<?php
//按时间获得评论数最多的文章
function hot_comment_viewed_tab($number, $days){
  global $wpdb, $post; 
  $today = date("Y-m-d H:i:s"); //获取今天日期时间
  $daysago = date( "Y-m-d H:i:s", strtotime($today) - ($days * 24 * 60 * 60) );  //Today - $days
  $sql = "SELECT * FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' AND post_date < '$today' AND post_date > '$daysago' AND post_password = '' ORDER BY comment_count DESC LIMIT 0 , $number ";
  $posts = $wpdb->get_results($sql);
  $output = "";	
    if(empty($posts)) {
    	$output = '<li>None data.</li>';
    } else {
    foreach ($posts as $post){
      $commentcount = $post->comment_count;
      if ($commentcount != 0) {
        $output .= "<li class=\"list-title\"><span class=\"tab-icon\"></span><a  href=\"".get_permalink()."\"  title=\"".get_the_title()."\"  target=\"_blank\" rel="noopener noreferrer">".get_the_title()."</a></li>";
      }
    }
  }
  echo $output;	
}
?>
<div class="tab-site wow fadeInUp sort" data-wow-delay="0.3s">
   <div id="layout-tab" class="tab-product">
      <h2 class="tab-hd">
	 <span class="tab-hd-con"><a href="javascript:">站长推荐</a></span>
	 <span class="tab-hd-con"><a href="javascript:">热门文章</a></span>
         <span class="tab-hd-con"><a href="javascript:">热评文章</a></span>
	 <span class="tab-hd-con"><a href="javascript:">随机推荐</a></span>
      </h2>
      <div class="tab-bd dom-display">
	 <ul class="tab-bd-con current">
	   <?php query_posts( array ( 'meta_key' => 'hot', 'meta_value' => 'true','showposts' => 8, 'orderby' => 'rand', 'ignore_sticky_posts' => 1 ) ); while ( have_posts() ) : the_post(); ?>
	   <li class="list-title"><span class="tab-icon"></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a>
           </li>							
	   <?php endwhile;wp_reset_query();?>
	  </ul>
	  <ul class="tab-bd-con">
	     <?php post_viewed_tab('post',8,90, true, true);wp_reset_query();  ?>	
	  </ul>
	  <ul class="tab-bd-con">            
	     <?php hot_comment_viewed_tab(8, 90);wp_reset_query(); ?>
	   </ul>
	   <ul class="tab-bd-con">
	      <?php $args = array('numberposts' => 8, 'orderby' => 'rand',);$rand_posts = get_posts($args); foreach( $rand_posts as $post ): ?>
              <li class="list-title"><span class="tab-icon"></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
              <?php endforeach; wp_reset_query(); ?>
	  </ul>			
        </div>
   </div>
</div>
<div class="clear"></div>

第二步:将rand-hot-comment.php上传到主题inc文件夹内,并在需要显示的位置插入下列代码。

get_template_part( '/inc/rand-hot-comment' );

第三步:将下列css代码,加入到主题style样式中。

.tab-site {overflow: hidden;margin: 0 0 10px 0;border: 1px solid #ddd;border-radius:0px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);}
.tab-hd {overflow: hidden;height: 40px;line-height: 40px;}
.tab-hd-con {float: left;text-align: center;cursor: pointer;height: 39px;border-right: 1px solid #ddd;font-size: 1pc;}
.tab-hd-con {width: 25%;}
.dom-display .current {display: block;}
.tab-hd .current{border-bottom: 3px solid #c01e22;}
.tab-hd .current a{color:#c01e22;}
.tab-bd-con {display: none; overflow: hidden;}
.tab-bd li {float: left;width: 47.35%;line-height: 210%;margin: 0 20px 0 0;white-space: nowrap; word-wrap: normal;text-overflow: ellipsis;overflow: hidden;}
@media screen and (max-width: 480px) {.tab-bd li {width: 95%;margin: 0 0 0 0;}}
.list-title {width: 84%;line-height: 210%; white-space: nowrap;word-wrap: normal;text-overflow: ellipsis; overflow: hidden;}
.tab-site {overflow:hidden;background:#fff;padding-bottom:10px}
.tab-bd li a{color:#555;}
.tab-bd .list-title .tab-icon:before{content:'\f105'}
.tab-bd .list-title .tab-icon{font-family:fontawesome; margin-right:5px;}
.tab-bd li a:hover{color:#c01e22;text-decoration:underline}
.tab-bd {background: #fff; padding:10px 15px;margin-top:-1px; border-top: 1px solid #ddd;}

第四步:将下列代码加到主题的script.js里。

$(document).ready(function(){
   $("#layout-tab span:first").addClass("current");
   $("#layout-tab .tab-bd-con:gt(0)").hide();
   $("#layout-tab span").mouseover(function(){
     $(this).addClass("current").siblings("span").removeClass("current");
     $("#layout-tab .tab-bd-con:eq("+$(this).index()+")").show().siblings(".tab-bd-con").hide().addClass("current");
   });
});

好了,方法就介绍完成了,大致方法如上所示,可能不能完全适应其它主题,需自行修改。

请一秒记住我们的网址:www.xinfangs.com !

去投稿去留言