最近工作比拟忙,好长时间没有更新博客了,都要长草了。抽了点时间做了这么个小功用,我将其命名为“图像盒子模块”,主要是获取的置顶文章,当然你也能够修正代码获取其他文章。由于设置的置顶文章可能过多,这里随机获取了 5 篇置顶文章。显现效果如下图所示。
代码应该是运用与一切 WordPress 主题的,详细我没有测试。大家自行测试下即可。下面简单说下代码部署方式。
新增 module_img_box_posts.php 中心文件
新建一个名为 module_img_box_posts.php 的文件,并将如下代码丢到文件中去:
<?php /** * 首页置顶文章图像盒子模块 * 蝈蝈要安静——一个不学无术的伪程序员 * https://blog.quietguoguo.com */ ?> <section id="img-box-posts"> <?php $return =""; $query_post = array( 'posts_per_page' => 5, 'ignore_sticky_posts' => 1, 'post_status' => 'publish', 'post_type' => 'post', 'orderby' => 'rand', 'post__in' => get_option('sticky_posts') ); query_posts($query_post); while(have_posts()):the_post(); $sticky_thumb = _get_post_thumbnail(); echo '<a target="_blank" href="'.get_permalink().'" title="'.get_the_title().'-'.get_bloginfo('name').'">'.$sticky_thumb.'</a>'; endwhile; wp_reset_query(); ?> </section>
然后将该文件丢到主题文件夹下。DUX 主题的话丢到主题文件夹下的 modules 文件夹中即可。详细位置不做强迫请求,后面前端调用时途径正确即可。
前端援用代码
直接将一下代码丢到主题的 index.php 文件中去即可:
<!-- 首页置顶文章图像盒子模块 --> <?php include get_stylesheet_directory() . '/modules/module_img_box_posts.php'; ?>
由于我本人在主题后台设置了开启选项,这里分享一下办法。DUX 主题或其他运用 OptionsFramework 框架的都能够运用。
<!-- 首页置顶文章图像盒子模块 --> <?php if( QGG_options('img_box_posts_open') ){ include get_stylesheet_directory() . '/modules/module_img_box_posts.php'; } ?>
然后再主题的 options.php 文件中参加如下代码即可:
// 首页置顶文章图像盒子模块 $options[] = array( 'name' => __('置顶文章图像盒子', 'QGG'), 'desc' => __('开启', 'QGG'), 'id' => 'img_box_posts_open', 'std' => true, 'type' => 'checkbox' );
修正前留意看下这篇文章:https://zibuyu.life/3171.html
CSS 款式文件
按上述操作一步步做下来,你的网站前端应该能显现出调取的文章了。下面简单分享下我调整的 CSS 款式。你也能够自行调整合适本人主题的其他款式。
/** ====================置顶文章图像盒子款式==================== */ .content #img-box-posts{ height: 240px; background: #fff; border-radius: 9px; margin: 20px 0 0; overflow: hidden; } .content #img-box-posts a{ display: block; } .content #img-box-posts a:first-child{ float: left; margin: 0; width: 50%; height: 240px; overflow: hidden; text-align: center; vertical-align: middle; } .content #img-box-posts a{ width: 24%; height: 117.5px; margin: 0 0 5px 1%; overflow: hidden; text-align: center; vertical-align: middle; float: left; } .content #img-box-posts a img{ width: 100%; height: 100%; } @media (max-width: 480px){ .content #img-box-posts{ display: none; } }
以上。
感谢您的来访,获取更多精彩文章请收藏本站。
© 版权声明
本站网络名称:
孤勇者社区
本站永久网址:
https://www.gyzsq.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
相关推荐
评论 抢沙发
欢迎您留下宝贵的见解!