#81 将标题移动到 WordPress

时长:13:01

现在是时候将我们的设计迁移到 WordPress 了。我们不妨从上到下开始,从标题开始。除了这是一个合乎逻辑的起点之外,它还意味着我们将查看诸如<head>之类的内容...

观看视频演示

#82 构建 WordPress 主页,第一部分

时长:16:13

伟大的迁移到 WordPress 的旅程正在进行中!我们完成了 header.php 文件,并开始处理 index.php。index.php 负责我们的主页。该文件的第一行是一个 PHP 函数 get_header(),它本质上只是获取...

观看视频演示

#83 构建 WordPress 主页,第二部分

时长:16:35

我们继续将代码从我们的静态模型移植到我们的 WordPress index.php 页面。我们稍微调整了“循环”,以便输出我们想要的内容。

我们已经深入到页面中,WordPress 函数(如get_sidebar())显示...

观看视频演示

#84 将页脚移动到 WordPress

时长:6:06

我们首先修复一些图片文件路径。在 WordPress 主题中使用图片时,我总是区分:**这张图片是这个特定主题的一部分吗?或者它在任何主题中使用都有意义吗?**...

观看视频演示

#86 使用 Photoshop 处理图片库

时长:16:19

我很兴奋能开始处理网站上的图片库区域。它是 V9 中表现特别糟糕的区域之一。它没有获得大量的流量,但也许我们可以扭转这种情况。我喜欢...

观看视频演示

#87 图片库网格化

时长:11:21

我们在 WordPress 中设置了图片库区域,它正在输出我们需要的输出,但页面上几乎没有任何样式。

我们首先回顾一下...

观看视频演示

#88 构建图片库栏

时长:15:52

我们开始构建图片库标题下方的栏。这个栏有很多工作要做。它告诉人们他们身在何处以及他们在观看什么(面包屑,以一种简单的方式)。它还将包含分页、按钮以及...

观看视频演示

#89 调整图片库栏

时长:

在这个视频中,我们对我们已经设置好的栏进行了一系列调整,该栏具有图片库的大部分功能。设计就是关于调整,不是吗?

我们调整了一些填充,使内容对齐...

观看视频演示

#90 在图片库中设置单独的页面

时长:15:01

图片库中的每一个屏幕截图(或视频)都有它自己的单独页面。您可以轻松地访问它们,只需点击图片本身即可。我们希望使这个页面尽可能地吸引人。我们将在...

观看视频演示

#92 构建单独的图片库页面

时长:19:47

我们这里有一个 Photoshop 模型可以参考,因为我们继续构建单独图片库页面的模板。

首先,我们为“下一个”和“上一个”链接设置了样式。它们位于...

观看视频演示

#93 尝试平滑加载图片库页面

时长:7:20

我们在静态模型中花费了所有这些时间来制作一些聪明的 JavaScript 代码,这些代码可以“平滑加载”图片库中的图片。现在我们有了真实的图片库,以及真实的图片,这些代码就不存在了。

本质上,我们需要...

观看视频演示

#94 谷歌自定义搜索设置

时长:18:07

标题中的搜索区域“有效”,因为它已经设计好了,您可以点击打开和关闭它等等。但它还没有真正进行任何搜索。这很重要,对吧?

在这个网站上,我们使用 谷歌...

观看视频演示

#96 搜索结果模板

时长:28:40

搜索有效!只是您访问的模板不太合适。我们需要调整模板,使其看起来正确,并与网站的风格相匹配。

搜索使用的初始模板非常...

观看视频演示

#97 使用 Photoshop 处理年鉴

时长:14:43

年鉴是在 V9 中推出的一项功能,但一直没有完成。不过,它每天都在越来越接近完成。因此,在 V10 中,我们将根据它已经“完成”的假设进行设计。

我们查看现有的 V9 设计,...

观看视频演示

#98 构建年鉴,第一部分

时长:28:14

这是一集关于 V10 重构系列的特别节目,主题是**帝国反击战**!

一切都很顺利。我们开始将一些内容从我们的静态模型迁移到我们的 WordPress 模板。我们在...

观看视频演示

#99 构建年鉴,第二部分

时长:3:19

这是一集关于 V10 重构系列的特别节目,主题是**绝地归来**!

在上一集视频演示中,我们彻底失败了。我们试图使用 wp_list_pages() 为年鉴部分的主页输出一些导航。...

观看视频演示

#100 年鉴样式,第一部分

时长:13:27

现在,我们已经完成了在年鉴主页上获取适当内容的挑战,我们可以开始使用 CSS 进行实际的样式设计了。

我们决定为该设计的一些部分使用手写字体。我们浏览...

观看视频演示

#101 年鉴样式,第二部分

时长:16:50

我们在这里快进了一点点。这是一个相当全面的视频演示系列,但它只有 40 个小时左右,当然,这个实际项目实际上更像是几百个小时。在这种情况下,快进...

观看视频演示

#102 年鉴样式,第三部分

时长:10:26

在这个视频演示中,我们完成了年鉴部分。年鉴中有一个非常清晰的层次结构。它依次是

年鉴主页 属性或选择器字母页面

这些步骤中的每一个都有自己的视图。到目前为止,...

观看视频演示

#109 为处理评论做准备

时长:12:45

我非常兴奋能为这个网站处理评论部分。CSS-Tricks 是许多精彩讨论的家园,感谢所有可爱的你们。设计评论部分很重要,因为它需要展示这些精彩的讨论,保持...

观看视频演示

#111 构建评论线程

时长:37:38

评论的设计可能看起来很简单。确实如此!但我认为简单在这种情况下的确很有效。评论是 CSS-Tricks 的重要组成部分,我希望它们非常易读且舒适。

现在我们要...

观看视频演示

#112 完成构建评论线程

时长:5:25

在上一集视频演示的最后,我们发现我们的 Photoshop 设计,尽管很简单,但存在一个问题,用代码很难克服。回复评论位于同一个...

观看视频演示

#113 使用 Photoshop 处理评论表单

时长:7:08

在这个视频教程中,我们将回到 Photoshop,设计评论表单本身。也就是说,用户需要填写输入框和文本区域来发表评论。默认情况下,它会放在评论的末尾……

观看视频演示

#114 构建评论表单

运行时间: 22:53

在本视频教程中,我们将深入了解如何使用 HTML/CSS 构建评论表单。评论表单的标记位于我们主题中的 comments.php 文件中。我们查找<form> 元素来找到它。

我们布置……

观看视频演示

#115 设置 Google AdSense

运行时间: 13:34

我们将使用 Google AdSense 在网站上添加一个新的广告区域。我们之前删除了一个 BuySellAds 区域,所以我们并不是要不断添加新广告,直到……

观看视频演示

#116 演示的自定义标题

运行时间: 24:37

剩下的标题已经完成了!我们现在可以完成它们,并完成所有自定义标题。在本视频教程中,我们将完成 John Neiner 完成的演示部分的自定义标题。

有趣的是,John……

观看视频演示

#118 使用主题切换插件查看实时网站

运行时间: 12:22

在本视频教程中,我们将在网站上添加一个新的插件,它使我们能够切换实时网站的主题,但只让我们(作为管理员)看到它,而不是普通访问者。

在我们添加……之前

观看视频演示