wordpress仿站笔记
最近接了一个用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">
<a href="">a><br />
div>
- 使用
与夹住要循环的块 - cat属性对应后台分类目录id（鼠标悬浮在目录上可在左下角查看），posts_per_page属性对应循环次数
- 再修改循环块内部的静态内容为动态内容，如
循环分栏
上面提到了循环块的使用，那有些时候会碰到循环过程中样式的规律性变化，如下图
这时就要用到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>
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="" target="_blank"> the_title(); ?></a>
</td>
</tr>
</table>
</td>
if ($count == 2) {
echo '';
$count = 0;
} ?>
endwhile;
wp_reset_query(); ?>
</tr>
用 c o u n t 记 录 循 环 次 数 ， 再 用 条 件 句 ‘ i f ( count记录循环次数，再用条件句`if ( count记录循环次数，再用条件句‘if(count == 2)`循环输出tr标签
获取文章首图
在仿站过程中，往往有需要动态插入图片的地方，这时候往往通过获取文章首图的方法来插入图片
（1）获取图片的函数
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//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="" width=240 height=160 border=0 />
<h2 class="animate-text"> <a href=""
target="_blank"> the_title(); ?></a></h2>
</div>
</div>
将静态的图片链接改为
插入外部链接
在仿站过程中，有些地方需要插入外部链接而不是跳转到默认的文章页，这时候需要一个插入外部链接的函数
（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）使用方法
-
在需要跳转外部链接的地方插入
<a href="" target="_blank">
<img src="" alt="202003" border=0 />
a>
面包屑导航
（1）面包屑函数
function cmp_breadcrumbs()
{
$delimiter = ' > '; // 分隔符
$before = ''; // 在当前链接前插入
$after = ''; // 在当前链接后插入
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(', ', $cat_code);
}
echo '' . single_cat_title('', false) . '';
} elseif (is_day()) { // 天 存档
echo '. get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . ' ' . $delimiter . ' ';
echo '. get_month_link(get_the_time('Y'), get_the_time('m')) . '">' . get_the_time('F') . ' ' . $delimiter . ' ';
echo $before . get_the_time('d') . $after;
} elseif (is_month()) { // 月 存档
echo '. get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . ' ' . $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 '. $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . ' ' . $delimiter . ' ';
echo '. the_permalink() . '">' .wp_trim_words( get_the_title(), 6 ). '';
} else { // 文章 post
$cat = get_the_category();
$cat = $cat[0];
$cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo $cat_code = str_replace(', ', $cat_code);
echo '' . wp_trim_words( get_the_title(), 5) . '';
}
} 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 '. get_permalink($parent) . '">' . $parent->post_title . ' ' . $delimiter . ' ';
echo $before . wp_trim_words( get_the_title(), 5). $after;
} elseif (is_page() && !$post->post_parent) { // 页面
echo '. the_permalink() . '">' .wp_trim_words( get_the_title(), 5 ). '';
} elseif (is_page() && $post->post_parent) { // 父级页面
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '. get_permalink($page->ID) . '">' . wp_trim_words( get_the_title(), 5 )($page->ID) . '';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
echo '' . get_the_title() . '';
} 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">
$category = get_the_category();
echo $category[0]->cat_name;
?>
</span>
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">1span>li>
<li class="li_2" style="list-style:none;"><span>2span>li>
<li class="li_3" style="list-style:none;"><span>3span>li>
<li class="li_4" style="list-style:none;"><span>4span>li>
ul>
div>
div>
div>
（2）动态代码
<div class="pics_switch">
<div class="pb">
query_posts('cat=7 & posts_per_page=4');
while (have_posts()) : the_post();?>
<div class="pic_box" > <img src="" ><a class="pic_banner001" target="_blank" href="http://www.kiz.cas.cn/"></a></div>
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/">首 页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;">
wp_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/
本文部分参考：https://wp.rollby.xin/
你可能感兴趣的:(php,wordpress,php,web)