雲仙夢語
九天云外身自在,八荒宇内任逍遥

欢迎来到《真香,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.comhttps://use.fontawesome.com

    不在这个白名单里的外链CSS是无法在AMP页面引入的,还好我们可以选择直接在页面CSS中引入字体文件,就像是这样:

                @font-face {

                    font-family‘iconfont’;

                    srcurl(<?php echo get_template_directory_uri() ?>/fonts/iconfont.eot?#iefix’format(’embedded-opentype’),

                        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-smoothingantialiased;

                    -moz-osx-font-smoothinggrayscale;

                }

    完善文章列表

    现在我们来继续完善文章列表,首先加入阅读更多按钮:

                        <div class=“flex-box”>

                            <a href=<?php the_permalink(); ?> class=“read-more”><?php _e(‘READ MORE’); ?><span class=“iconfont icon-ml-readmore”>&#xe62f;</span></a>

                        </div>

    这里我们就用上了iconfont,效果如下:

    现在我们加上评论、阅读、点赞信息,这里需要注意,wordpress默认其实是没有浏览量和点赞的,这里我们在functions.php里加入这些功能,然后后面我们就可以到页面模板里插入这个方法:

    // add views

    function is_spider() {

        $agentstrtolower($_SERVER[‘HTTP_USER_AGENT’]);

        if (!empty($agent)) {

                $spidersarray(

                    ‘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($agentstrtolower($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’1true);

              }

          }

        }

    }

    // add likes

    function 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”>&#xe62f;</span></a>

                            <div class=“flex-box post-meta-box”>

                                <a class=“post-meta” href=<?php the_permalink() ?>#comments”><span class=“iconfont icon-mr-postmeta”>&#xe630;</span><?php comments_number(‘0’‘1’‘%’); ?></a>

                                <a class=“post-meta” href=<?php the_permalink() ?>><span class=“iconfont icon-mr-postmeta”>&#xe62e;</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”>&#xe631;</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_paginationarray(

                        ‘mid_size’ => 3,

                        ‘prev_next’ => false,

                    ) ); ?>

    声明?就这么几行就OK了?没错!我们加上一些CSS描述后,就成这样了:

    WordPress对分页的输出还是比较好的,基本不用费事就完成了。

    总结和预告

    今天我们为主题引入了iconfont自定义图标,完成了文章列表页的全部内容,最后的分页也十分之轻松。

    明天我们将挑战制作右侧边栏,这也是wordpress传统blog主题中至关重要的一部分。

    如果你喜欢这个系列的文章,赶快关注我们(数字江湖异志录)吧,不要错过后续的更多干货噢。

发表评论