如何给网站添加代码以及修改CSS来改变字体大小等

如何给网站添加代码以及修改CSS来改变字体大小等

作者:DIYzhan.com |  浏览:10035 |  2 条评论
Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

WordPress建立的网站,我们有很多插件可以实现各种功能,但有时候一些功能是要添加代码来实现,在我们要修改字体大小,颜色,页边距等布局时,是要修改主题的CSS规则来实现。

添加代码

给WordPress网站添加代码可以添加在主题的footer.php(尾部),header.php(头部)等能影响全网站的网站文件;如果只想代码在Post,Page等页面起作用,则把代码添加到single.php(文章页), page.php(页面)等对应的网站文件;下面是给WordPress网站增加统计代码的步骤:

  1. 点击外观(Appearance)->编辑(Editor)进入编辑主题(Edit Themes)页面;edit_theme_1
  2. 在编辑主题页面右边,选择该主题的底部文件,一般是Footer,如Vantage主题的底部文件是part/footer.php, 点击打开;edit_theme_6
  3. 在百度统计里面复制网站的统计代码;(网站统计功能一般都是免费的,有百度统计,51.la等统计,注册并按提示添加网站后获得统计代码):edit_theme_4
  4. 在底部文件part/footer.php的底部添加代码,一般是在底部的</body></html>之前,在<?php ….?>之外,添加后点击更新文件(update file);就会在网站下方看到统计图片;edit_theme_7

修改CSS规则

CSS规则主要控制着网站页面标题,内容的文字大小,颜色等;图片,边框等与页面边缘距离也是CSS规则来控制。下面以WordPress网站修改文章标题大小为例:

  1. 使用Google浏览器Chrome打开包含有想修改的文章标题的网站页面;edit_css_1
  2. 选中想修改的文章标题,右键点击,在出来的选项中选中“审查元素”;edit_css_2
  3. 然后在浏览器的下面出现一个页面,里面包含有该页面所有元素对应的代码(在页面左边)和元素所相关的一些CSS规则(在页面右边);edit_css_3
  4. 点击选中标题对应的代码,则右边显示的是与该标题对应的CSS规则,找到控制文字大小的规则:single-title {font-size: 20px;点击数值并修改大小为30px,这时,上方网站的标题文字大小将变化;注意的是,在Chrome里修改只是起到调试作用,要真正生效,要去到(Appearance)->编辑(Editor)里修改CSS规则;edit_css_4
  5. 点击(Appearance)->编辑(Editor)进入编辑主题(Edit Themes)页面;edit_css_5
  6. 在编辑主题页面右边,打开该主题的Stylesheet (style.css),在里面找到控制标题文字大小的规则(搜索在前面Chrome调试时的single-title ),修改文字大小数值,然后更新文件(update file)即可生效;edit_css_6

修改CSS不但可以控制字体大小,还可以修改logo距离上下边框的距离,如果有朋友觉得logo的地方太宽,也可以使用这个方法找到控制logo距离边框的数值,然后修改测试;当然,CSS控制着很多设计到网站的整体风格,要修改局部布局风格,都可以通过这个方法找到相关CSS规则来修改测试下。

原创文章,转载请注明: 转载自DIYzhan.com-从零开始自己做外贸网站和海外网络营销
本文链接地址:https://www.diyzhan.com/2014/03/edit_code_and_css/

相关推荐
更多

评论已关闭。

长按扫我微信
需要帮助?
点击这里给我发消息