WordPress新手入门教程之主题修改篇

转载  知更鸟   2016-08-27 11:14:36 发布  技术文档

具体操作方法

如果你已安装火狐并已添加Firebug扩展,可以继续往下看如何具体修改Wordpress主题。

■ 修改页面元素的文字大小

以修改HotNews Pro主题CMS布局,最新文章标题文字大小为例:

鼠标停在最新文章标题上,右键调出菜单选择“使用Firebug”查看元素(如图)

火狐的扩展:Firebug_boke112导航

之后默认会在火狐浏览器底部调出Firebug窗口,左侧显示的是当前网页元素的HTML结构,右侧是当前元素选择器的样式属性和所在的文件及行数(如图),在style.css文件的第277行。

WordPress主题修改菜鸟教程_boke112导航

用上面介绍的文本编辑软件,打开主题style.css文件在277行找到:

  1. #post h3 {
  2. font-size13px;
  3. font-weightbold;
  4. }

修改其中的数字13,为自己认为合适的大小即可。

如果当前元素选择器的样式中没有控制字体大小的 font-size: 13px; 属性,而是使用的全局字号设定,可以为其单独加上这个 font-size: 13px; 属性

看了上面的一个实例,是不是很简单,修改主题样式,关键是要找到所需修改元素选择器名称及样式属性的位置。

本人在修改主题模版时也用同样的方法,没有Firebug扩展的仙人指路,就是修改自己作的模板也决不是一件易事。

■ 如何确定某个网页元素(模块)的整段代码,便于调整位置。

以HotNews Pro主题导航菜单移动到LOGO下面为例:

首先,用上面的方法确定导航菜单最外层的选择器名称为:top

然后,用Notepad++文本编辑器,打开主题顶部模板header.php,搜索查找top位置,并用鼠标点击该选择器,会发现Notepad++已为我们明确标示了该段代码开始和结束的位置(如图):

WordPress主题修改菜鸟教程_boke112导航

下面的就简单了,用同样的方法找到导航菜单下面元素最外层的选择器结束的位置将代码移动至此即可。

以上就是修改模板的基本方法和步骤,所谓的高手基本都这么折腾模版,如果你花一两天时间学一下DIV+CSS相信会更得心就手,

这里要提醒大家:制作一款主题不容易,作者为此付出了无数的不眠日夜和汗水,请大家尊重作者的辛苦劳动,修改主题模版请保留作者版权链接,不要做让大家BS的无耻之人。

你可能感兴趣的文章

文章标签: ,  
版权声明:本文为转载文章,来源于 知更鸟 ,版权归原作者所有!转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!

发表评论

  1. 微商之友
    微商之友 @回复

    楼主懂Wp 程序么,我那出问题了,凡是评论过的文章打开很慢基本都打不开了,求帮助!

    • 懿古今
      懿古今2016-08-27 16:40  回复

      @微商之友一般都不会出现这种问题,网页打开速度除了跟主机有关之外,跟主题也有一定的关系,你可以问问贵站所使用的主题开发者

  2. 我爱动感单车网
    我爱动感单车网 @回复

    制作一款主题,估计绝大多数人弄不来。哪怕是在现成主题的基础上,要做些修改,对于我来说都难得很啊!

    • 懿古今
      懿古今2016-08-27 16:39  回复

      @我爱动感单车网只要勤于动手折腾,小修小改还是可以做到的

      • 我爱动感单车网
        我爱动感单车网2016-08-29 13:24  回复

        @懿古今我目前也就只能做些小小的修改,稍微大点的就实在是弄不来了 [憨笑] 。

  3. 憧憬Licoy
    憧憬Licoy @回复

    一般都是使用chrome进行调试的

    • 懿古今
      懿古今2016-08-27 16:39  回复

      @憧憬Licoy好像除了IE好像其他浏览器都可以

      • IE也有调试工具
        IE也有调试工具2016-08-27 19:05  回复

        @懿古今这话就有点不对了,IE 11和Edge都有即时调试功能的好不好!?
        他们的快捷键都是F12,你可以去证实下。IE,8,9都有。
        对于谷歌,调试工具全中文。对小白交互性更好。谷歌的有一部分还是English

  4. 易淘金股票博客
    易淘金股票博客 @回复

    谢谢分享经验

  5. 热腾网
    热腾网 @回复

    现在改代码用Notepad++,调试用谷歌浏览器。其他的什么也没装。

    • 懿古今
      懿古今2016-08-28 13:05  回复

      @热腾网我也是用Notepad++,浏览器就是360和火狐

      • 我爱动感单车网
        我爱动感单车网2016-08-29 13:27  回复

        @懿古今浏览器,近几年我也一直使用的是360浏览器,搜索的话则基本上用百度搜索,360搜索很少用(觉得比较难能够搜索到自己想要的内容)。

      • 橘子书
        橘子书 2016-08-31 00:57  回复

        @懿古今我好像一直用emeditor。n++很少使用,界面不习惯。

  6. 网赚博客
    网赚博客 @回复

    多谢分享

  7. 搬瓦工
    搬瓦工 @回复

    刚接触那会 基本啥都不懂

  8. 黑蚁博客
    黑蚁博客 @回复

    支持