WordPressCMS主题制作流程和代码

2025-01-17 杨亦涛浏览量: 28

如何把静态页面制作成主题，多个CSS文件如何选择
制作顶部header.php和底部footer.php
如何制作幻灯片和tab式新闻栏目
如何在首页调用出各个分类下的文章以及图片栏目
制作首页的sidebar和添加热门标签栏目
制作分类页面category.php，以及分类页面sidebar
制作分页和面包屑导航。
制作内容页面single.php，添加摘要，上下一篇功能，添加相关文章和评论。
制作内容页面sidebar
添加搜索框功能search.php和文章浏览量功能。

一、如何把静态页面制作成主题，多个CSS文件如何选择

1、如何把静态页面制作成主题

2、有多个CSS文件的时候，用哪个文件作为style.css

3、如果头部有空行，用utf-8 无bom模式保存

制作一个最简单的主题，只需要两个文件，index.php和style.css

第一步，准备静态页面

第二步，制作index.php和style.css

第三步，给style.css添加版权信息

第四步：把主题上传到空间中wordpress安装路径，wp-content/themes/下面，这里主题的文件夹名字必须是英文

第五步，在wordpress后台启用主题

先给style.css添加版权信息

Theme Name: WP百科网CMS主题

Theme URI: http://www.wpbaike.com

Description: 红色大气的CMS主题

Author: xixi

Author URI: http://www.wpbaike.com

Version: 1.0

Tags: red, cms, wpbaike

Style.css路径调用：<?php bloginfo( ‘stylesheet_url’ ); ?>

主题文件夹路径：<?php bloginfo(‘template_directory’); ?>

二、制作顶部header.php和底部footer.php

需要用到的调用标签：

<?php get_header();?>

<?php get_footer();?>

<?php get_sidebar();?>

获取主页路径：<?php echo get_option(‘home’); ?>

Header.php中用到的标签：

<?php wp_head(); ?>

设为首页、收藏本站：

// Bookmark

function bookmark(title, url) {

if (document.all)

window.external.AddFavorite(url, title);

else if (window.sidebar)

window.sidebar.addPanel(title, url, “”)

}

</script>

<div style=”float:right”> <a href=”#” onClick=”this.style.behavior=’url(#default#homepage)’;this.setHomePage(‘<?php bloginfo(‘url’); ?>’);” class=”homepage”>设为首页</a> | <a href=”#” onClick=”javascript:bookmark(‘<?php bloginfo(‘name’); ?>’,'<?php bloginfo(‘url’); ?>’);” target=”_blank” class=”favicon”>加为收藏</a></div>

自定义css的导航调用方法：

<?php

\(args=array(

‘orderby’ => ‘id’,

‘order’ => ‘ASC’

);

\)categories=get_categories(\(args);

foreach(\)categories as \(category) {

echo ‘<li class=”thisclass”><a href=”‘ . get_category_link( \)category->term_id ) . ‘” title=”‘ . sprintf( __( “View all posts in %s” ), $category->name ) . ‘” ‘ . ‘>’ . $category->name.'</a></li>’;

}

日期向右靠齐：

如何添加全站链接：

三、如何制作幻灯片和tab式新闻栏目

调用幻灯片js代码：

时间调用：<?php the_time(‘m-d’) ?>

四、如何在首页调用出各个分类下的文章以及图片栏目

精彩图片需要用到插件：

wp-thumbnails

五、制作首页的sidebar和添加热门标签栏目

首页sidebar.php

热评文章的div：

<a href=”../wzjc/519.htm” title=”4种不适合做网络兼职赚钱的人分析” target=”_blank”>4种不适合做网络兼职赚钱的人分析</a> <br />

<a href=”../wzzt/520.htm” title=”网络兼职赚钱，思路决定出路” target=”_blank”>网络兼职赚钱，思路决定出路</a> <br />

<a href=”../wszq/518.htm” title=”豆豆对话利为汇陈辉民：seo现状和前景分析” target=”_blank”>豆豆对话利为汇陈辉民：seo现状和…</a> <br />

<a href=”../wzjc/517.htm” title=”4种不适合做网络兼职赚钱的人分析” target=”_blank”>4种不适合做网络兼职赚钱的人分析</a> <br />

<a href=”../wzjc/516.htm” title=”网络兼职赚钱，从青蛙比赛中发现秘密” target=”_blank”>网络兼职赚钱，从青蛙比赛中发现秘密</a> <br />

<a href=”../wzjc/515.htm” title=”懂懂谈对于互联网创业的看法30条（7）” target=”_blank”>懂懂谈对于互联网创业的看法30条（…</a> <br />

<a href=”../wzjc/514.htm” title=”懂懂谈对于互联网创业的看法30条（6）” target=”_blank”>懂懂谈对于互联网创业的看法30条（…</a> <br />

<a href=”513.htm” title=”懂懂和陈辉民的第一次亲密接触” target=”_blank”>懂懂和陈辉民的第一次亲密接触</a> <br />

<a href=”../wzjc/512.htm” title=”懂懂谈对于互联网创业的看法30条（5）” target=”_blank”>懂懂谈对于互联网创业的看法30条（…</a> <br />

<a href=”../wzjc/511.htm” title=”懂懂谈对于互联网创业的看法30条（4）” target=”_blank”>懂懂谈对于互联网创业的看法30条（…</a> <br />

</div>

热评文章：

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

<a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>

<?php the_title(); ?></a><br/>

<?php } wp_reset_query();?>

六、制作分类页面category.php，以及分类页面sidebar

时间调用：

<?php the_time(‘Y-m-d h:m:s’) ?>

页面的标题：<?php wp_title(”);?>

分类列表调用：

<?php if (\(posts_perpage) { ?>

<?php \)postsperpage = \(posts_perpage; ?>

<?php } else { ?>

<?php \)postsperpage = 10; ?>

<?php } ?>

<?php

$categoryID=$cat;

$wp_query = new WP_Query(‘cat=’ . $categoryID. ‘orderby=date&order=desc&posts_per_page=’.$postsperpage.’&paged=’.$paged); ?>

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

<ul>

<li><span><?php the_date_xml(); ?></span><span></span><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>

</ul>

<?php endwhile; ?>

调用其他sidebar：

<?php include( TEMPLATEPATH . ‘/sidebar3.php’ ); ?>

七、制作分页和面包屑导航

在functions.php中添加：

分页代码：

//分页

function 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 = 6; // 修改数字,可以显示更多的分页链接

$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).”‘>最前</a>”:””;

echo ($paged > 1 && $showitems < $pages)? “<a href='”.get_pagenum_link($prev).”‘>上一页</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’ >”.$i.”</a>”;

}

echo ($paged < $pages && $showitems < $pages) ? “<a href='”.get_pagenum_link(\(next).”‘>下一页</a>” :””;

echo (\)paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? “<a href='”.get_pagenum_link(\(pages).”‘>最后</a>”:””;

echo “</div>\n”;

}

在sytle.css下面添加

/** 翻页 **/

.navigation { float:right; width:700px; margin: 5px 0 5px 0; text-align:right; }

.navigation_b { float:right; width:700px; text-align:right; }

.pagination { line-height:25px; }

.pagination span, .pagination a { font-size:12px; margin: 2px 6px 2px 0; background:#fff; border:1px solid #ccc; color:#787878; padding:2px 5px 2px 5px; }

.pagination a:hover { background: #0196E3; border:1px solid #fff; color:#fff; }

.pagination .current { background: #0196E3; color:#fff; font-size:12px; padding:2px 5px 2px 5px; }

使用方法：

<?php pagination(\)query_string); ?>

标题调用：

<?php wp_title(”);?>

面包屑导航调用：

<?php wheatv_breadcrumbs(); ?>

在functions.php中添加：

function wheatv_breadcrumbs() {

\(delimiter = ‘ > ‘;

\)name = ‘首页‘; //

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

global \(post;

\)home = get_bloginfo(‘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 “正文“;

} 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.wheatv.com/site/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;

}

八、制作内容页面single.php，添加摘要，上下一篇功能，添加相关文章和评论

文章标题：

<?php the_title_attribute(); ?>

作者:<?php the_author_posts_link(); ?>;

发布日期：<?php the_date_xml(); ?>;

（用到插件wp-postviews）查看次数：<?php the_views();?>

摘要代码：

<?php echo mb_strimwidth(strip_tags(apply_filters(‘the_content’, \)post->post_content)), 0, 200,”……”); ?>

内容代码：

<?php the_content(“Read More…”); ?>

循环代码：

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

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

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

【上一篇】: <?php previous_post_link(‘%link’); ?>

【下一篇】: <?php next_post_link(‘%link’); ?>

<?php

$cats = wp_get_post_categories($post->ID);

if (\(cats) {

\)cat = get_category( \(cats[0] );

\)first_cat = \(cat->cat_ID;

\)args = array(

‘category__in’ => array(\(first_cat),

‘post__not_in’ => array(\)post->ID),

‘showposts’ => 5,

‘caller_get_posts’ => 1

);

query_posts(\(args);

if (have_posts()) :

while (have_posts()) : the_post(); update_post_caches(\)posts); ?>

<li>* <a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>

<?php endwhile; else : ?>

<li>* 暂无相关文章</li>

<?php endif; wp_reset_query(); } ?>

评论调用：

<?php comments_template(); ?>

九、制作内容页面sidebar

热门排行：

<?php

\(post_num = 9; // 设置调用条数

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

<a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>

<?php the_title(); ?></a><br/>

<?php } wp_reset_query();?>

随机推荐：

<?php \)rand_posts = get_posts(‘numberposts=9&orderby=rand’);foreach($rand_posts as $post) : ?>

<?php endforeach;?>

十、添加搜索框功能search.php和文章浏览量功能

添加search.php

导航标题：

<?php wp_title(”);?><?php /* Search Count */ \)allsearch = &new WP_Query(“s=$s&showposts=-1″); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(”); _e(‘<span class=”search-terms”>’); _e(‘</span>’); _e(‘ — ‘); echo $count . ‘ ‘; _e(‘条相关结果‘); wp_reset_query(); ?>

在header.php中添加搜索代码：

<form id=”search” action=”<?php bloginfo(‘url’); ?>/” target=”_blank”>

<input type=”image” width=”60″ height=”22″ class=”searchaction” onClick=”if(document.forms[‘search’].searchinput.value==’- Search -‘)document.forms[‘search’].searchinput.value=”;” alt=”Search” src=”<?php bloginfo(‘template_directory’); ?>/img/sbtn.gif” border=”0″ />

</form>

利为汇wordpress企业站主题制作视频教程

1、企业静态页面制作成wordpress主题

企业主题和博客主题的区别

1、首页显示内容不一样

2、产品为主，图片丰富，更加的细分

3、在制作上和博客主题的区别，category.php

制作一个最简单的主题，只需要两个文件，index.php和style.css

第一步，准备静态页面

第二步，制作index.php和style.css

第三步，给style.css添加版权信息

第四步：把主题上传到空间中wordpress安装路径，wp-content/themes/下面，这里主题的文件夹名字必须是英文

第五步，在wordpress后台启用主题

先给style.css添加版权信息

Theme Name: wordpress theme 01

Theme URI: http://wordpress.liweihui.com/

Description: a company theme

Author: xixi

Author URI: http://wordpress.liweihui.com/

Version: 1.0

Tags: white, company, liweihui, blue,products,news

Style.css路径调用：<?php bloginfo( ‘stylesheet_url’ ); ?>

主题所在路径调用：<?php bloginfo(‘stylesheet_directory’); ?>

第六步，把index.php拆分成header.php，footer.php和sidebar.phhp

需要用到的调用标签：

<?php get_header();?>

<?php get_footer();?>

<?php get_sidebar();?>

2、制作header.php，footer.php和sidebar

1、Header.php和footer.php用到代码：

<?php wp_head(); ?>

Footer.php版权信息：

获取博客名字：<?php bloginfo(‘name’); ?>

获取博客描述：<?php bloginfo(‘description’); ?>

获取主页路径：<?php echo get_option(‘home’); ?>

页面调用：

<?php wp_list_pages(‘sort_column=menu_order&title_li=&depth=2&include=’); ?>

分类目录调用:

<?php wp_list_categories(‘title_li=0&orderby=name&show_count=0&depth=2’); ?>

2、sidebar.php用到代码：

产品分类调用代码：修改child_of=

<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=1&hide_empty=0&child_of=10’); ?>

新闻分类代码调用：修改child_of=

<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchical=1&hide_empty=0&child_of=10’); ?>

部分页面导航调用：修改include=中的id为你想要显示的id

<?php wp_list_pages(‘sort_column=menu_order&title_li=&depth=2&include=’); ?>

3、首页图片调用和文章列表显示和友情链接

这里需要用到缩略图插件wp-thumbnails

1、首页图片展示代码：

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

<?php query_posts(‘cat=3’ . \(mcatID. ‘&caller_get_posts=1&showposts=6’); ?>

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

<li>

<?php if(function_exists(‘wp_thumbnails_for_homepage’)) { wp_thumbnails_for_homepage(); } ?>

</li>

<?php endwhile;?>

<?php else : ?>

<?php endif; ?>

2、调用一个类别下面的文章：

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

<?php query_posts(‘cat=1&showposts=20’); ?>

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

<ul>

<li><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></li>

</ul>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

首页友情链接：

<?php wp_list_bookmarks(‘title_li=&categorize=0&orderby=rand&limit=24’); ?>

4、新闻列表页面的制作和分页

新建页面category-*.php，*号为wordpress后台建立的相应的分类id号

1、显示列表：

<?php if (\)posts_perpage) { ?>

<?php $postsperpage = $posts_perpage; ?>

<?php } else { ?>

<?php \(postsperpage = 10; ?>

<?php } ?>

<?php

\)categoryID=\(cat;

\)wp_query = new WP_Query(‘cat=’ . $categoryID. ‘orderby=date&order=desc&posts_per_page=’.$postsperpage.’&paged=’.\(paged); ?>

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

<ul>

</ul>

<?php endwhile; ?>

2、显示分页

调用方式： <?php pagenav(\)query_string); ?>

在functions.php中添加：

//pagenav

function pagenav(\(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 = 4; // 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).”‘>最前</a>”:””;

echo ($paged > 1 && $showitems < $pages)? “<a href='”.get_pagenum_link($prev).”‘>上一页</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’ >”.$i.”</a>”;

}

echo ($paged < $pages && $showitems < $pages) ? “<a href='”.get_pagenum_link(\(next).”‘>下一页</a>” :””;

echo (\)paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? “<a href='”.get_pagenum_link(\(pages).”‘>最后</a>”:””;

echo “</div>\n”;

}

在sytle.css下面添加

/*分页的样式 */

.pagination{ margin:0 10px 10px 15px;line-height:23px;text-align:center;}

.pagination span, .pagination a{font-size:12px;margin: 2px 6px 2px 0;background:#fff;border:1px solid #ccc;color:#787878;padding:2px 5px 2px 5px;text-decoration:none;}

.pagination a:hover{background: #8cb900;border:1px solid #436206;color:#fff;font-size:12px;padding:2px 5px 2px 5px;}

.pagination .current{background: #8cb900;border:1px solid #436206;color:#fff;font-size:12px;padding:2px 5px 2px 5px;}

5、产品展示页面的制作和分页

新建页面category-*.php，*号为wordpress后台建立的相应的分类id号

图片调用：

<?php if (\)posts_perpage) { ?>

<?php $postsperpage = $posts_perpage; ?>

<?php } else { ?>

<?php \(postsperpage = 9; ?>

<?php } ?>

<?php

\)categoryID=\(cat;

\)wp_query = new WP_Query(‘cat=’ . $categoryID. ‘orderby=date&order=desc&posts_per_page=’.$postsperpage.’&paged=’.$paged); ?>

<ul>

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

<li>

<?php if(function_exists(‘wp_thumbnails_for_homepage’)) { wp_thumbnails_for_homepage(); } ?>

</li>

<?php endwhile;?>

</ul>

6、制作详细内容页面single.php

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

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

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

标题调用：<a href=”<?php the_permalink() ?>”><?php the_title_attribute(); ?></a>

时间调用：<?php the_time(‘F d, Y’) ?>

作者:：<?php the_author_posts_link(); ?>

标签：<?php the_category(‘, ‘) ?>

内容：<?php the_content(“Read More…”); ?>

7、制作独立页面page.php

复制single.php，删除文章导航，上一篇，下一篇代码。