php发展

首页 » 常识 » 常识 » WP主题开发21wordpress主题怎
TUhjnbcbe - 2024/6/24 16:18:00
白癜风治疗的有效医院 https://jbk.39.net/yiyuanfengcai/tsyl_bjzkbdfyy/

通过前面的20章节,我们完成了wordpress主题trans的开发制作。但是,我们在trans主题的前台页面中,还有一个小细节没有处理,就是前台页面的dashicons字体小图标的调用(如下图)。在wordpress3.8版本前,我们想要在wordpress主题中使用达到dashicons字体小图标的效果,要么使用调用网络字体资源,要么通过图片的形式来实现。wordpress3.8版本以后,就内置了dashicons字体图标的功能,我们只需在wordpress主题开发时,直接调用就可以了。

那么,怎样在wordpress主题中调用dashicons字体小图标呢?

一、调用wordpress自带的dashicons字体样式文件。

wordpress自带的dashicons的样式文件在\wp-includes\css目录下,所以,我们要在前台页面head头部代码的wordpress主题样式文件style.css的前面插件如下代码:

linkrel=stylesheethref=?phpbloginfo(wpurl);?/wp-includes/css/dashicons.css

一定要把这个调用代码放在style.css调用的前面(如下图),反之,dashicons.css会有可能影响到style.css样式的实现。

二、在wordpress主题前台页面调用dashicons字体小图标。

在wordpress主题的代码中调用dashicons字体小图标,都是通过dashicons.css提供的元素class类来实现的,可以通过以下2种方式来实现。

方法1:当前标签元素自己添加dashicons的class类。

这种方法,必须使用dashicons-before这个class类,意思是“在当前元素前面使用dashicons字体小图标,然后,再添加一个dashicons小图标类。如:

pclass=dashicons-beforedashicons-visibility眼睛/p

这里,我先添加dashicons-before类,再添加了一个眼睛的图标类dashicons-visibility,一般用于页面浏览量。

方法2:当前元素内部添加子元素,给子元素添加dashicons类。

也就是在当前元素的内容前面添加一个子元素,然后台给这个子元素调用dashicons字体小图标。如:

pspanclass=dashiconsdashicons-smiley/span笑脸/p

这里,dashicons是dashicons小图标的全局样式,dashicons-smiley是笑脸小图标类,页面会显示一个笑脸。

三、手动修改dashicons字体小图标的样式。

有时候,我们可能有不同的需求,想让这些dashicons小图标变大一点,或者改变一下它们的颜色。怎样么修改呢?其实很简单,因为这些dashicons是字体,不是图片,所以,我们可以像修改字体样式一样,来修改这些dashicons小图标的样式。当然,是在我们自己创建的style.css样式文件中修改,而不是去修改dashicons.css文件,这就是为什么在head中要把dashicons.css调用放在前面的原因。如:

.dashicons-smiley{color:red;font-size:20px;}

上句,就是把笑脸小图标的颜色改成了红色,大小改成了20像素。

四、dashicons字体小图标大全。

为了方便大家在wordpress主题开发中使用dashicons字体小图标,这里,我们把dashicons提供的所有字体小图标的class类及样子展示给大家。

因为代码太多,所以,这里就提供一个

1
查看完整版本: WP主题开发21wordpress主题怎