#81 将标题移动到 WordPress
现在是时候将我们的设计迁移到 WordPress 了。我们不妨从上到下开始,从标题开始。除了这是一个合乎逻辑的起点之外,它还意味着我们将查看诸如<head>
之类的内容...
一个关于整个网站重构过程的超级详细旅程。事实上,就是这个网站本身。
现在是时候将我们的设计迁移到 WordPress 了。我们不妨从上到下开始,从标题开始。除了这是一个合乎逻辑的起点之外,它还意味着我们将查看诸如<head>
之类的内容...
伟大的迁移到 WordPress 的旅程正在进行中!我们完成了 header.php 文件,并开始处理 index.php。index.php 负责我们的主页。该文件的第一行是一个 PHP 函数 get_header(),它本质上只是获取...
我们继续将代码从我们的静态模型移植到我们的 WordPress index.php 页面。我们稍微调整了“循环”,以便输出我们想要的内容。
我们已经深入到页面中,WordPress 函数(如get_sidebar()
)显示...
我们首先修复一些图片文件路径。在 WordPress 主题中使用图片时,我总是区分:**这张图片是这个特定主题的一部分吗?或者它在任何主题中使用都有意义吗?**...
如果我们必须选择,单篇博文视图可能是网站上最重要的模板。我们有一个博客文章页面的静态模型,因此我们开始将其迁移到 WordPress。...
我很兴奋能开始处理网站上的图片库区域。它是 V9 中表现特别糟糕的区域之一。它没有获得大量的流量,但也许我们可以扭转这种情况。我喜欢...
我们开始构建图片库标题下方的栏。这个栏有很多工作要做。它告诉人们他们身在何处以及他们在观看什么(面包屑,以一种简单的方式)。它还将包含分页、按钮以及...
图片库中的每一个屏幕截图(或视频)都有它自己的单独页面。您可以轻松地访问它们,只需点击图片本身即可。我们希望使这个页面尽可能地吸引人。我们将在...
在这个视频演示中,我们花了一些时间思考一个单独的图片库屏幕截图页面应该是什么样子。有一些数据我们已经知道了。我们有一个标题。我们有一个描述。...
我们这里有一个 Photoshop 模型可以参考,因为我们继续构建单独图片库页面的模板。
首先,我们为“下一个”和“上一个”链接设置了样式。它们位于...
我们在静态模型中花费了所有这些时间来制作一些聪明的 JavaScript 代码,这些代码可以“平滑加载”图片库中的图片。现在我们有了真实的图片库,以及真实的图片,这些代码就不存在了。
本质上,我们需要...
标题中的搜索区域“有效”,因为它已经设计好了,您可以点击打开和关闭它等等。但它还没有真正进行任何搜索。这很重要,对吧?
在这个网站上,我们使用 谷歌...
我们所有的谷歌自定义搜索引擎都已设置完毕(我们为网站的每个部分设置了不同的搜索引擎)。我们的搜索 UI 已经准备就绪。我们为每个搜索结果子页面准备了模板,以便...
年鉴是在 V9 中推出的一项功能,但一直没有完成。不过,它每天都在越来越接近完成。因此,在 V10 中,我们将根据它已经“完成”的假设进行设计。
我们查看现有的 V9 设计,...
这是一集关于 V10 重构系列的特别节目,主题是**帝国反击战**!
一切都很顺利。我们开始将一些内容从我们的静态模型迁移到我们的 WordPress 模板。我们在...
这是一集关于 V10 重构系列的特别节目,主题是**绝地归来**!
在上一集视频演示中,我们彻底失败了。我们试图使用 wp_list_pages() 为年鉴部分的主页输出一些导航。...
现在,我们已经完成了在年鉴主页上获取适当内容的挑战,我们可以开始使用 CSS 进行实际的样式设计了。
我们决定为该设计的一些部分使用手写字体。我们浏览...
我们在这里快进了一点点。这是一个相当全面的视频演示系列,但它只有 40 个小时左右,当然,这个实际项目实际上更像是几百个小时。在这种情况下,快进...
在这个视频演示中,我们完成了年鉴部分。年鉴中有一个非常清晰的层次结构。它依次是
年鉴主页 属性或选择器字母页面
这些步骤中的每一个都有自己的视图。到目前为止,...
是时候深入研究代码片段区域了!也就是它的实际内容区域。我们已经有了标题。代码片段区域非常受欢迎。无需深入研究分析,我知道从社交媒体和...
现在我们有了代码片段区域主页的 Photoshop 设计。它比以前更具浏览性,但保留了以前彩虹般的精神。现在我们可以开始实际...
我们已经有了页面上需要的所有内容输出,并且标题也已经到位。现在我们可以开始将内容使用 CSS 设计成我们在 Photoshop 中的设计了。
我们做的一件事是...
我们离完成构建网站代码片段区域的主页已经很近了。我们马上就开始调整内容,让更多东西更完善。
我们遇到了一个奇怪的体验,绝对定位的伪元素没有...
代码片段区域的设计已经“完成”——现在我们可以开始进行一些交互性操作了(即 JavaScript)。
我们为左侧的链接添加了一个超级无聊的悬停效果,仅仅是为了做点什么,但我们知道我们会改变...
我非常兴奋能为这个网站处理评论部分。CSS-Tricks 是许多精彩讨论的家园,感谢所有可爱的你们。设计评论部分很重要,因为它需要展示这些精彩的讨论,保持...
我们从这里开始使用 Photoshop 设计评论区域。我们从顶部开始,也就是说,从单个评论本身开始(而不是评论表单)。
我们获取一个头像来处理。我们将使用 Gravatar 服务...
评论的设计可能看起来很简单。确实如此!但我认为简单在这种情况下的确很有效。评论是 CSS-Tricks 的重要组成部分,我希望它们非常易读且舒适。
现在我们要...
在这个视频教程中,我们将回到 Photoshop,设计评论表单本身。也就是说,用户需要填写输入框和文本区域来发表评论。默认情况下,它会放在评论的末尾……
在本视频教程中,我们将深入了解如何使用 HTML/CSS 构建评论表单。评论表单的标记位于我们主题中的 comments.php 文件中。我们查找<form>
元素来找到它。
我们布置……
我们将使用 Google AdSense 在网站上添加一个新的广告区域。我们之前删除了一个 BuySellAds 区域,所以我们并不是要不断添加新广告,直到……
剩下的标题已经完成了!我们现在可以完成它们,并完成所有自定义标题。在本视频教程中,我们将完成 John Neiner 完成的演示部分的自定义标题。
有趣的是,John……
在上一视频中关于我们实际要做哪个标题的奇怪混淆之后,这次我们将真正实现特惠页面的自定义标题!它是由 Meg Hunt 完成的。
就像……
在本视频教程中,我们将在网站上添加一个新的插件,它使我们能够切换实时网站的主题,但只让我们(作为管理员)看到它,而不是普通访问者。
在我们添加……之前
我认为我在之前的视频中说过我们已经完成了所有标题。开玩笑!还剩一个!这个是视频区域的,是由 Alyssa Nassner 完成的。我们已经开始……
在本视频教程中,我们将开始讨论如何构建 CSS-Tricks 的会员区域。让这一切成为可能的 Kickstarter 的一部分是承诺 Kickstarter 支持者将可以访问私有的……