如何在WordPress中添加自定义字体
自定义字体可以使网站变得新颖,并使它脱颖而出。
相信许多用户都想要为自己的网站添加自定义字体。
今天我们将通过这篇教程为大家介绍运用Typekit和CSS3@Font-Face method在Wordpress主题中添加自定义主题已经成为一种普遍的趋势。
实际上有的主题中加载了很多的自定义字体。
但是加载太多的字体会使得你的网站变慢。
所以今天我们要跟您分享正确加载自定义字体的方法,不至于使得网站变慢。
在添加自定义主题之前,我们首先要了解如何获取自定义主题。
付费字体一般都比较贵,但是我们可以在很多地方找到免费字体,比如:Typekit,FontSquirrel,fonts.com 等。
WordPress中添加自定义字体Typekit中有付费和免费的字体,你可以使用付费的订阅也可以使用有限的免费的订阅。
首先注册Typekit账号并登陆,然后创建一个新的工具包:然后选择一个你想要使用的字体,点击所选字体下方的“+Use fonts”按钮如何在随后进入如下界面:点击选择当前的工具箱,进入新的窗口,在这个界面,需要我门做的有:1、点击“Publish”按钮。
2、点击右上角Embed Code选项和左边栏中第一项中的Usingfonts in CSS按钮,复制界面中出现的两行Embed Code代码和要用到的CSS代码到txt文件并保存(之后会用到)。
然后回到你的WordPress管理界面,点击进入安装插件界面,安装并启用 Typekit Fonts for WordPress 插件。
插件启用完成后,点击设置目录下的TypekitFonts选项,然后复制之前保存的Embed Code代码到插件设置界面,然后添加如下代码到主题样式表中:h1 .site-title {font-family: 'modesto-condensed', Arial,sans-serif;}(代码中的'modesto-condensed',是随着选择字体的不同而不同的。
该信息在之前txt文件中有保存。
)还可以通过修改大括号之前的内容来设置运用字体的位置。
用CSS3@font-face在WordPress中添加自定义字体运用CSS3@font-face是添加WordPress自定义字体最直接的方法。
首先你需要下载你喜欢的字体,并在你的主题或子主题目录下新建一个文件夹,命名为“fonts”然后上传字体到该文件夹。
上传完成后,你还需要用CSS3@font-face将字体加载到你的主题样式表中,代码如下:@font-face {font-family: Arvo;src:url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);font-weight: normal;}(不要忘记修改代码中font-family和url的值)加载完成后我们将可以通过如下代码实现对字体的使用。
如何更改wordpress顶部菜单栏的字体大小
展开全部 如果说是只有一个HTML页,直接放在wordpress目录里不会有影响。
需要在你的wordpress博客链接到此页面的话,你可以在wordpress编辑主题代码,一般在“边栏”里加一个超链接,(我是说在适当位置写,而不是添加wordpress里的”页面“)。
如果说是一个web项目,那么要创建一个文件夹,整套代码放里面。
访问时要通过http://域名/文件夹名/ 。
需要在博客添加链接,方法同上。
...
wordpress后台文字怎么修改
wordpress后台文字的修改方法//修改控制板的字体function Bing_admin_lettering(){echo'*{font-family:"Microsoft YaHei" !important;}';//更改字体}add_action('admin_head', 'Bing_admin_lettering');修改 font-family 属性,改成自己喜欢的字体,默认是改成微软雅黑。
把上面的代码添加到主题的functions.php的最后一个 ?>;前。
wordpress我主题style.css没有font
后台文章编辑框添加按钮,可以通过下面的代码实现 。
把这个代码放到主题functions.php文件里。
//增强编辑器开始 ,将代码放到function.php文件中function add_editor_buttons($buttons) { $buttons[] = 'fontselect'; $buttons[] = 'fontsizeselect'; $buttons[] = 'outdent'; $buttons[] = 'indent'; $buttons[] = 'copy'; $buttons[] = 'paste'; $buttons[] = 'cut'; $buttons[] = 'backcolor'; return $buttons; } add_filter("mce_buttons_3", "add_editor_buttons");具体添加哪些按钮,可参照下面这些。
wordpress编辑器按钮调用的Key:1.剪切(cut)复制(copy)粘贴(paste)撤销(undo)重做(redo)居中(justifycenter) 2.加粗(bold)斜体(italic)左对齐(justifyleft)右对齐(justfyright) 3.两端对齐(justfyfull)插入超链接(link)取消超链接(unlink)插入图片(image) 4.清除格式(removeformat)下划线(underline)删除线(strikethrough) 5.锚文本(anchor)新建文本(newdocument) 6.字体颜色(forecolor)字体背景色(backcolor) 7.格式选择(formmatselect)字体选择(fontselect)字号选择(fontsizeselect) 8.样式选择(styleselect)无序列表(bullist)编号列表(numlist) 9.减少缩进(outdent)缩进(indent)帮助(wp_help) 10打开HTML代码编辑器(code)水平线(hr)清除冗余代码(cleanup) 11.上标(sub)下标(sup)特殊符号(charmap)插入more标签(wp_more) 12.插入分页标签(wp_page) 13.隐藏按钮显示开关(wp_adv) 14.隐藏按钮区起始部分(wp_adv_start) 15.隐藏按钮区结束部分(wp_adv_end) 16.拼写检查(spellchecker)
wordpress标签云怎么设置
实现Wordpress彩色标签云在相应主题的functions.php加入下面的代码,位置刻意在?>;前面:function colorCloud($text) {$text = preg_replace_callback('||i','colorCloudCallback', $text);return $text;}function colorCloudCallback($matches) {$text = $matches[1];$color = dechex(rand(0,16777215));$pattern = '/style=(\'|\”)(.*)(\'|\”)/i';$text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);return "";}add_filter('wp_tag_cloud', 'colorCloud', 1);修改Wordpress彩色标签字体大小,排序,显示数量等。
文件位置在wp-includes下的category-template.php 文件中,搜索wp_tag_cloud,找到相关参数进行修改:function wp_tag_cloud( $args = '' ) {$defaults = array('smallest' => 12, 'largest' => 16, 'unit' => 'pt', 'number' => 50,'format' => 'flat', 'separator' => "\n", 'orderby' => 'count', 'order' => 'DESC','exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'echo' => true);$args = wp_parse_args( $args, $defaults );$tags = get_terms( $args['taxonomy'], array_merge( $args, array( 'orderby' => 'count', 'order' => 'DESC' ) ) );注:smallest表示标签的最小字号largest表示最大字号unit=px表示字体使用像素单位number=0表示显示所有标签,如果为40,表示显示40个orderby=count表示按照标签所关联的文章数来排列order=DESC表示降序排序(ASC表示升序排序,DESC表示降序排序)Wordpress彩色标签云小工具调用。
保存之后回到首页就可以看到彩色标签云的效果了。
wordpress怎么改首页里面的样式
我们知道,网页是由html和css进行最基本的架构布局,那么,wordpress主题也是一样,今天小编就来教一教你如何修改自己的主题样式,达到自己修改主题的目的,并且我们将放上非常实用的css代码,让你可以直接使用。
话不多说,我们现在就来看看如何简单修改一款主题吧~首先,你要知道主题的位置,如果你可以在本地测试,那么是最好不过的,主题的位置在根目录/wp-content/themes/ 这个文件夹下的文件夹中,找到自己的主题文件然后,我们推荐下载火狐浏览器,安装firebug插件:下载完成火狐之后,打开火狐浏览器,点击工具下拉菜单,选择附加组件,在搜索一栏中输入firebug,安装即可,安装完成之后,重启浏览器,按F12即可出现firebug的界面。
firebug的左边有一个箭头的按钮,可以使用这个按钮找到你想要修改的元素,在右边,会出现影响这个元素的css,如下图:现在,我们需要给我们选中的元素加一个投影,点击右边的css,双击里面的效果css,添加新的代码:效果实现无误之后,到我们第一步找到的主题文件夹中,寻找到相应的css,css的路径在上图右边的蓝色标题中,上图要修改的这个元素在pages.css中,鼠标放在上面,会出现详细的路径,找到文件,再根据第几行显示的位置,添加进css,保存即可。
现在你会简单的修改你的主题样式了吗? 修改完成之后,记得记住你修改了那些文件,在主题更新中,可以询问下是否修改过css,如果没有的话,更新主题可以保留自己的css文件,就不会更新掉自己修改的样式了~现在你可以尝试在本地修改一些样式,如颜色、投影等等,让你的主题与众不同哦~ 下面我们给你准备了一些好看的css样式
如何自定义wordpress菜单css样式
参考下面方法CSS 背景属性(Background)background 在一个声明中设置所有的背景属性。
1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
1 background-color 设置元素的背景颜色。
1 background-image 设置元素的背景图像。
1 background-position 设置背景图像的开始位置。
1 background-repeat 设置是否及如何重复背景图像。
1 CSS 边框属性(Border 和 Outline)border 在一个声明中设置所有的边框属性。
1 border-bottom 在一个声明中设置所有的下边框属性。
1 border-bottom-color 设置下边框的颜色。
2 border-bottom-style 设置下边框的样式。
2 border-bottom-width 设置下边框的宽度。
1 border-color 设置四条边框的颜色。
1 border-left 在一个声明中设置所有的左边框属性。
1 border-left-color 设置左边框的颜色。
2 border-left-style 设置左边框的样式。
2 border-left-width 设置左边框的宽度。
1 border-right 在一个声明中设置所有的右边框属性。
1 border-right-color 设置右边框的颜色。
2 border-right-style 设置右边框的样式。
2 border-right-width 设置右边框的宽度。
1 border-style 设置四条边框的样式。
1 border-top 在一个声明中设置所有的上边框属性。
1 border-top-color 设置上边框的颜色。
2 border-top-style 设置上边框的样式。
2 border-top-width 设置上边框的宽度。
1 border-width 设置四条边框的宽度。
1 outline 在一个声明中设置所有的轮廓属性。
2 outline-color 设置轮廓的颜色。
2 outline-style 设置轮廓的样式。
2 outline-width 设置轮廓的宽度。
2 CSS 文本属性(Text)color 设置文本的颜色。
1 direction 规定文本的方向 / 书写方向。
2 letter-spacing 设置字符间距。
1 line-height 设置行高。
1 text-align 规定文本的水平对齐方式。
1 text-decoration 规定添加到文本的装饰效果。
1 text-indent 规定文本块首行的缩进。
1 text-shadow 规定添加到文本的阴影效果。
2 text-transform 控制文本的大小写。
1 unicode-bidi 设置文本方向。
2 white-space 规定如何处理元素中的空白。
1 word-spacing 设置单词间距。
1 CSS 字体属性(Font)font 在一个声明中设置所有字体属性。
1 font-family 规定文本的字体系列。
1 font-size 规定文本的字体尺寸。
1 font-size-adjust 为元素规定 aspect 值。
2 font-stretch 收缩或拉伸当前的字体系列。
2 font-style 规定文本的字体样式。
1 font-variant 规定是否以小型大写字母的字体显示文本。
1 font-weight 规定字体的粗细。
1 CSS 外边距属性(Margin)margin 在一个声明中设置所有外边距属性。
1 margin-bottom 设置元素的下外边距。
1 margin-left 设置元素的左外边距。
1 margin-right 设置元素的右外边距。
1 margin-top 设置元素的上外边距。
1 CSS 内边距属性(Padding)padding 在一个声明中设置所有内边距属性。
1 padding-bottom 设置元素的下内边距。
1 padding-left 设置元素的左内边距。
1 padding-right 设置元素的右内边距。
1 padding-top 设置元素的上内边距。
1 CSS 列表属性(List)list-style 在一个声明中设置所有的列表属性。
1 list-style-image 将图象设置为列表项标记。
1 list-style-position 设置列表项标记的放置位置。
1 list-style-type 设置列表项标记的类型。
1 marker-offset 2 内容生成(Generated Content)content 与 :before 以及 :after 伪元素配合使用,来插入生成内容。
2 counter-increment 递增或递减一个或多个计数器。
2 counter-reset 创建或重置一个或多个计数器。
2 quotes 设置嵌套引用的引号类型。
2 CSS 尺寸属性(Dimension)height 设置元素高度。
1 max-height 设置元素的最大高度。
2 max-width 设置元素的最大宽度。
2 min-height 设置元素的最小高度。
2 min-width 设置元素的最小宽度。
2 width 设置元素的宽度。
1 CSS 定位属性(Positioning)bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。
2 clear 规定元素的哪一侧不允许其他浮动元素。
1 clip 剪裁绝对定位元素。
2 cursor 规定要显示的光标的类型(形状)。
2 display 规定元素应该生成的框的类型。
1 float 规定框是否应该浮动。
1 left 设置定位元素左外边距边界与其包含块左边界之间的偏移。
2 overflow 规定当内容溢出元素框时发生的事情。
2 position 规定元素的定位类型。
2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移。
2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。
2 vertical-align 设置元素的垂直对齐方式。
1 visibility 规定元素是否可见。
2 z-index 设置元素的堆叠顺序。
2 CSS 打印属性(Print)orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
2 page-break-after 设置元素后的分页行为。
2 page-break-before 设置元素前的分页行为。
2 page-break-inside 设置元素内部的分页行为。
2 widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。
2 CSS 表格属性(Table)border-collapse 规定是否合并表格边框。
2 border-spacing 规定相...
转载请注明出处51数据库 » 如何把字体导入wordpress