WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 代码实现文章仿无觅效果的相关文章

代码实现文章仿无觅效果的相关文章

PCDotFan10年前

 

代码实现文章仿无觅效果的相关文章-WP酷

效果和无觅非常相似,经过的gsky一番调整和增强,我已经深深爱上了它,于是不敢独享,拿出来分享一下。

其实效果非常简单,首先将下方代码粘贴到 文章页面 模板的合适位置

猜你喜欢

    cat_ID; } query_posts('cat=' . $cat . '&orderby=rand&showposts=6'); //控制相关文章排序为随机,显示6篇相关文章 while (have_posts()) : the_post(); $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large'); ?>
  • 代码实现文章仿无觅效果的相关文章-WP酷 代码实现文章仿无觅效果的相关文章-WP酷

 

然后添加CSS

/* 相关文章 */
.same_cat_posts a {color: #555; text-decoration: none; }
.same_cat_posts {width: 730px; height: 160px; margin: 5px 0px 5px 0px; }
.same_cat_posts h3 {margin-bottom: 10px; font-weight: bolder; font-size: 10pt;}
.same_cat_posts ul {list-style: none; margin-left: 25px;}
.same_cat_posts ul li {float: left; padding: 5px; border-right: 1px solid #CCCCCC; }
.same_cat_posts ul li:hover {background: #dddddd; }
.same_cat_posts ul li img {width: 96px; height: 90px; padding: 2px; border: 1px solid #CCCCCC; }
.same_cat_posts ul li .same_cat_posts_tittle { margin-left: 2px; width: 96px; height: 50px; font-size: 9pt; text-decoration: none; }

 

这里特别注意的是CSS,你需要调整!仿无觅效果是否相似,CSS决定一切

粘贴好代码,放置好css,下面我们还要在functions.php(模板函数)中添加点东西:

//添加特色缩略图支持
if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');

//输出缩略图地址
function post_thumbnail_src(){
global $post;
if( $values = get_post_custom_values("thumb") ) { //输出自定义域图片地址
$values = get_post_custom_values("thumb");
$post_thumbnail_src = $values [0];
} elseif( has_post_thumbnail() ){ //如果有特色缩略图,则输出缩略图地址
$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
$post_thumbnail_src = $thumbnail_src [0];
} else {
$post_thumbnail_src = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$post_thumbnail_src = $matches [1] [0]; //获取该图片 src
if(empty($post_thumbnail_src)){ //如果日志中没有图片,则显示随机图片
$random = mt_rand(1, 10);
echo get_bloginfo('template_url');
echo '/images/pic/'.$random.'.jpg';
//如果日志中没有图片,则显示默认图片
//echo '/images/default_thumb.jpg';
}
};
echo $post_thumbnail_src;
}

 

将上方代码拷贝到函数模板里,保存即可。

下面你需要下载下面的文件,解压并上传到正在使用的主题目录里

上传后,将cache文件夹的权限设置为777。接下来刷新一下你文章页面,是不是有效果了呢?

#仿无觅
0
分享

Warning: Trying to access array offset on value of type bool in /data/wwwroot/www.mywpku.com/wp-content/themes/wpku/inc/template-functions.php on line 180

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (1)
再想想
  • 花花工资

    哎,我非常同意能用代码就不用插件的做法,无奈本人只会java,不会php,jquery更不会。

    10年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
CK-Video – WordPress实现插入无广告的优酷视频 v0.681
9年前
利用缓存插件W3TC与又拍云构建WordPress全站CDN
10年前
简单实现首页幻灯片代码【Gztro版】
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1