wordpress模板开发教程

转载

墨香四溢 2024-07-18 06:37:45

文章标签 wordpress模板开发教程 wordpress wp php 字符串 文章分类 架构后端开发

手把手一步一步的教你用wordpress自定义模板主题开发仿站，本教程包含了wordpress首页、列表页、文章页、搜索页、侧边栏、讨论留言、会员登陆注册、自定义留言表单、等常用的网站功能开发教程以及wordpress常用调用标签教程。本教程需要使用到-wordpress functions.php常用功能与常用插件

wordpress模板开发教程_php

一、wordpress导航菜单调用调用标签

<? wp_nav_menu() ?>                            方法一（默认菜单调用方法）

<?php                                          方法二（默认菜单调用方法，可更改样式）
  wp_nav_menu( array(
    'theme_location'  => '',                   //导航别名
    'menu'   => '',                            //期望显示的菜单
    'container'  => 'div',                     //容器标签
    'container_class' => '',                   //ul父节点class值
    'container_id'  => '',                     //ul父节点id值
    'menu_class'   => 'menu',                  //ul节点class值
    'menu_id'   => '',                         //ul节点id值
    'echo'  => true,                           //是否输出菜单，默认为真
    'fallback_cb' => 'wp_page_menu',           //菜单不存在时，返回默认菜单，设为false则不返回
    'before' => '',                            //链接前文本
    'after'  => '',                            //链接后文本
    'link_before'  => '',                      //链接文本前
    'link_after'  => '',                       //链接文本后
    'items_wrap'  => '<ul id="%1$s" class="%2$s">%3$s</ul>',   //如何包装列表
    'depth' => 0,                             //菜单深度，默认0
    'walker' => ''                            //自定义walker
  ) );

?>

二、wordpress首页模板主题开发调用标签

1、wordpress首页调用指定栏目循环标签

/**其中cat=20代表分类ID，posts_per_page=4代表显示几条记录 **/
<?php query_posts('cat=20&posts_per_page=4'); while(have_posts()): the_post(); ?>   
   <li>
   <a href="<?php the_permalink(); ?>" target="_blank">  //链接
   <img src=" <?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); echo $url; ?>" title="<?php the_title();?>" /> //特色图片缩略图
   <h2><?php the_title();?></h2>   //文章标题一
   <h2><?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?></h2>   //可控字数：文章标题二
   <p><?php the_excerpt(); ?></p>  //文章简介方法一
   <p><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?></p> //可控字数：文章简介方法二
   <p><?php the_date_xml()?></p>        //文章发布时间 方法一
   <p><?php the_time('F d, Y') ?></p>   //文章发布时间 方法二
   <p><?php the_time('y-m-d H:i:s') ?></p>      //文章发布时间 方法三
  </a>
   </li>   
<?php endwhile; wp_reset_query(); ?>

2、调用指定分类栏目名

//数字2指的是栏目id
<?php echo get_cat_name(2);?>

3、调用指定分类的栏目链接：

//数字2指的是栏目id
<?php echo get_category_link(2); ?>

4、调用指定分类的栏目别名：

//2为栏目id
<?php $cat = get_category(2);echo $cat->slug;?>

5、调用指定栏目子菜单

//child_of=3        为调用指定分类的ID号，
//sort_column=name  分类名
//hide_empty=0      是否隐藏没有文章的分类
<?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=1&hide_empty=0&child_of=3'); ?>

6、调用指定id的文章

输出ID为13的文章标题 
<?php $id=13;  $title = get_post($id)->post_title;  echo $title; ?>

7、获取指定单页栏目id的标题与内容

获取单页栏目id为6的栏目名
<?php
    $page_id = 6;
    $page_data = get_page($page_id);
    echo $page_data -> post_title;
?>
获取单页栏目id为6的栏目内容
<?php
   $page_id = 6;
    $page_data = get_page($page_id);
    echo apply_filters('the_content', $page_data -> post_content);     
?>

8、友情链接调用标签（注：方法一与方法二为同一种方法，只不过一个输出默认样式，另一个可根据要求设置更灵活）

方法一、<?php wp_list_bookmarks( $args );?>
方法二、
<?php
 $args=array(
'orderby' => 'name',                 //根据名称排序
'order' => 'ASC',                    //升序或降序
'limit' => -1,                       //设置输出链接的最大条数 -1为输出全部
'category' => '',                    //字符串，链接分类id 有显示分类下链接 没有显示全部链接
'category_name' => '',               //字符串，链接分类名 有在链接前显示该分类名，没有显示所有链接分类名
'hide_invisible' => 1,               
'show_updated' => 0,
'echo' => 1,
'categorize' => 1,                   //布尔型，设置是否按各自分类显示 1 按照分类显示 0显示全部链接
'title_li' => __('Bookmarks'),       //字符串，链接标题的头文字或代码，默认是：Bookmarks设置是否按照列表的方式排列
'title_before' => '',                //字符串,分类标题前文字或代码
'title_after' => '',                 //字符串，分类标题后文字或代码
'category_orderby' => 'name',         //字符串，根据分类名称排序
'category_order' => 'ASC',            //字符串，分类链接的升降序排列
'class' => 'linkcat',                 //字符串，链接的class属性
'category_before' => '',              //字符串，分类链接前的文字或代码
'category_after' => '',               //字符串，分类链接后的文字或代码

);
wp_list_bookmarks( $args );           
?>

方法三、<?php get_links_list(); ?>

三、wordpress列表页模板主题开发（聚合页）调用标签

1、wordpress列表页循环调用标签

<?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
     <li class=" homebk1-item"> 
      <a href="<?php the_permalink(); ?>">    //链接
       <div class="homebk1-img"> 
        <img src="<?php $full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full'); echo $full_image_url[0]; ?>" />  //缩略图（特色图片）
       </div> 
        <h3><?php the_title();?></h3>  //标题方法一
        <h3><?php  wp_trim_words( get_the_title(), 10 );?></h3> //标题方法二 可限制字数
        <p><? the_excerpt(); ?></p>   //简介方法一
        <p><?php  wp_trim_words( get_the_excerpt(), 20 );?></p> //简介方法二 可限制字数
      </a> 
	   <p><?php the_date_xml()?> </p>
     </li> 
  <?php endwhile;?>
 <?php endif; ?>

2、当前分类栏目名,当前分类i栏目d,当前分类栏目链接

<?
	$category_title= single_cat_title('', false );
	$category_id = get_cat_ID($category_title);
	$category_link = get_category_link( $category_id );
	echo $category_title; //输出当前分类名
	echo $category_id;    //输出当前分类id
	echo $category_link   //输出当前分类链接
?>

3、当前分类栏目简介描述（Description）

<?php echo category_description(); ?>

4、当前分类所属的顶级分类栏目的分类名与分类链接

<a href="<?php echo get_category_link(get_category_root_id($cat)); ?>"><?php echo get_cat_name(get_category_root_id($cat)); ?></a>

4、wordpress分页标签（方法三：functions添加分页代码）

<? posts_nav_link(); ?>  //方法一  官方默认调用方法
<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?> //方法二 需用插件 wp-page-numbers
<?php kriesi_pagination($query_string); ?>  //方法三：自定义分页代码，可以根据需要更改分页代码-需在functions添加分页代码

5、栏目页面包屑调用标签（方法二：functions添加面包屑代码）

//方法一 直接在需要放置面包屑的地方添加如下代码
<a href="<? bloginfo('url'); ?>">首页</a></li>> 
		<?
		if(is_category()){single_cat_title();}
		elseif(is_search()){echo $s;}
		elseif(is_single()){
			$cat=get_the_category();
			$cat=$cat[0];
			echo '<a href="'.get_category_link($cat).'">'.$cat->name. ' </a>';
		}elseif(is_page()){ 
			the_title();
		}elseif(is_404()){echo '404错误页面';}

?>

方法二  在functions.php文件下添加如下代码 

function wz(){
$cat=get_the_category();
$cat=$cat[0];
$positions = '<li><a href="'.get_category_link($cat).'">'.$cat->name. '</a></li>>'; 
if(!is_home() ){ 
	echo '<li><a href="'. get_settings('home') .'">'. '首页></a></li>';  
if(is_category()){
	echo $positions;
}
elseif(is_single()){
	echo $positions ;
    echo  the_title();
}
elseif(is_search()){echo $s;}
elseif(is_page()){ 
	the_title();
}elseif(is_404()){echo '404错误页面';}

 } 
}

//前台调用代码  <? wz(); ?>

6、调用当前栏目子菜单（functions添加获取当前分类子分类列表代码）

在需要调用当前顶级分类栏目的子分类处添加如下代码
<?php
if(is_single()||is_category()) { //如果是文件页面或分类页
 if(get_category_children(get_category_root_id(the_category_ID(false)))!= "" ) {//如果有子分类
	echo '<ul class="sidebar-list1">';
	echo wp_list_categories("child_of=".get_category_root_id(the_category_ID(false)). "&depth=0&hide_empty=0&title_li=&orderby=id&order=ASC");
	echo '</ul>';
  }else{ 
	    //如果没有获取顶级分类
	   }
}
?>

7、不同分类栏目调用不同的模板

category.php       //默认分类模板
方法一
category-10.php    //10是分类id categor后跟-id 系统会自动获取与之对应的模板 没有对应模板就找对应模板
方法二
category-别名.php  //后台分类目录名称后有一个别名  分类模板category-别名会自动调用别名相同的模板

四、wordpress内容页模板主题开发（文章页）调用标签

<?php the_title(); ?>              1、标题文章内容页调用标签
<?php the_excerpt(); ?>            2、简介文章调用标签
<? the_post_thumbnail(); ?>        3、缩略图文章页（特色图片）调用标签 方法一
<?php the_author(); ?>             4、作者文章页调用标签
<?php the_time('y-m-d H:i:s') ?>   5、发布时间文章也调用标签
<?php the_content(""); ?>          6、文章内容文章页调用标签
<?php the_permalink();?>           7、当前文章页链接地址
<? get_the_id()  ?>                8、当前文章页ID
<?php foreach((get_the_category()) as $category){echo $category->cat_name;}?>          9、当前文章所属分类栏目名
<?php foreach((get_the_category()) as $category){echo get_category_link($category);}?> 10、当前文章所属分类栏目链接
<? previous_post_link('上一篇: %link'); ?> <? next_post_link('下一篇: %link'); ?>       11、上一篇、下一篇调用
<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>      12、输出评论数
<?php echo get_avatar( get_the_author_email(), 36 ); ?>                                13、调用作者头像
<img src="<?php $full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full'); echo $full_image_url[0]; ?>" alt="" /> 3、特色图片调用标签方法二，只调用图片地址链接

wordpress上一篇下一篇案例
<div class="next">
      <div class="shang"><?php if (get_previous_post()) { previous_post_link('上一条: %link');} else {echo "没有了，已经是最后文章";} ?></div>
      <div class="xia"><?php if (get_next_post()) { next_post_link('下一条: %link');} else {echo "没有了，已经是最新文章";} ?></div>
</div>

2、wordpress文章内容页面包屑调用标签，同上述列表页调用标签相同

3、文章内容single.php页面，根据文章所属不同分类选择不同的文章页模板（注：新创建content.php为文章默认页面，比如新闻栏目别名为new，新闻文章页为 content-new.php 如果没有该页面就自动调用默认content.php为文章页）

3.1、不同分类下的文章调用不同模板

<?
the_post();
//获取当前文章id
$cat=get_the_category(get_the_id());
//获取当前文章分类
$name=$cat[0]->slug;
//加载content-$name.php  指定模板文件不存在 就调用默认文章模板content.php
get_template_part( 'content', $name ) 
?>

五、wordpress独立单页调用标签

1、不同独立页面调用不同模板

page.php       独立页默认模板文件

page-13.php    方法一 13为独立页id id对应不同页面id即可

page-about.php about为独立页别名  方法同上

2、当前单页栏目名与当前单页栏目内容

<?php wp_title('');?>  //当前栏目名
<?php the_content(""); ?> //当前栏目内容

六、wordpress系统公共产数调用标签

<? bloginfo('charset'); ?>                     调用网站编码
<? bloginfo('name'); ?>					       调用网站名称
<? bloginfo('description'); ?>                 调用网站描述
<? bloginfo('stylesheet_url'); ?>              调用网站css路径（绝对路径 href="<?php bloginfo('template_url'); ?>/css/abc.css" ）
<? wp_head(); ?>                               wordpress钩子调用公共头部
<? wp_footer(); ?>                             调用公共底部
<?php get_sidebar(); ?>                        调用默认侧边栏
<?php get_template_part( 'link' ); ?>          调用自定义公共部分link.php
<?php   /*Template Name: about*/  ?>           自定义模板调用， 在自定义模板头部添加
<?php echo get_option('home'); ?>              输出网站首页网址|调用系统产数options表中home字段（其他字段同理）
<? wp_loginout(); ?>                           登陆|退出 ，获取退出链接（未登录显示登陆）陆
<? wp_register (); ?>                          获取注册链接（登陆成功显示管理站点）需在后台开启注册功能

七、wordpress自定义字段调用标签

1、自定义图片字段调用

<?php $image = get_field('pro-img1'); echo $image['url'];?>  //pro-img1为自定义图片的字段别名

案列：<img src="<?php $image = get_field('pro-img1'); echo $image['url'];?>" alt="<?php echo $image['alt']; ?>" />

2、自定义字段调用

<?php the_field('pro-cc'); ?>   //方法一 pro-cc为自定义字段别名
<?php $key="pro-cc"; echo get_post_meta($post->ID, $key, true); ?> //方法二

获取多个相同自定义字段值
<? $ziduan = get_post_meta($post->ID,'ziduan', false); ?>
<? foreach( $ziduan as $ziduan ){  echo  $ziduan  }?>

使用插件增加的字段
<?php echo get_field('seo-keywords'); ?>

八、wordpress搜索页调用标签

1、自定义wordpress模板主题搜索框制作

wordpress自定义全站搜索框
<form class="search-form" method="get" action="<?php bloginfo('home'); ?>"> 
       <input type="text" placeholder="搜索..." name="s" /> 
       <button type="submit"> <i class="iconfont icon-search"></i> </button> 
</form>

wordpress自定义搜索指定栏目分类  （value="" 为指定分类的id）
<form class="search-form" method="get" action="<?php bloginfo('home'); ?>"> 
       <input type="text" placeholder="搜索..." name="s" /> 
        <input type="hidden" name="cat" value="4,11,9,22,20,10,18,14,12,13,1" />
       <button type="submit"> <i class="iconfont icon-search"></i> </button> 
</form>

wordpress自定义不搜索该分类下的文章  （value="" 为指定分类的id）
<form class="search-form" method="get" action="<?php bloginfo('home'); ?>"> 
       <input type="text" placeholder="搜索..." name="s" /> 
       <input type="hidden" name="cat" value="-4,-11,-9,-22" />
       <button type="submit"> <i class="iconfont icon-search"></i> </button> 
</form>

2、wordpress搜索页search.php制作

获取搜索词
<? echo get_search_query()?>
搜索列表页 方法一 直接使用分类列表页循环方式即可
搜索列表页 方法二
       <?
		if(have_posts()){
		while(have_posts() ){
		the_post();
		?>

       <li> 
        <div class="shijian">
         <?php the_time('y-m') ?>
         <span><?php the_time('d') ?></span>
        </div> <a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a> 
		<p><? the_excerpt(); ?></p>
		<p></p>
	  </li> 
	 <? }
	
		}else{
			echo "没有搜索到文章";
		}
	?>

九、wordpresstag调用标签

wordpress tag标签调用，默认方式
<?php wp_tag_cloud(); ?> 
带参数方式调用
<?php wp_tag_cloud(‘number=50&orderby=count&order=DESC&smallest=12&largest=12&unit=px’); ?>

smallest：标签文字最小字号，默认为8pt；
largest：标签文字最大字号，默认为22pt；
unit：标签文字字号的单位，默认为pt，可以为px、em、pt、百分比等；
number：调用的标签数量，默认为45个，设置为“0”则调用所有标签；
format：调用标签的格式，可选“flat”、“list”和“array”，默认为“flat”平铺，“list”为列表方式；
orderby：调用标签的排序，默认为“name”按名称排序，“count”则按关联的文章数量排列；
order：排序方式，默认为“ASC”按正序，“DESC”按倒序，“RAND”按任意顺序。
exclude：排除部分标签，输入标签ID，并以逗号分隔，如“exclude=1,3,5,7”不显示ID为1、3、5、7的标签；
include：包含标签，与exclude用法一样，作用相反，如“include=2,4,6,8”则只显示ID为2、4、6、8的标签。

十、wordpress自定义评论留言表单调用标签

1、创建留言模板comments.php 在该模板中添加以下代码，在需要使用留言的地方添加 <? comments_template() ?> 调用标签即可

<div>
	<h3>评论</h3>
	<div>
	<ul>
		<? if(!comments_open() ){?>                          //判断评论功能是否已关闭，如果关闭提示 评论功能已经关闭
		<li><a href="#respond">评论功能已经关闭</a></li>  
		<? }else if( post_password_required()){?>            //post_password_required()设置输入密码才能查看文章  编辑文章右侧设置密码保护
		<li><a href="#respond">请输入密码查看评论内容</a></li>
		<? }else if(!have_comments()){?>                      // 判断当前文章是否有评论
		<li><a href="#respond">还没有评论说两句吧</a></li>
		<? }else{wp_list_comments(); }?>                      //获取所有评论
	</ul>
	</div>
	<div>
		<? if(get_option('comment_registration') && !is_user_logged_in() ){ ?> // 判断用户是否有登陆 
			<p>
			你必须 <a href="<? echo wp_login_url(get_permalink()); ?>">登陆</a>才可以发布评论
			</p>
		<? }else if(comments_open()){comment_form();} ?>      //输出评论窗口
	</div>

</div>

十一、wordpress自定义会员登陆注册调用标签

1、wordpress会员中心链接地址调用标签

<li><? wp_loginout(); ?></li> 如果是登陆状态 显示注销按钮 如果未登陆显示 登陆按钮
<li><? wp_register(); ?></li> 如果是否登陆状态 显示管理站点 否则不显示

<a href="<?php echo site_url('wp-login.php', 'login') ?>">登陆</a>                      登陆链接调用标签
<a href="<?php echo site_url('wp-login.php?action=register', 'login') ?>">注册会员</a>   注册会员链接调用标签
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">忘记密码</a>  忘记密码链接调用标签
<a href="<?php bloginfo('siteurl');?>/wp-admin/profile.php">[个人中心]</a>               个人中心链接调用标签
<?php global $current_user;get_currentuserinfo();echo get_avatar( $current_user->user_email, 32); ?>  获取当前用户头像
<?php global $user_identity, $user_level; echo $user_level;  ?>                                      获取当前用户名

2、wordpress判断是否为登陆状态，如果不是显示登陆和注册按钮；如果为登陆状态显示个人像，和退出登陆按钮

<?php if(!is_user_logged_in()){ ?>
    <a href="<?php echo site_url('wp-login.php', 'login') ?>">登陆</a>|
	<a href="<?php echo site_url('wp-login.php?action=register', 'login') ?>">注册会员</a>
  <?}else{?>
    <?php global $current_user;get_currentuserinfo();echo get_avatar( $current_user->user_email, 32); ?>  //当前用户头像  32为设置头像尺寸为32
    <a href="<?php bloginfo('siteurl');?>/wp-admin/profile.php"> <?php global $user_identity, $user_level; echo $user_level;  ?> [个人中心 ] </a>
	<a href="<?php echo wp_logout_url( get_permalink() ); ?>">[退出]</a>
  <?}?>

十二、wordpress自定义侧边栏制作

1、wordpress分类列表页侧边栏

<?php if ( is_single() ) :
global $post;
$categories = get_the_category();
foreach ($categories as $category) :
    ?>
    <li class="widget widget_recent_entries" id="<?php $category -> term_id; ?>-posts">
        <h2 class="widgettitle"><?php echo $category -> name; ?></h2>
        <ul>
        <?php
        $posts = get_posts('numberposts=5&category='. $category->term_id);
        foreach($posts as $post) :
        ?>
            <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endforeach; ?>
        </ul>
    </li>
<?php
endforeach; endif ;
 ?>

2、wordpress侧边栏，当前文章页所在分类栏目下的文章列表

<?php if ( is_single() ) :
global $post;
$categories = get_the_category();
foreach ($categories as $category) :
    ?>
    <li class="widget widget_recent_entries" id="<?php $category -> term_id; ?>-posts">
        <h2 class="widgettitle"><?php echo $category -> name; ?></h2>  //当前文章所在栏目
        <ul>//下方为循环输出 所在栏目分类下的文章列表
        <?php
        $posts = get_posts('numberposts=5&category='. $category->term_id); //5为循环条数
        foreach($posts as $post) :
        ?>
            <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endforeach; ?>
        </ul>
    </li>
<?php
endforeach; endif ;
 ?>

wordpress模板开发教程_wp_02