wordpress 文章主题
编辑整理：整理来源：爱奇艺，浏览量：80，时间：2023-03-18 00:00:01
前沿：wordpress 文章主题
补充知识：什么意思，跳动是什么，弹窗吗
欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是（没有蛀牙！）建立一套全新的wordpress主题，花上30天的时间闭关修炼，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。
我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：
1. HTML/CSS/JS基础
2. PHP基础
3. 如何使用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
图标字体我们现在为我们的主题引入iconfont（图标字体），先把图标字体准备好：
查阅AMP文档之后，我们可以了解到AMP可以直接引入字体css：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">但是这种方式要求引入的CSS所属域只能是以下列表里的网站：
· Typography.com: https://cloud.typography.com· Fonts.com: https://fast.fonts.net· Google Fonts: https://fonts.googleapis.com· Typekit: https://use.typekit.net· Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com不在这个白名单里的外链CSS是无法在AMP页面引入的，还好我们可以选择直接在页面CSS中引入字体文件，就像是这样：
@font-face { font-family: 'iconfont'; src: url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.eot?#iefix') format('embedded-optype'), url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.woff2') format('woff2'), url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.woff') format('woff'), url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.ttf') format('truetype'), url('<?php echo get_template_directory_uri() ?>/fonts/iconfont.svg#iconfont') format('svg'); }然后我们直接再页面里定义并使用iconfont中图标对应的unicode：
.iconfont { font-family: "iconfont"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }完善文章列表现在我们来继续完善文章列表，首先加入阅读更多按钮：
<div class="flex-box"> <a href="<?php the_permalink(); ?>" class="read-more"><?php _e('READ MORE'); ?><span class="iconfont icon-ml-readmore"></span></a> </div>这里我们就用上了iconfont，效果如下：
现在我们加上评论、阅读、点赞信息，这里需要注意，wordpress默认其实是没有浏览量和点赞的，这里我们在functions.php里加入这些功能，然后后面我们就可以到页面模板里插入这个方法：
// add viewsfunction is_spider() { $agent= strtolower($_SERVER['HTTP_USER_AGENT']); if (!empty($agent)) { $spiders= array( 'Googlebot', 'Baiduspider', 'ia_archiver', 'R6_FeedFetcher', 'NetcraftSurveyAgent', 'Sogou web spider', 'bingbot', 'Yahoo! Slurp', 'facebookexternalhit', 'PrintfulBot', 'msnbot', 'Twitterbot', 'UnwindFetchor', 'urlresolver' ); foreach($spiders as $val) { if (strpos($agent, strtolower($val)) !== false) { return true; } } } else { return false; }}function set_post_views(){ if (is_singular() && !is_spider()) { $post_id = get_the_ID(); if($post_id) { $post_views = (int)get_post_meta($post_id, 'views', true); if(!update_post_meta($post_id, 'views', ($post_views+1))) { add_post_meta($post_id, 'views', 1, true); } } }}// add likesfunction set_post_likes(){ // 暂时空置 以后实现}我们加了一个is_spider方法，让浏览量的统计将搜索引擎蜘蛛排除在外，关于点赞的功能我们也留待以后实现，我们先预定好这两个参数，然后到页面里显示：
<div class="flex-box justify-between"> <a href="<?php the_permalink(); ?>" class="read-more"><?php _e('READ MORE'); ?><span class="iconfont icon-ml-readmore"></span></a> <div class="flex-box post-meta-box"> <a class="post-meta" href="<?php the_permalink() ?>#comments"><span class="iconfont icon-mr-postmeta"></span><?php comments_number('0', '1', '%'); ?></a> <a class="post-meta" href="<?php the_permalink() ?>"><span class="iconfont icon-mr-postmeta"></span><?php echo (int)get_post_meta(get_the_ID(), 'views', true); ?></a> <a class="post-meta" href="<?php the_permalink() ?>"><span class="iconfont icon-mr-postmeta"></span><?php echo (int)get_post_meta(get_the_ID(),'likes',true); ?></a> </div> </div>我们再加上文章的发布日期：
<div class="flex-box post-publish-date"> <div class="post-date"> <?php echo get_the_date('d') ?> </div> <div class="post-month"> <?php echo get_the_date('M') ?> </div> </div>这样我们的首页文章列表就基本完成了：
现在我们做今天的最后一项工作，程序员最爱之分页：
<?php echo get_the_posts_pagination( array( 'mid_size' => 3, 'prev_next' => false, ) ); ?>声明？就这么几行就OK了？没错！我们加上一些CSS描述后，就成这样了：
Wordpress对分页的输出还是比较好的，基本不用费事就完成了。
总结和预告今天我们为主题引入了iconfont自定义图标，完成了文章列表页的全部内容，最后的分页也十分之轻松。
明天我们将挑战制作右侧边栏，这也是wordpress传统blog主题中至关重要的一部分。
如果你喜欢这个系列的文章，赶快关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。
补充拓展：wordpress 文章主题
用DW软件打开调整CSS样式了用来自DW打开style.cssDW软件右上角有CSS样式图标点击里面样式双需械国段府知培传零击点击弹出方框把数字改进去