从0到1制作WordPress主题#9添加functions.php和缩略图

现在我们转到下图显示的表单添加帖子，会发现你看不到在其他WordPress主题或其他WordPress网站上看到过的特色图片框。原因是我们没有包含该功能。
后台表单
1、进入我们的主题文件夹simple，我们将创建一个叫functions.php的文件¹，用于放置一些钩子和一些自定义功能，通过它可以挂钩某些代码，注册一些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页面，除了评论之外，我们设置了单个帖子页面，我们稍后会做评论的设置。但是，在下一节中，我们将学习如何创建菜单并开始处理页面和帖子。

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

从0到1制作WordPress主题#9添加functions.php和缩略图

猜你喜欢