不懂PHP开发的人制作wordpress皮肤方法完整版(最简单的WordPress皮肤开发教程)

WordPress是一套一流的博客程序,用户量非常大,特别是有很多不懂开发的设计师和重构工程师,他们可以轻松设计一套很好看和很个性的皮肤,但是如何去把它制作成一套好用的皮肤,对于他们来说确实一件很难的事情,这篇文章就是献给不懂PHP开发的人制作wordpress皮肤的完整方法。

不懂PHP开发的人制作wordpress皮肤方法完整版

我们始终觉得,一步一步的方法是最好的说明方式,以下我们将用最简单的方式,去一步步说明制作方法。

第一步:皮肤的设计和切图需要注意的地方

制作皮肤其实也是一个项目,也分很多工序,虽然是一个人做,但是前面的工序如果没准备好,后面就会付出几倍的时间去解决前面留下的问题

不懂PHP开发的人制作wordpress皮肤方法完整版

从设计开始,就要注意,大框架必须遵循WordPress的基础模板来,无论你增加多少内容和变化,大框架不变。重构的时候也要考虑到,首页是靠 header 、silderbar、footer和conter几个模块拼起来的,所以重构的时候就配置好PHP环境,把页面后缀写成.PHP格式的,然后分别把首页做成 header.php 、sidebar.php、  footer.php 和  index.php 四个页面。

这样就可以在index.php中用 <?php get_header(); ?>   <?php get_sidebar(); ?>  <?php get_footer(); ?> 等命令把头部、边栏和底部包含进index.php,content区域的内容要直接写到index.php里,这样可以减少部分重复工作,后续增加相关PHP代码会很方便。

注意:有时候可能还没有皮肤的功能函数,WordPress的包含代码还不可以用,我们可以先用PHP原来的包含代码去实现,如:<?php include_once’header.php’;?>,这样是可以100%在index.php中调用header.php的,但是最后还是要用<?php get_header(); ?>否则有些功能将不可用。

第二步:准备好必备的文件

先配置好PHP环境,安装好WordPress博客程序,皮肤文件夹要放置到 /wp-content/themes/里

一套完整的WordPress皮肤必须必须有以下几个页面文件:

style.css: CSS(样式表)文件
index.php : 主页模板
archive.php : Archive/Category模板
404.php : Not Found 错误页模板
comments.php : 留言/回复模板
footer.php : Footer模板
header.php : Header模板
sidebar.php : 侧栏模板
page.php : 内容页(Page)模板
single.php : 内容页(Post)模板
searchform.php : 搜索表单模板 
search.php : 搜索结果模板

这些只是基础的文件,复杂的模板会有更多功能性文件。

wordpress的强大之处就在于,你不一定要每个页面都有他才运行,有些功能模块页面你不做,它就用系统默认的模块来代替。例如:index.php  其实和 category.php  archive.php  tag.php  search.php差不多,所以当你只有index.php的时候,这些页面都会默认去调用index.php的效果来展示,但是这样对搜索引擎不友好,yunrui.co是给每个页面加标题解决这个问题,如:https://www.yrucd.com/category/theoryondesign  和  https://www.yrucd.com/tag/%E5%85%8D%E8%B4%B9%E4%B8%8B%E8%BD%BD 等。
云瑞分类目录页与首页的不同之处

第三步:添加关键页面的代码

1.完成首页的必要代码和模块:

index.php的代码如下(注意,这些函数必须正确嵌套在你的HTML代码中,这里只是展示他们的功能方便你取用)

//调取博客头部
&lt;?php get_header(); ?&gt;

//循环调取日志内容(关键)
&lt;?php if(have_posts()) : ?&gt;&lt;?php while(have_posts()) : the_post(); ?&gt;

&lt;!--调取缩略图--&gt;
&lt;?php if ( has_post_thumbnail()) : ?&gt;
&lt;a href="&lt;?php the_permalink(); ?&gt;" target="_blank"&gt;&lt;?php the_post_thumbnail(); ?&gt;&lt;/a&gt;
&lt;?php endif; ?&gt;
&lt;!--调出日志标题--&gt;                                
&lt;h2&gt; &lt;a href="&lt;?php the_permalink(); ?&gt;"  target="_blank"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt; &lt;/h2&gt;
&lt;!--调出日志相关信息(发布时间、作者和编辑文字链接等)--&gt; 
&lt;?php echo the_author_meta( 'user_nicename' ); ?&gt;  &lt;?php the_time('Y.n.j') ?&gt; &lt;?php if (the_category(', ')) the_category(); ?&gt; &lt;?php edit_post_link('编辑', ' &amp;bull; ', ''); ?&gt;
&lt;!--调出日志摘要--&gt;
 &lt;?php the_content(); ?&gt;
&lt;?php endwhile; ?&gt;
&lt;?php endif; ?&gt;
//循环调取日志内容结束(关键)

//调取博客边栏
&lt;?php get_sidebar(); ?&gt;
//调取博客底部
&lt;?php get_footer(); ?&gt;

有翻页插件的 请按插件的要求把代码放到该放的位置,yunrui.co 用的的翻页插件是 “WP-PageNavi分页导航” 它要求把代码 “<?php wp_pagenavi(); ?>” 放到 “//循环调取日志内容结束(关键)” 这位置的下面,就可以实现以下效果:
云瑞的翻页工具

header.php的代码:

//title代码这样写方便SEO
&lt;title&gt;&lt;?php wp_title( '|', true, 'right' ); ?&gt;&lt;/title&gt;
&lt;link rel="pingback" href="&lt;?php bloginfo( 'pingback_url' ); ?&gt;" /&gt;
//CSS和JS路径这样写就能自动获取文件路径
&lt;link href="&lt;?php echo get_template_directory_uri(); ?&gt;/style.css" rel="stylesheet" type="text/css"&gt;
&lt;script src="&lt;?php echo get_template_directory_uri(); ?&gt;/js/jquery-1.5.1.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="&lt;?php echo get_template_directory_uri(); ?&gt;/js/silder.js" type="text/javascript"&gt;&lt;/script&gt;
//加这个函数登录后的顶部工具条才可以正常显示
&lt;?php wp_head(); ?&gt;

//调取搜索框功能模块,调取的就是你之前建立的<em style="color: #999999;">searchform.php</em>你可以在它里面修改你的搜索表单样式
&lt;?php get_search_form( true ); ?&gt;

sidebar.php 的代码:

正确的把以下代码放到sidebar.php 的HTML中才可以正常在后台使用(外观 》小工具 )中的功能

//正确的吧这些代码放到你的样式中
&lt;?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?&gt;
&lt;?php dynamic_sidebar( 'sidebar-1' ); ?&gt;
&lt;?php endif; ?&gt;

yunrui.co是这样做的:

云瑞的sidebar

footer.php的代码:

footer.php里一般是放你的版权信息之类的内容,但是这里必须放一个函数  <?php wp_footer(); ?> 否则底部顶部工具条将不正常显示,而且要将这个函数放到</body>之前,云瑞是这样写的:

&lt;?php wp_footer(); ?&gt;
&lt;/body&gt;
&lt;/html&gt;

searchform.php中的代码:

你可以在searchform.php修改你的搜索框样式

&lt;form role="search" method="get" id="searchform" action="&lt;?php echo home_url( '/' ); ?&gt;"&gt;
&lt;input type="text" value="搜索..." name="s" id="s" &gt;
&lt;/form&gt;

至此,首页的代码就完成了。

2.文章详情页(single.php)的代码:

这个页面也很简单,各种关键数据很清晰。

&lt;?php get_header(); ?&gt; &lt;!-- 调取header.php头部模块 --&gt;
        &lt;div id="middle" class="clearfix"&gt;
        	&lt;div id="inner"&gt;
            	&lt;div id="content"&gt;
                	&lt;div class="txtCon"&gt;
                        &lt;!-- 开始调取日志 --&gt;&lt;?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?&gt;
        
    	&lt;article class="" id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class(); ?&gt;&gt;&lt;!-- 必要的HTML标签 &lt;article&gt;&lt;/article&gt; --&gt;
        	&lt;header class="article-title"&gt;
            	&lt;h2 class="myh2"&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;&lt;!-- 详情页标题 --&gt;
                &lt;div class="article-info clearfix"&gt;
                
                     &lt;div class="meta clearfix"&gt;
                  By &lt;?php echo the_author_meta( 'user_nicename' ); ?&gt; / &lt;?php the_time('Y.n.j') ?&gt; / &lt;?php if (the_category(', ')) the_category(); ?&gt; &lt;?php edit_post_link('编辑', ' &amp;bull; ', ''); ?&gt;
                    &lt;/div&gt; &lt;!-- 博客相关属性 --&gt;
       
                
            &lt;/header&gt;
            
            &lt;div class="article-text"&gt;
				&lt;?php the_content(); ?&gt;
                &lt;?php wp_link_pages( array( 'before' =&gt; '&lt;div class="page-link"&gt;' . __( 'Pages:', 'twentyten' ), 'after' =&gt; '&lt;/div&gt;' ) ); ?&gt;
                
            &lt;/div&gt;
          
        &lt;/article&gt;
        

		&lt;?php comments_template( '', true ); ?&gt;&lt;!-- 调取评论模块 --&gt;
        
        
	   &lt;?php endwhile; ?&gt;
                &lt;/div&gt;
            &lt;/div&gt;
	&lt;/div&gt;&lt;!--解决IE8问题的标签--&gt;
            &lt;!--sildebar here--&gt;
				&lt;?php get_sidebar(); ?&gt;&lt;!-- 调取sidebar.php边栏模块 --&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      
 &lt;?php get_footer(); ?&gt;&lt;!-- 调取footer.php底部模块 --&gt;

 评论页面(comments.php)相关代码:

这个页面比较复杂,可以不做过多修改,要改样式,就直接调整

&lt;?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form. The actual display of comments is
 * handled by a callback to twentyten_comment which is
 * located in the functions.php file.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?&gt;

			&lt;div id="comments"&gt;
&lt;?php if ( post_password_required() ) : ?&gt;
				&lt;p class="nopassword"&gt;&lt;?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyten' ); ?&gt;&lt;/p&gt;
			&lt;/div&gt;&lt;!-- #comments --&gt;
&lt;?php
		/* Stop the rest of comments.php from being processed,
		 * but don't kill the script entirely -- we still have
		 * to fully load the template.
		 */
		return;
	endif;
?&gt;

&lt;?php
	// You can start editing here -- including this comment!
?&gt;

&lt;?php if ( have_comments() ) : ?&gt;
			&lt;h3 id="comments-title"&gt;&lt;?php
			printf( _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_comments_number(), 'twentyten' ),
			number_format_i18n( get_comments_number() ), '&lt;em&gt;' . get_the_title() . '&lt;/em&gt;' );
			?&gt;&lt;/h3&gt;

&lt;?php if ( get_comment_pages_count() &gt; 1 &amp;&amp; get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?&gt;
			&lt;div class="navigation"&gt;
				&lt;div class="nav-previous"&gt;&lt;?php previous_comments_link( __( '&lt;span class="meta-nav"&gt;&amp;larr;&lt;/span&gt; Older Comments', 'twentyten' ) ); ?&gt;&lt;/div&gt;
				&lt;div class="nav-next"&gt;&lt;?php next_comments_link( __( 'Newer Comments &lt;span class="meta-nav"&gt;&amp;rarr;&lt;/span&gt;', 'twentyten' ) ); ?&gt;&lt;/div&gt;
			&lt;/div&gt; &lt;!-- .navigation --&gt;
&lt;?php endif; // check for comment navigation ?&gt;

			&lt;ol class="commentlist"&gt;
				&lt;?php
					/* Loop through and list the comments. Tell wp_list_comments()
					 * to use twentyten_comment() to format the comments.
					 * If you want to overload this in a child theme then you can
					 * define twentyten_comment() and that will be used instead.
					 * See twentyten_comment() in twentyten/functions.php for more.
					 */
					wp_list_comments( array( 'callback' =&gt; 'twentyten_comment' ) );
				?&gt;
			&lt;/ol&gt;

&lt;?php if ( get_comment_pages_count() &gt; 1 &amp;&amp; get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?&gt;
			&lt;div class="navigation"&gt;
				&lt;div class="nav-previous"&gt;&lt;?php previous_comments_link( __( '&lt;span class="meta-nav"&gt;&amp;larr;&lt;/span&gt; Older Comments', 'twentyten' ) ); ?&gt;&lt;/div&gt;
				&lt;div class="nav-next"&gt;&lt;?php next_comments_link( __( 'Newer Comments &lt;span class="meta-nav"&gt;&amp;rarr;&lt;/span&gt;', 'twentyten' ) ); ?&gt;&lt;/div&gt;
			&lt;/div&gt;&lt;!-- .navigation --&gt;
&lt;?php endif; // check for comment navigation ?&gt;

	&lt;?php
	/* If there are no comments and comments are closed, let's leave a little note, shall we?
	 * But we only want the note on posts and pages that had comments in the first place.
	 */
	if ( ! comments_open() &amp;&amp; get_comments_number() ) : ?&gt;
		&lt;p class="nocomments"&gt;&lt;?php _e( 'Comments are closed.' , 'twentyten' ); ?&gt;&lt;/p&gt;
	&lt;?php endif;  ?&gt;

&lt;?php endif; // end have_comments() ?&gt;

&lt;?php comment_form(); ?&gt;

&lt;/div&gt;&lt;!-- #comments --&gt;

至此,详情页就可以使用了。

 3.tag.php  archive.php  category.php search.php 等页面的代码:

最简单的方式是直接用index.php改这些页面,然后在顶部加一个标题。云瑞的这些页面的标题是这样加的:

//category.php的标题写法
&lt;?php printf( __( '文章分类: %s', 'twentytwelve' ), '&lt;span&gt;' . single_cat_title( '', false ) . '&lt;/span&gt;' ); ?&gt;

//archive.php文章归档页面的标题写法
&lt;?php
					if ( is_day() ) :
						printf( __( 'Daily Archives: %s', 'silverblue' ), '&lt;span&gt;' . get_the_date() . '&lt;/span&gt;' );
					elseif ( is_month() ) :
						printf( __( 'Monthly Archives: %s', 'silverblue' ), '&lt;span&gt;' . get_the_date( _x( 'Y F', 'monthly archives date format', 'silverblue' ) ) . '&lt;/span&gt;' );
					elseif ( is_year() ) :
						printf( __( 'Yearly Archives: %s', 'silverblue' ), '&lt;span&gt;' . get_the_date( _x( 'Y', 'yearly archives date format', 'silverblue' ) ) . '&lt;/span&gt;' );
					else :
						_e( 'Archives', 'silverblue' );
endif;?&gt;	

//tag.php页面的标题写法       	
&lt;?php printf( __( 'Tag Archives: %s', 'silverblue' ), '&lt;span&gt;' . single_tag_title( '', false ) . '&lt;/span&gt;' ); ?&gt;

//search.php页面的标题写法
&lt;?php printf("搜索 ".'&lt;span&gt;' . get_search_query() . '&lt;/span&gt;'  ." 的结果"); ?&gt;

云瑞的几个分类目录页面的效果:

云瑞的几个分类目录页的设计

4.404页面:

404页面很简单,但是却很重要,它可以很好的让用户回流。推荐大家看看 《拒绝枯燥!100例有趣的404错误页面设计》能有不错的灵感。

&lt;?php get_header(); ?&gt;        
        &lt;div id="middle" class="clearfix"&gt;
        	&lt;div id="inner"&gt;
            	&lt;div id="content"&gt;
                	&lt;div class="txtCon"&gt;
        
        sorry 404!//主要是在这个区域写你404页面的内容
        
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!--sildebar here--&gt;
				&lt;?php get_sidebar(); ?&gt;
        &lt;/div&gt;
        &lt;/div&gt;
 &lt;?php get_footer(); ?&gt;

至此,博客基本可以正常使用了。

第四步:其他技巧

1.功能函数

function.php这是一套皮肤后台完整功能必备的函数文件,我们把云瑞的分享出来了。

function.php:点击下载

把这个php文件放到你的皮肤根目录里,这样就能正常使用 外观里的各项功能了,而且还可以设置一些必要的信息,如:首页信息缩略图的尺寸。
云瑞function函数的代码

2.皮肤缩略图

皮肤缩略图 命名为screenshot.png,并放置到你的皮肤根目录里,就能在 外观 》主题,里和选用其他皮肤一样选择你自己做的皮肤了。云瑞的效果如下:
云瑞的皮肤选择

总结

WordPress的皮肤制作不难,只要你自己爱研究,会设计,会HTML,就一定可以做出自己满意有好用的皮肤,因为本人也是设计师,所以这套解决方案肯定会有很多问题,有意见希望大家指出,但是目前性能上的问题,页面响应速度都不错。另外希望这几步能帮设计师完成皮肤设计,因为这是针对设计师写的,如果有疑问可以关注微信后留言。
微信ID:gh_c00c591b3f19

不懂PHP开发的人制作wordpress皮肤方法完整版(最简单的WordPress皮肤开发教程)》暂无评论

发表评论

`
返回页顶