17713433920 info@mac163.com

使用WordPress建立您的网站的最大好处是,即使他们对编码或网页设计没有任何知识,任何人都可以做到。活跃网站超过1.72亿,其中约7500万正在使用WordPress。

尽管如此,它有助于了解一些编码。WordPress为您提供基本工具,第三方网站提供了预制的编码,您可以复制和粘贴它们以获得预设外观。但是,许多企业网站所有者仍在寻求在超文本标记语言(HTML)和级联样式表(CSS)方面具有专业知识的网络设计师和网络开发人员的服务,以帮助他们的企业脱颖而出,并提供不仅仅是统一的网站客户所能看到的内容来自其他竞争对手。

如果您了解基本的HTML并想稍微调整一下预设,那么就像从“可视”选项卡切换到“文本”选项卡一样简单。HTML涉及非常基本的编码,但是使用起来会很累并且令人困惑。一个小小的更改,例如将标题颜色从黑色更改为蓝色,要求您为每篇文章编写说明。这是CSS出现的地方。

什么是CSS?

简而言之,CSS设计HTML的功能,但是以一种更简单的方式将其应用于您的所有帖子,而不仅仅是一篇。您不必为要应用某种字体颜色,大小,对齐方式或任何其他因素的每个页面或元素编写相同的命令,而是只需添加一次CSS即可立即应用于所有内容,而无需手动在一个标签中编码每个属性。通过创建一个类或ID简化这些任务,使Web设计人员可以更轻松地构建功能强大且美观的用户网站。

如何将自定义css添加到wordpress驱动的网站
如何将自定义css添加到wordpress驱动的网站

例如,查看此Mashable文章的屏幕截图。仅HTML不能格式化这些照片,使标题显示在底部边框,然后将鼠标悬停在其上方时标题会消失。您必须使用CSS。

在这种情况下,只需添加一次CSS,然后将其应用于所有页面和元素,就可以节省您的时间和精力。获得有效CSS编码的最佳方法是聘请销售网页设计服务的图形设计师或自由职业者。但是,如果您想自己做,可以通过以下方法添加自己的CSS。

如何添加自定义CSS

将自己的CSS添加到WordPress并不像编辑主题布局的特定部分然后粘贴自己的代码作为替换那样简单。正确编辑和添加自定义CSS的方法有四种,这是应该使用的时间。

方法1:WordPress定制程序

WordPress定制器功能允许您控制网站的外观。它具有学习曲线,您可能不需要自定义站点的所有功能,例如导航菜单和主题颜色,但是如果您要自定义CSS,这可能会很有用。

它是WordPress核心功能的一部分,因此您无需设置或安装任何其他插件。一些亲自编码的人如果在每个步骤中都能看到更改,可能会更好地工作,因为它可以实时预览站点的更改。如果您还担心忘记编码中的{或/,那么您就有一个可以不断验证代码的工具,这样您就永远不会出错。

首先,打开WordPress Customizer。在仪表板上,将鼠标悬停在外观上,然后从下拉菜单中选择自定义。在WordPress自定义侧边栏中,选择其他CSS。

从那里,将出现一个框,您可以在其中添加自定义CSS。在右侧,您可以实时预览代码将如何影响您的网站。如果您在语法上有误,则会立即将您的错误通知您。完成后,选择发布。

但是请注意,自定义CSS与添加自定义CSS时所具有的主题相关。如果您决定更改主题,则需要再次处理并将自定义CSS粘贴到新主题中。

方法2:简单的CSS插件

GeneratePress和其他可帮助处理WordPress主题的插件的创始人汤姆·乌斯伯恩(Tom Usborne)开发了一个名为“简单CSS”的插件。它旨在利用WordPress Customizer中的其他CSS功能以及其他功能(例如向特定帖子中添加自定义CSS)来完成所有工作。如果您决定更改网站的主题,则简单CSS插件不依赖于当前主题,而是会将自定义CSS引入新主题。

您可以通过三种方式打开此功能。首先,在WordPress仪表板上,选择“外观”,然后在WordPress Customizer仪表板上,选择“自定义”。选择简单CSS选项。使用此方法的优点是您可以实时预览代码-与第一种方法非常相似。

第二种方法是在“外观”选项下简单选择“简单CSS”。您将被带到类似于WordPress Customizer中的完整编辑器。第三,如果要向特定帖子添加自定义CSS,只需创建一个新帖子或编辑现有帖子即可。在添加内容的WordPress编辑器下面,您会看到一个标有“简单CSS”的框。在此处添加CSS,然后保存。

即使安装了插件,您仍然可以在WordPress Customizer中使用附加CSS功能。如果您容易在代码中犯错误,我建议您使用此代码,因为Simple CSS不会像这样跟踪任何编码错误。

您应该处理自己的CSS吗?

如前所述,WordPress的构建方式使那些没有HTML和CSS技能的人仍然可以构建自己的网站。但是,大多数企业都希望调整主题的某些部分以创建独特的外观。

CSS控制着您网站的很大一部分。如果不确定CSS的工作方式,最好不要匆匆浏览一些网站并更改CSS,尤其是当您想更改代码的很大一部分时。考虑一下如果您犯了一个错误,您的网站将遭受的巨大后果。如果您对CSS一无所知,最好只问问有帮助的人。

如何选择最有效的方法

您有足够的CSS工作知识,就可以使用任何可能的方法开始在WordPress网站上工作。提到的两种方法都有其自身的优点和缺点,因此请选择最适合您需要的一种。

如果您是小型企业主,需要更改字体,对齐方式或很小的视觉外观等您认为会更好的方式,那么使用WordPress Customizer可能就足够了。此功能的最好之处在于它不仅非常基础,而且还具有验证功能,以确保您不会犯错。如果您是新手并且不熟悉CSS,那么此功能非常重要。

另一方面,如果您要出售网页设计服务或管理客户的网站,则使用Simple CSS的好处可以使您的工作轻松得多。最好只使用一个CSS插件,这样对于您自己或下一个想要更改某些设置的Web设计人员来说,它都更加友好。

总而言之,如果您想在站点范围内更改某个模块的样式或要添加某个类,建议使用WordPress Customizer。但是,如果只想编辑一页的CSS编码,则使用简单CSS可以帮助您处理特定的文章。

启动网站时,WordPress功能提供了基本主题和工具来帮助您入门。但是要真正脱颖而出,您将需要调整一些部分,这可能需要使用CSS。无论选择哪种方法,除非您真正了解CSS的工作原理,否则请不要尝试自行处理CSS。请记住,这是您的在线商务网站;如果您做不到,请交给有能力的人。


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部