零基础建站培训介绍

当前位置：

wordpress主题制作详细步骤

WP常用的调用标签：
获取网站名字：



<?php bloginfo('name'); ?>

获取首页路径：



<?php echo get_option('home'); ?>

获取主题存放路径：



<?php bloginfo('template_directory'); ?>

调用当前主题：



<?php the_permalink() ?>

Style.css路径调用：



<?php bloginfo( 'stylesheet_url' ); ?>

1、WP模板分析

1、首页模板-----index.php
2、产品页面模板-----category-id.php
3、文章列表页模板------archive.php
4、single内容页模板-------single.php
5、page页面模板-------page.php

2、静态页面转化成WP模板和头部制作

1、WP模板必需的二个文件：style.css index.php

1-1、style.css添加主题版权信息：



/*

 Theme Name: 睿酷学苑

 Theme URI: https://www.xuewangzhan.net/baike

 Description:睿酷学苑 公司企业主题

 Author: 睿酷学苑

 Author URI: https://www.xuewangzhan.net/baike

 Version: 1.0

 Tags: 企业主题

 */

如果后台乱码，要修改，css 的页面属性，如果网页出现乱码，要修改index.php的页面属性。修改——页面属性——编码。

后台缩略图
在主题文件来下面放一个缩略图图片，缩略图的名字必须是：screenshot.png或者screenshot.jpg

1-2、制作index.php

1-2-1、修改css文件路径
Style.css路径调用：



<?php bloginfo( 'stylesheet_url' ); ?>

1-2-2、修改index.php中的图片的所有相对路径为WP从不路径. 获取主题存放路径：



<?php bloginfo('template_directory'); ?>

1-2-3、分离头部，改用WP调用，调用顶部标签：



<?php get_header();?>

2-1、元信息调用

网站标题：



<title><?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?> </title>

HOOK函数：



<?php wp_head(); ?>

2-2、导航菜单制作

菜单选项的生成：
在函数文件functions.php文件中添加以下代码；



//添加多个菜单功能

 if ( function_exists('register_nav_menus')) {register_nav_menus(array('topmenu' => ' 顶部菜单'));}

 if ( function_exists('register_nav_menus')) {register_nav_menus(array('footmenu' =>'底部菜单'));}

顶部菜单的调用：



<?php wp_nav_menu( array( 'theme_location' =>'topmenu','container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>

顶部空白如何处理

functions.php里面添加下面代码。



add_filter( 'show_admin_bar', '__return_false' );

3、侧边栏和底部制作

1、分离侧边栏
通过WP标签调用回来，调用侧边栏标签：



<?php get_sidebar();?>

2、循环代码：调用特定分类下的文章：直接复制到要显示分类的地方。cat=1为id=1下面的文章，showposts=5为显示5片文章。



<?php if (have_posts()) : ?>

 <?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=5'); ?>

 <?php while (have_posts()) : the_post(); ?>



<?php endwhile;?>

<?php endif; wp_reset_query(); ?>

3、缩略图调用
3-1、将以下代码放入functions.php,用于显示缩略图



//缩略图

 function get_first_image() {

 global $post;

 $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)){ //Defines a default image

 $first_img = bloginfo('template_url') . "/images/default.jpg";

 };

 return $first_img;

 }

3-2、在images文件夹下，设置一个默认的缩略图：default.jpg

3-3、缩略图的调用



<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

4、文章标题：（可以控制字数）



<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

标题：



<?php the_title(); ?>

文章简介：



<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>

5、底部制作

分离底部并通过WP标签调用回来，调用底部标签：



<?php get_footer();?>

底部菜单的调用：



<?php wp_nav_menu( array( 'theme_location' =>'footmenu','container' => '','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>

版权信息：



Copyright © 2012<a href=" <?php echo get_option('home'); ?>"> <?php bloginfo('name'); ?></a>

4、网站首页制作

4-1、幻灯片替换
1、将以下代码放入functions.php,用于显示缩略图



//缩略图

function get_first_image() {

global $post;

$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)){ //Defines a default image

$first_img = bloginfo('template_url') . "/images/default.jpg";

};

return $first_img;

}

2、在要显示换灯片的位置放入以下的代码



<!--图片轮播区开始-->

<div id="com_box" class="com_box ftl">



<?php

$sticky = get_option('sticky_posts');

rsort( $sticky );//对数组逆向排序，即大ID在前

$sticky = array_slice( $sticky, 0, 5);//输出置顶文章数，请修改5，0不要动，如果需要全部置顶文章输出，可以把这句注释掉

query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );

if (have_posts()) :while (have_posts()) : the_post();

?>



<div class="img dpn"><a href="<?php the_permalink(); ?>" target="_blank" title="<?php the_title(); ?>"><img class="img_directly_load" src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" /></a></div>

<?php endwhile; endif; ?>



<ul id="com_txt" class="title">

<?php

$sticky = get_option('sticky_posts');

rsort( $sticky );//对数组逆向排序，即大ID在前

$sticky = array_slice( $sticky, 0, 5);//输出置顶文章数，请修改5，0不要动，如果需要全部置顶文章输出，可以把这句注释掉

query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );

if (have_posts()) :while (have_posts()) : the_post();

?>

<li></li>

<?php endwhile; endif; ?>

</ul>



</div>

<script type="text/javascript">



function com_change()

{

var self_now = 0;

var self_speed = 5000;

var self_auto_change = null;

var self_max = $('#com_box div.img').size();

function self_change(i)

{

$('#com_box div.img').hide();

$('#com_txt_bg li').removeClass('on');

$('#com_txt li').removeClass('on');

$('#com_box div.img:eq(' + i + ')').show();

$('#com_txt_bg li:eq(' + i + ')').addClass('on');

$('#com_txt li:eq(' + i + ')').addClass('on');

}

function self_interval()

{

return setInterval(function(){

self_now++;

if (self_now >= self_max)

{

self_now = 0;

}

self_change(self_now);

}, self_speed);

}

$('#com_box div:first').show();

$('#com_txt_bg li:first').addClass('on');

$('#com_txt li:first').addClass('on');

$('#com_txt li').each(function(i)

{

$(this).mouseover(function(){

self_now = i;

clearInterval(self_auto_change);

self_change(i);

}).mouseout(function(){

self_auto_change = self_interval();

});

});

$(function(){

$('#com_loding').hide();

self_auto_change = self_interval();

});

}

com_change();

</script>

<!--图片轮播区结束-->

3、在CSS中放以下的CSS样式：【通过修改width和height的值可以修改换灯片的尺寸】



/*换灯片*/

.com_box {width:627px;height:279px;overflow:hidden;position:relative;}

.com_box img{width:100%;height:100%;}

.com_box ul.title li.on {background:#3598db;}

.com_box ul.title {position:absolute;bottom:10px;right:5px;z-index:9;}

.com_box ul.title li {counter-increment:listxh;display:inline-block;border-radius:12px;background: #000;}

.com_box ul.title li:before{content:counter(listxh);display:inline-block;text-align:center;color:#fff;width:24px;height:24px;line-height:24px;font-weight:600;font-size:11px;font-family: "微软雅黑";}

4、下载JS文件： jquery.js (243.32 KB, 下载次数: 1009) 

将下载的JS文件放到主题的images文件夹里，在header.php文件的</head>上面放上以下的js代码：



<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/jquery.js"></script>

5、在网站后台设置置顶文章，即会被调用出来。

4-2、图片+文章标题+文章简介 调用

第一步：删其余相同的div，留下一个div,在标题和图片的上下，调用循环代码：（通过修改('cat=3' 来控制显示哪个分类下的文章）



<?php if (have_posts()) : ?>

 <?php query_posts('cat=3' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>

 <?php while (have_posts()) : the_post(); ?>



<?php endwhile;?>

 <?php endif; wp_reset_query(); ?>

如果调用所有最新文章的图片：用以下循环：



<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile;?>

<?php endif; ?>

图片调用：(调用文章中的第一张图片)



<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

标题调用：



<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

文章简介调用：



<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?>

5、产品展示页面制作(category-id.php也是一个分类),调用不同的页面是page-id.php

1、制作category-id.php页面,就是产品展示页面。用已有的产品展示页面做。定制某个分类的模板，id为数字
2、调用header、sidebar、footer文件

调用头部标签：



<?php get_header();?>

调用底部标签：



<?php get_footer();?>

3、分离列表页侧边栏 取名为sidebar2.php

3-1、调用侧边栏标签：



<?php include( TEMPLATEPATH . '/sidebar2.php' ); ?>

3-2、热门文章调用



<?php

$post_num = 10; // 设置调用条数

$args = array(

'post_password' => '',

'post_status' => 'publish', // 只选公开的文章.

'post__not_in' => array($post->ID),//排除当前文章

'caller_get_posts' => 1, // 排除置頂文章.

'orderby' => 'comment_count', // 依評論數排序.

'posts_per_page' => $post_num

);

$query_posts = new WP_Query();

$query_posts->query($args);

while( $query_posts->have_posts() ) { $query_posts->the_post(); ?>

<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>

<?php } wp_reset_query();?>

3-3：调用最新发布的10篇文章



<?php $rand_posts = get_posts('numberposts=10&orderby=date');foreach($rand_posts as $post) : ?>

<li><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></li>

<?php endforeach;?>

4、图片方式循环调用
调用所有最新文章的图片：用以下循环：



<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile;?>

<?php endif; ?>

标题调用：



<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

图片调用：



<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

页面名字调用：



<?php wp_title('');?>

5、分页导航
第一步：将以下代码放在functions.php中。



//分页

function kriesi_pagination($query_string){

global $posts_per_page, $paged;

$my_query = new WP_Query($query_string ."&posts_per_page=-1");

$total_posts = $my_query->post_count;

if(empty($paged))$paged = 1;

$prev = $paged - 1;

$next = $paged + 1;

$range = 2; // only edit this if you want to show more page-links

$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);

if(1 != $pages){

echo "<div class='pagination'>";

echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."' rel='external nofollow'>特别前</a>":"";

echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."' rel='external nofollow'>上一页</a>":"";

for ($i=1; $i <= $pages; $i++){

if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){

echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' rel='external nofollow'>".$i."</a>";

}

}

echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."' rel='external nofollow'>下一页</a>" :"";

echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."' rel='external nofollow'>最后</a>":"";

echo "</div>\n";

}

}

第二步：在分页代码显示的地方放上以下调用代码。



<?php kriesi_pagination($query_string); ?>

第三步：将以下CSS样式放到style.css中。



.pagination{height:40px;text-align:center;margin-top: 20px;}

.pagination .current, .pagination a{padding:10px 15px;border:1px solid #568abe;border-radius: 3px;margin-right:10px;font-size:14px;text-decoration:none;}

.pagination a:hover,.pagination .current{color:#568abe;background:#FFF;}

.pagination a{background:#568abe;color:#FFF;}

6、面包屑导航制作：如首页》分类》文章名
第一步：在主题文件夹中新建functions.php并且在functions.php里面添加下面的函数



//面包屑

function wheatv_breadcrumbs() {

$delimiter = ' > ';

$name = '首页';



if ( !is_home() ||!is_front_page() || is_paged() ) {



global $post;

$home = home_url();

echo '<a href="' . $home . '" class="gray">' . $name . '</a> ' . $delimiter . ' ';



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) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));

echo single_cat_title();



} elseif ( is_day() ) {

echo '<a href="' . get_year_link(get_the_time('Y')) . '" class="gray">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';

echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '" class="gray">' . get_the_time('F') . '</a> ' . $delimiter . ' ';

echo get_the_time('d');



} elseif ( is_month() ) {

echo '<a href="' . get_year_link(get_the_time('Y')) . '" class="gray">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';

echo get_the_time('F');



} elseif ( is_year() ) {

echo get_the_time('Y');



} elseif ( is_single() ) {

$cat = get_the_category(); $cat = $cat[0];

echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');

echo the_title();



} elseif ( is_page()||!$post->post_parent ) {

the_title();



} elseif ( is_page()||$post->post_parent ) {

$parent_id = $post->post_parent;

$breadcrumbs = array();

while ($parent_id) {

$page = get_page($parent_id);

$breadcrumbs[] = '<a href="http://www.frontopen.com/wp-admin/ . get_permalink($page->ID) . " class="gray">' . get_the_title($page->ID) . '</a>';

$parent_id = $page->post_parent;

}

$breadcrumbs = array_reverse($breadcrumbs);

foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';

the_title();



} elseif ( is_search() ) {

echo get_search_query();



} elseif ( is_tag() ) {

echo single_tag_title();



} elseif ( is_author() ) {

global $author;

$userdata = get_userdata($author);

echo '由'.$userdata->display_name.'发表';



} elseif ( is_404() ) {

echo '404 错误';

}



if ( get_query_var('paged') ) {

if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';

echo '第' . ' ' . get_query_var('paged').' 页';

if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';

}

}else{

echo $name;

}

}

第二步：将以下标签放在显示面包屑导航的位置。



<?php wheatv_breadcrumbs(); ?>

6、文章列表页面制作
1、制作archive.php页面
2、调用header、sidebar、footer文件

调用头部标签：



<?php get_header();?>

调用底部标签：



<?php get_footer();?>

调用侧边栏标签：



<?php include( TEMPLATEPATH . '/sidebar2.php' ); ?>

3、循环调用文章



<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile; ?>

<?php endif; ?>

标题调用：



<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>

日期调用：



<?php the_date_xml()?>

面包屑导航调用：



<?php wheatv_breadcrumbs(); ?>

4、分页导航使用



<?php kriesi_pagination($query_string); ?>

7、文章内容页面制作

1、制作single.php
2、调用header、sidebar、footer文件

调用头部标签：



<?php get_header();?>

调用底部标签：



<?php get_footer();?>

调用侧边栏标签：



<?php get_sidebar();?>

3、循环调用文章(一定不要忘了放循环代码）



<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>



<?php endwhile; ?>

<?php endif; ?>

标题：



<?php the_title(); ?>

内容：



<?php the_content(""); ?>

4、元信息调用
日期调用：



<?php the_date_xml()?>

分类目录：



<?php the_category(', ') ?>

文章标签：



<?php the_tags('标签： ', ', ', ''); ?>

浏览数标签：（用到插件wp-postviews）下载地址：【浏览量插件】
查看次数，调用代码：



<?php the_views();?>

上一片，下一片代码直接粘贴到相应显示的位置就可以了。
上一篇调用：



<?php previous_post_link('&laquo; %link'); ?>

下一篇调用：



<?php next_post_link('%link &raquo;'); ?>

8、page页面和搜索功能制作

1、制作page页面，复制single.php,重命名为page.php，去除分类链接

2、制作搜索功能
2-1、在搜索框位置放这个代码：



<?php include (TEMPLATEPATH . '/searchform.php'); ?>

在主题文件夹里新建一个searchform.php，放入以下代码：



<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

<input class="searchInput" type="text" value="输入关键字" name="s" id="s"/>

<input type="submit" value="搜 索" onClick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" alt="Search" />

</form>



<script type="text/javascript">

$(document).ready(function(){

// 当鼠标聚焦在搜索框

$('#s').focus(

function() {

if($(this).val() == '输入关键字') {

$(this).val('').css({color:"#454545"});

}

}

// 当鼠标在搜索框失去焦点

).blur(

function(){

if($(this).val() == '') {

$(this).val('输入关键字').css({color:"#333333"});

}

}

);

});

</script>

2-2、直接复制分类目录页面制作search.php，才能实现搜索功能。直接复制分类目录页面
2-3、调试搜索功能和界面

上一课: 下一课:

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 黑客是怎么修改WordPress核心文件,劫持网站流量 图文教程 (16981 次浏览)
    大家都知道如果黑客入侵我们的网站后，他们是可以肆意的在上面搭载钓鱼页面，传播恶意软件，盗取敏感信息等，这特别不利于我们网站。垃圾内容和黑
  • WordPress网站引入百度MIP视频教程 视频教程附件下载 (18960 次浏览)
    什么是百度MIP百度MIP （Baidu Mobile Instant Pages - 百度移动网页加速器）, 是一套应用于移动网页的开放性技术标准。通过提供MIP-HTML规范、MIP-
  • WordPress数据库导入错误解决方法 图文教程 (18521 次浏览)
    如果你的空间不理想或是需要升级服务器，这个时候很可能需要进行网站数据搬家，而数据搬家本身是一件很简单的事情。并且学建站网页专门有这样的课程教
  • zblog2.2主题模板添加修改面包屑导航 (16475 次浏览)
    在使用zblog2.2的过程中，发现zblog2.2的很多主题模板都没有面包屑导航，如何给zblog2.2的主题模板添加面包屑难住了很多初学者。本文就分享给zblo
  • 如何破解被加密的wordpress主题 图文教程 (19462 次浏览)
    为了维护自己的版权好多wordpress主题都被加密了，一般被加密的主题文件是footer.php，方式为base64加密。解密被加密的wordpress主题文件并不是为了篡
  • wordpress主题制作详细步骤 图文教程 (16007 次浏览)
    WP常用的调用标签：获取网站名字：[cce_php]<?php bloginfo('name'); ?>[/cce_php]获取首页路径：[cce_php]<?php echo get_option('home
  • 网站建设需要多少费用，网站制作价格报价 图文教程 (17086 次浏览)
    学做网站论坛承接全国各地网站制作。 学做网站论坛官网承接各类个人，企业，公司，集团，政府用户网站制作，价格公道，品质保证。
  • 雷擎润滑油官网制作案例 图文教程 (12909 次浏览)
    雷擎石油能源有限公司是一家从事研发、生产汽车用润滑油，汽车养护品的细致公司。公司与美国芝加哥石油集团一脉相承，秉承严谨的风格，只为客户提供技
  • 翰典电子公司成功签约合肥睿酷网站制作 图文教程 (12997 次浏览)
    热列祝贺翰典电子公司成功签约合肥睿酷网站制作，由睿酷网络为翰典电子公司制作企业官网，为企业发展添加互联网动力。翰典电子公司是一家细致生产
  • 帝国CMS网站搬家迁移详细图文教程 图文教程 (110855 次浏览)
    帝国cms网站在本地做好了，或者网站想跟换服务器空间 ，网站该怎么完美的迁移？下面就分享下帝国CMS网站网站搬家迁移教程。 登录帝国后台：登陆后
  • WordPress自动采集插件WP-AutoPost 设置详细教程 图文教程 (115249 次浏览)
    WP-AutoPost是目前特别好用的WordPress自动采集发布插件，最大的特点是可以采集来自于任意网站的内容并自动发布到你的WordPress站点。不像其他大
  • 网站制作的步骤详解 一步步教你如何做网站 图文教程 (13126 次浏览)
    一直以来都特别想要告诉各位想要从事网站维护或者是的朋友们，其实这种网站网页制作的方法有很多，但是基本上都可以分成两种，一种就是自己开发一个网
  • 怎样做网站？做网站需要哪些步骤？ (13247 次浏览)
    做网站步骤需要以下三个方面：一、域名。也就是网址二、服务器。个人站点用空间就可以了三、网站程序。可以用开源程序，也可以自己开发。一、首
  • PS切片操作步骤 附件下载 (16798 次浏览)
    1、什么是PS切片切图，是一种网页制作技术，他是将美工效果图转换为多个小图片，这样放在放在网页上2、为什么要切片3、切片的工具------P

教程目录

网站标签

做网站公司 网站培训 网站建设 网站制作教程 创建网站步骤 北京网站建设培训 广州网站制作培训 合肥建网站培训 微信小程序教程 搭建个人网站 建站培训 网站制作学习 做网站需要学习什么 织梦cms建站教程 PS教程 快速建站教程 企业网站制作教程 论坛制作视频教程 电子商城制作教程 外贸网站制作教程 中英文多语网站制作教程 HTML5 视频教程 CSS3视频教程 网站前端开发教程 网站后台开发教程 wordpress模板主题开发 仿站教程 织梦建站视频教程 如何做网站 怎么创建个人网站 网站建设公司 代建网站