Free the Internet
Across the Great Wall we can reach every corner in the world

欢迎来到《真香,30天做一套wordpress主题》系列文章,我们的目标是花上30天的时间闭关修炼,建立一套全新的wordpress主题,如果你看到的第一篇文章不是《基础框架搭建》,建议你关注我们(数字江湖异志录),从该系列的第一篇开始阅读。

我们将尽量保持文章的循序渐进和通俗易懂,请确保自己已经掌握了那一篇文章的全部内容时才选择跳过,不然可能会错过关键的信息噢~

这里我们假定你已经知晓了以下基础知识,这些基础知识对理解文章内容是至关重要的:

  1. HTML/CSS/JS基础
  2. PHP基础
  3. 如何使用Wordpress
  4. 如何搭建web环境

如果你已经知晓了以上基础知识,恭喜你,本系列的任何文章内容对你而言都没有什么难度。

文章详情页

今天(第11天)就是本系列文章的最后一篇了(说好的30天呢?!),网络上已经出现了很多非法转载本文的网站,希望你们能在采集后记得手动把我骂你们的这句话删除,XXXXXX,本文首发于头条号数字江湖异志录和本人博客hhacker.com,非以上渠道看到本文的读者都是看到了非法转载的文章。为什么提前结束呢,因为制作的进度的确超过了我的想像,很多东西封装好以后,复制复制就能用,实在是太赞了,废话不多说,我们开始singular.php文章详情页的主题文件制作。

还是老套路,从home.php整个复制一套过去,我们只需要关注左侧区域的文章内容就可以了。

                <?php

                    while (have_posts()) {

                        the_post();

                        the_content();

                    }

                ?>

以上代码插到main-container里,直接搞定,今天我们的任务就完成了:

等等,作者你这也太敷衍了吧,好好好,我们样式也没有,标题也没显示,这样当然不行,我只是开个玩笑嘛。

我们首先要做的就是把内容区域AMP化,但是一个一个去把img替换成amp-img,video替换成amp-video实在是太麻烦了,并且还有很多细节上的处理直接替换肯定是不行的,怎么办呢,还好伟大的开源世界早已有了成熟的技术方案:amp-library(https://github.com/Lullabot/amp-library),它的作用就是将传统的HTML转换成AMP HTML。

正常的用法应该是composer intall安装,但是这里我们为了方便直接在把库文件放到主题文件夹里进行引用,在functions.php末尾添加:

require_once __DIR__ . ‘/lib/vendor/autoload.php’;

再次打开一个博客文章详情页,没报错就基本OK了,我们写一个公共方法html2amp来做这个转换,这样在主题文件里只需要调用就可以了:

function html2amp($html=) {

    $amp = new Lullabot\AMP\AMP();

    $amp->loadHtml($html);

    return $amp->convertToAmpHtml();

}

这里需要注意的是,因为AMP的技术规范要求,如果你在本地加载非http资源的话,也就是如果文章内容里的音频、视频是http协议地址,会出现src内容为空的情况,这不是bug,这是特性

如此我们的文章页就完整了AMP化。

然后我们将文章标题和日期、作者等信息在内容顶部显示出来:

                        <div class=“flex-box”>

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

                                <a class=“post-meta” href=<?php echo esc_urlget_author_posts_urlget_the_author_meta‘ID’ ) ) ) ?>><span class=“iconfont icon-mr-postmeta”>&#xe647;</span><?php esc_html(the_author()); ?></a>

                                <a class=“post-meta” href=<?php the_permalink() ?>><span class=“iconfont icon-mr-postmeta”>&#xe643;</span><?php the_timeget_option‘date_format’ ) ); ?></a>

                                <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 icon-like-sp”>&#xe631;</span><?php echo (int)get_post_meta(get_the_ID(),‘likes’,true); ?></a>

                                <?php if ($edit_link = get_edit_post_link(get_the_ID())): ?>

                                    <a class=“post-meta edit-link” href=<?php echo esc_url($edit_link);?>><span class=“iconfont icon-mr-postmeta”>&#xe633;</span><?php _e(‘Edit’)?></a>

                                <?php endif?>

                            </div>

                        </div>

然后我们开始一个一个把文章内容block样式化,这里我们主要处理以下几种block:

1.1 image 图片

1.2 cover 图片上盖文字

1.3 H1~H6(常用H2 H3 H4) heading文字

1.4 quotes 引用文本

1.5 paragraphs 段落文本

1.6 Gallery 图集

1.7 ol/ul 有序/无序列表

1.8 文本加粗

1.9 Download 文件下载

这里我们不去动wordpress生成的DOM结构,加加样式就好。

Image图片:

Cover图片

Heading 标题

Quotes引用文本:

段落文本:

Gallery图集:

ol / ul 有序/无序列表:

Download下载:

顺便再做做移动端适配,内容区域这里我们基本上就OK了。

还记得我们在做文章列表用到了一个点赞属性吗?这个点赞功能是原wordpress里没有的,需要我们自己用postmeta属性来实现,这里我们在文章底部加上这个功能,如果不用amp的话这里直接就是ajax请求就可以了,用amp的话怎么办呢?我们直接用amp-form的action-xhr就可以了。

我们先在functions.php里写点赞的ajax功能:

// add likes

function set_post_likes()

{

    $id = (int)$_POST[“post_id”];

    if ( $_POST[‘action’] === ‘likes’){

        $raters = (int)get_post_meta($id,‘likes’,true);

        if (!isset($_COOKIE[‘likes_’.$id])) {

            setcookie(‘likes_’.$id,$id,time() + 99999999,‘/’,$_SERVER[‘HTTP_HOST’],false);

            update_post_meta($id‘likes’, ($raters + 1));

        }

        wp_send_json([‘likes’=>get_post_meta($id,‘likes’,true), ‘class’=>‘likes-button-active likes-button’]);

    }

    wp_die();

}

add_action(‘wp_ajax_nopriv_likes’‘set_post_likes’);

add_action(‘wp_ajax_likes’‘set_post_likes’);

这里我们同样是利用了update_post_meta存储数据,有两个需要注意的地方,我们在代码里存了一个cookie值,防止重复点击点赞数直接被刷爆,但是这样其实也只是防君子不防小人而已。第二个地方是我们声明了两个action,wp_ajax_nopriv_开头的和wp_ajax开头的分别代表未登录和已登陆用户可用到的ajax action,这样我们在调用/wp-admin/admin-ajax.php时wordpress才能找到正确的代码位置。

                <form

                class=“likes-form”

                method=“post”

                action-xhr=<?php echo follow_scheme_replace(get_site_url(null‘/wp-admin/admin-ajax.php’))?>

                target=“_top”

                on=“submit-success: AMP.setState({‘likes’: event.response.likes,’likesClass’: event.response.class})”

                >

                    <input type=“hidden” name=“post_id” value=<?php echo get_the_ID() ?> />

                    <input type=“hidden” name=“action” value=“likes” />

                    <button type=“submit” [class]=“likesClass” class=“likes-button <?php if (isset($_COOKIE[‘likes_’.get_the_ID()])) echo ‘likes-button-active’;?>  [text]=“likes”>

                    <?php echo (int)get_post_meta(get_the_ID(),‘likes’,true); ?>

                    </button>

                </form>

这里我们的amp-form使用的是action-xhr,这就和jQuery里的ajax调用是一样的了,然后我们用amp-bind对数据做了绑定,这样我们的点赞按钮就能在点赞后直接显示出最新的点赞数据。这里我们要记得在header里把amp-bind的库文件加载进来。

最后加上样式之后,我们的点赞按钮就完成了(另外别忘了做移动端CSS适配):

接下来我们把上一篇、下一篇文章的导航链接做一下:

                <nav class=“post-nav”>

                    <?php

                    $prev_post = get_previous_post();

                    $next_post = get_next_post();

                    ?>

                    <div class=“nav-previous”>

                        <?php if (!empty($prev_post)): ?>

                            <a class=“post-nav-link-active” title=<?php echo $prev_post->post_title;?> href=<?php echo get_permalink($prev_post->ID); ?>><?php _e(‘Previous Post’)?></a>

                        <?php else?>

                            <a><?php _e(‘Previous Post’)?></a>

                        <?php endif?>

                    </div>

                    <div class=“nav-next”>

                        <?php if (!empty($next_post)): ?>

                            <a class=“post-nav-link-active” title=<?php echo $next_post->post_title;?> href=<?php echo get_permalink($next_post->ID);?>><?php _e(‘Next Post’)?></a>

                        <?php else?>

                            <a><?php _e(‘next Post’)?></a>

                        <?php endif?>

                    </div>

                </nav>

这里需要注意的地方是get_previous_post和get_next_post的第一个参数,如果传入一个true的话,则上一页和下一页的指向会是同目录下的文章,默认不指定则是整个博客的文章。

接下来是增加社交分享组件,首先引入amp-social组件库:

<script async custom-element=“amp-social-share” src=“https://cdn.ampproject.org/v0/amp-social-share-0.1.js”></script>

然后在页面里直接添加需要的社交分享类型就可以了,简直不要太方便!

                <div class=“social-share”>

                    <div class=“social-share-box”>

                        <amp-social-share class=“rounded” type=“email” layout=“responsive”  width=“20” height=“20”></amp-social-share>

                    </div>

                    <div class=“social-share-box”>

                        <amp-social-share class=“rounded” type=“linkedin” layout=“responsive” width=“20” height=“20”></amp-social-share>

                    </div>

                    <div class=“social-share-box”>

                        <amp-social-share class=“rounded” type=“pinterest” layout=“responsive” data-param-media=“https://amp.dev/static/samples/img/amp.jpg” width=“20” height=“20”></amp-social-share>

                    </div>

                    <div class=“social-share-box”>

                        <amp-social-share class=“rounded” type=“tumblr” layout=“responsive” width=“20” height=“20”></amp-social-share>

                    </div>

                    <div class=“social-share-box”>

                        <amp-social-share class=“rounded” type=“twitter” layout=“responsive” width=“20” height=“20”></amp-social-share>

                    </div>

                    <div class=“social-share-box”>

                        <amp-social-share class=“rounded” type=“whatsapp” layout=“responsive” width=“20” height=“20”></amp-social-share>

                    </div>

                    <div class=“social-share-box”>

                        <amp-social-share class=“rounded” type=“line” layout=“responsive” width=“20” height=“20”></amp-social-share>

                    </div>

                </div>

这里我们没设置facebook的分享,facebook是个奇葩,只有它需要一个额外的app_id参数,需要使用者自己到facebook后台生成并绑定域名,太麻烦了,把它去掉。

然后是文章标签,这个也非常简单:

                <div class=“post-tags”>

                    <?php if ( get_the_tags() ) { the_tags(); } ?>

                </div>

这样几句话就完事了,加上简单的CSS描述之后:

最后我们来做文章评论部分,这里稍微麻烦一点,首先直接在singular.php文件里输出:

<?php comments_template(); ?>

然后建立comments.php文件,也就是评论的模板主文件:

<div id=“comments” class=“comments content”>

    <?php if (post_password_required()) : ?>

    <p><?php _e‘Post is password protected. Enter the password to view any comments.’ ); ?></p>

    <?php else?>

        <?php if (have_comments()) : ?>

            <h2><?php comments_number(); ?></h2>

            <ul>

                <?php wp_list_comments();?>

            </ul>

            <?php paginate_comments_links(

                    array(

                        ‘next_text’ => ,

                        ‘prev_text’ => ,

                    )

            ) ?>

        <?php endif?>

        <?php if ( !comments_open() && post_type_supportsget_post_type(), ‘comments’ ) ) : ?>

            <p><?php _e‘Comments are closed here.’); ?></p>

        <?php else?>

            <?php comment_form(); ?>

        <?php endif?>

    <?php endif?>

</div>

这里我们把这个容器的id定为comments,这样做是为了方便锚链接,然后我们把content样式给它,让它复用一些内容区域的样式。

还有一定要注意paginate_comments_links一定要加上,这样子评论才支持分页,同样我们不对wordpress输出的html结果做过多的改动,基本保持原样输出,加上样式就ok了。

如此,我们的评论部分就完成了。

总结和预告

本文是本系列的最后一篇,文章详情页完成后我们的整套主题就全部完成了,当然了,还有很多细节上的地方可以修正,但是总的来说我们已经完成了整套主题的开发!只用了11天,比预想的30天早了好多(吃瓜群众:让你以后还敢乱取标题!),很多地方像是css的描述因为过于冗长,所以没在文章内贴出,因为本系列文章的目的是抛砖引玉,并不是纯粹的代码展览。

接下来的系列文章,我还没有明确的主题,如果大家有什么好的建议,可以私信或评论留言,让我们以技术为出发点,探讨交流美好的事物。

11 responses

发表评论