Begin主题进阶

一款成熟的主题需要长期的磨合修正，才能完美无暇，所以Begin主题难免会有这样那样的问题，另外，个人的需求喜好不同，主题的一些功能并不能适合所有人，本文汇集一些常见问题及个性化修改方法，供大家参考，本文内容会随时更新，包括随着主题的升级，一些内容不适用后会替换掉。 提示 注：修改中文主题模板，建议使用专门的编辑工具，比如：Notepad++（免费），绝不能用操作系统自带的记事本编辑模版文件，否则会造成模板错位，中文模版编码为：UTF-8 无BOM（无签名）。

本文不是主题使用说明！ 也没有任何使用中常见的问题！ 也不是使用主题必须的看的！ 涉及的修改方法，只起到一个抛砖旧玉作用，有些已失效，具体修改操作请自行研究。 本文会随时更新，删除不适用的，添加新的，所以不要以序号顺序分内容先后。

本文禁止用户公开转载到自己网站上！

1、安装完WordPress必须的一些设置

默认安装完WordPress程序，有些最基本的功能，比如“自定义栏目”面板、菜单模块和高级属性等需要设置一下才能显示，这些在主题设置中经常会用到，有些用户之所以找不到也不知道“自定义栏目”是什么就是因为最基本的功能没调出来。 显示文章编辑页面所有模块 登录WP后台→文章→写文章，进入文章撰写编辑页面，打开右上角的”显示选项“，勾选其中全部的“模块”（页面编辑设置方法相同），如图： 显示菜单所有模块和高级菜单属性 登录WP后台→外观→菜单，进入菜单编辑管理页面，打开右上角的”显示选项“，勾选其中全部的“模块”和所有高级菜单属性，如图： 设置多媒体图像大小为零 默认，上传图片会自动裁剪多张不同尺寸的图片，在附件目录，浪费空间，禁止方法： 登录WP后台→设置→多媒体，进入媒体选项页面，将所有图像大小设置为零，如图： 另外，虽然设置上面进行了设置，但当上传图片大于尺寸较大时，默认还是会裁剪一张宽度768的图片，所以还需要进一步设置，主题选项→辅助功能→勾选“显示WordPress设置选项字段”，进入WP后台→设置→全部设置，进入全部设置页面按ctrl+f，调出浏览搜索功能，搜索数字：768或者medium_large_size_w，找到后将数字修改为 0。提示 全部设置页面调用的是数据库中的一些设置，如果不清楚是什么不要乱改，切记。 WP后台首页显示内容设置 默认WP后台会显示：概览、快速草稿 、WordPress新闻、Welcome（欢迎页面） 其中：WordPress新闻、Welcome（欢迎页面）比较影响加载速度，同样打开右上角的”显示选项“去掉没有用的模块勾选。 显示编辑器工具栏 默认WP经典编辑器不显示第二行的工具栏，因此很多新手认为WP的编辑器过于简单。 点击红框中的工具栏开关，显示工具栏 打开页面讨论（评论）选项 默认WP不显示页面讨论（评论）选项，新建页面—右上—显示选项—模块中，勾选“讨论”善用WP帮助说明 WordPress后台每个页面都有详细的操作说明，点开右上角的“帮助”按钮，里面是关于本页面功能的操作指南，包括上面说的基本设置。

2、分类小工具添加图标字体

分类小工具正常无法添加图标字体，但可以变通一下，使用导航菜单小工具来实现。 新建一个单独的菜单（不能有二级菜单项目），然后使用导航菜单小工具调用这个单独的菜单，图标字体添加方法请阅读主题使用说明：菜单。 另外，使用菜单小工具可以选择显示分类，比默认的分类目录小工具，更加灵活。

3，段首空格

目前主题取消自动段首空格，原因是众口难调，去掉所有不符合正常网页习惯的玩意 添加空格：打开主题选项→定制风格，在“自定义样式”中添加下面的代码即可：

.single-content p {	text-indent: 2em;}

编辑文章时按住Shift+回车，就不会出现段首的空格。 全部取消段首空格，可以打开主题选项→定制风格，在“自定义样式”中添加下面的代码即可：

1. .single–content p {
2. text–indent: 0;
3. }

正文H2空格

1. .single–content h2 {
2. padding: 0 16px;
3. }

正文H3空格

1. .single–content h3 {
2. padding: 0 16px;
3. }

正文H4空格

1. .single–content h4 {
2. padding: 0 16px;
3. }

4、搜索推荐菜单实现关键词搜索

为菜单添加一个自定义链接 链接文本输入关键词，比如：WordPress url输入格式：http://zmingcx.com/?s=WordPress 点击这个“WordPress”关键词，即可实现相关搜索。

5、更新文章归档页面

文章归档页面，会在数据库中生成一个类似：cx_archives_list的表，用于存储文章发表/删除时生成html，可加快访问速度，不用每次都要查询数据库生成归档，如果发现文章归档页面一直不更新，进入主题选项–辅助设置–勾选“显示WordPress设置选项字段”，然后进入WP后台—设置—全部设置页面，搜索cx_archives_list，清空其右侧的数据并保存。 另一个文章更新模板，在主题选项中修改文章限定日期分类后，也需要上面的操作清空生成的html，搜索内容改为：up_archives_list

6、页脚添加公安备案号和域名备案号

将代码添加到主题选项—SEO最下面的“页脚第二行信息”中，添加时需要将编辑器切换到文本模式。

<a target="_blank" rel="external nofollow" target="_blank" href="http://zmingcx.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5iZWlhbi5nb3YuY24vcG9ydGFsL3JlZ2lzdGVyU3lzdGVtSW5mbz9yZWNvcmRjb2RlPeWFrOe9keWkh+ahiOWPtw==" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">	<img src="https://wp.joycarry.com/wp-content/uploads/2019/12/0066LGKLly1g27s4j2ryaj300k00kq36.jpg" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;">公网安备 21111188888888号</p></a><a rel="external nofollow" target="_blank" href="http://zmingcx.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5taWl0YmVpYW4uZ292LmNuLw==" target="_blank" rel="noopener"><p style="fheight:20px;line-height:20px;margin: 0px 0px 0px 5px;">ICP备18181818号</p></a>

并修改其中的备案号即可。 注：下次保存主题设置时，不要切换到可视化编辑模式，否则有些代码会被WP编辑器过滤掉，样式会有变动。

7、修改正文字号大小

1. .single-content {
2.     font-size: 20px;
3.     font-size: 2.0rem;
4.     line-height: 2;
5. }

修改其中的数字，并添加到主题选项→定制风格→自定义样式中

8、目录索引改为三级标题H3标签

主题默认自将四级标题H4标签转换为文章索引目录，简单修改一下将三级标题H3标签变为索引目录。 打开主题begin\inc\function目录的default.php或者inc.php (主题不同版本，文件不一样)，查找：

1. $r = “/<h4>([^<]+)<\/h4>/im”;

将其中的数字4，改为3即可。

9、修改导航菜单字体、颜色及字号

将下面样式加到主题选项→定制风格→自定义样式中 加粗字体和增大字号

1. #site-nav .down-menu li a {
2.     font-weight: bold;
3.     font-size: 20px;
4. }

修改字体颜色

1. #site-nav .down-menu li a {
2.     color: #ff0000;
3. }

10、移动端首页显示不同的页面模板

比如想让移动端浏览者直接看博客布局页面，可以打开主题头部模板header.php，将下面代码添加到</head>上面即可。

<?php if ( wp_is_mobile() && is_home() ) {	header( "location:https://www.baidu.com/" );} ?>

修改一下其中的链接为你想让用户看到的页面链接。

11、自定义搜索结果文章数量

打开主题search.php模板文件，在类似：

1. <?php if ( have_posts() ) : ?>

上面添加：

1. <?php $posts = query_posts($query_string . ‘&posts_per_page=5’);?>

或者（置顶文章按正常排序）：

1. <?php $posts = query_posts($query_string . ‘&orderby=date&posts_per_page=5’);?>

其中的数字5是文章搜索结果每页的文章数，该方法也适用于其它分类页面。

12、调整网站名称宽度

首先进入主题选项→网站标志中取消“为Logo添加扫光动画”勾选。 然后将下面样式添加到主题选项→定制风格→输入自定义样式代码框中。

1. .logo-site, .logo-sites {
2.     width: 280px;
3. }
4. @media screen and (max-width: 480px) {
5.     .logo-site, .logo-sites {
6.         width: 140px;
7.     }
8. }

调整其中数值280，直至在一行显示标题为止。 或者直接到主题样式文件style.css，查找.logo-site, .logo-sites修改。

13、友情链接添加nofollow

友情链接页面，为自己收藏的网址添加nofollow属性，以WordPress 4.5+为例，打开wordpress\wp-admin\includes目录的meta-boxes.php，在第1046行【/tr】标签下面添加：

1. <tr>
2.     <th scope=”row”><?php _e(‘nofollow’) ?></th>
3.     <td><fieldset>
4.         <label for=”nofollow”>
5.         <input class=”valinp” type=”checkbox” name=”professional” value=”external nofollow” id=”nofollow” <?php xfn_check(‘professional’, ‘nofollow’); ?> />
6.         <?php _e(‘external nofollow’) ?></label>
7.     </fieldset></td>
8. </tr>

之后编辑链接时，在链接关系网面板，会增加一个nofollow选项，如图：

14、去掉wp-postview插件计数后面的views

WP后台→设置→Post Views设置页面，找到Views Template（浏览计数显示模板）： 默认显示为：%VIEW_COUNT% views 去掉其中红色的部分，并保存。 另外，除了主题部分功能需要调用Post Views插件的计数外，这个插件的主要功能就是满足虚荣心，因此想让这个计数倍增，可以在插件设置页面，设置被统计的访问者选择“所有人”（包括登录者，），是否排除机器人（也就是搜索引擎爬虫）选择“否”，还可以编辑文章将下面自定义栏目名称中“views”的值改大一些……

15、隐藏文章中的图片

主题视频文章形式和自定义分类法中的视频，有个视频封面模块，手动添加缩略图比较麻烦，可以变通一下，将文章中添加的图片宽度和高度改为零，使其隐藏，但并不影响自动裁剪生成缩略图。 具体方法：正常在文章中添加图片后，切换到文本编辑模式，将图片HTML代码中类似width=”700″ height=”300″的数值改为：0，这样就看不见图片了，但并不影响生成视频封面缩略图。 也同样适用于，正常文章中的图片不好看，影响在文章列表中的美观，可以将一张漂亮的图片隐藏在文章中，当然了要将这张图片做为第一张图片加到文章中。 注：对低版本IE无效，比如IE8。

16、隐藏一些页面元素

将下面样式添加到主题选项→定制风格→自定义样式代码框中 隐藏文章列表前的小箭头

li .be-arrowright {	display: none;}

隐藏文章列表缩略图上的分类名称

1. .thumbnail .cat{display: none;}

去掉幻灯上的标题文字

1. .slider-caption {display: none; }

隐藏文章形式图标

1. .post-format {display: none;}

去掉图片布局上的点赞图标

1. .picture-box .grid {display: none;}

隐藏企业公司页面幻灯上的标题

1. .group-slider-main{ display: none;}

隐藏文章列表中的日期和评论

1. .entry-meta .comment, .entry-meta, .single-footer .comment {
2.     display: none;
3. }

隐藏文字大小

1. #fontsize{display: none;}

隐藏打印按钮

1. .single-meta .print, .begin-single-meta .print {
2.     display: none;
3. }

隐藏文章列表左边的装饰条

1. .title-l {
2.     display: none !important;
3. }

隐藏页脚“关于本站”小工具下面的文章信息

1. .footer-widget .about-inf {
2.     display: none;
3. }
4. .footer-widget .about-img img {
5.     border: none;
6. }

隐藏侧边小工具和分类栏目前的图标装饰

1. .widget-title .title-i, .cat-title .title-i, .cat-grid-title .title-i {
2.     display: none;
3. }
4. .cat-title a, .cat-grid-title a, .widget-title {
5.     padding: 0 0 0 15px;
6. }

提示 如果想隐藏其它页面元素，也可以参照上面，查看网页源代码找到准备隐藏部分的选择器，然后通过CSS代码display: none隐藏掉即可。

17、批量删除WordPress自定义栏目

18、删除评论表单中的网址项

打开主题begin主题根目录的comments.php评论模板文件，在大约第112行找到：

1. <p class=”comment-form-url”>
2.     <input type=”text” name=”url” id=”url” class=”commenttext” value=”<?php echo $comment_author_url; ?>” tabindex=”3″ />
3.     <label for=”url”>网址</label>
4. </p>

删除即可。

19、让一级菜单无超链接

给菜单加一个“自定义链接”项，随便加个链接，添加到菜单后再删除其中的链接，这样就成功添加了一个无超链接的菜单项。 给这个无超链接的菜单项添加图标： 编辑这个菜单“自定义链接”项，在”CSS类”中添加：ico-1 然后将下面的代码添加到外观→自定义→额外CSS中：

.ico-1 a:before {	content: "\e680";/** 使用自己添加的图标时只需要修改最后的6f5**/	font-family: be;/** 使用自己添加的图标时将be改为zm **/	font-size: 15px !important;	margin: 0 5px 0 0;}

使用自己添加的图标时将be改为zm 并到自己的阿里图标项目中选择Unicode编码模式，只需要换content: “\e680″后三位代码即可。

20、调整关注微博按钮位置

将如下代码添加到主题选项→定制风格→自定义样式代码框中：

1. .weibo {
2.     left: 200px;
3.     top: 35px;
4. }

其中数字200是距左位置，35是距上位置，适当修改数字即可。

21、开启 https 百度分享本地化

因是主题集成的百度分享JS文件是外链百度，但百度并没有提供https链接，所以网站启用https 需要将百度分享本地化。 将百度分享本地化的方法： 到此下载修改版的百度分享代码：https://github.com/hrwhisper/baiduShare百度分享代码下载 文件解压后，将里面的static目录放到空间的根目录。 主题最新版本到主题选项中勾选“本地调用百度分享”即可。 在感谢提供修改代码网友的同时，这里也强烈鄙视一下百度，不提供https加载代码。 至于为什么不集成到主题中，除本地化代码来自网络安全性未知，另外本地化后是否还能在百度分享后台查看统计也是未知数，因为貌似我的博客文章根本没有分享，所以也无从测试，使用与否自行决定吧。提示 另外，进入主题选项—-辅助功能Gravatar 头像获取也需要改为从“从官方ssl获取”，或者安装头像本化插件。 本地化后，感觉加载速度快了很多，之前打开网页经常卡在分享代码这里。 至于另一个关注微博按钮，没有本地化代码，只能到主题选项中关掉了。

22、Woocommerce插件评价提交添加滑动解锁

如果主题开启了滑动解锁才能提交评论，默认Woocommerce是不能提交评价的，会提示滑动解锁才能提交，但又看不到滑块。 打开Woocommerce插件：wp-content\plugins\woocommerce\templates目录的single-product-reviews.php，在最后几行找到：

<?php else : ?>

在其上面添加

<div class="qaptcha"></div>

完成

23、强制文章中图片居中显示

将下面样式添加到主题选项→定制风格→自定义样式代码框中：

1. .single-content p img{margin: 0 auto;}

注：对于响应式设计的主题，添加图片时必须选择对齐方式为：中

24、添加浏览器title滚动、闪动特效

这是一种常见的网页特效，将下面代码添加到主题头部模板header.php，这句

1. <?php wp_head(); ?>

的上面，保存时需将编码选择为UTF-8 无BOM（无签名），否则会出现乱码，直接在WP后台主题编辑中添加则不需要自己选择编码。 展开代码： 特效一，标题滚动 特效二，标题闪动 特效三，自定义标题内容并滚动

25、批量删除SEO自定义内容

将下面代码添加到主题函数模板 functions.php 最后：

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'" );

刷新一下网页上述自定义内容会自动删除，根据情况选择删除上面的自定义内容，用后代码不要保留在主题中。

26、关于文章编辑时的边框

用户在编辑文章时发现文章编辑区域有一个边框，这个边框与前台正文宽度相同，用于编辑文章时所见即所得，后台编辑文章时文章显示的宽度，与前台查看文章时相同，不会影响你正常编辑文章。

27、解决 WP Dialog 插件与滑动解锁冲突

目前插件已修改，不需要自己修改了。 张戈这个滚动条插件貌似很受欢迎，不过与Begin主题的滑动解锁有冲突，大概的原因是插件调用随机文章的函数是query_posts，干扰了滑动解锁的加载，解决办法，改为使用 WP_Query调用随机文章： 打开WP Dialog 插件scroll-bar.php文件，将大约21行开始的： 替换为： 之后，覆盖替换原文件即可。

28、默认隐藏侧边栏

将下面样式代码加到主题选项→定制风格→自定义样式代码框中即可。 隐藏文章页面侧边栏

.single #primary {    width: 100%;}.single #sidebar, .r-hide, .s-hide {    display: none;}

隐藏分类页面侧边栏

1. .archive #primary {
2.     width: 100%;
3. }
4. .archive #sidebar,.r-hide {
5.     display: none;
6. }

29、回复无法邮件通知

如果你的主机不支持SMTP 发送邮件，无法实现回复邮件通知，可以安装 Configure SMTP或者WP Mail SMTP插件，并配置邮箱参数启用就可以了。 也可以尝试将以下代码添加到主题的 functions.php 中：

1. //使用smtp发送邮件（请根据自己使用的邮箱设置SMTP）
2. add_action(‘phpmailer_init’, ‘mail_smtp’);
3. function mail_smtp( $phpmailer ) {
4.     $phpmailer->FromName = ‘常阳时光’; //发件人名称
5.     $phpmailer->Host = ‘smtp.qq.com’; //修改为你使用的邮箱SMTP服务器
6.     $phpmailer->Port = 465; //SMTP端口
7.     $phpmailer->Username = ‘123@qq.com’; //邮箱账户
8.     $phpmailer->Password = ‘123123123’; //邮箱密码
9.     $phpmailer->From = ‘123@qq.com’; //邮箱账户
10.     $phpmailer->SMTPAuth = true;
11.     $phpmailer->SMTPSecure = ‘ssl’; //tls or ssl （port=25时->留空，465时->ssl）
12.     $phpmailer->IsSMTP();
13. }

附上各邮箱的端口及smtp地址：

30、添加字母头像

将first-letter-avatar文件夹中的first-letter-avatar.phpy放到主题根目录中，avatar文件夹放到主题begin\img目录中。 打开主题函数模板functions.php，在最后添加：

require get_template_directory() . '/first-letter-avatar.php';

相关文件下载 至于为什么从主题中删除这个功能，不支持头像缓存，放在主题中一堆字母图片看着别扭。

31、在小屏上隐藏页脚最下面的内容

将下面样式添加到主题选项→定制风格→自定义样式代码框中

1. @media screen and (max-width: 550px) {
2.     .add-info {
3.         display: none;
4.     }
5. }

32、将公司首页两栏和三栏小工具改为一栏

将下面样式添加到主题选项→定制风格→自定义样式代码框中：

.group-widget .xl3, .group-widget .xl2 {	width: 100%;}

33、制作网站logo中，如何保证小字号中文清晰度

教大家一个在PS中制作logo，如何让比较小的中文汉字保持清晰的小技巧。 很多PS新手对字号比较小的汉字看上去模糊，感到很挠头，其实一个小技巧就可以轻松解决： 1、在处理小字号的汉字时，比如小于14px，必须选择“宋体”或者“新宋体”。 2、在PS字符面板中，选择消除锯齿的方法为“无”. 如图，上面的LOGO小字号的文字是选择“无”的效果，下面是选择“犀利”的效果。

34、编辑器添加表情按钮

将下面代码添加到主题functions模板最后的“// 全部结束”注释后面即可。 展开代码

1. //添加表情
2. function fa_get_wpsmiliestrans(){
3. global $wpsmiliestrans;
4. $wpsmilies = array_unique($wpsmiliestrans);
5. foreach($wpsmilies as $alt => $src_path){
6. $output .= ‘<a class=“add-smily” data-smilies=“‘.$alt.'”><img class=“wp-smiley” src=“‘.get_bloginfo(‘template_directory’).’/img/smilies/’.rtrim($src_path, “gif“).’gif” /></a>’;
7. }
8. return $output;
9. }
10. add_action(‘media_buttons_context’, ‘fa_smilies_custom_button’);
11. function fa_smilies_custom_button($context) {
12. $context .= ‘<style>.smilies-wrap{background:#fff;border: 1px solid #ccc;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.24);padding: 10px;position: absolute;top: 60px;width: 380px;display:none}.smilies-wrap img{height:24px;width:24px;cursor:pointer;margin-bottom:5px} .is-active.smilies-wrap{display:block}</style><a id=“insert-media-button” style=“position:relative” class=“button insert-smilies add_smilies” title=“添加表情” data-editor=“content” href=“javascript:;”>
13. 添加表情
14. </a><div class=“smilies-wrap”>’. fa_get_wpsmiliestrans() .'</div><script>jQuery(document).ready(function(){jQuery(document).on(“click”, “.insert-smilies”,function() { if(jQuery(“.smilies-wrap”).hasClass(“is-active”)){jQuery(“.smilies-wrap”).removeClass(“is-active”);}else{jQuery(“.smilies-wrap”).addClass(“is-active”);}});jQuery(document).on(“click”, “.add-smily”,function() { send_to_editor(” “ + jQuery(this).data(“smilies”) + ” “);jQuery(“.smilies-wrap”).removeClass(“is-active”);return false;});});</script>’;
15. return $context;
16. }

35、隐藏前台浏览统计

有人说开了静态缓存插件，前台不计数，有些怪，那就隐藏掉。 可以到Post Views插件设置中选择是是否显示统计。 或者直接用CSS隐藏掉，将下面的代码添加到主题选项→定制风格→自定义样式代码框中：

1. .views, .single-meta .views {display: none;}

隐藏后，并不会影响计数，后台还在继续计数。

36、减少主题JS文件加载

主题加载了很多JS文件，分别用于不同的功能特效。可以根据自己的需要，通过主题选项中关闭一些功能减少页面JS文件加载。

• 关闭：滑动解锁才能提交评论
• 关闭：简繁体转换按钮
• 关闭：生成当前页面二维码
• 关闭：点赞分享
• 关闭：新浪微博关注按钮
• 关闭：热门标签小工具3D特效
• 关闭：文章Ajax滚动加载
• 关闭：评论Ajax翻页
• 关闭：自动代码高亮显示
• 关闭：Ajax评论
• 关闭：图片Lightbox查看
• 关闭：禁止复制及右键
• 关闭：动画特效
• 关闭：生成当前页面二维码
• 不使用：ajax组合小工具

另外，简繁体转换和文章朗读功能，没有必要的话关了，影响速度。

37、页脚版权信息回行方法

主题默认页脚内容编辑是调用的WP的自带的编辑器，可以添加任意内容，如果内容较多想回行，如果输入：

1. <br />

当切换到可视化模式，并保存设置后，会被WP过滤掉，可以按下面的方法实现回行： 方法一： 切换到文本编辑模式，输入类似：

1. <div>文字内容</div>
2. <div>文字内容</div>
3. <div>文字内容</div>

多个回行，以此类推。 用 p 代替 div 也是可以的。 方法二： 选择文字，点击编辑工具栏上的“项目符号列表”按钮，然后在适当的位置按回车键，也可实现回行。

38、透明风格样式

使用方法： 到外观—背景—背景图片，上传一张大尺寸的图片，最好是经过虚化的有渐变效果的图片。 将下面的样式添加到主题选项→定制风格→自定义样式代码框中，或者直接加到样式文件style.css最后；

1. .post, #page .page,
2. .bulletin,
3. .single–picture .picture,
4. .type–attachment,
5. .single–tao .tao,
6. .single–video .video,
7. .widget,
8. .authorbio,
9. #related-img,
10. .meta–nav,
11. #respond,
12. #respond #submit,
13. .cat–cover–main,
14. #colophon,
15. .pagination a,
16. .pagination a:visited,
17. .all–cat,
18. .picture–cms,
19. .cat–container,
20. .slider–rolling–box,
21. .comments–title,
22. .comment–list li,
23. .grid–cat–bx4,
24. .picture–box,
25. .link–f a {
26. background: rgba(255, 255, 255, 0.8);
27. }
28.  
29. .comment–list ul li {
30. background: rgba(255, 255, 255, 0.3);
31. }
32.  
33. .filter–box,
34. .comment–tool a {
35. background: rgba(255, 255, 255, 0.5);
36. }
37.  
38. .author–the,
39. .author–th,
40. .widget .cat–cover–main,
41. .related–title,
42. .footer–widget .widget,
43. .widget_ajax .new_cat,
44. .down–form fieldset,
45. .shang–empty span,
46. .ajax_widget_content .tab_title.selected a {
47. background: transparent;
48. }
49.  
50. .ajax–tabs,
51. .abstract {
52. background: transparent;
53. }
54.  
55. .filter–tag,
56. .like a,
57. .share–s a {
58. background: rgba(255, 255, 255, 0.5);
59. }
60.  
61. #footer-widget-box {
62. background: rgba(85, 85, 85, 0.9);
63. }
64.  
65. .shang–empty span {
66. border: none;
67. }
68.  
69. .ajax_widget_content .tab_title.selected a {
70. border–bottom: none;
71. }
72.  
73. .ajax_widget_content .tab_title a {
74. background: rgba(248, 248, 248, 0.9);
75. }
76.  
77. .single–cat–tag {
78. background: rgba(248, 248, 248, 0.5);
79. }
80.  
81. #sidebar h3,
82. #sidebar-l h3,
83. .cat–w–icon,
84. .cat–container .cat–title,
85. .about–inf {
86. background: rgba(248, 248, 248, 0.5);
87. }
88.  
89. .cat–grid–title,
90. .cat–square–title {
91. background: rgba(248, 248, 248, 0.8);
92. }

39、隐藏分类目录小工具的某个分类

如果想隐藏分类目录小工具中的某个分类，可以将下面的代码添加到主题选项→定制风格→自定义样式代码框中：

1. .widget_categories .cat-item-20{display: none;}

修改其中：cat-item-20中的数字为分类ID.

40、关于排版样式

主题目前的样式是：

• .single-content p,
• .single-content ul,
• .single-content ol,
• .single-content dd,
• .single-content pre,
• .single-contenthr {
•     margin: 0 0 5px 0;
•     -webkit-hyphens: auto;
•     -moz-hyphens: auto;
•     -ms-hyphens: auto;
•     hyphens: auto;
•     word-wrap: break-word;
•     text-align: justify;
•     text-justify: inter-ideograph;
•     word-wrap: break-word;
• }

英文不以单词回行，中英文混排不会出现字间距加大问题。具体使用哪种，自行选择修改吧。 另外，其中的word-break: break-all会造成标点在行首出现，自己行酌情删除吧。

41、菜单项居左

将下面的代码添加到主题选项→定制风格→自定义样式代码框中：

1. .main-nav {
2.     float: left;
3. }
4. #site-nav-wrap {
5.     float: left;
6. }
7. @media screen and (max-width: 900px) {
8.     .main-nav {
9.         float: right;
10.     }
11.     #site-nav-wrap {
12.         float: right;
13.     }
14. }

42、直接显示繁体

打开主题begin\js目录的gb2big5.js文件，将第1行的：

1. var Default_isFT = 0

后面的数字 0改为1即可。

43、批量删除手动添加的缩略图

主题新版本已集成自动裁剪文章中图片作缩略图功能，所以之前手动添加的缩略图地址可能与目前的尺寸不同，逐一编辑修改文章工作量比较大，可以用下面方法，批量删除这个手动添加的缩略图（自定义栏目），将下面的代码添加到主题functions.php模板文件的最后，并上传覆盖主题原文件

1. global $wpdb;
2. $wpdb->query( “
3. DELETE FROM $wpdb->postmeta
4. WHERE `meta_key` = ‘thumbnail’
5. ” );

之后，手动缩略图添加的自定义栏目’thumbnail’ 会被删除，并显示自动裁剪的缩略图。 注：以上代码只使用一次就可以了，不用留在主题模板中，删除缩略图片后，需要将该代码删除并还原functions.php模板文件。

44、微调杂志布局小工具高度

主题新增的杂志布局小工具，可使杂志首页布局更加灵活多变，但有一个问题就是，不同的小工具组合在一起，会产生高度不同底部对不齐，可以通过下面的方法进行一下微调使之齐，从而加美观一些。 使用工具，火狐及其Web开发扩展Firebug，当然也可以使用其它类似的浏览器扩展功能，目的是找到准备修改模块的CSS选择器。 鼠标停在修改模块右键调出菜单选择“使用Firebug”查看元素，找到模块选择器，如图： 会看到这个模块的外层是#img_widget-15，内层是.img_widget 找到这个就可以了，将下面代码加到主题选项→定制风格→自定义样式代码框中：

1. #img_widget-15 .img_widget{
2.     padding: 3px 0 3px 0;
3. }

修改其中的“3px”为合适的大小即可，另外其它小工具可能选择名称不同，调整这个还是需要点DIV+CSS基本的，杂志布局侧边小工具及企业布局小工具对齐也参照调整。 但有个问题就是，就是当屏幕窗口小于页面正常宽度时，杂志小工具还是会有借位对不齐的问题，响应式布局设计不可规避的弊端，就是结构布局不能太复杂。

45、增强文本小工具应用实例

新增加的增强文本小工具可以运行PHP代码（WP自带的不可以），可以任意添加运行网上淘来的代码，比如可以将集成在小工具中调用分类文章的代码直接添加到增强文本小工具中。 通过在增强文本小工具中直接添加分类调用代码与正常的小工具外观没有区别，区别是默认小工具标题不能加链接，增强文本小工具可以自定义标题链接，方便浏览者点击标题查看更多相关分类的文章。 将以下代码实例直接加到增强文本小工具中即可。 例一、下面的代码是调用ID为88的分类最新的5篇文章，并有缩略图：

1. <div class=”new_cat”>
2.     <ul>
3.         <?php
4.             $loop = new WP_Query( array ( ‘showposts’ => 5, ‘cat’ => 88, ‘post__not_in’ => get_option( ‘sticky_posts’) ) );
5.             while ( $loop->have_posts() ) : $loop->the_post();
6.         ?>
7.         <li>
8.             <figure class=”thumbnail”>
9.                 <?php if (zm_get_option(‘lazy_s’)) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?>
10.             </figure>
11.             <div class=”new-title”><a href=”<?php the_permalink(); ?>” rel=”bookmark”><?php the_title(); ?></a></div>
12.             <div class=”date”><?php the_time(‘m/d’) ?></div>
13.             <?php if( function_exists( ‘the_views’ ) ) { the_views( true, ‘<span class=”views”><i class=”fa fa-eye”></i> ‘,'</span>’ ); } ?>
14.         </li>
15.         <?php endwhile; ?>
16.         <?php wp_reset_query(); ?>
17.     </ul>
18. </div>

例二、以图片形式调用ID为88的分类最新的4篇文章： 更多实例代码

• <div class=“img_cat”>
•     <ul>
•         <?php
•             $loop = new WP_Query( array ( ‘showposts’ => 4, ‘cat’ => 88, ‘post__not_in’ => get_option( ‘sticky_posts’) ) );
•             while ( $loop->have_posts() ) : $loop->the_post();
•         ?>
•         <div class=“img-box”>
•             <div class=“img-x2”>
•                 <figure class=“insets”>
•                     <?php if (zm_get_option(‘lazy_s’)) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?>
•                     <?php the_title( sprintf( ‘<div class=“img-title”><a href=“%s” rel=“bookmark”>’, esc_url( get_permalink() ) ), ‘</a></div>’ ); ?>
•                 </figure>
•             </div>
•         </div>
•         <?php endwhile;?>
•         <?php wp_reset_query(); ?>
•         <div class=“clear”></div>
•     </ul>
• </div>

46、为单独的某篇文章添加背景

将下面的代码添加到主题选项→定制风格→自定义样式中：

1. .postid-6367 {
2.     background: #f1f1f1;
3.     background:url(‘http://zmingcx.com/wp-content/uploads/2012/08/79760-772704496-8.gif’);
4. }

其中：postid-6367为该文章页面特有选择器，后面的数字为文章ID。 可以通过查看网页源代码中这句： <body class=”single single-post postid-6367 single-format-standard logged-in”> 获得。另外，背景颜色与图片只选择添加一个样式属性就可以了。 效果见本文背景色

47、修复 WordPress 找回密码提示“抱歉，该key似乎无效

貌似该问题只限制于QQ邮箱。 将代码添加到当前主题的 functions.php 中即可：

/** * 修复 WordPress 找回密码提示“抱歉，该key似乎无效” * http://www.wpdaxue.com/lost-password-error-invalidkey.html */function reset_password_message( $message, $key ) {	if ( strpos($_POST['user_login'], '@') ) {	 $user_data = get_user_by('email', trim($_POST['user_login']));	} else {		$login = trim($_POST['user_login']);		$user_data = get_user_by('login', $login);	}	$user_login = $user_data->user_login;	$msg = __('貌8似有人要求重设如下帐号的密码：'). "\r\n\r\n";	$msg .= network_site_url() . "\r\n\r\n";	$msg .= sprintf(__('用户名：%s'), $user_login) . "\r\n\r\n";	$msg .= __('若这不是您本人要求的，请忽略本邮件，一切如常。') . "\r\n\r\n";	$msg .= __('要重置您的密码，请打开下面的链接：'). "\r\n\r\n";	$msg .= '[' . network_site_url( "wp-login.php?action=rp&key=$key&login=" . rawurlencode( $user_login ), 'login' ) . "]\r\n";	return $msg;}add_filter('retrieve_password_message', 'reset_password_message', null, 2);

48、主题与ErphpDown会员下载插件样式兼容

ErphpDown 资源下载插件功能使用者很多。 这里装单兼容一下主题的样式和修改插件默认点击登录按钮为主题的弹窗登录。 将样式代码添加到主题选项→定制风格→自定义样式代码框中。 样式代码：

1. margin: 30px 0 !important;
2. border: 1px solid #ddd !important;
3. padding: 30px 15px 20px 15px!important;
4. font–size: 16px !important;
5. text–align: center;
6. overflow: visible !important;
7. border–radius: 2px;
8. }
9.  
10. .erphpdown .erphp–login–must,
11. .erphpdown .erphpdown–down,
12. .erphpdown .erphpdown–vip,
13. .erphpdown .erphpdown–buy {
14. padding: 5px 15px !important;
15. font–size: 16px !important;
16. }
17.  
18. .erphpdown .login–respond {
19. border: none;
20. }
21.  
22. .erphpdown:after {
23. background: #fff;
24. position: absolute;
25. top: –20px;
26. left: 15px;
27. content: “资源下载”;
28. color: #555 !important;
29. font–weight: bold;
30. padding: 5px 10px !important;

插件默认点击登录按钮为主题的弹窗登录替换文件：替换文件下载 将解压后的show.php文件，替换wp-content\plugins\erphpdown\includes目录同名文件即可。 后期考虑把插件前端的相关下载信息集成到主题的下载模块中，有点复杂….

49、调整Ajax组合小工具加载动画高度

主题5.0版本新增的Ajax加载的组合小工具，默认是5篇文章，当你改变文章数量后，在载入文章过程中有个加载动画的高度并不会变，加载完文章动画结束后，会有一个瞬间的高度变化，有些不协调 解决方法：可以将下的代码，添加到主题选项→定制风格→自定义样式代码框中： 默认是：

1. .wpz-loading {
2.     min-height: 550px;
3. }

4篇文章时用：

1. .wpz-loading {
2.     min-height: 459px;
3. }

6篇文章时用：

1. .wpz-loading {
2.     min-height: 641px;
3. }

数值大约都是相差：91 当然你也可以直接修改样式文件。

50、导航菜单半透明

代码添加到主题选项→定制风格→自定义样式代码框中：

#menu-container, .headroom--not-top #menu-container, #site-nav .down-menu ul li {	background: rgba(255, 255, 255, 0.8);}

51、修改网站域名

备案期间有的用户准备用临时的域名测试一下空间和主题使用，并填充了部分文章，同时主题各项设置也弄好了，当备案下来后，不准备全新安装WordPress想保留之前的文章和设置，这里提供修改域名的方法，供大家参考： 安装Wordpress站内链接修改插件：Velvet Blues Update URLs 也可下载我汉化的版本：汉化版本下载 插件使用简单，后台—-工具—–更新链接，打开更新链接页面，分别输入旧的链接（旧的网站地址）和新的链接（新的网站地址），并选择要更新内容即可，如果无特殊情况可以勾选所有。 最后，设置—-常规—常规设置面将WordPress地址（URL） 和站点地址（URL）的地址改为新域名的链接，重新登录网站完成域名更换。 提示： 该方法同样适用于换空间域名，导入导出数据库后的修改操作。 另外，操作数据库有风险，请提前做好备份。

52、替换禁止百度转码代码

不知道什么是“百度转码”，可以百度一下或者查看此文：禁止百度转码 据说主题集成的禁止转码代码已失效，有发现自己博客被转码的用户，可以打开主题header.php模板文件，将第6和第7行的：

1. <meta http-equiv=”Cache-Control” content=”no-transform” />
2. <meta http-equiv=”Cache-Control” content=”no-siteapp” />

替换为：

1. <meta name=”applicable-device” content=”pc,mobile”>
2. <meta name=”MobileOptimized” content=”width”/>
3. <meta name=”HandheldFriendly” content=”true”/>

因我自己的博客目前并没有被转码，替换后的效果未知，有待查看。

53、

55、

56，

57、升级WordPress另一更新正在进行

方法一、进数据库表wp_options中找到core_updater.lock删除 方法二、将下面代码添加到主题函数模板functions.php中：

global $wpdb;$wpdb->query("DELETE FROM wp_options WHERE option_name = ' core_updater.lock '");

用后删除，不需要保留在主题中。

58、

59、隐藏分类归档页面侧边栏

把下面代码加到主题选项→定制风格→自定义样式代码框中

1. .archive #primary {width: 100%;}
2. .archive  #sidebar{display: none;}

60

61、批量删除特色图像

如果之前用的主题是采用特色图像实现缩略图功能，这些特色图像尺寸并不一定能适合begin主题，所以可以删除这些特色图像，直接使用主题集成的自动裁剪图片功能。手动删除工作量大，可以用下面的代码，批量删除特色图像。 操作前备份好数据库和上传的图片目录wp-content\uploads，以防操作失败，恢复，切记！ 打开begin主题目录中的functions.php模板文件，在// 全部结束后面回行，将下面代码加进去：

delete_post_meta_by_key( '_thumbnail_id' );

之后，只需刷新一下页面，特色图像就已被删除，该代码不需要留在functions.php模板中，用后删除。 备用方法：不建议用备用方法，会删除媒体库中的图片，切记。 一、准备工作（必须） 因批量删除特色图像的同时，会将原图一并删除，所以需要将图片附件目录\wp-content\uploads整个备份一下，同时将数据库也备份一下，以防万一，切记！ 二、添加删除代码 将下面代码添加到主题functions.php模板文件的最后： 只需刷新一下页面，特色图像就已被删除，该代码不需要留在functions.php模板中，用后删除。 三、恢复图片附件备份 将备份的图片附件复制回去。 批量删除后，唯一的缺点是删除的这些图像在媒体库中将消失，但并不影响在文章中的显示。

62、隐藏评论模块

修改主题模板文件比较麻烦，直接CSS隐藏掉即可。将下面代码加到主题选项→定制风格→自定义样式代码框中：

1. #comments, .single-footer .comment, .entry-content .comment, #scroll .scroll-c {
2.     display: none;
3. }

或者安装：关闭WordPress评论插件：Disable Comments

63、添加没有超链接的菜单项

首先随便添加一个自定义链接菜单项目，编辑这个项目，在CSS类中添加：flsx 之后将下面的样式代码加到主题选项→定制风格→自定义样式代码框中：

1. .flsx {
2.     color: #666;
3.     font-weight: bold;
4.     pointer-events:none;
5.     cursor:default;
6. }

这样就添加一个没有超链接的菜单项目，该方法不支持低版本IE.

64、在侧边增强小工具中添加一个多彩的菜单

效果如图 先将增强文本小工具拖进侧边栏中，然后将下面的粘贴进去

1. <div class=”colorbar-box”>
2.     <ul class=”colorbar”>
3.         <li><a href=”链接地址” target=”_blank” style=”background-color:#ff3030;”>我是文字</a></li>
4.         <li><a href=”链接地址” target=”_blank” style=”background-color:#428BCA;”>我是文字</a></li>
5.         <li><a href=”链接地址” target=”_blank” style=”background-color:#e84266;”>我是文字</a></li>
6.         <li><a href=”链接地址” target=”_blank” style=”background-color:#91c24f;”>我是文字</a></li>
7.         <li><a href=”链接地址” target=”_blank” style=”background-color:#f49800;”>我是文字</a></li>
8.     </ul>
9. </div>
10. <style type=”text/css”>
11. .colorbar-box ul {
12.     padding: 0;
13. }
14. .colorbar li {
15.     width: 100% !important;
16. }
17. .colorbar li a {
18.     color: #fff;
19.     line-height: 40px;
20.     display: block;
21.     width: 100%;
22.     text-align: center;
23. }
24.     .colorbar li a:hover {
25.     opacity: 0.8;
26. }
27. </style>

自行修改其中的文字及链接。

65、为网页背景添加一个跟随鼠标变幻的动态线条

这是一个基于canvas绘制的网页背景效果。 首先将下载的canvas-nest.min.js文件，放到主题begin\js目录中 打开主题页脚模板文件footer.php在：

1. <?php wp_footer(); ?>

上面添加：

1. <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/js/canvas-nest.min.js”></script>

效果演示及canvas-nest.js下载

66、上下篇调用全局文章

默认主题文章底部的上下篇文章调用的同分类的文章，通过修改可以调用全局文章。 打开主题根目录的single.php，将

1. <?php
2.     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>”; }
3.     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>”; }
4. ?>

修改为：

1. <?php
2.     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>”; }
3.     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>”; }
4. ?>

即可

67、

68、公司主页单栏小工具HTML代码

将代码添加到增强文本小工具中： 代码

• <div class=“grid-widget”>
• <!– 链接A –>
• <a class=“gw-link gwa” href=“链接” rel=“bookmark”>
• <div class=“qw-icon”><i class=“be be-home”></i></div>
• <!– <div class=”qw-icon”><img src=”https://wx1.sinaimg.cn/large/0066LGKLly1fgbmwz3draj305u05uabc.jpg”></div> –>
• <h4 class=“qw-title”>关于我们</h4>
• <div class=“qw-title”>多功能主题布局可选</div>
• <div class=“qw-title”>不依赖任何前端框架，兼容大部分主流浏览器</div>
• </a>
• <!– 链接B –>
• <a class=“gw-link gwb” href=“链接” rel=“bookmark”>
• <div class=“qw-icon”><i class=“be be-skyatlas”></i></div>
• <h4 class=“qw-title”>热门文章</h4>
• <div class=“qw-title”>多功能主题布局可选</div>
• <div class=“qw-title”>不依赖任何前端框架，兼容大部分主流浏览器</div>
• </a>
• <!– 链接C –>
• <a class=“gw-link gwc” href=“链接” rel=“bookmark”>
• <div class=“qw-icon”><i class=“be be-picture”></i></div>
• <h4 class=“qw-title”>公司首页</h4>
• <div class=“qw-title”>多功能主题布局可选</div>
• <div class=“qw-title”>不依赖任何前端框架，兼容大部分主流浏览器</div>
• </a>
• <!– 链接D –>
• <a class=“gw-link gwd” href=“链接” rel=“bookmark”>
• <div class=“qw-icon”><i class=“be be-baidu”></i></div>
• <h4 class=“qw-title”>杂志布局</h4>
• <div class=“qw-title”>多功能主题布局可选</div>
• <div class=“qw-title”>不依赖任何前端框架，兼容大部分主流浏览器</div>
• </a>
• <!– 链接E –>
• <a class=“gw-link gwe” href=“链接” rel=“bookmark”>
• <div class=“qw-icon”><i class=“be be-qr-code”></i></div>
• <h4 class=“qw-title”>图片模式</h4>
• <div class=“qw-title”>多功能主题布局可选</div>
• <div class=“qw-title”>不依赖任何前端框架，兼容大部分主流浏览器</div>
• </a>
• <!– 链接F –>
• <a class=“gw-link gwf” href=“链接” rel=“bookmark”>
• <div class=“qw-icon”><i class=“be be-display”></i></div>
• <h4 class=“qw-title”>博客首页</h4>
• <div class=“qw-title”>多功能主题布局可选</div>
• <div class=“qw-title”>不依赖任何前端框架，兼容大部分主流浏览器</div>
• </a>
• <div class=“clear”></div>
• </div>
•  
• <style>
• .grid–widget {
• margin: 0 –6px 0 0;
• }
•  
• .grid–widget a {
• position: relative;
• background: #fff;
• float: left;
• width: 16.66666666666667%;
• color: #000;
• text–align: center;
• margin: 0 –1px –1px 0;
• padding: 20px 10px 15px 10px;
• border: 1px solid #ddd;
• transition–duration: .5s;
• }
•  
• .grid–widget a:hover {
• background: #c40000;
• color: #fff;
• border: 1px solid #c40000;
• }
•  
• .grid–widget a:hover .qw–icon .be {
• color: #fff;
• }
•  
• .qw–icon .be{
• font–size: 80px !important;
• color: #c40000;
• line–height: 80px;
• margin: 0 0 20px 0;
• display: block;
• }
•  
• @media screen and (max–width: 900px) {
• .grid–widget a {
• width: 33.333333333333333%;
• }
• }
•  
• @media screen and (max–width: 700px) {
• .grid–widget a {
• width: 50%;
• }
• }
•  
• @media screen and (max–width: 400px) {
• .grid–widget a {
• width: 100%;
• }
• }
• </style>

其中的字体图标，替换使用方法与菜单添加小图标相似，也可以用图片代替字体图标，效果如图：

69、公司主页添加自定义HTML模块

主题默认的公司主页虽然预设了很多模块，但可能还是不能满足用户的内容展示的需求，可以将下面的代码HTML代码添加到公司主页模板文件pany.php(文件位置：begin\template目录)，适当的位置，修改其中的文字、链接及图片地址，并将相应的CSS样式添加到主题style.css样式文件最后，或者主题选项→定制风格→自定义样式中。适合添加固定的不需要经常更新的内容。效果如图 展开HTML代码:展开 修改其中的文字、链接及图片地址。 当然代码并不只适用于公司主页模板，也可以添加到增强文本小工具中，添加到杂志布局单栏小工具中，但需要注意的是，需要将上面代码中开始两行的：

1. <div class=”row”>
2.     <div class=”col”>

和最后两个：

1. </div>
2. </div>

删除，否则会显示样式错误。 可能有用户会问题这个布局样式为什么不直接做到主题中，原因是受响应式设计的限制，这种三个模块左右不对称的布局，在不同窗口大小中，无法完美对齐，只有两种模式下才能正常显示：屏幕窗口大于页面宽度和小屏手机上。 展开样式代码：

• <!– 图片居右 –>
• <div class=“row”>
•     <div class=“col”>
•         <!– 图片 –>
•         <div class=“wd-img wd-imgr”>
•             <a href=“http://zmingcx.com/” target=“_blank”><img src=“http://ww2.sinaimg.cn/large/703be3b1jw1f664j03z2dj20f008wmz0.jpg” alt=“文字说明” /></a>
•         </div>
•         <div class=“wd wdr”>
•             <!– 标题 –>
•             <h3><span>1</span>自定义HTML代码</h3>
•             <!– 说明文字 –>
•             <p>适用于公司主页，添加固定的文字及图片内容。使用方法将HTML代码添加到公司主页模板文件pany.php(文件位置：begin\template目录)，适当的位置，
•     并修改其中的文字、链接及图片地址。并将相应的CSS样式添加到主题style.css样式文件最后或者主题选项→定制风格→自定义样式中</p>
•             <!– 标题列表 –>
•             <ul>
•                 <li><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-angle-right”></i>自定义HTML代码适用于公司主页</a></li>
•                 <li><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-angle-right”></i>显示固定的文字及图片</a></li>
•                 <li><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-angle-right”></i>包括一些不需要经常更新修改的内容</a></li>
•             </ul>
•             <!– 链接按钮 –>
•             <span class=“link-n link-nl”><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-caret-right”></i>链接按钮</a></span>
•             <span class=“link-n link-nr”><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-caret-right”></i>链接按钮</a></span>
•         </div>
•         <div class=“clear”></div>
•     </div>
• </div>
• <!– 图片居左 –>
• <div class=“row”>
•     <div class=“col”>
•         <!– 图片 –>
•         <div class=“wd-img wd-imgl”>
•             <a href=“http://zmingcx.com/” target=“_blank”><img src=“http://ww2.sinaimg.cn/large/703be3b1jw1f664lo8vdnj20f007kdgv.jpg” alt=“文字说明” /></a>
•         </div>
•         <div class=“wd wdl”>
•             <!– 标题 –>
•             <h3><span>2</span>自定义HTML代码</h3>
•             <!– 说明文字 –>
•             <p>适用于公司主页，添加固定的文字及图片内容。使用方法将HTML代码添加到公司主页模板文件适当的位置，
•     并修改其中的文字、链接及图片地址。</p>
•             <!– 标题列表 –>
•             <ul>
•                 <li><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-angle-right”></i>自定义HTML代码适用于公司主页</a></li>
•                 <li><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-angle-right”></i>显示固定的文字及图片</a></li>
•                 <li><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-angle-right”></i>包括一些不需要经常更新修改的内容</a></li>
•             </ul>
•             <!– 链接按钮 –>
•             <span class=“link-n link-nl”><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-caret-right”></i>链接按钮</a></span>
•             <span class=“link-n link-nr”><a href=“http://zmingcx.com/” target=“_blank”><i class=“fa fa-caret-right”></i>链接按钮</a></span>
•         </div>
•         <div class=“clear”></div>
•     </div>
• </div>

70、

71、

72、Timthumb.php 缩略图不显示的一些解决方法

以下方法未经验证，只供参考 方法一、如果你的网站支持 GD 库， 但使用 timthumb.php 仍无法自动生成缩略图，你可以在网站根目录下找到 .htaccess 文件，在里面添加以下代码试试：

SecFilterEngine Off SecFilterScanPOST Off

方法二、删除主题cache文件夹，然后再新建一个 方法三、更改cache文件夹777权限后，再次查看发现权限并没有改变，还是原来的，这可能是主机设置上有问题…. 方法四：本方法针对缩略图偶尔不显示的问题。打开主题根目录的timthumb.php，添加一句：

//禁用所有浏览器缓存 if(!defined(‘BROWSER_CACHE_DISABLE’)) define(‘BROWSER_CACHE_DISABLE’, true);

73、

74、编辑以下角色只可见“文章”和“个人资料”菜单项

将如下代码添加到主题functions.php模板文件的最后即可。

1. if ( current_user_can( ‘publish_pages’ ) ){
2. } else {
3.     function remove_menus() {
4.         global $menu;
5.         $restricted = array(
6.             __(‘Media’),
7.             __(‘Tools’),
8.             __(‘Comments’)
9.         );
10.         end ($menu);
11.         while (prev($menu)){
12.             $value = explode(‘ ‘,$menu[key($menu)][0]);
13.             if(strpos($value[0], ‘<‘) === FALSE) {
14.                 if(in_array($value[0] != NULL ? $value[0]:”” , $restricted)){
15.                     unset($menu[key($menu)]);
16.                 }
17.             }else {
18.             $value2 = explode(‘<‘, $value[0]);
19.                 if(in_array($value2[0] != NULL ? $value2[0]:”” , $restricted)){
20.                     unset($menu[key($menu)]);
21.                 }
22.             }
23.         }
24.     }
25.     if (is_admin()){
26.         add_action(‘admin_menu’, ‘remove_menus’);
27.     }
28. }

提示 以上第73、74条适用于作者角色进入后台发表文章。

75、禁止特色图像生成多余的768×512缩略图

进入WP后台→设置→全部设置，ctrl+f 调出浏览器搜索功能。 搜索：medium_large_size_w，将该项值 ：768 改为 0 即可。 之所以有默认的裁剪数值，大概是因为，当上传的图片宽度超过768时会自动裁剪一张768×512缩略图，方便调用较小的图片，以提高页面加载速度，初衷是好的，不过主机空间有限，很是浪费。 另外，使用begin主题尽量不要使用这个WP自带的特色图像功能，因为主题可以自动裁剪文章中的图片作为缩略图。 WP自带的特色图像与主题集成的timthumb.php截图函数相比，前者缩略图不易管理，删除后不会再次生成，造成附件目录混乱，而 timthumb.php函数生成的缩略图删除后，可以再次生成。

76、将主题集成的JS文件外链

以生成二维码的jquery.qrcode.min.js为例，打开主题inc目录的theme-setup模板functions.php文件在将：

1. wp_enqueue_script( ‘jquery.qrcode.min’, get_template_directory_uri() . ‘/js/jquery.qrcode.min.js’, array(), version, false );

改为：

1. $sitepath =  ‘http://zmingcs.com’;
2. wp_enqueue_script( ‘jquery.qrcode.min’, $sitepath . ‘jquery.qrcode.min.js’, array(), version, false );

修改其中：http://zmingcs.com 为外链接JS文件的绝对路径，例如：

http://localhost/wordpress/wp-content/themes/begin/js/

其它JS文件方法类似，注意代码中红色的 $sitepath 如果其它JS文件路径不同可以随意改一下名称，并修改链接路径，即可。 但上面方法并不能将所JS文件外链，因为有些JS文件是有关联性。

77、复制网页内容自动添加版权信息

将下面代码添加到\begin\js目录script.js文件的最后。

1. // 复制内容自动添加版权信息
2. var Sys = {};
3. var ua = navigator.userAgent.toLowerCase();
4. if (window.ActiveXObject) {
5.     document.body.oncopy = function() {
6.         event.returnValue = false;
7.         var t = document.selection.createRange().text;
8.         var s = “\r\n原文出自[ 知更鸟 ] 转载请保留原文链接:” + location.href;
9.         clipboardData.setData(‘Text’, t + ‘\r\n’ + s);
10.     }
11. } else {
12.     function addLink() {
13.         var body_element = document.getElementsByTagName(‘body’)[0];
14.         var selection;
15.         selection = window.getSelection();
16.         var pagelink = “原文出自[ 知更鸟 ] 转载请保留原文链接:” + document.location.href;
17.         var copytext = selection + pagelink;
18.         var newdiv = document.createElement(‘div’);
19.         newdiv.style.position = ‘absolute’;
20.         newdiv.style.left = ‘-99999px’;
21.         body_element.appendChild(newdiv);
22.         newdiv.innerHTML = copytext;
23.         selection.selectAllChildren(newdiv);
24.         window.setTimeout(function() {
25.             body_element.removeChild(newdiv);
26.         },
27.         0);
28.     }
29.     document.oncopy = addLink;
30. }

记得修改其中的版权信息。 不过代码不并完美，添加该功能后，使用Firefox、chrome等浏览器，复制代码高亮部分代码格式将消失或者不能复制，IE8会提示有JS错误，没有效果。

78、九宫格HTML代码

一段九宫格HTML代码，适用于放在增强文本小工具中，用于展示一些链接之用，代码结构取自主题读者墙小工具，效果如图： 将下面的代码粘贴到增强文本小工具： 展开代码 修改其中的图片和链接地址。

79、文章列表链接在新窗口或标签打开

打开主题begin\template目录的content.php模板，将大约第12行的

1. <?php the_title( sprintf( ‘<h2 class=”entry-title”><a href=”%s” rel=”bookmark”>’, esc_url( get_permalink() ) ), ‘</a></h2>’ ); ?>

修改为：

1. <?php the_title( sprintf( ‘<h2 class=”entry-title”><a href=”%s” target=”_blank” rel=”bookmark”>’, esc_url( get_permalink() ) ), ‘</a></h2>’ ); ?>

之后点击文章列表中的标题，会在新窗口或标签中打开链接，再配合主题已集成的首页新窗口或标签打开功能，就可以了，如果使用了不同的文章形式，还需要修改begin\template目录所有以 content- 开头的模板中相同的这句函数。 这个功能只适合在电脑上浏览，在手机上会让浏览者感到厌恶….

80、隐藏侧边小工具和分类模块标题前的图标

将下面样式添加到主题选项→定制风格→自定义样式中。

1. .cat-title .fa-bars,.widget-title .fa-bars {
2.     display: none;
3. }
4. .widget h3, .cat-box .cat-title a {
5.     padding-left: 20px;
6. }

81、为Woocommerce插件添加滑动解锁留言

打插件plugins\woocommerce\templates目前的single-product-reviews.php文件，在下数大约第5行，<?php else : ?>上面添加：

1. <div class=”qaptcha”></div>

82、让缩略图上的分类名称背景显示不同的颜色

首先编辑分类目录给分类添加不同别名，以我的“Web前端”分类为例，该分类别名为：webdesign。 将下面样式添加到主题选项→定制风格→自定义样式中。

1. .category-webdesign .thumbnail .cat {
2.     background: #4bafbe;
3.     opacity: 0.8;
4. }

修改其中的 webdesign 的为你想改的分类别名即可。 background: #4bafbe;  为背景颜色。 opacity: 0.8;  为透明度。 通过上面的方法，可以让不同的分类显示不同的背景色。

83、发表评论只需输入评论者昵称

我在博客上写过一篇：WordPress 发表评论只需输入评论者名称 Begin主题的具体修改方法： 打开主题begin\inc\function目录的comment-ajax.php，将大约第77行至82的：

1. if ( get_option(‘require_name_email’) && !$user->ID ) {
2.     if ( 6 > strlen($comment_author_email) || ” == $comment_author )
3.         err(‘<i class=”fa fa-exclamation-circle”></i>提示：必须填写昵称及邮件。’); // 将 wp_die 改为错误提示
4.     elseif ( !is_email($comment_author_email))
5.         err(‘<i class=”fa fa-exclamation-circle”></i>提示：请输入一个有效的电子邮件地址。’);// 将 wp_die 改为错误提示
6. }

替换为：

1. if ( get_option( ‘require_name_email’ ) && ! $user->exists() ) {
2.     if ( ” == $comment_author )
3.     err(‘<i class=”fa fa-exclamation-circle”></i>提示：必须填写昵称。’);
4. }

下载修改后的文件 也可下载已修改后的：comment-ajax.php 直接替换 再将下面的样式代码添加到主题选项→定制风格“自定义样式”中，隐藏邮箱和网址表单项。

1. .comment-form-email, .comment-form-url {
2.     display: none;
3. }

最后，进入WP后台→设置→讨论→其他评论设置中勾选”评论作者必须填入姓名和电子邮件地址“，完成上面的修改后，再次发表评论时只需要填写昵称一项就可以了。

84、修改文章末尾的默认分享按钮

默认5个分享按钮是国内比较常用的，想换成其它的社会化分享按钮可以按下的操作。 比如将人人网改成Facebook，打开鼠标停到+号按钮上，会弹出“分享到窗口”点击下面的更多按钮，找到Facebook按钮查看源代码（我用的是火狐的“Firebug”扩展查看源代码）：

1. <a class=”popup_fbook” href=”#” onclick=”return false;” data-cmd=”fbook”>Facebook</a>

将其中改为：

1. <li><a title=”分享到Facebook” class=”fa fa-facebook-official” href=”#” onclick=”return false;” data-cmd=”fbook”></a></li>

其中： fa fa-facebook-official 是Facebook的图标字体代码 fbook 是Facebook识别代码 然后打开begin\inc目录的share.php模板文件，用修改后的代码替换人人网那行代码即可。 修改替换其它分享按钮方法类似。

85、为正文所有链接添加target=”_blank”属性

可以将下面的代码添加到主题functions.php文件的最后：

1. function auto_blank($text) {
2.     $return = str_replace(‘<a’, ‘<a target=”_blank”‘, $text);
3.     return $return;
4. }
5. add_filter(‘the_content’, ‘auto_blank’);

附：网站所有链接添加 target=”_blank” 属性 将下面代码添加到主题footer.php模板文件的最上面：

1. <script type=”text/javascript”>
2. var anchors = document.getElementById(“page”).getElementsByTagName(“a”);
3. for(i=0;i<anchors.length;i++){
4.     var anchor_item = anchors[i];
5.     anchor_item.target=”_blank”; target=”_blank”
6. }
7. </script>

86、移动电话上点开链接直接拨打电话

基本形式：

1. <a href=”tel:123456789″>拨打电话</a>

比如将：tel:123456789 添加到公司首页模板联系方式按钮链接 或者文章中的短代码实现的链接按钮中。 在移动电话上点按钮会直接进入拨号页面，兼容大部分移动浏览器。

87、页脚小工具改为三栏

将下面的样式代码添加到主题选项→定制风格“自定义样式”中：

1. .footer-widget .widget {width: 33.3333333333%;}
2. @media screen and (max-width: 640px) {.footer-widget .widget {width: 99.6%;}}

88、

89、隐藏后台元素

首页将下面代码添加到主题functions.php模板文件的最后：

1. function admin_my_css() {
2.     wp_enqueue_style( “admin-my”, get_template_directory_uri() . “/css/admin-my.css” );
3. }
4. add_action(‘admin_head’, ‘admin_my_css’);

然后将admin-my.css放到主题css目录中admin-my.css admin-my.css里有注释可以自己酌情删除或者合并，想修改隐藏其它项，需要通过查看后台源代码，找到隐藏项的DIV选择器名称。

90、投稿按角色不同排除分类

打开主题begin\inc\frontpost\views目录submission-form.php模板文件，将大约43行的：

1. $notcat = explode(‘,’,zm_get_option(‘not_front_cat’));

替换为：

1. // 管理员角色排除的分类
2. if( current_user_can( ‘manage_options’ ) ) {
3.     $notcat = ‘1,2,3,4,5,6’;
4. };
5. // 编辑角色排除的分类
6. if( current_user_can( ‘publish_pages’ ) && !current_user_can( ‘manage_options’ ) ) {
7.     $notcat = ‘1,2,3,4’;
8. }
9. // 作者角色排除的分类
10. if( current_user_can( ‘publish_posts’ ) && !current_user_can( ‘publish_pages’ ) ) {
11.     $notcat = ‘1,2,3’;
12. }
13. // 投稿者角色排除的分类
14. if( current_user_can( ‘edit_posts’ ) && !current_user_can( ‘publish_posts’ ) ) {
15.     $notcat = ‘1,2’;
16. }

修改其中的数字为各角色准备排除的分类ID 另外，自己也吐槽一下这个投稿功能，管理员角色前台投稿基本没问题，但其它角色投稿时好时坏，有时不能提效，原因一直查不出来….

91、添加留言者相关信息（国家、浏览器、操作系统、所在区域）

张戈这个留言者相关信息功能貌似很多用户喜欢，这里弄个Begin主题添加教程： 1、下载所需文件，解压后放到Begin主题根目录中：文件下载 注：必须先把这个show-useragent文件夹放到Begin主题目录中，不然直接添加下面的代码会有错误。 2、将下面代码添加到Begin主题根目录functions.php模板文件的最后： 展开

92、

93、WPJAM BASIC与Easy Digital Downloads兼容问题

同时启用两款插件后，会在EDD下载文章页面头部多出类似文章标题" /> 不完整的一段代码，冲突原因未知，解决方法： 打开WPJAM BASIC插件根目录的wpjam-custom.php文件，将大约第66行的： <meta property="og:title" content="<?php the_title(); ?>" /> 删除即可。对插件其它功能无影响。

94、文章中添加两栏自适应表格

编辑文章切换到文本编辑模式，将下面代码添加进去，并修改其中的文字：

1. <h3>自适应表格</h3>
2. <div class=”table-r”>
3. <table width=”100%”>
4.     <tbody>
5.         <tr>
6.             <td width=”50%”>自适应表格</td>
7.             <td width=”50%”>输入文字</td>
8.         </tr>
9.         <tr>
10.             <td width=”50%”>自适应表格</td>
11.             <td width=”50%”>输入文字</td>
12.         </tr>
13.         <tr>
14.             <td width=”50%”>自适应表格</td>
15.             <td width=”50%”>输入文字</td>
16.         </tr>
17.         <tr>
18.             <td width=”50%”>自适应表格</td>
19.             <td width=”50%”>输入文字</td>
20.         </tr>
21.     </tbody>
22. </table>
23. </div>

想添加更多行，多复制几个：

1. <tr>
2.     <td width=”50%”>自适应表格</td>
3.     <td width=”50%”>输入文字</td>
4. </tr>

效果如图： 如果想让文字居中，可以在WP编辑器中选择中，也可将下面的样式代码添加到主题选项→定制风格“自定义样式”中：

1. .table-r td{
2.     text-align: center;
3. }

95、改变右则滑动模块颜色

将下面样式代码添加主题选项→定制风格，在“自定义样式”中：

1. #scroll li a {
2.     color: #2f889a;
3. }

96、

97、隐藏顶部的登录管理及菜单模块

将下面的样式代码添加到主题选项→定制风格“自定义样式”中：

1. #masthead {
2.     height: 90px;
3. }
4. #top-header {
5.     display: none;
6. }
7. @media only screen and (max-width: 900px) {
8.     #masthead {
9.         height: 40px;
10.     }
11. }

既改导航菜单高度又隐藏顶部模块代码：

1. #masthead {
2. /** 控制头部整个高度 **/
3.     height: 70px;
4. }
5. #top-header {
6.     display: none;
7. }
8. .logo-site, .logo-sites {
9. /** 控制LOGO的上边距 **/
10.     margin: 10px 0 0 10px;
11. }
12. #site-nav .down-menu li {
13. /** 控制主要菜单高度 **/
14.     height: 70px;
15.     line-height: 70px;
16. }
17. .nav-search {
18. /** 控制搜索按钮上边距 **/
19.     margin: 20px 10px 0 10px;
20. }
21. @media only screen and (max-width: 900px) {
22.     #masthead {
23.         height: 40px;
24.     }
25.     #menu-box {
26.         height: 40px;
27.     }
28.     .logo-site, .logo-sites {
29.         margin: 2px 0 0 10px;
30.     }
31.     .nav-search {
32.         margin: 5px 10px 0 0;
33.     }
34. }

98、在标题下面添加文章信息

主题最新版本已添加后台控制，不需要再加了 将下面代码添加到主题functions.php的最后： 将下面样式，添加到主题样式文件style.css最后或者添加到主题选项→定制风格“自定义样式”中： 上面的方法并不是很完美，在有些文章形式中可能会有样式错误，下次升级主题考虑加上切换开关。

99，文章中插入表格

（1）用Word编辑一个表格，Excel表格默认无法自适应； （2）复制表格粘贴到文章编辑框中即可。 如果是Excel表格需要切换到文本模式将表格第一行的类似代码：<table width="574">，改为：<table>去掉固定宽度。 上述方法要以实现表格自适应，但只适合列数少的表格，不然用手机看表格会很拥挤。

100，自定义分类名称背景颜色

默认文章列表缩略图上的分类名称背景色都是相同的。我们可以通过针对不同的分类设置不同的颜色背景。例如：我博客插件分类这个分类目录，分类名称背景色是绿色的。 基本代码：

1. .category-wpplugins .thumbnail .cat {
2.     background: #7ab951;
3. }

其中：红色的部分是这个插件分类的别名，只要修改这个别名和下面的颜色值就可以了。 注：修改别名时注意后面要留一个半角空格。 将代码添加到主题样式文件style.css最后或者添加到主题选项→定制风格“自定义样式”中即可。

101，将整体页面宽度改为全屏

打开主题样式文件style.css，搜索1080px或者1120px，全部替换为：90% 修改后整体页面宽度基本全屏，两侧只有一小条空白了，不能修改成100%。对大部分主题模块没有什么影响，只有部分模块可能显示不正常，影响不大，可以选择关掉。 总有用户认为这种全屏的好，估计用小屏笔记本的居多，如果考虑到现在正常24寸显示器或者更大的27寸，你会发现，看这种页面内容需要头部做左右运动才行，这也是报纸杂志文章要分栏排版的原因…..

102、修改Ajax组合小工具选项卡宽度

默认6个都显示，如果有只选择其中几个选项卡会有空白，可以根据显示的数量修改宽度 。 将代码添加到主题选项→定制风格“自定义样式”中：

1. .wpz_widget_content .wpz-tabs span {
2.     width: 25%;
3. }

默认是6个是：width: 16.66666666666667%;，上面代码是显示4个的数值 25%，修改数值即可。

102，增强文本小工具带图标链接HTML代码

上面第64条，有一个多彩的菜单HTML代码，再给大家弄一个有图标的多彩链接HTML，本代码适用于侧边栏、杂志布局单栏小工具及公司单栏小工具中添加的增强文本小工具，效果如图： 侧边栏 单栏小工具 首先，将相应样式添加到主题选项→定制风格“自定义样式”中或者主题样式文件style.css最后。

1. .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. 其次，将下面代码添加到增强文本小工具中：

1. <div class=”qz-box”>
2.     <!– 链接A –>
3.     <a class=”qz-link qza” href=”链接” rel=”bookmark”>
4.         <span class=”qz-icon”><i class=”be be-home”></i></span>
5.         <span class=”qz-title”>关注WordPress</span>
6.     </a>
7.     <!– 链接B –>
8.     <a class=”qz-link qzb” href=”http://localhost/wordpress/203.html” rel=”bookmark”>
9.         <span class=”qz-icon”><i class=”be be-folder”></i></span>
10.         <span class=”qz-title”>给我投稿</span>
11.     </a>
12.     <!– 链接C –>
13.     <a class=”qz-link qzc” href=”链接” rel=”bookmark”>
14.         <span class=”qz-icon”><i class=”be be-sort”></i></span>
15.         <span class=”qz-title”>WordPress最新版</span>
16.     </a>
17.     <!– 链接D –>
18.     <a class=”qz-link qzd” href=”链接” rel=”bookmark”>
19.         <span class=”qz-icon”><i class=”be be-thumbs-up-o”></i></span>
20.         <span class=”qz-title”>在线咨询</span>
21.     </a>
22.     <div class=”clear”></div>
23. </div>

修改其中的链接、文字及字体图标….

103，让菜单上的字体图标闪烁

首先给准备有闪烁的菜单项：添加字体图标 比如字体图标代码：be be-display 另外再加一个特定的css类：frames，名称可以任何 最终为：be be-display frames 加到菜单项“css类”中，如图： 最后将下面样式代码添加到主题选项→定制风格“自定义样式”中即可 整个菜单项闪动：

.frames {	animation: blink 0.5s linear infinite;}

或者只有菜单项字体图标闪动：

.frames .be{	animation: blink 0.5s linear infinite;}

改变文字颜色：

.frames a{	color: #ff0000 !important;}

如只改文字颜色，在菜单项“css类”中只添加frames就行了

104、删除文章列表的间距

只适合使用博客布局。将代码添加到主题选项→定制风格“自定义样式”中

1. /** 首页 **/
2. .home .post {
3.     margin: 0 0 -1px 0;
4. }
5. .home #main {
6.     margin: 0 0 10px 0;
7. }
8. /** 分类归档页面 **/
9. .archive .post {
10.     margin: 0 0 -1px 0;
11. }
12. .archive #main {
13.     margin: 0 0 10px 0;
14. }
15. .archive #picture #main {
16.     margin: 0;
17. }

上述代码未经全面测试，不保证完美，效果如图：

105、修改主导航菜单颜色

将代码添加到主题选项→定制风格“自定义样式”中：

/** 导航背景色 **/#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;}

站点名称可以到主题选项—颜色风格中选择颜色。 上面只是举个例子，举一反三，善用浏览器开发者工具，学点DIV+CSS，可以对主题任何部分进行个性化修改。

106、增强文本小工具中添加百度地图

首先，创建百度地图

http://api.map.baidu.com/lbsapi/creatmap/index.html

点击进入网页后左侧切换城市，定位中心点，设置地图尺寸，然后标注你所要引入地址的大概位置。 备注你的标记名称。 保存，获取代码，复制代码。 其次，创建地图文件 在你的网站根目录创建一个文件，比如：baidumap.html 把之前复制的百度地址的代码复制到此文件中。baidumap.html文件下载 最后，添加调用代码 将下面的代码添加到增强文本小工具中：

1. <iframe src=”你的网站链接/baidumap.html” frameBorder=0 height=300 width=100% scrolling=no></iframe>

其中的：height=300高度，可以根据你设置的地图大小做相应修改。 最后的调用代码直接添加到文章中也可以。 效果如图：

107、修正产品日志自定义栏目表单

如果发现产品日志编辑框下面没有自定义表单，可以打开begin主题根目录的functions.php，在最后添加：

1. require get_template_directory() . ‘/inc/show-meta.php’;

108、利用CSS为标题添加小图标

在文章标题前后加个醒目的图标，可以突出显示某篇文章。 将代码添加到主题选项→定制风格“自定义样式”中：

1. /** 标题前图标 **/
2. #post-75 h2 a:before {
3.     content: “\e68b”;
4.     font-family: be;
5.     font-size: 16px;
6.     color: #c40000;
7.     padding: 0 5px 0 0;
8. }
9. /** 标题后图标 **/
10. #post-75 h2 a:after {
11.     content: “\e667”;
12.     font-family: be;
13.     font-size: 14px;
14.     color: #c40000;
15.     padding: 0 0 0 5px;
16. }

其中：

• #post-75 h2是文章列表标题选择器，修改其中的数字75，为文章ID，可以通过在后台查看文章ID或者通过查看源代码查看文章的ID。
•   content: "\e667"对应的阿里图标字体Unicode代码
• font-family: be 使用自己的阿里图标库，将be改为zm

另外，可以直接上述代码直接添加文字

1. /** 标题后加文字 **/
2. #post-75 h2 a:after {
3.     content: “推荐”;
4.     font-size: 14px;
5.     background: #c40000;
6.     color: #fff;
7.     margin: 0 0 0 5px;
8.     padding: 1px 3px;
9.     border-radius: 2px;
10. }

效果如图： 举一反三，修改其中的#post-75 h2选择器，可以给任意页面元素添加图标。

109、移动端导航菜单图标改为文字

修改方法与上条相同，将代码添加到主题选项→定制风格“自定义样式”中：

1. .bars:after, .nav-mobile:after {
2.     content: “导航”;
3.     background: #c40000;
4.     color: #fff;
5.     padding: 1px 3px;
6.     border-radius: 2px;
7. }
8. .bars .be, .nav-mobile .be {
9.     display: none;
10. }

效果如图：

110、自定义站点标题颜色

将代码添加到主题选项→定制风格“自定义样式”中：

1. .site-title a {
2.     color: #c40000;
3. }

修改 color: #c40000;颜色值

111、隐藏下载按钮小图标

将代码添加到主题选项→定制风格“自定义样式”中：

1. .down-link .be{
2.     display: none;
3. }

如果想修改为其它图标字体，再加上下面的代码：

1. .down-link a:before {
2.     content: “\e667”;
3.     font-family: be;
4. /** font-family: zm; **/
5.     font-size: 14px;
6.     color: #fff;
7.     padding: 0 5px 0 0
8. }

112、修改移动端页脚菜单个数

默认移动端页脚菜单是6个菜单项，想修改个数，可以将下面代码添加到主题选项→定制风格“自定义样式”中：

1. .footer-nav ul li {
2.     width: 25%;
3. }

上面代码是配合4个，如果是5个按钮就改为20%

113、在页脚小工具中添加微信二维码

将增强文本小工具添加到页脚小工具中，将复制下面代码添加到增强文本小工具中：

<ul class="about-me-img clearfix">	<li>		<img src="https://s2.ax1x.com/2019/08/24/m6Ike1.png" title="我的微信" alt="我的微信">		<p>我的微信</p>	</li> 	<li>		<img src="https://s2.ax1x.com/2019/08/24/m6Ike1.png" title="微信公众号" alt="微信公众号">		<p>微信公众号</p>	</li> 	<li>		<a rel="external nofollow" target="_blank" href="http://zmingcx.com">		<img src="https://s2.ax1x.com/2019/08/24/m6Ike1.png" 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%。 只一张图用下面的代码

<a href="链接"><img style="width: 100px;height: 100px;" src="https://s2.ax1x.com/2019/09/02/nCWqVf.jpg" alt="说明"></a>

修改其中的图片链接。

114、在页脚小工具栏数

修改页脚小工具栏数和导航菜单小工具改成单栏，将代码添加到主题选项→定制风格“自定义样式”中：

1. /*修改页脚小工具栏数*/
2. .footer-widget .widget {
3.     width: 20%;
4. }
5. .footer-widget .menu li {
6.     width: 100%;
7. }
8. .footer-widget h3 {
9.     color: #fff;
10. }
11. @media screen and (max-width: 550px) {
12.     .footer-widget .widget {
13.         float: left;
14.         width: 50%;
15.         text-align: center;
16.     }
17. }

其中：width: 20%，为5栏，根据需要自行修改。 添加上述代码后，可添加多个导航菜单小工具，并以单栏样式展示，如图：

115、正文title标题中显示分类名称

打开begin\inc目录的title.php模板文件，将大约第8行的

1. <?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 } ?>

改为：

1. <?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 } ?>

116、去掉正文图片的下边距

将下面的样式代码添加到主题选项→定制风格“自定义样式”中：

1. .aligncenter {
2.     margin: 0 auto;
3. }

插入图片时必须选择居中。

116、修改文章底部分享点赞颜色

有用户喜欢主题早期版本点赞分享按钮彩色样式 将下面的样式代码添加到主题选项→定制风格“自定义样式”中即可：

1. .social-main a {
2.     color: #fff;
3. }
4. .like a {
5.     background: #f40000;
6.     border: 1px solid #f40000;
7. }
8. .share-s a {
9.     background: #dd9933;
10.     border: 1px solid #dd9933;
11. }
12. .social-main i {
13.     color: #fff;
14. }
15. .shang-p a {
16.     background: #7ab951;
17.     border: 1px solid #7ab951;
18. }
19. .social-main a:hover {
20.     color: #fff;
21.     background: #666;
22. }
23. .like a:hover, .share-s a:hover, .shang-p a:hover {
24.     border: 1px solid #666;
25. }

117、关于过不了移动落地页检测

个人感觉当文章中有大面积图片或者图片较多，就过不了移动落地页检测，会提示“该页面不符合移动落地页体验规范”之类的。 我只测试过3个页面，其中两个文章中无图片，检测通过，另一个文章中有两张图片，没通过。 百度出的垃圾功能也就这智力了 移动落地页检测地址：https://ziyuan.baidu.com/page/mobile

118、前、后台同时启用英文

默认主题只有后台语言选择中文才可以使用前台英文，可以通过修改语言文件名称，实现前、后台同时使用英文。 打开begin\languages目录，将zh_CN.mo和zh_CN.po前面的zh_CN改为en_GB。 因主题是为中文设计的，还需要到主题选项—基本设置，修改“文章列表截断字数”对于英文减一半就行了。 附常见国家代码： 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 瑞典语

119、增强文本小工具图片广告代码

修改相应的图片、链接和文字后，将代码添加到增强文本小工具中：

<a href="http://zmingcx.com/begin.html" target="_blank">	<img src="https://wp.joycarry.com/wp-content/uploads/2019/12/006LwaZdly1fvjcqqj53ej308o0650to.jpg" alt="购买begin主题">	<h4 style="font-size: 15px;font-size: 1.5rem;text-align: center;padding: 8px 0">WordPress多功能主题：Begin</h4></a>

上面是图片，下面是标题文字，效果如图：