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

现在我们转到下图显示的表单添加帖子,会发现你看不到在其他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的代码。就像主题专用的插件那样,可以使用各种钩子,进行自定义操作。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • 过滤器 Filters 过滤器钩子和动作钩子有很大的区别。它让你可以控制代码的输出。 apply_filters(...
    StevenQin阅读 634评论 0 0
  • 转载注明源自叨叨戚 如题,其实不需正文 有时间再写
    船长戚戈XGeek001阅读 269评论 0 0
  • 尘埃覆盖百年 对酒当歌 作赋吟诗 月光再美也是往日的故事 时光更替 沧桑几许 灰白的墙壁 留下揪心的回忆 珠帘暗锁...
    唐春元ok阅读 366评论 0 3
  • 妈妈 你好,我的妈妈你深爱着我而我却辜负了你的爱,我对不起你。 这个照片是我2岁时拍的,那时的我很...
    0323彬阅读 186评论 0 0