wordpress自定义模板主题开发仿站教程-wordpress调用标签教程大全
2022-07-29 10:13:20
118
{{single.collect_count}}

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

wordpress模板主题开发仿站教程

一、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><?phpwp_trim_words( get_the_title(), 10 );?></h3> //标题方法二 可限制字数<p><? the_excerpt(); ?></p> //简介方法一<p><?phpwp_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;//输出当前分类idecho $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 ;echothe_title();}elseif(is_search()){echo $s;}elseif(is_page()){ the_title();}elseif(is_404()){echo '404错误页面';} } }//前台调用代码<? wz(); ?>


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

在需要调用当前顶级分类栏目的子分类处添加如下代码<?phpif(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.phpget_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><?phpendforeach; 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><?phpendforeach; endif ; ?>

wordpress自定义模板主题开发仿站教程

wordpress自定义模板主题开发仿站教程就先总结到这里,更多wordpress教程或者有什么问题可以关注我,或留言。

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}