模板和css-正确的编程实践？

时间：2017-08-05 作者：Murkantilism

我随意地使用WP/html/css已经有很长一段时间了，但之前从未深入研究过，我对良好实践有一些疑问。

My Background - 如果不感兴趣，请完全跳过此选项

我暂时被留下来负责一个WP网站，因为我们正在寻找另一个专业的webdev来取代之前的webdev。我是一名软件工程师，但我的教育和工作经验从来没有太多涉及html/css-唯一的经验是构建自己的portfolio website 也许在学校有一两个班级项目。

随着我添加功能和内容，我一直在深入研究前开发人员的代码和模板的组织。很多似乎都是不好的实践和对一般CS原则的不好使用，但我没有足够的经验来知道这些东西是“唯一的方法”还是在这个特定领域的实际良好实践。

Questions

<模板中是否应该有硬编码的值

例如，我创建了一个新页面，将我们的第三方店面直接集成到我们自己的域中，因此我必须更新链接到该商店的整个网站上的按钮。只有2到3个地方需要更新，但这一页不会收到更改。在发现URL被硬编码到这个页面使用的模板中的按钮之前，我翻遍了整个网站——我的坏习惯警钟响了。有类似的硬编码值，如域上托管的图像文件的URL，用于标题或背景或w/e，跨越大量模板。

Answered: <页面和帖子的代码应该是混合的吗

Update: （来自下面的评论）

基于this documentation 该代码的第一行只是一个贴子标记，主题样式表中的CSS代码将应用于带有该标记的贴子。我是否误解了这里的术语？也许“帖子”和“页面”是前端术语<?php post_class(); ?> 与文字帖子无关

我是否需要为我想要应用特定CSS样式的每个页面硬编码ID

假设页面“内容”分配了模板A（对应于page-A.php）。模板A使用get\\u Template\\u part（）获取模板A-modified（在say../Template parts/A-modified.php下）

我去做了一个“内容新”页面，使用与“内容”相同的模板a。由于没有对这个新页面进行任何修改，标题中的一些内容已经被弄糟了。基于此SO thread 我发现CSS样式表中的每个地方都有“Content”的ID（比如111），我必须将该行复制为“Content New”的ID 222，如下所示：

.page-id-111 .entry-header img,
.page-id-222 .entry-header img {
        width: 100%;
        left: 0;
}

必须在样式表中这样做不到20次，才能使“Content New”的标题看起来像“Content”。同样，这似乎是一种糟糕的做法，无论何时，只要您想使用现有模板/功能（或更改应用于现有模板的模板），都会让您感到头疼。没有更好的方法可以将相同的CSS应用到使用模板A的所有页面吗？

感谢所有读到这篇文章的人，为这本小说道歉。对于这些类型的问题，我都找不到可靠的答案，大多数是人们给出更糟糕实践或糟糕代码答案的线程。

1 个回复

最合适的回答,由SO网友:Tim Elsass 整理而成

不，不要硬编码CSS中页面的ID。您可能希望在其他地方使用相同的样式，或者如果为用户缓存了样式表，则如果您不对样式表进行版本设置，用户可能不会立即看到您所做的更改。不仅如此，从长远来看，这使得解读你的风格变得更加困难！

是的，如果你不习惯WordPress，术语可能会有点混乱。从技术上讲，一个页面实际上是一篇帖子，其他很多东西也是。如果页面模板包含对post\\u class（）的调用，则core中的类将输出到使用post\\u class（）的标记上。这对于以特定帖子类型/格式的显示为目标，或者有条件地向其中添加您自己的类，并为不同上下文中的不同显示提供过滤器，都很有用。

有几种方法可以根据元素的来源以及您希望您的风格在WordPress中延续的方式来确定这些元素的目标。

在您的情况下，是的，您可以对ID进行硬编码，但我并不认为这是一个好的选择，但这只是我的观点。如果您的计划是创建新内容，并且最终完成后，您将删除使用相同模板的旧内容页，那么最好同时使用新名称创建一个新的页面模板。一个body类将应用于该模板上的特定样式，因此您可以为此编写CSS定义的命名空间：

.page-template-your-custom-template .entry-header img,
.page-template-your-custom-template .entry-header img {
    width: 100%;
    left: 0;
}

然后，您就会知道您正在为该模板专门设置样式，并且不会在将来混淆自己。您不必返回管理员处查看某个页面使用的是什么页面模板，阅读样式表会更有意义。

就像post\\u class（）方法一样，还有body_class() 方法将类添加到body元素。另一种选择是有条件地向页面添加body类，这样您就可以处理它了。

例如：

自上而下工作，可能在主题的标题中。php上有一个body\\u class（）方法<body>.

您可以使用body_class filter, 然后检查要使用的页面IDis_page() 在您的功能中。php文件-例如：

function theme_namespace_your_body_class( $classes ) {
    if ( is_page( array( 111, 222 ) ) ) {
        $classes[] = \'your-custom-body-class\';
    }
    return $classes;
}
add_filter( \'body_class\', \'theme_namespace_your_body_class\' );

现在不要写这样的东西：

.page-id-111 .entry-header img,
.page-id-222 .entry-header img {
    width: 100%;
    left: 0;
}

您的样式表将具有：

.your-custom-body-class .entry-header img {
    width: 100%;
    left: 0;
}

因此，一旦您完成了所有修改，如果您需要将这些样式应用于其他页面、帖子、模板或其他内容，您可以简单地修改上述方法以包含其他页面ID，或者根据上下文使用各种WordPress条件将这些相同样式应用于其他地方。

此外，如果有人缓存了样式表，那么您不会强迫自己在每次进行小的更改以破坏缓存时更新样式表版本号。您的PHP代码指定要应用哪些类，并说明这是该页面、帖子或任何内容的结构，而您的样式表仍然是一个样式表，控制这些上下文中的内容实际应如何显示。

从这个顶层开始，同样的事情也可以在post\\u class（）层上进行更深入的操作，并使用以下内容is_single() 检查查询中的帖子是否针对要在该元素上包含类的ID。例如：

function theme_namespace_your_post_class( $classes ) {
    if ( is_single( array( 111, 222 ) ) ) {
        $classes[] = \'your-custom-post-class\';
    }
    return $classes;
}
add_filter( \'post_class\', \'theme_namespace_your_post_class\' );

现在，使用post\\u class（）方法的元素将有条件地为这些post id包含该类。

就像创建一个新的页面模板一样，您可以对帖子执行此操作。您可以创建一个类似于自定义帖子的文件。php并指定它仅供帖子使用：

<?php
/*
 * Template Name: Your custom template
 * Template Post Type: post
 */

或者，您可能希望相同的模板能够用于页面和帖子：

<?php
/*
 * Template Name: Your custom templatee
 * Template Post Type: post, page
 */

在扩展主题时，您一定要仔细研究WordPress模板层次结构，最适合您的可能是一个完全不同的解决方案，但这肯定会帮助您了解哪些内容属于哪里，以及如何更好地构建主题。查看入门主题，例如_s, 甚至是二十岁以上的任何一位，看看他们是如何组织事情的，也是了解一些最佳实践和做事方法的好方法。

这并不意味着对样式使用页面或帖子ID是绝对禁止的或不好的做法，但我相信在99%的情况下，这是没有必要的。

结束

小码农CODE

模板和css-正确的编程实践？

相关推荐

Css管理栏中的“Customize”按钮