美文网首页
从0到1制作WordPress主题#9添加functions.p

从0到1制作WordPress主题#9添加functions.p

作者: 埼玉是个逗B | 来源:发表于2018-09-19 12:47 被阅读38次

    现在我们转到下图显示的表单添加帖子,会发现你看不到在其他WordPress主题或其他WordPress网站上看到过的特色图片框。 原因是我们没有包含该功能。


    后台表单

    1、进入我们的主题文件夹simple,我们将创建一个叫functions.php的文件[1],用于放置一些钩子和一些自定义功能,通过它可以挂钩某些代码,注册一些widgets,动态的实现一些基础功能。
    2、在functions.php中添加以下代码并保存:

    <?php
    function simple_theme_setup(){
        // Featured Image Support
        add_theme_support('post-thumbnails');
    }
    add_action('after_setup_theme', 'simple_theme_setup');
    

    回到写文章的页面刷新一下,我们会看到右下角已经多了一个特色图片的功能:

    特色图片

    我们来看看刚刚发生了什么:

    • 首先创建了一个叫simple_theme_setup的自定义函数
    • 注释该函数是用来添加特色图片的
    • 然后调用了一个名为add_theme_support的函数,并传入一个叫post-thumbnails的参数(现在这个函数并不会运行)
    • 使用add_action和某些钩子来运行这个函数(这里add_action的第一个参数是名叫after_setup_theme的钩子,第二个参数是我们自定义的需要运行的函数)

    3、现在,为了方便学习,我将之前文章中插入的图片删除,然后在特色图片中选择一个图像并将其保存,然后单击更新。
    现在我们转到前端刷新页面,我们并没有看到它,因为我们没有将它添加到我们的index.php文件中。
    4、打开index.php,在meta下面添加代码,如下所示:(不是一定要在index页中显示图像,可以根据需要在单页中显示它,也可以让它在两个页面都显示)

    <div class="meta">
        Created By <?php the_author(); ?> on <?php the_time('F j, Y g:i a'); ?>
    </div>
    <?php if(has_post_thumbnail()) : ?>
        <div class="post-thumbnail">
            <?php the_post_thumbnail(); ?>
        </div>
    <?php endif; ?>
    

    保存代码,返回前端页面刷新,会看到meta元数据下方多了一张图片:


    缩略图出现了

    5、现在,图片看起来有点偏离,因为它在整个页面上没有达到100%宽度。打开样式表在CSS中添加100%的宽度。

    .post-thumbnail img{
        width:100%;
        height:auto;
    }
    

    刷新前端页面,我知道现在图片真的很大,但后面我们会增加一个侧边栏,它会缩小一些。

    6、现在我想让单个帖子页面也显示图片,我们从index.php中复制代码粘贴到single.php中的meta下面,保存并刷新前端页面就能看到一样的图片了。

    7、在index页面上的帖子中,它显示了整个内容,但我们只想显示一部分内容。在index.php中,我们用the_excerpt替换the_content,代码如下:

    <?php the_excerpt(); ?> 
    

    它将内容削减到约55字。 你也可以自定义它,并根据需要加长或缩减,这实际上非常简单:
    找到functions.php文件,在之前的代码下方创建一个自定义函数,如下所示:

    // Excerpt Length
    function set_excerpt_length(){
        return 33;
    }
    
    add_filter('excerpt_length', 'set_excerpt_length'); 
    

    此时文章内容就被削减到33个字了;这次我们使用的是add_filter ,其通常用于改变某些东西;而之前使用的 add_action 通常用来添加东西或创造东西。
    返回前端重新加载页面,我们可以看到它只有33个字长。

    33个字长度

    现在我们已经设置好了index页面,除了评论之外,我们设置了单个帖子页面,我们稍后会做评论的设置。 但是,在下一节中,我们将学习如何创建菜单并开始处理页面和帖子。


    1. function.php是为了写PHP代码而存在的。把大量的PHP代码和模板HTML混合在一起,并不是一个好的方法,会导致模板难以维护,function.php模板就是为了解决这个问题而存在的。在初始化主题前,先会执行function.php的代码。就像主题专用的插件那样,可以使用各种钩子,进行自定义操作。

    相关文章

      网友评论

          本文标题:从0到1制作WordPress主题#9添加functions.p

          本文链接:https://www.haomeiwen.com/subject/rwfinftx.html