提示,留存使用,原文:https://zmingcx.com/begin-faq.html
注:修改中文主题模板,建议使用专门的编辑工具,比如:Notepad++(免费),绝不能用操作系统自带的记事本编辑模版文件,否则会造成模板错位,中文模版编码为:UTF-8 无BOM(无签名)。
本文内容需要密码才能阅读
本文不是主题使用说明!文章源自知更鸟-https://zmingcx.com/begin-faq.html
也没有任何使用中常见的问题!文章源自知更鸟-https://zmingcx.com/begin-faq.html
也不是使用主题必须的看的!文章源自知更鸟-https://zmingcx.com/begin-faq.html
涉及的修改方法,只起到一个抛砖旧玉作用,有些因主题结构发生变化已失效,具体修改操作请自行研究。文章源自知更鸟-https://zmingcx.com/begin-faq.html
本文可能会随时更新,不要以序号顺序分内容先后。文章源自知更鸟-https://zmingcx.com/begin-faq.html
本文禁止用户公开转载到自己网站上!
1、安装完WordPress必须的一些设置
默认安装完WordPress程序,有些最基本的功能,比如“自定义栏目”面板、菜单模块和高级属性等需要设置一下才能显示,这些在主题设置中经常会用到,有些用户之所以找不到也不知道“自定义栏目”是什么就是因为最基本的功能没调出来。文章源自知更鸟-https://zmingcx.com/begin-faq.html
显示文章编辑页面所有模块文章源自知更鸟-https://zmingcx.com/begin-faq.html
登录WP后台→文章→写文章,进入文章撰写编辑页面,打开右上角的”显示选项“,勾选其中全部的“模块”(页面编辑设置方法相同),如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
显示菜单所有模块和高级菜单属性文章源自知更鸟-https://zmingcx.com/begin-faq.html
登录WP后台→外观→菜单,进入菜单编辑管理页面,打开右上角的”显示选项“,勾选其中全部的“模块”和所有高级菜单属性,如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
WP后台首页显示内容设置文章源自知更鸟-https://zmingcx.com/begin-faq.html
默认WP后台会显示:概览、快速草稿 、WordPress新闻、Welcome(欢迎页面)文章源自知更鸟-https://zmingcx.com/begin-faq.html
其中:WordPress新闻、Welcome(欢迎页面)比较影响加载速度,同样打开右上角的”显示选项“去掉没有用的模块勾选。文章源自知更鸟-https://zmingcx.com/begin-faq.html
显示经典编辑器工具栏文章源自知更鸟-https://zmingcx.com/begin-faq.html
默认WP经典编辑器不显示第二行的工具栏,因此很多新手认为WP的编辑器过于简单。文章源自知更鸟-https://zmingcx.com/begin-faq.html
点击红框中的工具栏开关,显示工具栏文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
打开页面讨论(评论)选项文章源自知更鸟-https://zmingcx.com/begin-faq.html
默认WP不显示页面讨论(评论)选项,新建页面---右上---显示选项---模块中,勾选“讨论”文章源自知更鸟-https://zmingcx.com/begin-faq.html
善用WP帮助说明
WordPress后台每个页面都有详细的操作说明,点开右上角的“帮助”按钮,里面是关于本页面功能的操作指南,包括上面说的基本设置。
文章源自知更鸟-https://zmingcx.com/begin-faq.html
2、分类小工具添加图标字体
分类小工具正常无法添加图标字体,但可以变通一下,使用导航菜单小工具来实现。文章源自知更鸟-https://zmingcx.com/begin-faq.html
新建一个单独的菜单(不能有二级菜单项目),然后使用导航菜单小工具调用这个单独的菜单,图标字体添加方法请阅读主题使用说明:菜单。文章源自知更鸟-https://zmingcx.com/begin-faq.html
另外,使用菜单小工具可以选择显示分类,比默认的分类目录小工具,更加灵活。文章源自知更鸟-https://zmingcx.com/begin-faq.html
3、搜索推荐菜单实现关键词搜索
为菜单添加一个自定义链接文章源自知更鸟-https://zmingcx.com/begin-faq.html
链接文本输入关键词,比如:WordPress文章源自知更鸟-https://zmingcx.com/begin-faq.html
url输入格式:https://zmingcx.com/?s=WordPress文章源自知更鸟-https://zmingcx.com/begin-faq.html
点击这个“WordPress”关键词,即可实现相关搜索。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
4、更新文章归档页面
文章归档页面,会在数据库中生成一个类似:cx_archives_list的表,用于存储文章发表/删除时生成html,可加快访问速度,不用每次都要查询数据库生成归档,如果发现文章归档页面一直不更新,进入主题选项--辅助设置--勾选“显示WordPress设置选项字段”,然后进入WP后台---设置---全部设置页面,搜索cx_archives_list,清空其右侧的数据并保存。文章源自知更鸟-https://zmingcx.com/begin-faq.html
另一个文章更新模板,在主题选项中修改文章限定日期分类后,也需要上面的操作清空生成的html,搜索内容改为:up_archives_list文章源自知更鸟-https://zmingcx.com/begin-faq.html
6、单独下载页面链接改成根目录
默认主题单独下载页面链接包括主题目录:文章源自知更鸟-https://zmingcx.com/begin-faq.html
https://zmingcx.com/wp-content/themes/begin/down.php?id=8722文章源自知更鸟-https://zmingcx.com/begin-faq.html
如果想改成:https://zmingcx.com/down.php?id=8722,可以按下面修改一下:文章源自知更鸟-https://zmingcx.com/begin-faq.html
一、复制一份begin主题目录中的down.php文件,将第二行的:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- require( dirname(__FILE__) . '/../../../wp-load.php' );
改为:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- require( dirname(__FILE__) . '/wp-load.php' );
并上传到网站根目录。文章源自知更鸟-https://zmingcx.com/begin-faq.html
二、打开begin\inc目录的down-meta.php,将大约第55行和57行的:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- get_template_directory_uri()
改为:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- home_url()
修改的目的是什么,说是怕暴露主题目录.....文章源自知更鸟-https://zmingcx.com/begin-faq.html
7、修改正文字号大小
- .single-content {
- font-size: 20px;
- font-size: 2.0rem;
- line-height: 2;
- }
修改其中的数字,并添加到主题选项→定制风格→自定义样式中文章源自知更鸟-https://zmingcx.com/begin-faq.html
8、目录索引改为三级标题H3标签
主题默认自将四级标题H4标签转换为文章索引目录,简单修改一下将三级标题H3标签变为索引目录。文章源自知更鸟-https://zmingcx.com/begin-faq.html
打开主题begin\inc\function目录的inc.php 查找:// 目录,找到文章源自知更鸟-https://zmingcx.com/begin-faq.html
- $r = "/<h4>([^<]+)<\/h4>/im";
将其中的数字4,改为3即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
9、修改导航菜单字体、颜色及字号
将下面样式加到主题选项→定制风格→自定义样式中文章源自知更鸟-https://zmingcx.com/begin-faq.html
加粗字体和增大字号文章源自知更鸟-https://zmingcx.com/begin-faq.html
- #site-nav .down-menu li a {
- font-weight: bold;
- font-size: 20px;
- }
只改一级菜单:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- #site-nav .down-menu a {
- font-weight: bold;
- font-size: 20px;
- }
修改字体颜色文章源自知更鸟-https://zmingcx.com/begin-faq.html
- #site-nav .down-menu li a {
- color: #ff0000;
- }
- .sf-arrows .sf-with-ul::after {
- color: #ff0000;
- }
10、移动端页脚菜单一直显示
将下面样式加到主题选项→定制风格→自定义样式中文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .footer-nav {
- bottom: 0;
- display: block !important;
- }
在手机和电脑端同时显示文章源自知更鸟-https://zmingcx.com/begin-faq.html
打开页脚模板文件footer.php找到:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php if (zm_get_option('footer_menu') && wp_is_mobile()) { ?>
- <div class="footer-clear"></div>
- <nav class="footer-nav">
- <?php
- wp_nav_menu( array(
- 'theme_location'=> 'footer',
- 'menu_class' => 'footer-menu',
- 'fallback_cb' => 'default_menu'
- ) );
- ?>
- </nav>
- <?php } ?>
改为:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <nav class="footer-nav">
- <?php
- wp_nav_menu( array(
- 'theme_location'=> 'footer',
- 'menu_class' => 'footer-menu',
- 'fallback_cb' => 'default_menu'
- ) );
- ?>
- </nav>
文章源自知更鸟-https://zmingcx.com/begin-faq.html
11、中文用户名注册
之前主题加了个支持中文用户名的功能,后来发现这个是傻瓜功能,只支持最多5个汉字,没有任何使用价值,而且会有很多BUG,随即删除。如果还想延续这玩意,把下面代码加到主题函数模板functions.php中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- // 支持中文用户名
- add_filter ('sanitize_user', 'zm_sanitize_user', 10, 3);
- function zm_sanitize_user ($username, $raw_username, $strict) {
- $username = wp_strip_all_tags( $raw_username );
- $username = remove_accents( $username );
- $username = preg_replace( '|%([a-fA-F0-9][a-fA-F0-9])|', '', $username );
- $username = preg_replace( '/&.+?;/', '', $username );
- if ($strict) {
- $username = preg_replace ('|[^a-z\p{Han}0-9 _.\-@]|iu', '', $username);
- }
- $username = trim( $username );
- $username = preg_replace( '|\s+|', ' ', $username );
- return $username;
- }
文章源自知更鸟-https://zmingcx.com/begin-faq.html
12、菜单文字扫光动画
编辑菜单项,将“导航标签”文字改为:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <span class="mytips">导航菜单文字</span>
将下面样式加到主题选项→定制风格→自定义样式中文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .mytips {
- background-image: -webkit-linear-gradient(left, #444, #ff4400 25%, #444 50%, #ff4400 75%, #444);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
- -webkit-background-size: 200% 100%;
- -webkit-animation: masked-animation 0.5s infinite linear;
- }
- .main-nav .down-menu a:hover .mytips {
- -webkit-text-fill-color: #fff;
- }
- @-webkit-keyframes masked-animation {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: -100% 0;
- }
- }
其中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- left, #444, #ff4400 25%, #444 50%, #ff4400 75%, #444
为扫光颜色,可根据自己的喜好修改为其它颜色值,动画特效不支持IE.文章源自知更鸟-https://zmingcx.com/begin-faq.html
13、注册页面模板背景调用必应每日壁纸图片
必应壁纸,每天换一张,替换主题默认注册页面模板背景图片文章源自知更鸟-https://zmingcx.com/begin-faq.html
下载调用文件
将下载的bing.php上传到主题begin\template目录中,打开begin\pages目录的注册页面模板template-reg.php文件文章源自知更鸟-https://zmingcx.com/begin-faq.html
用:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- $imgurl=get_stylesheet_directory_uri() . '/template/bing.php';
替换:文章源自知更鸟-https://zmingcx.com/begin-faq.html
$imgurl=zm_get_option('reg_img');文章源自知更鸟-https://zmingcx.com/begin-faq.html
貌似很早学做主题时,就弄过这玩意,个人感觉必应的图片有些太难看....文章源自知更鸟-https://zmingcx.com/begin-faq.html
14、增强文本小工具添加自动播放的MP4视频
将下面代码添加到增强文本小工具中即可:文章源自知更鸟-https://zmingcx.com/begin-faq.html
代码一 ,不能循环播放文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <video style="width:100%; height:100%;float: left;" autoplay="autoplay">
- <source src="https://jdvodoss.jcloudcache.com/vodtransgzp1251412368/9031868223153446912/v.f30.mp4" type="video/mp4" />
- </video>
代码二,可以循环播放文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
15、公司全屏幻灯改为调用视频
打开begin\group目录的group-slider.php模板文件,用下面的代码替换全部:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php if ( ! defined( 'ABSPATH' ) ) { exit; } ?>
- <?php if (zm_get_option('group_slider')) { ?>
- <div class="g-row">
- <div id="slider-video" class="slider-video">
- <video style="width:100%; height:100%;float: left;" autoplay="autoplay">
- <source src="https://jdvodoss.jcloudcache.com/vodtransgzp1251412368/9031868223153446912/v.f30.mp4" type="video/mp4" />
- </video>
- </div>
- </div>
- <?php } ?>
将其中的MP4视频地址换成自己的。文章源自知更鸟-https://zmingcx.com/begin-faq.html
16、手机上不隐藏侧边栏
将下面样式代码添加到主题选项→定制风格→自定义样式代码中,强制不隐藏侧边栏文章源自知更鸟-https://zmingcx.com/begin-faq.html
- @media screen and (max-width: 1025px) {
- #sidebar, #sidebar-l {
- display: block;
- }
- }
文章源自知更鸟-https://zmingcx.com/begin-faq.html
17、批量删除WordPress自定义栏目
18、移动端底部菜单图标在文字上
将下面样式代码添加到主题选项→定制风格→自定义样式代码中文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .footer-nav-hold ul li a i {
- display: block;
- margin-top: 10px;
- }
- .footer-nav-hold .font-text {
- margin: 0 !important;
- }
文章源自知更鸟-https://zmingcx.com/begin-faq.html
19、让一级菜单无超链接
给菜单加一个“自定义链接”项,随便加个链接,添加到菜单后,再编辑这个菜单项删除其中的链接,这样就成功添加了一个无超链接的菜单项。文章源自知更鸟-https://zmingcx.com/begin-faq.html
但鼠标悬停没有手形标志感觉不正常,可以在菜单项“CSS类”中添加“nourl”文章源自知更鸟-https://zmingcx.com/begin-faq.html
将样式代码添加到主题选项→定制风格→自定义样式代码框中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .nourl{cursor: pointer;}
文章源自知更鸟-https://zmingcx.com/begin-faq.html
20、调整关注微博按钮位置
将如下代码添加到主题选项→定制风格→自定义样式代码框中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .weibo {
- left: 200px;
- top: 35px;
- }
其中数字200是距左位置,35是距上位置,适当修改数字即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
21、
22、Woocommerce插件评价提交添加滑动解锁
如果主题开启了滑动解锁才能提交评论,默认Woocommerce是不能提交评价的,会提示滑动解锁才能提交,但又看不到滑块。文章源自知更鸟-https://zmingcx.com/begin-faq.html
打开Woocommerce插件:wp-content\plugins\woocommerce\templates目录的single-product-reviews.php,在最后几行找到:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php else : ?>
在其上面添加文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <div class="qaptcha"></div>
完成文章源自知更鸟-https://zmingcx.com/begin-faq.html
23、强制文章中图片居中显示
将下面样式添加到主题选项→定制风格→自定义样式代码框中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .single-content p img{margin: 0 auto;}
注:对于响应式设计的主题,添加图片时必须选择对齐方式为:中文章源自知更鸟-https://zmingcx.com/begin-faq.html
24、添加浏览器title滚动、闪动特效
这是一种常见的网页特效,将下面代码添加到主题头部模板header.php,这句文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php wp_head(); ?>
的上面,保存时需将编码选择为UTF-8 无BOM(无签名),否则会出现乱码,直接在WP后台主题编辑中添加则不需要自己选择编码。文章源自知更鸟-https://zmingcx.com/begin-faq.html
展开代码:
文章源自知更鸟-https://zmingcx.com/begin-faq.html
25、批量删除SEO自定义内容
将下面代码添加到主题函数模板 functions.php 最后:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- global $wpdb;
- // SEO自定义文章标题
- $wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = 'custom_title'" );
- // SEO文章描述
- $wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = 'description'" );
- // SEO文章关键词
- $wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = 'keywords'" );
刷新一下网页上述自定义内容会自动删除,根据情况选择删除上面的自定义内容,用后代码不要保留在主题中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
26、关于文章编辑时的边框
用户在编辑文章时发现文章编辑区域有一个边框,这个边框与前台正文宽度相同,用于编辑文章时所见即所得,后台编辑文章时文章显示的宽度,与前台查看文章时相同,不会影响你正常编辑文章。文章源自知更鸟-https://zmingcx.com/begin-faq.html
27、
28、默认隐藏侧边栏
将下面样式代码加到主题选项→定制风格→自定义样式代码框中即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
隐藏文章页面侧边栏文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .single #primary {
- width: 100%;
- }
- .single #sidebar, .r-hide, .s-hide {
- display: none;
- }
隐藏分类页面侧边栏文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .archive #primary {
- width: 100%;
- }
- .archive #sidebar,.r-hide {
- display: none;
- }
29、自动代码高亮样式
个人喜欢不同,这个代码高亮样式,有人喜欢深色深沉,有人喜欢清新亮丽的,比如我自己之前喜欢黑背景色的,现在喜欢白色的,这里提供几个prettify.js的默认样式,至于prettify.js是什么自己百度。文章源自知更鸟-https://zmingcx.com/begin-faq.html
用下面样式代码替换主题begin\css目录的prettify.css中的代码文章源自知更鸟-https://zmingcx.com/begin-faq.html
但必须添加保留复制按钮样式:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .codebox {
- position: relative;
- }
- .btn-clipboard {
- position: absolute;
- top: 1px;
- right: 1px;
- padding: 2px 6px;
- text-align: center;
- font-size: 12px;
- cursor: pointer;
- color: #999;
- display: inline-block;
- animation: fade-in;
- animation-duration: 0.5s;
- }
样式一:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
可以根据自己的喜欢修改样式。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
30、
31、
32、将公司首页两栏和三栏小工具改为一栏
将下面样式添加到主题选项→定制风格→自定义样式代码框中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .group-widget .xl3, .group-widget .xl2 {
- width: 100%;
- }
33、制作网站logo中,如何保证小字号中文清晰度
教大家一个在PS中制作logo,如何让比较小的中文汉字保持清晰的小技巧。文章源自知更鸟-https://zmingcx.com/begin-faq.html
很多PS新手对字号比较小的汉字看上去模糊,感到很挠头,其实一个小技巧就可以轻松解决:文章源自知更鸟-https://zmingcx.com/begin-faq.html
1、在处理小字号的汉字时,比如小于14px,必须选择“宋体”或者“新宋体”。文章源自知更鸟-https://zmingcx.com/begin-faq.html
2、在PS字符面板中,选择消除锯齿的方法为“无”.文章源自知更鸟-https://zmingcx.com/begin-faq.html
如图,上面的LOGO小字号的文字是选择“无”的效果,下面是选择“犀利”的效果。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
34、编辑器添加表情按钮
将下面代码添加到主题functions模板最后的“// 全部结束”注释后面即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
展开代码文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
35、隐藏前台浏览统计
有人说开了静态缓存插件,前台不计数,有些怪,那就隐藏掉。文章源自知更鸟-https://zmingcx.com/begin-faq.html
可以到Post Views插件设置中选择是是否显示统计。文章源自知更鸟-https://zmingcx.com/begin-faq.html
或者直接用CSS隐藏掉,将下面的代码添加到主题选项→定制风格→自定义样式代码框中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .views, .single-meta .views {display: none;}
隐藏后,并不会影响计数,后台还在继续计数。文章源自知更鸟-https://zmingcx.com/begin-faq.html
36、减少主题JS文件加载
主题加载了很多JS文件,分别用于不同的功能特效。可以根据自己的需要,通过主题选项中关闭一些功能减少页面JS文件加载。文章源自知更鸟-https://zmingcx.com/begin-faq.html
- 关闭:滑动解锁才能提交评论
- 关闭:简繁体转换按钮
- 关闭:生成当前页面二维码
- 关闭:点赞分享
- 关闭:新浪微博关注按钮
- 关闭:热门标签小工具3D特效
- 关闭:文章Ajax滚动加载
- 关闭:评论Ajax翻页
- 关闭:自动代码高亮显示
- 关闭:Ajax评论
- 关闭:图片Lightbox查看
- 关闭:禁止复制及右键
- 关闭:动画特效
- 不使用:ajax组合小工具
另外,简繁体转换和文章朗读功能,没有必要的话关了,影响速度。文章源自知更鸟-https://zmingcx.com/begin-faq.html
37、页脚版权信息回行方法
主题默认页脚内容编辑是调用的WP的自带的编辑器,可以添加任意内容,如果内容较多想回行,如果输入:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <br />
当切换到可视化模式,并保存设置后,会被WP过滤掉,可以按下面的方法实现回行:文章源自知更鸟-https://zmingcx.com/begin-faq.html
方法一:文章源自知更鸟-https://zmingcx.com/begin-faq.html
切换到文本编辑模式,输入类似:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <div>文字内容</div>
- <div>文字内容</div>
- <div>文字内容</div>
多个回行,以此类推。文章源自知更鸟-https://zmingcx.com/begin-faq.html
用 p 代替 div 也是可以的。文章源自知更鸟-https://zmingcx.com/begin-faq.html
方法二:文章源自知更鸟-https://zmingcx.com/begin-faq.html
选择文字,点击编辑工具栏上的“项目符号列表”按钮,然后在适当的位置按回车键,也可实现回行。文章源自知更鸟-https://zmingcx.com/begin-faq.html
38、调整主菜单高度
- @media screen and (min-width: 1025px) {
- /** logo标题位置 **/
- .logo-site, .logo-sites {
- margin: 5px 0 0 5px;
- }
- /** 有顶部菜单的整体高度 **/
- .site-header-s {
- height: 93px;
- }
- /** 无顶部菜单的整体高度 **/
- .site-header-h {
- height: 60px;
- }
- /** 菜单高度 **/
- #menu-container {
- height: 60px;
- }
- /** 菜单链接高度 **/
- .main-nav .down-menu li {
- height: 60px;
- line-height: 60px;
- }
- /** 菜单登录图标位置 **/
- .login-but,
- .menu-login {
- margin: 15px 0 0 0;
- }
- /** 搜索按钮位置 **/
- .nav-search {
- margin: 15px 5px 0 5px;
- }
- /** 更多菜单按钮 **/
- .main-nav .down-menu li.nav-more {
- padding: 10px 0;
- }
- /** 登录注册距上 **/
- .menu-login-box {
- margin: -15px 0 0 0;
- }
- }
里面的数值根据自己的需要调整,添加到主题选项→定制风格→自定义样式中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
39、
40、关于排版样式
主题目前的样式是:
文章源自知更鸟-https://zmingcx.com/begin-faq.html
英文不以单词回行,中英文混排不会出现字间距加大问题。具体使用哪种,自行选择修改吧。文章源自知更鸟-https://zmingcx.com/begin-faq.html
另外,其中的word-break: break-all会造成标点在行首出现,自己行酌情删除吧。文章源自知更鸟-https://zmingcx.com/begin-faq.html
41、苹果风格H3
将下面的代码添加到主题选项→定制风格→自定义样式中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
42、直接显示繁体
打开主题begin\js目录的gb2big5.js文件,将第1行的:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- var Default_isFT = 0
后面的数字 0改为1即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
43、批量删除手动添加的缩略图
主题新版本已集成自动裁剪文章中图片作缩略图功能,所以之前手动添加的缩略图地址可能与目前的尺寸不同,逐一编辑修改文章工作量比较大,可以用下面方法,批量删除这个手动添加的缩略图(自定义栏目),将下面的代码添加到主题functions.php模板文件的最后,并上传覆盖主题原文件文章源自知更鸟-https://zmingcx.com/begin-faq.html
- global $wpdb;
- $wpdb->query( "
- DELETE FROM $wpdb->postmeta
- WHERE `meta_key` = 'thumbnail'
- " );
之后,手动缩略图添加的自定义栏目'thumbnail' 会被删除,并显示自动裁剪的缩略图。文章源自知更鸟-https://zmingcx.com/begin-faq.html
注:以上代码只使用一次就可以了,不用留在主题模板中,删除缩略图片后,需要将该代码删除并还原functions.php模板文件。文章源自知更鸟-https://zmingcx.com/begin-faq.html
44、
45、增强文本小工具应用实例
新增加的增强文本小工具可以运行PHP代码(WP自带的不可以),可以任意添加运行网上淘来的代码,比如可以将集成在小工具中调用分类文章的代码直接添加到增强文本小工具中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
通过在增强文本小工具中直接添加分类调用代码与正常的小工具外观没有区别,区别是默认小工具标题不能加链接,增强文本小工具可以自定义标题链接,方便浏览者点击标题查看更多相关分类的文章。文章源自知更鸟-https://zmingcx.com/begin-faq.html
将以下代码实例直接加到增强文本小工具中即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
例一、下面的代码是调用ID为88的分类最新的5篇文章,并有缩略图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <div class="new_cat">
- <ul>
- <?php
- $loop = new WP_Query( array ( 'showposts' => 5, 'cat' => 88, 'post__not_in' => get_option( 'sticky_posts') ) );
- while ( $loop->have_posts() ) : $loop->the_post();
- ?>
- <li>
- <figure class="thumbnail">
- <?php if (zm_get_option('lazy_s')) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?>
- </figure>
- <div class="new-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div>
- <div class="date"><?php the_time('m/d') ?></div>
- <?php if( function_exists( 'the_views' ) ) { the_views( true, '<span class="views"><i class="fa fa-eye"></i> ','</span>' ); } ?>
- </li>
- <?php endwhile; ?>
- <?php wp_reset_query(); ?>
- </ul>
- </div>
例二、以图片形式调用ID为88的分类最新的4篇文章:文章源自知更鸟-https://zmingcx.com/begin-faq.html
更多实例代码
文章源自知更鸟-https://zmingcx.com/begin-faq.html
46、为单独的某篇文章添加背景
将下面的代码添加到主题选项→定制风格→自定义样式中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .postid-6367 {
- background: #f1f1f1;
- background:url('https://zmingcx.com/wp-content/uploads/2012/08/79760-772704496-8.gif');
- }
其中:postid-6367为该文章页面特有选择器,后面的数字为文章ID。文章源自知更鸟-https://zmingcx.com/begin-faq.html
另外,背景颜色与图片只选择添加一个样式属性就可以了。文章源自知更鸟-https://zmingcx.com/begin-faq.html
效果见本文背景色文章源自知更鸟-https://zmingcx.com/begin-faq.html
47、
48、主题与ErphpDown会员下载插件样式兼容
ErphpDown 资源下载插件使用者很多。文章源自知更鸟-https://zmingcx.com/begin-faq.html
这里简单兼容一下主题的样式和修改插件默认点击登录按钮为主题的弹窗登录。文章源自知更鸟-https://zmingcx.com/begin-faq.html
将样式代码添加到主题选项→定制风格→自定义样式代码框中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
样式代码:
文章源自知更鸟-https://zmingcx.com/begin-faq.html
插件默认点击登录按钮为主题的弹窗登录替换文件:文章源自知更鸟-https://zmingcx.com/begin-faq.html
替换文件下载
将解压后的show.php文件,替换wp-content\plugins\erphpdown\includes目录同名文件即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
后期考虑把插件前端的相关下载信息集成到主题的下载模块中,有点复杂....文章源自知更鸟-https://zmingcx.com/begin-faq.html
49、
50、
51、
52、替换禁止百度转码代码
不知道什么是“百度转码”,可以百度一下或者查看此文:禁止百度转码文章源自知更鸟-https://zmingcx.com/begin-faq.html
据说主题集成的禁止转码代码已失效,有发现自己博客被转码的用户,可以打开主题header.php模板文件,将第6和第7行的:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <meta http-equiv="Cache-Control" content="no-transform" />
- <meta http-equiv="Cache-Control" content="no-siteapp" />
替换为:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <meta name="applicable-device" content="pc,mobile">
- <meta name="MobileOptimized" content="width"/>
- <meta name="HandheldFriendly" content="true"/>
因我自己的博客目前并没有被转码,替换后的效果未知,有待查看。文章源自知更鸟-https://zmingcx.com/begin-faq.html
53、导航菜单添加上标文字
将导航标签改为类似:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- 正常文字<span class="mysup">上标</span>
CSS类添加:mys文章源自知更鸟-https://zmingcx.com/begin-faq.html
把下面样式代码加到主题选项→定制风格→自定义样式代码中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- @media screen and (min-width: 1025px) {
- .mys {
- position: relative;
- }
- .mysup {
- position: absolute;
- top: 15px;
- right: -5px;
- font-size: 12px;
- color: #fff !important;
- line-height: 14px !important;
- margin: 0;
- padding: 3px;
- border-radius: 50%;
- background: #c40000;
- }
- }
54、网页变灰
用于哀悼日,把下面样式代码加到主题选项→定制风格→自定义样式代码中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .nav-top, #navigation-top li a, #navigation-top img,
- .post, #primary, .g-row, .widget, .tg-site, .xm4,
- .links-group, .nav-links, .cover4x, #scroll,
- .links-box, .cms-news-grid-container, .cat-container,
- .gw-box, .sx4, .owl-theme, .site-footer, .contactus,
- .single-tag, .authorbio, #submit, .login-overlay, .header-sub,
- .pagenav-clear, .nav-section, .comment, .comment-respond,
- .group-tab-site, .guide-img, .picture-box, .link-box {
- filter: grayscale(90%);
- -webkit-filter: grayscale(90%);
- -moz-filter: grayscale(90%);
- -ms-filter: grayscale(90%);
- -o-filter: grayscale(90%);
- filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0.9);
- }
添加样式后,会造成主题部分功能错乱,比如文章目录索引。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
55、导航菜单添加图片小图标
因主题不支持阿里彩色图标字体,可以通过一下面的方法,为菜单项添加图片图标文章源自知更鸟-https://zmingcx.com/begin-faq.html
首先为准备添加图片图标的菜单项添加CSS类:my-img文章源自知更鸟-https://zmingcx.com/begin-faq.html
把下面样式代码加到主题选项→定制风格→自定义样式代码框中文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .my-img a:before {
- content: "";
- width: 15px;
- height: 15px;
- display:inline-block;
- margin: 0 5px -2px 0;
- background:url("https://s2.ax1x.com/2020/01/18/1pdvFK.png");
- }
以此类推为多个菜单项添加图片图标文章源自知更鸟-https://zmingcx.com/begin-faq.html
56,
57、升级WordPress另一更新正在进行
方法一、进数据库表wp_options中找到core_updater.lock删除文章源自知更鸟-https://zmingcx.com/begin-faq.html
方法二、将下面代码添加到主题函数模板functions.php中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- global $wpdb;
- $wpdb->query("DELETE FROM wp_options WHERE option_name = ' core_updater.lock '");
用后删除,不需要保留在主题中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
58、顶部菜单添加背景颜色动态渐变
把下面代码加到主题选项→定制风格→自定义样式中文章源自知更鸟-https://zmingcx.com/begin-faq.html
- #header-top {
- background-color: #e74c3c;
- border-bottom: none;
- animation: bg-color 10s infinite;
- }
- @keyframes bg-color {
- 0% {
- background-color: #e74c3c;
- }
- 20% {
- background-color: #f1c40f;
- }
- 40% {
- background-color: #1abc9c;
- }
- 60% {
- background-color: #3498db;
- }
- 80% {
- background-color: #9b59b6;
- }
- 100% {
- background-color: #e74c3c;
- }
- }
文章源自知更鸟-https://zmingcx.com/begin-faq.html
59、隐藏分类归档页面侧边栏
把下面代码加到主题选项→定制风格→自定义样式代码框中文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .archive #primary {width: 100%;}
- .archive #sidebar{display: none;}
文章源自知更鸟-https://zmingcx.com/begin-faq.html
60
61、批量删除特色图像
如果之前用的主题是采用特色图像实现缩略图功能,这些特色图像尺寸并不一定能适合begin主题,所以可以删除这些特色图像,直接使用主题集成的自动裁剪图片功能。手动删除工作量大,可以用下面的代码,批量删除特色图像。文章源自知更鸟-https://zmingcx.com/begin-faq.html
操作前备份好数据库和上传的图片目录wp-content\uploads,以防操作失败,恢复,切记!文章源自知更鸟-https://zmingcx.com/begin-faq.html
打开begin主题目录中的functions.php模板文件,在// 全部结束后面回行,将下面代码加进去:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- delete_post_meta_by_key( '_thumbnail_id' );
之后,只需刷新一下页面,特色图像就已被删除,该代码不需要留在functions.php模板中,用后删除。文章源自知更鸟-https://zmingcx.com/begin-faq.html
备用方法:不建议用备用方法,会删除媒体库中的图片,切记。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
62、主菜单只显示图标不显示文字
将下面代码加到主题选项→定制风格→自定义样式代码框中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
其中:font-size: 18px是图标大小,可以适当调整。文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .font-text {
- display: none;
- }
- .down-menu .be, .down-menu .zm {
- font-size: 18px !important;
- }
63、添加没有超链接的菜单项
首先随便添加一个自定义链接菜单项目,编辑这个项目,在CSS类中添加:flsx 文章源自知更鸟-https://zmingcx.com/begin-faq.html
之后将下面的样式代码加到主题选项→定制风格→自定义样式代码框中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .flsx {
- color: #666;
- font-weight: bold;
- pointer-events:none;
- cursor:default;
- }
这样就添加一个没有超链接的菜单项目,该方法不支持低版本IE.文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
64、在侧边增强小工具中添加一个多彩的菜单
效果如图文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
先将增强文本小工具拖进侧边栏中,然后将下面的粘贴进去文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <div class="colorbar-box">
- <ul class="colorbar">
- <li><a href="链接地址" target="_blank" style="background-color:#ff3030;">我是文字</a></li>
- <li><a href="链接地址" target="_blank" style="background-color:#428BCA;">我是文字</a></li>
- <li><a href="链接地址" target="_blank" style="background-color:#e84266;">我是文字</a></li>
- <li><a href="链接地址" target="_blank" style="background-color:#91c24f;">我是文字</a></li>
- <li><a href="链接地址" target="_blank" style="background-color:#f49800;">我是文字</a></li>
- </ul>
- </div>
- <style type="text/css">
- .colorbar-box ul {
- padding: 0;
- }
- .colorbar li {
- width: 100% !important;
- }
- .colorbar li a {
- color: #fff;
- line-height: 40px;
- display: block;
- width: 100%;
- text-align: center;
- }
- .colorbar li a:hover {
- opacity: 0.8;
- }
- </style>
自行修改其中的文字及链接。文章源自知更鸟-https://zmingcx.com/begin-faq.html
65、为网页背景添加一个跟随鼠标变幻的动态线条
这是一个基于canvas绘制的网页背景效果。文章源自知更鸟-https://zmingcx.com/begin-faq.html
首先将下载的canvas-nest.min.js文件,放到主题begin\js目录中文章源自知更鸟-https://zmingcx.com/begin-faq.html
打开主题页脚模板文件footer.php在:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php wp_footer(); ?>
上面添加:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/canvas-nest.min.js"></script>
效果演示及canvas-nest.js下载
66、上下篇调用全局文章
默认主题文章底部的上下篇文章调用的同分类的文章,通过修改可以调用全局文章。文章源自知更鸟-https://zmingcx.com/begin-faq.html
打开主题根目录的single.php,将文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php
- if (get_previous_post( TRUE )) { previous_post_link( '%link','<span class="meta-nav"><span class="post-nav"><i class="fa fa-angle-left"></i> 上一篇</span><br/>%title</span>', TRUE ); } else { echo "<span class='meta-nav'><span class='post-nav'>没有了<br/></span>已是最后文章</span>"; }
- if (get_next_post( TRUE )) { next_post_link( '%link', '<span class="meta-nav"><span class="post-nav">下一篇 <i class="fa fa-angle-right"></i></span><br/>%title</span>', TRUE ); } else { echo "<span class='meta-nav'><span class='post-nav'>没有了<br/></span>已是最新文章</span>"; }
- ?>
修改为:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php
- if (get_previous_post( )) { previous_post_link( '%link','<span class="meta-nav"><span class="post-nav"><i class="fa fa-angle-left"></i> 上一篇</span><br/>%title</span>' ); } else { echo "<span class='meta-nav'><span class='post-nav'>没有了<br/></span>已是最后文章</span>"; }
- if (get_next_post( )) { next_post_link( '%link', '<span class="meta-nav"><span class="post-nav">下一篇 <i class="fa fa-angle-right"></i></span><br/>%title</span>' ); } else { echo "<span class='meta-nav'><span class='post-nav'>没有了<br/></span>已是最新文章</span>"; }
- ?>
即可文章源自知更鸟-https://zmingcx.com/begin-faq.html
67、
68、单栏小工具HTML代码
将代码添加到增强文本小工具中,在公司首页和杂志首页单栏小工具中调用:文章源自知更鸟-https://zmingcx.com/begin-faq.html
代码
文章源自知更鸟-https://zmingcx.com/begin-faq.html
其中的字体图标,替换使用方法与菜单添加小图标相似,也可以用图片代替字体图标,效果如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
69、
70、正文侧边栏错位
自从正文下面的版权信息可以自定义内容后,发现有用户因为乱加内容和代码,造成正文侧边栏错位,如果发现有类似情况,清空自定义内容。文章源自知更鸟-https://zmingcx.com/begin-faq.html
71、留言板怎么弄
可能很多新手站长非常渴望有人在自己的博客网站上留言,所以总是想弄个留言板,好方便留言。文章源自知更鸟-https://zmingcx.com/begin-faq.html
留言板创建方法:新建一个页面,标题:留言板,发表之后,可能会发现没有留言的模块。文章源自知更鸟-https://zmingcx.com/begin-faq.html
调出留言模块,编辑这个页面,打开右上“显示选项”,勾选“讨论”,之后编辑框下面讨论面板中勾选“允许评论”,更新这个页面后,留言模块显示了。文章源自知更鸟-https://zmingcx.com/begin-faq.html
题外话,留言可能会提高文章的权重,那为什么不让别人直接在文章中留言,非得跑到这个没有任何意义的页面中留言呢?文章源自知更鸟-https://zmingcx.com/begin-faq.html
72、
73、二级菜单动画
将下面样式添加到主题选项→定制风格→自定义样式中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
- #site-nav .sub-menu, .top-menu ul {
- animation-name: avatar;
- animation-duration: 1s;
- animation-timing-function: ease-in-out;
- animation-iteration-count: 1;
- }
文章源自知更鸟-https://zmingcx.com/begin-faq.html
74、编辑以下角色只可见“文章”和“个人资料”菜单项
将如下代码添加到主题functions.php模板文件的最后即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
- if ( current_user_can( 'publish_pages' ) ){
- } else {
- function remove_menus() {
- global $menu;
- $restricted = array(
- __('Media'),
- __('Tools'),
- __('Comments')
- );
- end ($menu);
- while (prev($menu)){
- $value = explode(' ',$menu[key($menu)][0]);
- if(strpos($value[0], '<') === FALSE) {
- if(in_array($value[0] != NULL ? $value[0]:"" , $restricted)){
- unset($menu[key($menu)]);
- }
- }else {
- $value2 = explode('<', $value[0]);
- if(in_array($value2[0] != NULL ? $value2[0]:"" , $restricted)){
- unset($menu[key($menu)]);
- }
- }
- }
- }
- if (is_admin()){
- add_action('admin_menu', 'remove_menus');
- }
- }
提示
以上第73、74条适用于作者角色进入后台发表文章。
75、禁止特色图像生成多余的768×512缩略图
进入WP后台→设置→全部设置,ctrl+f 调出浏览器搜索功能。文章源自知更鸟-https://zmingcx.com/begin-faq.html
搜索:medium_large_size_w,将该项值 :768 改为 0 即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
之所以有默认的裁剪数值,大概是因为,当上传的图片宽度超过768时会自动裁剪一张768×512缩略图,方便调用较小的图片,以提高页面加载速度,初衷是好的,不过主机空间有限,很是浪费。文章源自知更鸟-https://zmingcx.com/begin-faq.html
另外,使用begin主题尽量不要使用这个WP自带的特色图像功能,因为主题可以自动裁剪文章中的图片作为缩略图。文章源自知更鸟-https://zmingcx.com/begin-faq.html
WP自带的特色图像与主题集成的timthumb.php截图函数相比,前者缩略图不易管理,删除后不会再次生成,造成附件目录混乱,而 timthumb.php函数生成的缩略图删除后,可以再次生成。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
76、
77、复制网页内容自动添加版权信息
将下面代码添加到\begin\js目录script.js文件的最后。文章源自知更鸟-https://zmingcx.com/begin-faq.html
- // 复制内容自动添加版权信息
- var Sys = {};
- var ua = navigator.userAgent.toLowerCase();
- if (window.ActiveXObject) {
- document.body.oncopy = function() {
- event.returnValue = false;
- var t = document.selection.createRange().text;
- var s = "\r\n原文出自[ 知更鸟 ] 转载请保留原文链接:" + location.href;
- clipboardData.setData('Text', t + '\r\n' + s);
- }
- } else {
- function addLink() {
- var body_element = document.getElementsByTagName('body')[0];
- var selection;
- selection = window.getSelection();
- var pagelink = "原文出自[ 知更鸟 ] 转载请保留原文链接:" + document.location.href;
- var copytext = selection + pagelink;
- var newdiv = document.createElement('div');
- newdiv.style.position = 'absolute';
- newdiv.style.left = '-99999px';
- body_element.appendChild(newdiv);
- newdiv.innerHTML = copytext;
- selection.selectAllChildren(newdiv);
- window.setTimeout(function() {
- body_element.removeChild(newdiv);
- },
- 0);
- }
- document.oncopy = addLink;
- }
记得修改其中的版权信息。文章源自知更鸟-https://zmingcx.com/begin-faq.html
不过代码不并完美,添加该功能后,使用Firefox、chrome等浏览器,复制代码高亮部分代码格式将消失或者不能复制,IE8会提示有JS错误,没有效果。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
78、九宫格HTML代码
一段九宫格HTML代码,适用于放在增强文本小工具中,用于展示一些链接之用,代码结构取自主题读者墙小工具,效果如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
将下面的代码粘贴到增强文本小工具:文章源自知更鸟-https://zmingcx.com/begin-faq.html
展开代码
文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
修改其中的图片和链接地址。文章源自知更鸟-https://zmingcx.com/begin-faq.html
79、
80、
81、为Woocommerce插件添加滑动解锁留言
打插件plugins\woocommerce\templates目前的single-product-reviews.php文件,在下数大约第5行,<?php else : ?>上面添加:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <div class="qaptcha"></div>
文章源自知更鸟-https://zmingcx.com/begin-faq.html
82、让缩略图上的分类名称背景显示不同的颜色
首先编辑分类目录给分类添加不同别名,以我的“Web前端”分类为例,该分类别名为:webdesign。文章源自知更鸟-https://zmingcx.com/begin-faq.html
将下面样式添加到主题选项→定制风格→自定义样式中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .category-webdesign .thumbnail .cat {
- background: #4bafbe;
- opacity: 0.8;
- }
修改其中的 webdesign 的为你想改的分类别名即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
background: #4bafbe; 为背景颜色。文章源自知更鸟-https://zmingcx.com/begin-faq.html
opacity: 0.8; 为透明度。文章源自知更鸟-https://zmingcx.com/begin-faq.html
通过上面的方法,可以让不同的分类显示不同的背景色。文章源自知更鸟-https://zmingcx.com/begin-faq.html
83、
84、
85、
86、移动电话上点开链接直接拨打电话
基本形式:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <a href="tel:123456789">拨打电话</a>
比如将:tel:123456789 添加到公司首页模板联系方式按钮链接文章源自知更鸟-https://zmingcx.com/begin-faq.html
或者文章中的短代码实现的链接按钮中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
在移动电话上点按钮会直接进入拨号页面,兼容大部分移动浏览器。文章源自知更鸟-https://zmingcx.com/begin-faq.html
87、页脚小工具改为三栏
将下面的样式代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .footer-widget .widget {width: 33.3333333333%;}
- @media screen and (max-width: 640px) {.footer-widget .widget {width: 99.6%;}}
88、
89、
90、
91、添加留言者相关信息(国家、浏览器、操作系统、所在区域)
张戈这个留言者相关信息功能貌似很多用户喜欢,这里弄个Begin主题添加教程:文章源自知更鸟-https://zmingcx.com/begin-faq.html
1、下载所需文件,解压后放到Begin主题根目录中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文件下载
注:必须先把这个show-useragent文件夹放到Begin主题目录中,不然直接添加下面的代码会有错误。文章源自知更鸟-https://zmingcx.com/begin-faq.html
2、将下面代码添加到Begin主题根目录functions.php模板文件的最后:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
92、
93、
94、
95、
96、
97、
99
100
101
102。
102,增强文本小工具带图标链接HTML代码
上面第64条,有一个多彩的菜单HTML代码,再给大家弄一个有图标的多彩链接HTML,本代码适用于侧边栏、杂志布局单栏小工具及公司单栏小工具中添加的增强文本小工具,效果如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
侧边栏文章源自知更鸟-https://zmingcx.com/begin-faq.html
单栏小工具文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
首先,将相应样式添加到主题选项→定制风格“自定义样式”中或者主题样式文件style.css最后。文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .qz-box a{background:#08c;float:left;width:50%;color:#fff!important;text-align:center;padding:15px 10px 10px 10px}.g-col .qz-box a,#cms-widget-one .qz-box a{width:25%;padding:25px 10px 20px 10px}@media screen and (max-width:900px){.qz-box a{width:50%}#cms-widget-one .qz-box a{width:50%}}@media screen and (max-width:700px){#group-widget-one .qz-box a{width:50%}}.qz-box a:hover{background:#777}a.qza{background:#699}a.qzb{background:#c96}a.qzc{background:#969}a.qzd{background:#9c9}.qz-icon{padding:5px 0 10px 0;display:block}.qz-icon .be{font-size:40px!important}.g-col .qz-icon .be{font-size:60px!important}
上面代码是以主题自带的图标字体为例,使用自定义阿里图标库,请将上面代码中的be改成zm.文章源自知更鸟-https://zmingcx.com/begin-faq.html
其次,将下面代码添加到增强文本小工具中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <div class="qz-box">
- <!-- 链接A -->
- <a class="qz-link qza" href="链接" rel="bookmark">
- <span class="qz-icon"><i class="be be-home"></i></span>
- <span class="qz-title">关注WordPress</span>
- </a>
- <!-- 链接B -->
- <a class="qz-link qzb" href="http://localhost/wordpress/203.html" rel="bookmark">
- <span class="qz-icon"><i class="be be-folder"></i></span>
- <span class="qz-title">给我投稿</span>
- </a>
- <!-- 链接C -->
- <a class="qz-link qzc" href="链接" rel="bookmark">
- <span class="qz-icon"><i class="be be-sort"></i></span>
- <span class="qz-title">WordPress最新版</span>
- </a>
- <!-- 链接D -->
- <a class="qz-link qzd" href="链接" rel="bookmark">
- <span class="qz-icon"><i class="be be-thumbs-up-o"></i></span>
- <span class="qz-title">在线咨询</span>
- </a>
- <div class="clear"></div>
- </div>
修改其中的链接、文字及字体图标....文章源自知更鸟-https://zmingcx.com/begin-faq.html
103,让菜单上的字体图标闪烁
首先给准备有闪烁的菜单项:添加字体图标文章源自知更鸟-https://zmingcx.com/begin-faq.html
比如字体图标代码:be be-display文章源自知更鸟-https://zmingcx.com/begin-faq.html
另外再加一个特定的css类:frames,名称可以任何文章源自知更鸟-https://zmingcx.com/begin-faq.html
最终为:be be-display frames文章源自知更鸟-https://zmingcx.com/begin-faq.html
加到菜单项“css类”中,如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
最后将下面样式代码添加到主题选项→定制风格“自定义样式”中即可文章源自知更鸟-https://zmingcx.com/begin-faq.html
整个菜单项闪动:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .frames {
- animation: blink 0.5s linear infinite;
- }
或者只有菜单项字体图标闪动:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .frames .be{
- animation: blink 0.5s linear infinite;
- }
文章源自知更鸟-https://zmingcx.com/begin-faq.html
改变文字颜色:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .frames a{
- color: #ff0000 !important;
- }
如只改文字颜色,在菜单项“css类”中只添加frames就行了文章源自知更鸟-https://zmingcx.com/begin-faq.html
104、自动为文章中的图片添加链接到媒体附件启用放大查看
将下面代码添加到主题选项 → SEO选项卡,流量统计代码(同步)中即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <script type="text/javascript">
- jQuery(function() {
- jQuery('.single-content p img').each(function(i){
- if (! this.parentNode.href) {
- jQuery(this).wrap("<a href='"+this.src+"' onclick='return hs.expand(this);' data-fancybox='gallery'></a>");
- }
- });
- });
- </script>
也可以加到页脚模板footer.php中文章源自知更鸟-https://zmingcx.com/begin-faq.html
105、修改主导航菜单颜色
将代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- /** 导航背景色 **/
- #menu-container, .headroom--not-top #menu-container {
- background: #444;
- }
- /** 菜单文字颜色 **/
- .main-nav .down-menu a {
- color: #fff;
- }
- /** 下拉菜单箭头 **/
- #site-nav .sf-with-ul:after {
- color: #fff;
- }
- /** 搜索按钮 **/
- .nav-search:after {
- color: #fff;
- }
- /** 移动菜单按钮 **/
- #navigation-toggle, .nav-mobile {
- color: #fff;
- }
站点名称可以到主题选项---颜色风格中选择颜色。文章源自知更鸟-https://zmingcx.com/begin-faq.html
上面只是举个例子,举一反三,善用浏览器开发者工具,学点DIV+CSS,可以对主题任何部分进行个性化修改。文章源自知更鸟-https://zmingcx.com/begin-faq.html
106、增强文本小工具中添加百度地图
首先,创建百度地图文章源自知更鸟-https://zmingcx.com/begin-faq.html
http://api.map.baidu.com/lbsapi/creatmap/index.html文章源自知更鸟-https://zmingcx.com/begin-faq.html
点击进入网页后左侧切换城市,定位中心点,设置地图尺寸,然后标注你所要引入地址的大概位置。文章源自知更鸟-https://zmingcx.com/begin-faq.html
备注你的标记名称。文章源自知更鸟-https://zmingcx.com/begin-faq.html
保存,获取代码,复制代码。文章源自知更鸟-https://zmingcx.com/begin-faq.html
其次,创建地图文件文章源自知更鸟-https://zmingcx.com/begin-faq.html
在你的网站根目录创建一个文件,比如:baidumap.html 把之前复制的百度地址的代码复制到此文件中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
baidumap.html文件下载
最后,添加调用代码文章源自知更鸟-https://zmingcx.com/begin-faq.html
将下面的代码添加到增强文本小工具中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <iframe src="你的网站链接/baidumap.html" frameBorder=0 height=300 width=100% scrolling=no></iframe>
其中的:height=300高度,可以根据你设置的地图大小做相应修改。文章源自知更鸟-https://zmingcx.com/begin-faq.html
最后的调用代码直接添加到文章中也可以。文章源自知更鸟-https://zmingcx.com/begin-faq.html
效果如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
107、分类模块H3标题更多按钮改为文字
- .more-i {
- position: relative;
- }
- .more-i:after {
- position: absolute;
- top: -7px;
- right: 5px;
- content: "更多";
- width: 80px;
- font-size: 1.2rem;
- text-align: right;
- font-weight: normal;
- }
- .more-i span {
- display: none;
- }
将代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
108、利用CSS为标题添加小图标
在文章标题前后加个醒目的图标,可以突出显示某篇文章。文章源自知更鸟-https://zmingcx.com/begin-faq.html
将代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- /** 标题前图标 **/
- #post-75 h2 a:before {
- content: "\e68b";
- font-family: be;
- font-size: 16px;
- color: #c40000;
- padding: 0 5px 0 0;
- }
- /** 标题后图标 **/
- #post-75 h2 a:after {
- content: "\e667";
- font-family: be;
- font-size: 14px;
- color: #c40000;
- padding: 0 0 0 5px;
- }
其中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- #post-75 h2是文章列表标题选择器,修改其中的数字75,为文章ID,可以通过在后台查看文章ID或者通过查看源代码查看文章的ID。
- content: "\e667"对应的阿里图标字体Unicode代码
- font-family: be 使用自己的阿里图标库,将be改为zm
另外,可以直接上述代码直接添加文字文章源自知更鸟-https://zmingcx.com/begin-faq.html
- /** 标题后加文字 **/
- #post-75 h2 a:after {
- content: "推荐";
- font-size: 14px;
- background: #c40000;
- color: #fff;
- margin: 0 0 0 5px;
- padding: 1px 3px;
- border-radius: 2px;
- }
效果如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
举一反三,修改其中的#post-75 h2选择器,可以给任意页面元素添加图标。文章源自知更鸟-https://zmingcx.com/begin-faq.html
109、移动端导航菜单图标改为文字
修改方法与上条相同,将代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .bars:after, .nav-mobile:after {
- content: "导航";
- background: #c40000;
- color: #fff;
- padding: 1px 3px;
- border-radius: 2px;
- }
- .bars .be, .nav-mobile .be {
- display: none;
- }
效果如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
110、修改更多图标为文字
与上面修改菜单方法类似,比如替换首页TAB更多图标为文字文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .tabs-more a:after {
- content: "更多";
- font-size: 14px;
- font-size: 1.4rem;
- }
- .tabs-more .be {
- display: none;
- }
想修改其它图标按钮,以此类推,用浏览器开发工具找到CSS类替换上面即可。文章源自知更鸟-https://zmingcx.com/begin-faq.html
111、打赏图标改为文字
将代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .zmy-btn-donate:before {
- content: "赏" !important;
- top: 22px;
- left: 13px;
- font-size: 16px !important;
- font-weight: bold;
- }
112、修改移动端页脚菜单个数
默认移动端页脚菜单是6个菜单项,想修改个数,可以将下面代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .footer-nav ul li {
- width: 25%;
- }
上面代码是配合4个,如果是5个按钮就改为20%文章源自知更鸟-https://zmingcx.com/begin-faq.html
113、在页脚小工具中添加微信二维码
将增强文本小工具添加到页脚小工具中,将复制下面代码添加到增强文本小工具中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <ul class="about-me-img clearfix">
- <li>
- <img src="https://s2.ax1x.com/2019/08/24/m6Ike1.png" alt="begin 主题进阶说明" title="我的微信" alt="我的微信">
- <p>我的微信</p>
- </li>
- <li>
- <img src="https://s2.ax1x.com/2019/08/24/m6Ike1.png" alt="begin 主题进阶说明" title="微信公众号" alt="微信公众号">
- <p>微信公众号</p>
- </li>
- <li>
- <a rel="external nofollow" target="_blank" href="https://zmingcx.com/">
- <img src="https://s2.ax1x.com/2019/08/24/m6Ike1.png" alt="begin 主题进阶说明" title="官方微博" alt="官方微博">
- <p>官方微博</p>
- </a>
- </li>
- </ul>
- <style type="text/css">
- .about-me-img li {
- float: left;
- padding: 5px;
- width: 33.333333333333333333% !important;
- }
- .about-me-img p {
- text-align: center;
- }
- </style>
如果是两张图片,修改代码中的33.3333333333333%,为:50%。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
只一张图用下面的代码文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <a href="链接"><img style="width: 100px;height: 100px;" src="https://s2.ax1x.com/2019/09/02/nCWqVf.jpg" alt="begin 主题进阶说明" alt="说明"></a>
修改其中的图片链接。文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
114、在页脚小工具栏数
修改页脚小工具栏数和导航菜单小工具改成单栏,将代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- /*修改页脚小工具栏数*/
- .footer-widget .widget {
- width: 20%;
- }
- .footer-widget .menu li {
- width: 100%;
- }
- .footer-widget h3 {
- color: #fff;
- }
- @media screen and (max-width: 550px) {
- .footer-widget .widget {
- float: left;
- width: 50%;
- text-align: center;
- }
- }
其中:width: 20%,为5栏,根据需要自行修改。文章源自知更鸟-https://zmingcx.com/begin-faq.html
添加上述代码后,可添加多个导航菜单小工具,并以单栏样式展示,如图:文章源自知更鸟-https://zmingcx.com/begin-faq.html
文章源自知更鸟-https://zmingcx.com/begin-faq.html
115、正文title标题中显示分类名称
打开begin\inc目录的title.php模板文件,将大约第8行的文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php if ( is_single() ) { ?><title><?php if ( get_post_meta($post->ID, 'custom_title', true) ) { ?><?php echo trim(get_post_meta($post->ID, 'custom_title', true)); ?><?php if (get_query_var('page')) { echo ' - 第'; echo get_query_var('page'); echo '页';}?><?php } else { ?><?php echo trim(wp_title('',0)); ?><?php if (get_query_var('page')) { echo ' - 第'; echo get_query_var('page'); echo '页';}?> <?php echo zm_get_option('connector'); ?> <?php bloginfo('name'); ?><?php } ?></title><?php } ?>
改为:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <?php if ( is_single() ) { ?><title><?php if ( get_post_meta($post->ID, 'custom_title', true) ) { ?><?php echo trim(get_post_meta($post->ID, 'custom_title', true)); ?><?php if (get_query_var('page')) { echo ' - 第'; echo get_query_var('page'); echo '页';}?><?php } else { ?><?php echo trim(wp_title('',0)); ?><?php if (get_query_var('page')) { echo ' - 第'; echo get_query_var('page'); echo '页';}?> <?php echo zm_get_option('connector'); ?> <?php foreach((get_the_category()) as $category){ echo $category->cat_name; }?> <?php echo zm_get_option('connector'); ?> <?php bloginfo('name'); ?><?php } ?></title><?php } ?>
文章源自知更鸟-https://zmingcx.com/begin-faq.html
116、去掉正文图片的下边距
将下面的样式代码添加到主题选项→定制风格“自定义样式”中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- .aligncenter {
- margin: 0 auto;
- }
插入图片时必须选择居中。文章源自知更鸟-https://zmingcx.com/begin-faq.html
116、
文章源自知更鸟-https://zmingcx.com/begin-faq.html
117、关于过不了移动落地页检测
个人感觉当文章中有大面积图片或者图片较多,就过不了移动落地页检测,会提示“该页面不符合移动落地页体验规范”之类的。文章源自知更鸟-https://zmingcx.com/begin-faq.html
我只测试过3个页面,其中两个文章中无图片,检测通过,另一个文章中有两张图片,没通过。文章源自知更鸟-https://zmingcx.com/begin-faq.html
百度出的垃圾功能也就这智力了文章源自知更鸟-https://zmingcx.com/begin-faq.html
移动落地页检测地址:https://ziyuan.baidu.com/page/mobile文章源自知更鸟-https://zmingcx.com/begin-faq.html
118、常见国家代码:
zh_CN 简体中文 zh_TW 繁体中文 da_DK 丹麦语 nl_NL 荷兰语 en_US 英语 fi_FI 芬兰语 fr_FR 法语 de_DE 德语 it_IT 意大利语 ja_JP 日语 ko_KR 朝鲜语 nb_NO 挪威语 pt_br 葡萄牙语 es_es 西班牙语 es_us 西班牙语(美国) sv_se 瑞典语文章源自知更鸟-https://zmingcx.com/begin-faq.html
119、增强文本小工具图片广告代码
修改相应的图片、链接和文字后,将代码添加到增强文本小工具中:文章源自知更鸟-https://zmingcx.com/begin-faq.html
- <a href="https://zmingcx.com/begin.html" target="_blank">
- <img src="https://zmingcx.com/wp-content/uploads/2019/05/006LwaZdly1fvjcqqj53ej308o0650to.jpg" alt="begin 主题进阶说明" alt="购买begin主题">
- <h4 style="font-size: 15px;font-size: 1.5rem;text-align: center;padding: 8px 0">WordPress多功能主题:Begin</h4>
- </a>
上面是图片,下面是标题文字,效果如图:
文章源自知更鸟-https://zmingcx.com/begin-faq.html
待续.....
历史上的今天:
- 2020: 赚钱的终极门道解密(0)
- 2020: VBA中给变量赋值使用set和不使用set的区别(0)
- 2019: 产品需求文档案例和模版打包分享(8)
本文章百度已收录,若发现本站有任何侵犯您利益的内容,请及时邮件或留言联系,我会第一时间删除所有相关内容。