Begin主题进阶

知更鸟

1859
文章

7012
评论

2015年1月3日 22:12:53原创主题已关闭评论138.5K阅读模式

Begin主题进阶

文章源自知更鸟-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

打开页面讨论（评论）选项

默认WP不显示页面讨论（评论）选项，新建页面---右上---显示选项---模块中，勾选“讨论”

善用WP帮助说明

WordPress后台每个页面都有详细的操作说明，点开右上角的“帮助”按钮，里面是关于本页面功能的操作指南，包括上面说的基本设置。

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

分类小工具正常无法添加图标字体，但可以变通一下，使用导航菜单小工具来实现。

新建一个单独的菜单（不能有二级菜单项目），然后使用导航菜单小工具调用这个单独的菜单，图标字体添加方法请阅读主题使用说明：菜单。

另外，使用菜单小工具可以选择显示分类，比默认的分类目录小工具，更加灵活。

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

为菜单添加一个自定义链接

链接文本输入关键词，比如：WordPress

url输入格式：https://zmingcx.com/?s=WordPress

点击这个“WordPress”关键词，即可实现相关搜索。

4、更新文章归档页面

文章归档页面，会在数据库中生成一个类似：cx_archives_list的表，用于存储文章发表/删除时生成html，可加快访问速度，不用每次都要查询数据库生成归档，如果发现文章归档页面一直不更新，进入主题选项--辅助设置--勾选“显示WordPress设置选项字段”，然后进入WP后台---设置---全部设置页面，搜索[code]cx_archives_list[/code]，清空其右侧的数据并保存。

另一个文章更新模板，在主题选项中修改文章限定日期分类后，也需要上面的操作清空生成的html，搜索内容改为：[code]up_archives_list[/code]

6、单独下载页面链接改成根目录

默认主题单独下载页面链接包括主题目录：

https://zmingcx.com/wp-content/themes/begin/down.php?id=8722

如果想改成：https://zmingcx.com/down.php?id=8722，可以按下面修改一下：

一、复制一份begin主题目录中的down.php文件，将第二行的：

require( dirname(__FILE__) . '/../../../wp-load.php' );

改为：

require( dirname(__FILE__) . '/wp-load.php' );

并上传到网站根目录。

二、打开begin\inc目录的down-meta.php，将大约第55行和57行的：

get_template_directory_uri()

改为：

home_url()

修改的目的是什么，说是怕暴露主题目录.....

7、修改正文字号大小

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

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

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

主题默认自将四级标题H4标签转换为文章索引目录，简单修改一下将三级标题H3标签变为索引目录。

打开主题begin\inc\function目录的inc.php 查找：// 目录，找到

$r = "/<h4>([^<]+)<\/h4>/im";

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

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

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

加粗字体和增大字号

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

只改一级菜单：

    #site-nav .down-menu a {
        font-weight: bold;
        font-size: 20px;
    }

修改字体颜色

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

.sf-arrows .sf-with-ul::after {
	color: #ff0000;
}

10、移动端页脚菜单一直显示

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

.footer-nav {
	bottom: 0;
	display: block !important;
}

在手机和电脑端同时显示

打开页脚模板文件footer.php找到：

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

改为：

<nav class="footer-nav">
	<?php
		wp_nav_menu( array(
			'theme_location'=> 'footer',
			'menu_class'    => 'footer-menu',
			'fallback_cb'   => 'default_menu'
		) );
	?>
</nav>

11、中文用户名注册

之前主题加了个支持中文用户名的功能，后来发现这个是傻瓜功能，只支持最多5个汉字，没有任何使用价值，而且会有很多BUG，随即删除。如果还想延续这玩意，把下面代码加到主题函数模板functions.php中：

// 支持中文用户名
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;
}

12、菜单文字扫光动画

编辑菜单项，将“导航标签”文字改为：

<span class="mytips">导航菜单文字</span>

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

.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;
	}
}

其中：

left, #444, #ff4400 25%, #444 50%, #ff4400 75%, #444

为扫光颜色，可根据自己的喜好修改为其它颜色值，动画特效不支持IE.

13、注册页面模板背景调用必应每日壁纸图片

必应壁纸，每天换一张，替换主题默认注册页面模板背景图片

下载调用文件

将下载的bing.php上传到主题begin\template目录中，打开begin\pages目录的注册页面模板template-reg.php文件

用：

$imgurl=get_stylesheet_directory_uri() . '/template/bing.php';

替换：

$imgurl=zm_get_option('reg_img');

貌似很早学做主题时，就弄过这玩意，个人感觉必应的图片有些太难看....

14、增强文本小工具添加自动播放的MP4视频

将下面代码添加到增强文本小工具中即可：

代码一，不能循环播放

<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>

代码二，可以循环播放

展开收缩

<video id="videoID" controls="controls" style="width:100%; height:100%;float: left;">
	<source src="https://jdvodoss.jcloudcache.com/vodtransgzp1251412368/9031868223153446912/v.f30.mp4" type="video/mp4"/>
</video>

<script  type="text/javascript">
window.onload = function() {
	var local1=document.getElementById('videoID');  //获取，函数执行完成后local内存释放
	local1.autoplay = true; // 自动播放
	local1.loop = true; // 循环播放
	local1.muted=true; // 关闭声音，如果为false,视频无法自动播放
	if(local1.paused){  //判断是否处于暂停状态
		local1.play();  //开启播放
	} else {
		local1.pause();  //停止播放
	}
}
function btn(){
	var local=document.getElementById('videoID');  //获取，函数执行完成后local内存释放
	if(local.paused){  //判断是否处于暂停状态
		local.play();  //开启播放
	} else {
		local.pause();  //停止播放
	}
}
</script>

不想显示播放控制按钮可以将：

<video id="videoID" controls="controls" style="width:100%">

改为：

<video id="videoID" style="width:100%">

15、公司全屏幻灯改为调用视频

打开begin\group目录的group-slider.php模板文件，用下面的代码替换全部：

<?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视频地址换成自己的。

16、手机上不隐藏侧边栏

将下面样式代码添加到主题选项→定制风格→自定义样式代码中，强制不隐藏侧边栏

@media screen and (max-width: 1025px) {
	#sidebar, #sidebar-l {
		display: block;
	}
}

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

18、移动端底部菜单图标在文字上

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

.footer-nav-hold ul li a i {
	display: block;
	margin-top: 10px;
}

.footer-nav-hold .font-text {
	margin: 0 !important;
}

19、让一级菜单无超链接

给菜单加一个“自定义链接”项，随便加个链接，添加到菜单后，再编辑这个菜单项删除其中的链接，这样就成功添加了一个无超链接的菜单项。

但鼠标悬停没有手形标志感觉不正常，可以在菜单项“CSS类”中添加“nourl”

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

.nourl{cursor: pointer;}

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

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

.weibo {
left: 200px;
top: 35px;
}

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

21、

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

如果主题开启了滑动解锁才能提交评论，默认Woocommerce是不能提交评价的，会提示滑动解锁才能提交，但又看不到滑块。

打开Woocommerce插件：wp-content\plugins\woocommerce\templates目录的single-product-reviews.php，在最后几行找到：

<?php else : ?>

在其上面添加

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

完成

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

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

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

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

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

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

<?php wp_head(); ?>

的上面，保存时需将编码选择为UTF-8 无BOM（无签名），否则会出现乱码，直接在WP后台主题编辑中添加则不需要自己选择编码。

展开代码：

展开收缩

特效一，标题滚动

<script type="text/javascript">
var msg = document.title;
msg = "…" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

特效二，标题闪动

<script type="text/javascript">
var step=0;
var _title=document.title; //获取网页标题
var space='';
for(var i=0;i<=_title.length;i++)space+='　'; //根据标题长度生产相应的空字符
function flash_title(){
step++
if (step==3) {step=1}
if (step==1) {document.title=space}
if (step==2) {document.title=_title}
setTimeout("flash_title()",500);
}
flash_title();
</script>

特效三，自定义标题内容并滚动

<script type="text/javascript">
var sTitle = "这是我的个人主页，欢迎光临!"
function TitleMove(){
sTitle = sTitle.substring(1, sTitle.length) + sTitle.substring(0, 1);
document.title = sTitle;
status = sTitle;
}
window.setInterval("TitleMove()", 100);
</script>

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、

28、默认隐藏侧边栏

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

隐藏文章页面侧边栏

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

隐藏分类页面侧边栏

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

29、自动代码高亮样式

个人喜欢不同，这个代码高亮样式，有人喜欢深色深沉，有人喜欢清新亮丽的，比如我自己之前喜欢黑背景色的，现在喜欢白色的，这里提供几个prettify.js的默认样式，至于prettify.js是什么自己百度。

用下面样式代码替换主题begin\css目录的prettify.css中的代码

但必须添加保留复制按钮样式：

.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;
}

样式一：

展开收缩

/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}

样式二：

/* Doxy pretty-printing styles. Used with prettify.js.  */

pre .str, code .str { color: #fec243; } /* string  - eggyolk gold */
pre .kwd, code .kwd { color: #8470FF; } /* keyword - light slate blue */
pre .com, code .com { color: #32cd32; font-style: italic; } /* comment - green */
pre .typ, code .typ { color: #6ecbcc; } /* type - turq green */
pre .lit, code .lit { color: #d06; } /* literal - cherry red */
pre .pun, code .pun { color: #8B8970;  } /* punctuation - lemon chiffon4  */
pre .pln, code .pln { color: #f0f0f0; } /* plaintext - white */
pre .tag, code .tag { color: #9c9cff; } /* html/xml tag  (bluey)  */
pre .htm, code .htm { color: #dda0dd; } /* html tag  light purply*/
pre .xsl, code .xsl { color: #d0a0d0; } /* xslt tag  light purply*/
pre .atn, code .atn { color: #46eeee; font-weight: normal;} /* html/xml attribute name  - lt turquoise */
pre .atv, code .atv { color: #EEB4B4; } /* html/xml attribute value - rosy brown2 */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

a {
  text-decoration: none;
}
pre.prettyprint, code.prettyprint {
  font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';
  font-weight: bold;
  font-size: 9pt;
  background-color: #0f0f0f;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
}  /*  background is black (well, just a tad less dark )  */

pre.prettyprint {
  width: 95%;
  margin: 1em auto;
  padding: 1em;
  white-space: pre-wrap;
}

pre.prettyprint a, code.prettyprint a {
   text-decoration:none;
}
/* Specify class=linenums on a pre to get line numbering; line numbers themselves are the same color as punctuation */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #8B8970; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

/* print is mostly unchanged from default at present  */
@media print {
  pre.prettyprint, code.prettyprint { background-color: #fff;  }
  pre .str, code .str { color: #088; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #0c3; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #b66ff7; font-weight: bold; }
  pre .htm, code .htm { color: #606; font-weight: bold; }
  pre .xsl, code .xsl { color: #606; font-weight: bold; }
  pre .atn, code .atn { color: #c71585;  font-weight: normal; }
  pre .atv, code .atv { color: #088;  font-weight: normal; }
}

样式三：

/*
 * Derived from einaros's Sons of Obsidian theme at
 * http://studiostyl.es/schemes/son-of-obsidian by
 * Alex Ford of CodeTunnel:
 * http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
 */

.str
{
    color: #EC7600;
}
.kwd
{
    color: #93C763;
}
.com
{
    color: #66747B;
}
.typ
{
    color: #678CB1;
}
.lit
{
    color: #FACD22;
}
.pun
{
    color: #F1F2F3;
}
.pln
{
    color: #F1F2F3;
}
.tag
{
    color: #8AC763;
}
.atn
{
    color: #E0E2E4;
}
.atv
{
    color: #EC7600;
}
.dec
{
    color: purple;
}
pre.prettyprint
{
    border: 0px solid #888;
}
ol.linenums
{
    margin-top: 0;
    margin-bottom: 0;
}
.prettyprint {
    background: #000;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
    color: #555;
    list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
    background: #111;
}
@media print
{
    .str
    {
        color: #060;
    }
    .kwd
    {
        color: #006;
        font-weight: bold;
    }
    .com
    {
        color: #600;
        font-style: italic;
    }
    .typ
    {
        color: #404;
        font-weight: bold;
    }
    .lit
    {
        color: #044;
    }
    .pun
    {
        color: #440;
    }
    .pln
    {
        color: #000;
    }
    .tag
    {
        color: #006;
        font-weight: bold;
    }
    .atn
    {
        color: #404;
    }
    .atv
    {
        color: #060;
    }
}

样式四：

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre.prettyprint, code.prettyprint {
	background-color: #000;
	border-radius: 8px;
}

pre.prettyprint {
	width: 95%;
	margin: 1em auto;
	padding: 1em;
	white-space: pre-wrap;
}


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

可以根据自己的喜欢修改样式。

30、

31、

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

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

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

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

教大家一个在PS中制作logo，如何让比较小的中文汉字保持清晰的小技巧。

很多PS新手对字号比较小的汉字看上去模糊，感到很挠头，其实一个小技巧就可以轻松解决：

1、在处理小字号的汉字时，比如小于14px，必须选择“宋体”或者“新宋体”。

2、在PS字符面板中，选择消除锯齿的方法为“无”.

如图，上面的LOGO小字号的文字是选择“无”的效果，下面是选择“犀利”的效果。

34、编辑器添加表情按钮

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

展开代码

展开收缩

//添加表情
function fa_get_wpsmiliestrans(){
global $wpsmiliestrans;
$wpsmilies = array_unique($wpsmiliestrans);
foreach($wpsmilies as $alt => $src_path){
$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>';
}
return $output;
}
add_action('media_buttons_context', 'fa_smilies_custom_button');
function fa_smilies_custom_button($context) {
$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:;">
添加表情
</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>';
return $context;
}

35、隐藏前台浏览统计

有人说开了静态缓存插件，前台不计数，有些怪，那就隐藏掉。

可以到Post Views插件设置中选择是是否显示统计。

或者直接用CSS隐藏掉，将下面的代码添加到主题选项→定制风格→自定义样式代码框中：

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

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

36、减少主题JS文件加载

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

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

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

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

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

<br />

当切换到可视化模式，并保存设置后，会被WP过滤掉，可以按下面的方法实现回行：

方法一：

切换到文本编辑模式，输入类似：

<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>

多个回行，以此类推。

用 p 代替 div 也是可以的。

方法二：

选择文字，点击编辑工具栏上的“项目符号列表”按钮，然后在适当的位置按回车键，也可实现回行。

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;
	}
}

里面的数值根据自己的需要调整，添加到主题选项→定制风格→自定义样式中：

39、

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;
}

英文按单词回行，不过中英文混排可能会出现字间距加大问题。

可以修改为：

.single-content p,
.single-content ul,
.single-content ol,
.single-content dd,
.single-content pre,
.single-contenthr {
margin: 0 0 5px 0;
text-align: justify;
text-justify: inter-ideograph;
word-wrap: break-word;
word-break: break-all;
}

英文不以单词回行，中英文混排不会出现字间距加大问题。具体使用哪种，自行选择修改吧。

另外，其中的[code]word-break: break-all[/code]会造成标点在行首出现，自己行酌情删除吧。

41、苹果风格H3

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

展开收缩

#cms-widget-two h3, 
#sidebar h3, #sidebar-l h3, .cat-w-icon, 
.cat-container .cat-title, 
.cat-grid-title, .cat-square-title {
	height: 38px;
	line-height: 38px;
	background: linear-gradient(0deg, #d8d8d8, #ececec);
	border-top: 1px solid white;
	border-bottom: 1px solid #b3b3b3;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.widget, .cat-container {
	border-radius: 5px;
}

.more-i span:nth-child(1) {
	background: #e95d5c;
}

.more-i span:nth-child(2) {
	background: #f1c04a;
}

.more-i span:nth-child(3) {
	background: #3fce52;
}


.more-i span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
}

.cat-title .more-i, 
.cat-square-title .more-i, 
.widget-title .more-i, 
.cat-square-title .more-i, 
.cat-grid-title .more-i, 
.child-title .more-i, 
.cat-w-icon .more-i {
	margin: 4px 14px 0 0;
}

42、直接显示繁体

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

var Default_isFT = 0

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

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

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

global $wpdb;
$wpdb->query( "
DELETE FROM $wpdb->postmeta
WHERE `meta_key` = 'thumbnail'
" );

之后，手动缩略图添加的自定义栏目'thumbnail' 会被删除，并显示自动裁剪的缩略图。

注：以上代码只使用一次就可以了，不用留在主题模板中，删除缩略图片后，需要将该代码删除并还原functions.php模板文件。

44、

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

新增加的增强文本小工具可以运行PHP代码（WP自带的不可以），可以任意添加运行网上淘来的代码，比如可以将集成在小工具中调用分类文章的代码直接添加到增强文本小工具中。

通过在增强文本小工具中直接添加分类调用代码与正常的小工具外观没有区别，区别是默认小工具标题不能加链接，增强文本小工具可以自定义标题链接，方便浏览者点击标题查看更多相关分类的文章。

将以下代码实例直接加到增强文本小工具中即可。

例一、下面的代码是调用ID为88的分类最新的5篇文章，并有缩略图：

<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篇文章：

更多实例代码

展开收缩

<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>

例三、调用ID为88的分类最新的5篇文章：

<div class="post_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();
?>
<?php the_title( sprintf( '<li class="cat-title"><i class="fa fa-angle-right"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>

例四、调用分类DI为88的最新10篇文章（两栏）

<div class="post_cat cat_two">
<ul>
<?php
$loop = new WP_Query( array ( 'showposts' => 10, 'cat' => 88, 'post__not_in' => get_option( 'sticky_posts') ) );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<?php the_title( sprintf( '<li class="cat-title"><i class="fa fa-angle-right"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>

修改其中的数字 88 为分类自己的分类ID，并添加下面相应的样式才能实现两栏排版

例五、调用多个分类文章，下面代码按时间顺序调用ID88和ID99的分类最新10篇文章（两栏）

<div class="post_cat cat_two">
<ul>
<?php
$args = array(
'posts_per_page' => 10,
'cat' => '88,99',
'ignore_sticky_posts' => 1
);
query_posts($args);
?>
<?php while (have_posts()) : the_post(); ?>
<?php the_title( sprintf( '<li class="cat-title"><i class="fa fa-angle-right"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>

修改其中的数字 88和99为自己的分类ID，多个分类用半角逗号隔开。同时不要忘了添加下面相应的样式才能实现两栏排版

两栏样式代码：

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

.cat_two li {
float: left;
width: 45% !important;
line-height: 210%;
margin: 0 20px 0 0;
whitewhite-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
overflow: hidden;
}
@media screen and (max-width: 480px) {
.cat_two li {
width: 95% !important;
margin: 0 0 0 0;
}
}

其中的showposts' => 4, 数字4是文章篇数，'cat' => 88数字88是分类ID

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

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

.postid-6367 {
background: #f1f1f1;
background:url('https://zmingcx.com/wp-content/uploads/2012/08/79760-772704496-8.gif');
}

其中：postid-6367为该文章页面特有选择器，后面的数字为文章ID。

另外，背景颜色与图片只选择添加一个样式属性就可以了。

效果见本文背景色

47、

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

ErphpDown 资源下载插件使用者很多。

这里简单兼容一下主题的样式和修改插件默认点击登录按钮为主题的弹窗登录。

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

样式代码：

展开收缩

.erphpdown {
	margin: 30px 0 !important;
	border: 1px solid #ddd !important;
	padding: 30px 15px 20px 15px!important;
	font-size: 16px !important;
	text-align: center;
	overflow: visible !important;
	border-radius: 2px;
}

.erphpdown .erphp-login-must, 
.erphpdown .erphpdown-down, 
.erphpdown .erphpdown-vip, 
.erphpdown .erphpdown-buy {
	padding: 5px 15px !important;
	font-size: 16px !important;
}

.erphpdown .login-respond {
	border: none;
}

.erphpdown:after {
	background: #fff;
	position: absolute;
	top: -20px;
	left: 15px;
	content: "资源下载";
	color: #555 !important;
	font-weight: bold;
	padding: 5px 10px !important;
}

插件默认点击登录按钮为主题的弹窗登录替换文件：

替换文件下载

将解压后的show.php文件，替换wp-content\plugins\erphpdown\includes目录同名文件即可。

后期考虑把插件前端的相关下载信息集成到主题的下载模块中，有点复杂....

49、

50、

51、

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

不知道什么是“百度转码”，可以百度一下或者查看此文：禁止百度转码

据说主题集成的禁止转码代码已失效，有发现自己博客被转码的用户，可以打开主题header.php模板文件，将第6和第7行的：

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

替换为：

<meta name="applicable-device" content="pc,mobile">
<meta name="MobileOptimized" content="width"/>
<meta name="HandheldFriendly" content="true"/>

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

53、导航菜单添加上标文字

将导航标签改为类似：

正常文字<span class="mysup">上标</span>

CSS类添加：mys

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

@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、网页变灰

用于哀悼日，把下面样式代码加到主题选项→定制风格→自定义样式代码中：

.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);
}

添加样式后，会造成主题部分功能错乱，比如文章目录索引。

55、导航菜单添加图片小图标

因主题不支持阿里彩色图标字体，可以通过一下面的方法，为菜单项添加图片图标

首先为准备添加图片图标的菜单项添加CSS类：my-img

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

.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");
}

以此类推为多个菜单项添加图片图标

56，

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

方法一、进数据库表wp_options中找到[code]core_updater.lock[/code]删除

方法二、将下面代码添加到主题函数模板functions.php中：

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

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

58、顶部菜单添加背景颜色动态渐变

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

#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;
	}
}

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

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

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

60 61、批量删除特色图像

如果之前用的主题是采用特色图像实现缩略图功能，这些特色图像尺寸并不一定能适合begin主题，所以可以删除这些特色图像，直接使用主题集成的自动裁剪图片功能。手动删除工作量大，可以用下面的代码，批量删除特色图像。

操作前备份好数据库和上传的图片目录wp-content\uploads，以防操作失败，恢复，切记！

打开begin主题目录中的functions.php模板文件，在[code]// 全部结束[/code]后面回行，将下面代码加进去：

delete_post_meta_by_key( '_thumbnail_id' );

之后，只需刷新一下页面，特色图像就已被删除，该代码不需要留在functions.php模板中，用后删除。

备用方法：不建议用备用方法，会删除媒体库中的图片，切记。

展开收缩

一、准备工作（必须）

因批量删除特色图像的同时，会将原图一并删除，所以需要将图片附件目录\wp-content\uploads整个备份一下，同时将数据库也备份一下，以防万一，切记！

二、添加删除代码

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

global $wpdb;
$attachments = $wpdb->get_results( "
SELECT *
FROM $wpdb->postmeta
WHERE meta_key = '_thumbnail_id'
" );
foreach ( $attachments as $attachment ) {
wp_delete_attachment( $attachment->meta_value, true );
}
$wpdb->query( "
DELETE FROM $wpdb->postmeta
WHERE meta_key = '_thumbnail_id'
" );

只需刷新一下页面，特色图像就已被删除，该代码不需要留在functions.php模板中，用后删除。

三、恢复图片附件备份

将备份的图片附件复制回去。

批量删除后，唯一的缺点是删除的这些图像在媒体库中将消失，但并不影响在文章中的显示。

62、主菜单只显示图标不显示文字

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

其中：font-size: 18px是图标大小，可以适当调整。

.font-text {
	display: none;
}
.down-menu .be, .down-menu .zm {
	font-size: 18px !important;
}

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

首先随便添加一个自定义链接菜单项目，编辑这个项目，在CSS类中添加：flsx

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

.flsx {
color: #666;
font-weight: bold;
pointer-events:none;
cursor:default;
}

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

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

效果如图

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

<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>

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

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

这是一个基于canvas绘制的网页背景效果。

首先将下载的canvas-nest.min.js文件，放到主题begin\js目录中

打开主题页脚模板文件footer.php在：

<?php wp_footer(); ?>

上面添加：

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/canvas-nest.min.js"></script>

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

66、上下篇调用全局文章

默认主题文章底部的上下篇文章调用的同分类的文章，通过修改可以调用全局文章。

打开主题根目录的single.php，将

<?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>"; }
?>

修改为：

<?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>"; }
?>

即可

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://tva1.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、

70、正文侧边栏错位

自从正文下面的版权信息可以自定义内容后，发现有用户因为乱加内容和代码，造成正文侧边栏错位，如果发现有类似情况，清空自定义内容。

71、留言板怎么弄

可能很多新手站长非常渴望有人在自己的博客网站上留言，所以总是想弄个留言板，好方便留言。

留言板创建方法：新建一个页面，标题：留言板，发表之后，可能会发现没有留言的模块。

调出留言模块，编辑这个页面，打开右上“显示选项”，勾选“讨论”，之后编辑框下面讨论面板中勾选“允许评论”，更新这个页面后，留言模块显示了。

题外话，留言可能会提高文章的权重，那为什么不让别人直接在文章中留言，非得跑到这个没有任何意义的页面中留言呢？

72、

73、二级菜单动画

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

#site-nav .sub-menu, .top-menu ul {
	animation-name: avatar;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

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

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

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 调出浏览器搜索功能。

搜索：medium_large_size_w，将该项值：768 改为 0 即可。

之所以有默认的裁剪数值，大概是因为，当上传的图片宽度超过768时会自动裁剪一张768×512缩略图，方便调用较小的图片，以提高页面加载速度，初衷是好的，不过主机空间有限，很是浪费。

另外，使用begin主题尽量不要使用这个WP自带的特色图像功能，因为主题可以自动裁剪文章中的图片作为缩略图。

WP自带的特色图像与主题集成的timthumb.php截图函数相比，前者缩略图不易管理，删除后不会再次生成，造成附件目录混乱，而 timthumb.php函数生成的缩略图删除后，可以再次生成。

76、

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

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

// 复制内容自动添加版权信息
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;
}

记得修改其中的版权信息。

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

78、九宫格HTML代码

一段九宫格HTML代码，适用于放在增强文本小工具中，用于展示一些链接之用，代码结构取自主题读者墙小工具，效果如图：

将下面的代码粘贴到增强文本小工具：

展开代码

展开收缩

<div class="top-author lx8">
<a rel="external nofollow" target="_blank" title="链接" href="#">
<img src="https://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
</div>
<div class="top-author lx8">
<a rel="external nofollow" target="_blank" title="链接" href="#">
<img src="https://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
</div>
<div class="top-author lx8">
<a rel="external nofollow" target="_blank" title="链接" href="#">
<img src="https://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
</div>
<div class="top-author lx8">
<a rel="external nofollow" target="_blank" title="链接" href="#">
<img src="https://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
</div>
<div class="top-author lx8">
<a rel="external nofollow" target="_blank" title="链接" href="#">
<img src="https://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
</div>
<div class="top-author lx8">
<a rel="external nofollow" target="_blank" title="链接" href="#">
<img src="https://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
</div>
<div class="top-author lx8">
<a rel="external nofollow" target="_blank" title="链接" href="#">
<img src="https://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
</div>
<div class="top-author lx8">
<a rel="external nofollow" target="_blank" title="链接" href="#">
<img src="https://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
</div>

修改其中的图片和链接地址。

79、

80、

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

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

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

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

首先编辑分类目录给分类添加不同别名，以我的“Web前端”分类为例，该分类别名为：webdesign。

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

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

修改其中的 webdesign 的为你想改的分类别名即可。

background: #4bafbe; 为背景颜色。

opacity: 0.8; 为透明度。

通过上面的方法，可以让不同的分类显示不同的背景色。

83、

84、

85、

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

基本形式：

<a href="tel:123456789">拨打电话</a>

比如将：tel:123456789 添加到公司首页模板联系方式按钮链接

或者文章中的短代码实现的链接按钮中。

在移动电话上点按钮会直接进入拨号页面，兼容大部分移动浏览器。

87、页脚小工具改为三栏

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

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

88、

89、

90、

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

张戈这个留言者相关信息功能貌似很多用户喜欢，这里弄个Begin主题添加教程：

1、下载所需文件，解压后放到Begin主题根目录中：

文件下载

注：必须先把这个show-useragent文件夹放到Begin主题目录中，不然直接添加下面的代码会有错误。

2、将下面代码添加到Begin主题根目录functions.php模板文件的最后：

展开收缩

require get_template_directory() . '/show-useragent/show-useragent.php';

3、打开Begin主题begin\inc目录的comment-template.php文件，在大约61行：

<?php get_author_admin($comment->comment_author_email, $comment->user_id); ?>

下面添加：

<span class="flags">
<?php
CID_print_comment_flag();// 国家
echo ' ';
CID_print_comment_browser();// 浏览器和操作系统
echo convertip(get_comment_author_ip());// 运营商
?>
</span>

4、将下面配套样式文件添加到主题样式文件style.css最后或者主题选项→定制风格→自定义样式中：

.WB-OS img {
width: 14px;
height: auto;
vertical-align: -6%;
}
.flags {
display: none;
}
@media screen and (min-width: 900px) {
.comment-body:hover .flags {
display: inline;
animation: fade-in;
animation-duration: 0.3s;
-webkit-animation: fade-in 0.3s;
}
}

添加样式后鼠标悬停在留言上才会显示留言者相关信息，小屏手机上不显示，因为留言者所在区域信息内容较长，不好看，而且可能会造成错位。

92、

93、

94、

95、

96、

97、

99

100

101 102。

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

上面第64条，有一个多彩的菜单HTML代码，再给大家弄一个有图标的多彩链接HTML，本代码适用于侧边栏、杂志布局单栏小工具及公司单栏小工具中添加的增强文本小工具，效果如图：

侧边栏

单栏小工具

首先，将相应样式添加到主题选项→定制风格“自定义样式”中或者主题样式文件style.css最后。

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

上面代码是以主题自带的图标字体为例，使用自定义阿里图标库，请将上面代码中的[code]be[/code]改成[code]zm[/code].

其次，将下面代码添加到增强文本小工具中：

<div class="qz-box">
<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>
<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>
<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>
<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>

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

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

首先给准备有闪烁的菜单项：添加字体图标

比如字体图标代码：[code]be be-display[/code]

另外再加一个特定的css类：[code]frames[/code]，名称可以任何

最终为：[code]be be-display frames[/code]

加到菜单项“css类”中，如图：

Begin主题进阶

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

整个菜单项闪动：

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

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

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

改变文字颜色：

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

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

104、自动为文章中的图片添加链接到媒体附件启用放大查看

将下面代码添加到主题选项 → SEO选项卡，流量统计代码（同步）中即可。

<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中

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文件下载

最后，添加调用代码

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

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

其中的：height=300高度，可以根据你设置的地图大小做相应修改。

最后的调用代码直接添加到文章中也可以。

效果如图：

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;
}

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

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

在文章标题前后加个醒目的图标，可以突出显示某篇文章。

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

/** 标题前图标 **/
#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;
}

其中：

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

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

/** 标题后加文字 **/
#post-75 h2 a:after {
content: "推荐";
font-size: 14px;
background: #c40000;
color: #fff;
margin: 0 0 0 5px;
padding: 1px 3px;
border-radius: 2px;
}

效果如图：

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

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

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

.bars:after, .nav-mobile:after {
content: "导航";
background: #c40000;
color: #fff;
padding: 1px 3px;
border-radius: 2px;
}
.bars .be, .nav-mobile .be {
display: none;
}

效果如图：

110、修改更多图标为文字

与上面修改菜单方法类似，比如替换首页TAB更多图标为文字

.tabs-more a:after {
	content: "更多";
	font-size: 14px;
	font-size: 1.4rem;
}

.tabs-more .be {
	display: none;
}

想修改其它图标按钮，以此类推，用浏览器开发工具找到CSS类替换上面即可。

111、打赏图标改为文字

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

.zmy-btn-donate:before {
	content: "赏" !important;
	top: 22px;
	left: 13px;
	font-size: 16px !important;
	font-weight: bold;
}

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

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

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

上面代码是配合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="https://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、在页脚小工具栏数

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

/*修改页脚小工具栏数*/
.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栏，根据需要自行修改。

添加上述代码后，可添加多个导航菜单小工具，并以单栏样式展示，如图：

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

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

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

改为：

<?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、去掉正文图片的下边距

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

.aligncenter {
margin: 0 auto;
}

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

116、

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

个人感觉当文章中有大面积图片或者图片较多，就过不了移动落地页检测，会提示“该页面不符合移动落地页体验规范”之类的。

我只测试过3个页面，其中两个文章中无图片，检测通过，另一个文章中有两张图片，没通过。

百度出的垃圾功能也就这智力了

移动落地页检测地址：https://ziyuan.baidu.com/page/mobile

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 瑞典语

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

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

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

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