如何为基于 wordpress 自定义主题的网站进行响应式设计？

Posted 2023-03-05

【中文标题】如何为基于 wordpress 自定义主题的网站进行响应式设计？

【英文标题】：How to make responsive design for the website built on wordpress custom theme?

【发布时间】：2019-03-08 05:25:21

【问题描述】：

我正在开发一个网站（基于 WordPress 自定义主题），我必须在其中进行响应式网页设计。

在那个网站上，我必须从 PSD 复制移动设计，以便它在所有设备上看起来都不错。

问题陈述：

该网站建立在 wordpress 自定义主题之上。

为了使网站具有响应性，我所做的是在检查后查看 html 代码，我在 wordpress 的 Additional CSS section 中编写了 CSS 代码。

这是我创建的示例fiddle （其中的 HTML 代码是从网站的检查部分复制的）。

小提琴的 HTML 代码来自网站的检查部分，我在 wordpress 网站的 Additional CSS 部分添加了 CSS 代码。

我使用的 HTML 代码的 sn-ps 是：

<tr class="alt">
       <td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
       <a href="">Hello World</a></td><td id="gv-field-6-31" class="gv-field-6-31">McMaster University</td><td id="gv-field-6-25" class="gv-field-6-25"></td>           
</tr>

<tr class="">
       <td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
       <a href="">Hello Universe</a></td><td id="gv-field-6-31" class="gv-field-6-31">TÉLUQ</td><td id="gv-field-6-25" class="gv-field-6-25">Open Category</td>         
</tr>

我的问题是，它是否是为基于 wordpress 自定义主题的网站制作响应式网页设计的正确方法？

【问题讨论】：

约翰，我认为你在正确的轨道上。您已将 CSS 放在 Additional CSS 部分。如果您的主题更新，其他 CSS 部分或子主题 CSS 将不会被覆盖。根据小提琴，您已经使用了媒体查询。所以我认为你走上了正轨。

@HamzaAhmad 嗨 Hamza，我有一个类似的 question。我想知道你是否可以看看。它与插件 css 相关。我的网站之前运行正常，但不知何故，添加 css 出现在移动视图中，导致设计完全改变。我不确定这些额外的 CSS 代码是如何出现的。

【参考方案1】：

这将有两个部分。

对于响应式设计，您走在正确的道路上。您在 CSS 中使用媒体查询，没有问题。问题可能来自于尝试构建一个尚未响应的自定义主题。但如果您还没有阅读过移动优先设计，我建议您阅读一下。

我们大多数人所做的就是编写 HTML 和 CSS 主题，然后通过创建自定义主题将其与 Wordpress 相结合。您可以通过两种方式创建自定义主题：

Child Theming

子主题是继承另一个主题（称为父主题）的功能和样式的主题。子主题是修改现有主题的推荐方式。

您要选择什么主题由您决定，但理想情况下，您希望选择与您在 Photoshop 中创建的设计尽可能相似的子主题。

Or by creating your own theme(Link to great starter playlists.) 还有一些模板可以用来开始你的主题开发，例如underscores

好的，因为您有一个正在处理的自定义主题，您可以选择直接编辑该主题（如果您不知道主题创建者，我建议您不要这样做），从自定义创建一个子主题主题，或者只是创建一个看起来相同的新主题（如果您不认识主题作者，我会小心这样做）。

对于 CSS，新的设计标准是使用 flexbox 或 CSS 网格。 Here's a great article on those.

您也可以使用 CSS 框架，您有两种选择：

基于组件的 CSS 框架

这是有预构建组件的时候，例如导航、文章，有时还有模态框。

基于组件的框架列表

引导程序 基础 布尔玛 物化

或者你可以使用一个实用的css框架，比如tailwind css。实用程序框架让您可以更好地控制 css 的外观，而无需实际编写大量 css，只需将各种预制类添加到您的 html 结构中。

For a better explanation on Utility frameworks go here.

【讨论】：

感谢您的详细解释。我已经从 Hamza 上面问过这个question。我想知道你是否也可以看看。它与插件 css 相关。我的网站之前运行正常，但不知何故，添加 css 出现在移动视图中，导致设计完全改变。我不确定这些额外的 CSS 代码是如何出现的。