最近接了一个用wordpress仿站的项目，本以为很简单，但实际上手后才发现了一些“小”问题，而且中文网上关于wordpress的教程不仅少，而且老，很多都已经不适用于5.x后的版本，现在就把我在开发过程中遇到问题整理成该文
循环块
这大概是wordpress最实用的功能了，在把静态网页改成动态网页中发挥极大的作用，使用方法如下：
（1）静态代码
1
2
3
4
5
6
7
8
9
10
| <div id="jj2" class="kiz_zyzx" >
<a href="http://www.kiz.cas.cn/zyzx/zyzx01/201807/t20180709_5038706.html">中心简介</a><br />
<a href="http://www.kiz.cas.cn/zyzx/zyzx05/">科研进展</a><br />
<a href="http://www.kiz.cas.cn/zyzx/zyzx01/zyzx03/">骨干人才</a><br />
<a href="http://www.kiz.cas.cn/zyzx/zyzx07/">新闻动态</a><br />
<a href="http://www.kiz.cas.cn/zyzx/zyzx07/zyzx72/">通知公告</a><br />
<a href="https://www.yunzhan365.com/bookcase/jvpq/">中心简报</a>
</div>
|
观察静态代码循环的地方，确定循环块
（2）动态代码
1
2
3
4
5
6
7
| <div id="jj2" class="kiz_zyzx">
<?php query_posts('cat=10 & posts_per_page=6');
while (have_posts()) : the_post(); ?>
<a href="<?php lxtx_post_link(); ?>"><?php the_title(); ?></a><br />
<?php endwhile;wp_reset_query(); ?>
</div>
|
- 使用
<?php query_posts('cat=10 & posts_per_page=6'); while (have_posts()) : the_post(); ?>与 <?php endwhile;wp_reset_query(); ?> 夹住要循环的块
- cat属性对应后台分类目录id（鼠标悬浮在目录上可在左下角查看），posts_per_page属性对应循环次数
- 再修改循环块内部的静态内容为动态内容，如
<?php the_title(); ?>
循环分栏
上面提到了循环块的使用，那有些时候会碰到循环过程中样式的规律性变化，如下图
这时就要用到php输出html元素
（1）静态代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" height="28" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="kiz_zyzx">
<a href="./gkjj/jgjj/" target="_blank">机构简介</a>
</td>
</tr>
</table></td>
<td width="50%" height="28" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="kiz_zyzx">
<a href="./gkjj/szzc/" target="_blank">所长致辞</a>
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="50%" height="28" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="kiz_zyzx">
<a href="./gkjj/leadership/" target="_blank">研究所领导</a>
</td>
</tr>
</table></td>
<td width="50%" height="28" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="kiz_zyzx">
<a href="./gkjj/zzjg/" target="_blank">组织机构</a>
</td>
</tr>
</table></td>
</tr>
</table>
|
仔细观察静态代码的结构，和其循环有规律的地方，大致简化规律
1
2
3
4
5
6
7
8
9
10
| <tr>
<td> </td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
</tr>
|
所以我们可以想到，循环
标签的内容，每循环两次后，用php输出 | 标签
（2）动态代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <tr>
<?php query_posts('cat=8 & posts_per_page=5');
while (have_posts()) : the_post();
$count++; ?>
<td width="50%" height="28" align="left">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="kiz_zyzx">
<a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a>
</td>
</tr>
</table>
</td>
<?php if ($count == 2) {
echo '<tr>';
$count = 0;
} ?>
<?php endwhile;
wp_reset_query(); ?>
</tr>
|
用$count记录循环次数，再用条件句if ($count == 2)循环输出tr标签
获取文章首图
在仿站过程中，往往有需要动态插入图片的地方，这时候往往通过获取文章首图的方法来插入图片
（1）获取图片的函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = "".bloginfo('template_url')."/images/xx.jpg";
}
return $first_img;
}
|
把该函数放入function.php文件中
（2）修改静态内容
1
2
3
4
5
6
| <div class="tile" style="margin-left:4px;">
<div class="text">
<img src="<?php echo catch_that_image() ?>" width=240 height=160 border=0 />
<h2 class="animate-text"> <a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></h2>
</div>
</div>
|
将静态的图片链接改为<?php echo catch_that_image() ?>,获取文章的首图
插入外部链接
在仿站过程中，有些地方需要插入外部链接而不是跳转到默认的文章页，这时候需要一个插入外部链接的函数
（1）获取外部链接函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
function out_post_link() {
global $post;
$thePostID = $post->ID;
$post_id = get_post($thePostID);
$title = $post_id->post_title;
$perm = get_permalink($post_id);
$post_keys = array(); $post_val = array();
$post_keys = get_post_custom_keys($thePostID);
if (!empty($post_keys)) {
foreach ($post_keys as $pkey) {
if ($pkey=='out_url' || $pkey=='title_url' || $pkey=='url_title') {
$post_val = get_post_custom_values($pkey);
}
}
if (empty($post_val)) {
$link = $perm;
} else {
$link = $post_val[0];
}
} else {
$link = $perm;
}
echo $link;
}
|
同样把该函数放在function.php文件
（2）使用方法
在需要跳转外部链接的地方插入<?php out_post_link() ?>
1
2
3
| <a href="<?php lxtx_post_link()?>" target="_blank">
<img src="<?php echo catch_that_image() ?>" alt="202003" border=0 />
</a>
|
在wordpress后台相应的文章中插入自定义字段：out_url / title_url / utl_title,内容就填写要跳转的外部链接
面包屑导航
（1）面包屑函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| function cmp_breadcrumbs()
{
$delimiter = ' > ';
$before = '<span class="top_path">';
$after = '</span>';
if (!is_home() && !is_front_page() || is_paged()) {
if (is_category()) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) {
$cat_code = get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' ');
echo $cat_code = str_replace('<a', '<a class="top_path CurrChnlCls"', $cat_code);
}
echo '<a class="top_path CurrChnlCls" href="">' . single_cat_title('', false) . '</a>';
} elseif (is_day()) {
echo '<a itemprop="breadcrumb" href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a itemprop="breadcrumb" href="' . get_month_link(get_the_time('Y'), get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo $before . get_the_time('d') . $after;
} elseif (is_month()) {
echo '<a itemprop="breadcrumb" href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $before . get_the_time('F') . $after;
} elseif (is_year()) {
echo $before . get_the_time('Y') . $after;
} elseif (is_single() && !is_attachment()) {
if (get_post_type() != 'post') {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo '<a class="top_path CurrChnlCls" href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
echo '<a class="top_path CurrChnlCls" href="' . the_permalink() . '">' .wp_trim_words( get_the_title(), 6 ). '</a>';
} else {
$cat = get_the_category();
$cat = $cat[0];
$cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo $cat_code = str_replace('<a', '<a class="top_path CurrChnlCls"', $cat_code);
echo '<a class="top_path CurrChnlCls" href="">' . wp_trim_words( get_the_title(), 5) . '</a>';
}
} elseif (!is_single() && !is_page() && get_post_type() != 'post') {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif (is_attachment()) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID);
$cat = $cat[0];
echo '<a class="top_path CurrChnlCls" href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $delimiter . ' ';
echo $before . wp_trim_words( get_the_title(), 5). $after;
} elseif (is_page() && !$post->post_parent) {
echo '<a class="top_path CurrChnlCls" href="' . the_permalink() . '">' .wp_trim_words( get_the_title(), 5 ). '</a>';
} elseif (is_page() && $post->post_parent) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a class="top_path CurrChnlCls" href="' . get_permalink($page->ID) . '">' . wp_trim_words( get_the_title(), 5 )($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
echo '<a class="top_path CurrChnlCls" href="">' . get_the_title() . '</a>';
} elseif (is_search()) {
echo $before;
printf(__('Search Results for: %s', 'cmp'), get_search_query());
echo $after;
} elseif (is_tag()) {
echo $before;
printf(__('Tag Archives: %s', 'cmp'), single_tag_title('', false));
echo $after;
} elseif (is_author()) {
global $author;
$userdata = get_userdata($author);
echo $before;
printf(__('Author Archives: %s', 'cmp'), $userdata->display_name);
echo $after;
} elseif (is_404()) {
echo $before;
_e('Not Found', 'cmp');
echo $after;
}
}
}
|
将该函数加入function.php文件中
（2）引用面包屑
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!-- 面包屑开始 -->
<span class="top_menu">
<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>
</span>
<?php if (function_exists('cmp_breadcrumbs')) cmp_breadcrumbs(); ?>
</div>
<!-- 面包屑结束 -->
|
轮播图
轮播图同样使用到了循环的想法，但在仿站的过程中会遇到把图片链接放在css中的做法，php无法写入css中动态获取图片，这时就可以创建一张图片覆盖到原本要轮播的块上，继承其轮播的特效
（1）静态代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div class="ps_box">
<div class="pics_switch">
<div class="pb">
<div class="pic_box"><a class="pic_banner_001" target="_blank" href="http://www.kiz.cas.cn/"></a></div>
<div class="pic_box"><a class="pic_banner_002" target="_blank" href="http://www.kiz.cas.cn/"></a></div>
<div class="pic_box"><a class="pic_banner_003" target="_blank" href="http://www.kiz.cas.cn/"></a></div>
<div class="pic_box"><a class="pic_banner_004" target="_blank" href="http://www.kiz.cas.cn/"></a></div>
</div>
<div class="viewArrows prev">上一张</div>
<div class="viewArrows next">下一张</div>
<div class="pics_switch_clients">
<ul>
<li class="li_1" style="list-style:none;"><span class="current">1</span></li>
<li class="li_2" style="list-style:none;"><span>2</span></li>
<li class="li_3" style="list-style:none;"><span>3</span></li>
<li class="li_4" style="list-style:none;"><span>4</span></li>
</ul>
</div>
</div>
</div>
|
（2）动态代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div class="pics_switch">
<div class="pb">
<?php query_posts('cat=7 & posts_per_page=4');
while (have_posts()) : the_post();?>
<div class="pic_box" > <img src="<?php echo catch_that_image() ?>" ><a class="pic_banner001" target="_blank" href="http://www.kiz.cas.cn/"></a></div>
<?php endwhile;
wp_reset_query(); ?>
</div>
<div class="viewArrows prev">上一张</div>
<div class="viewArrows next">下一张</div>
<div class="pics_switch_clients">
<ul>
<li class="li_1" style="list-style:none;"><span class="current">1</span></li>
<li class="li_2" style="list-style:none;"><span>2</span></li>
<li class="li_3" style="list-style:none;"><span>3</span></li>
<li class="li_4" style="list-style:none;"><span>4</span></li>
</ul>
</div>
</div>
|
多级菜单
来了，一个非常重磅的知识点来了！在开发过程中耗费我最多时间去钻研的东西，再加上中文网上这方面的博客都已经很老而且不太实用了，而本文是基于5.4.1的内容实现三级菜单，我愿称其为中文网wordpress第一文[狗头]
（1）静态内容观察
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <div class="menu" style="width:1200px;text-align:left;">
<ul class="nav">
<li style="background-color:#14A73C;"><a href="http://www.kiz.cas.cn/">首 页</a>
</li>
<li><a href="http://www.kiz.cas.cn/jgsz/">机构设置</a>
<ul class="sub-nav">
<li><a href="http://www.kiz.cas.cn/jgsz/kyxt/">科研机构</a></li>
<li><a href="http://www.kiz.cas.cn/jgsz/glxt/">管理机构</a></li>
<li><a href="http://www.kiz.cas.cn/jgsz/zcxt/">支撑机构与技术平台</a></li>
<li><a href="http://www.kiz.cas.cn/jgsz/gkxh/">挂靠学会</a></li>
</ul>
</li>
<li><a href="http://www.kiz.cas.cn/kycg/">科研成果</a>
<ul class="sub-nav">
<li><a href="http://www.kiz.cas.cn/kycg/hjcg/">获奖</a></li>
<li><a href="http://www.kiz.cas.cn/kycg/lw/">论文</a></li>
<li><a href="http://www.kiz.cas.cn/kycg/zz/">专著</a></li>
<li><a href="http://www.kiz.cas.cn/kycg/zl/">专利</a></li>
</ul>
</li>
<ul>
<div>
|
（2）注册菜单
1
2
3
4
5
6
| register_nav_menus(array(
'PrimaryMenu'=>'导航',
'friendlinks'=>'友情链接',
'footer_nav'=>'页脚导航')
);
add_theme_support('nav_menus');
|
在function.php文件中加入该代码，注册菜单的形式menu
（3）动态修改
菜单的动态修改，实际上就是用php来取代相关块的类（class），由静态观察有最外层的ul为nav，最外层容器div为menu，因为此处的容器有内联css的形式，故不宜取代。
1
2
3
4
5
6
7
8
9
10
11
| <div class="menu" style="width:1200px;text-align:left;">
<?php
wp_nav_menu(array(
'theme_location' => 'PrimaryMenu',
'menu_class' => 'nav', //ul节点class值
'depth' => 0,
));
?>
</div>
|
（4）二级菜单
二级菜单的即里面的
标签带领的这些内容，而wordpress默认使用的类是“sub-menu”
所以只需要把
标签对应的css样式表的选择器（.sub-nav）改为“.sub-menu”即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| nav li .sub-menu {
position: absolute;
top: 55px;
left: 0px;
list-style: none;
background-color: #006E39;
display: none;
}
.nav li .sub-menu li {
text-align: center;
clear: left;
width: 180px;
height: 40px;
line-height: 40px;
position: relative;
border-top: 1px solid #2E7A4A;
border-bottom: 1px solid #005E31;
.nav li .sub-menu li a {
height: 40px;
line-height: 40px;
width: 180px;
padding: 0;
display: inline-block;
}
|
（5）三级菜单
三级菜单这里我使用最简单的一种方法，修改wp-includes里的文件，默认第三级的类为“third-menu”
修改的文件路径：根目录/wp-includes/class-walker-nav-menu.php
（很多旧文章说的是修改nav-menu-template.php文件）
修改内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| public function start_lvl( &$output, $depth = 0, $args = null ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
if($depth == 0){
$classes = array( 'sub-menu' );}
else{
$classes = array( 'third-menu' );
}
|
通过if($depth == 0)条件句多加了一层third-menu的目录，然后再用修改第二级的方法修改第三级的css样式便大功告成啦！
插件禁用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| add_filter('site_option_active_sitewide_plugins', 'modify_sitewide_plugins');
function modify_sitewide_plugins($value) {
global $current_blog;
if( $current_blog->blog_id == 141 ) {
unset($value['advanced-custom-fields/acf.php']);
unset($value['all-in-one-wp-security-and-firewall/wp-security.php']);
unset($value['bulletproof-security/bulletproof-security.php']);
unset($value['classic-editor/classic-editor.php']);
unset($value['kindeditor-for-wordpress/kindeditor.php']);
unset($value['loggedin/loggedin.php']);
unset($value['user-role-editor/user-role-editor.php']);
unset($value['wp-password-policy-manager/wp-password-policy-manager.php']);
unset($value['wp-category-order/WPCategoryOrder.php']);
unset($value['wp-statistics/wp-statistics.php']);
unset($value['wp-super-cache/advanced-cache.php']);
unset($value['taxonomy-terms-order/taxonomy-terms-order.php']);
unset($value['ml-slider/ml-slider.php']);
unset($value['update/index.php']);
}
return $value;
}
|
本文仿站对象：http://www.kiz.cas.cn/
本文部分参考：https://wp.rollby.xin//