最近接了一个用wordpress仿站的项目，本以为很简单，但实际上手后才发现了一些“小”问题，而且中文网上关于wordpress的教程不仅少，而且老，很多都已经不适用于5.x后的版本，现在就把我在开发过程中遇到问题整理成该文

---

循环块

这大概是wordpress最实用的功能了，在把静态网页改成动态网页中发挥极大的作用，使用方法如下：

（1）静态代码

<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）动态代码

     <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(); ?>

循环分栏

上面提到了循环块的使用，那有些时候会碰到循环过程中样式的规律性变化，如下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQ2rsqRA-1591519565745)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20200607154029782.png)]

这时就要用到php输出html元素

（1）静态代码

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

仔细观察静态代码的结构，和其循环有规律的地方，大致简化规律

<tr>   <td> </td><td></td>
</tr><tr>   <td> </td><td></td>
</tr>

所以我们可以想到，循环标签的内容，每循环两次后，用php输出标签

（2）动态代码

     <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）获取图片的函数

    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）修改静态内容

<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）获取外部链接函数

    //获取外部链接，the_permalink() 替换为out_post_link()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() ?>

  <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,内容就填写要跳转的外部链接

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DkNts835-1591519565748)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20200607152835570.png)]

面包屑导航

（1）面包屑函数

        function cmp_breadcrumbs(){$delimiter = '&nbsp;>&nbsp;'; // 分隔符$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 { // 文章 post$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()) { // 404 页面echo $before;_e('Not Found', 'cmp');echo  $after;}}}

将该函数加入function.php文件中

（2）引用面包屑

<!-- 面包屑开始 -->
<span class="top_menu"><?php$category = get_the_category();echo $category[0]->cat_name;?>
</span>&nbsp;&nbsp;&nbsp;&nbsp;<?php if (function_exists('cmp_breadcrumbs')) cmp_breadcrumbs(); ?>
</div>
<!-- 面包屑结束 -->

轮播图

轮播图同样使用到了循环的想法，但在仿站的过程中会遇到把图片链接放在css中的做法，php无法写入css中动态获取图片，这时就可以创建一张图片覆盖到原本要轮播的块上，继承其轮播的特效

（1）静态代码

    <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）动态代码

      <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）静态内容观察

<div class="menu" style="width:1200px;text-align:left;"><ul class="nav"><li style="background-color:#14A73C;"><a href="http://www.kiz.cas.cn/">首&nbsp;&nbsp;页</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）注册菜单

register_nav_menus(array('PrimaryMenu'=>'导航','friendlinks'=>'友情链接','footer_nav'=>'页脚导航'));add_theme_support('nav_menus');

在function.php文件中加入该代码，注册菜单的形式menu

（3）动态修改

菜单的动态修改，实际上就是用php来取代相关块的类（class），由静态观察有最外层的ul为nav，最外层容器div为menu，因为此处的容器有内联css的形式，故不宜取代。

<div class="menu" style="width:1200px;text-align:left;"><?phpwp_nav_menu(array('theme_location' => 'PrimaryMenu','menu_class'   => 'nav',   //ul节点class值'depth' => 0,));?>
</div>

（4）二级菜单

二级菜单的即里面的

标签带领的这些内容，而wordpress默认使用的类是“sub-menu”

所以只需要把

标签对应的css样式表的选择器（.sub-nav）改为“.sub-menu”即可

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文件）

修改内容：

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样式便大功告成啦！

---

本文仿站对象：http://www.kiz.cas.cn/

ncludes/class-walker-nav-menu.php

（很多旧文章说的是修改nav-menu-template.php文件）

修改内容：

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样式便大功告成啦！

---

本文仿站对象：http://www.kiz.cas.cn/

本文部分参考：https://wp.rollby.xin/