不会编程,连最基本的html代码也不懂,可以制作wordpress模板吗?
可以!
只要你会使用word、Excel,只要你会Ctrl+C、Ctrl+V,按照蜗牛博客为您提供的“wordpress模板制作傻瓜教程”,你也可以制作出自己想要的wordpress模板来。
本教程以网络上常见的免费CSS网页模板为素材,通过创建一个简单的wordpress模板,来学习wordpress模板的制作过程,了解与掌握wordpress模板的构成及各个模板文件的作用,从而为进一步学习Wordpress模板制作奠定基础。
WordPress模板介绍:
WordPress的模板非常简单,首先,需要一个CSS文件,这个文件定义了wordpress模板的文字大小、排版、字体等。另外,它还至少包含以下文件:
步骤一:建立style.css文件
1、下载CSS网页模板作为制作wordpress模板的素材,下载地址:
http://www.snailtoday.com/myimg/file.rar
2、新建一个文件夹,用来存放wordpress模板的所有文件,文件名随意,在这里我们取名“snail”作为范例。
3、将下载的素材文件解压缩,将CSS文件夹中的1.css文件复制到“snail”文件夹,并重命名为“style.css”。
说明:这段代码包含在“/*”与“/*”这两个符号之前,表明这是一段说明性的内容,不会被程序运行,以上内容翻译成中文就是:
模板名称,模板来源等可以填写你自己的内容,然后点击保存按钮,即完成了style.css文件的制作,如下图所示:
<?php wp_head(); ?>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<p><?php bloginfo(‘description’); ?></p>
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<ul id=”nav”>
<?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?>
</ul>
</div>
说明:wordpess程序内置了许多的标签,使用这些标签我们可以非常方便的完成各种功能。标签的使用方法详见:
http://codex.wordpress.org/
在这里简单地说一下上面各个wordpress标签的意义:
步骤三:建立footer.php文件
1、在“snail”文件夹下面用记事本程序新建一个文件,命名为footer.php。
2、用记事本打开素材中的index.html文件,复制“<div id=”footer”>”这个标签以下的所有内容到footer.php文件。
<!– Please leave this line intact –>
<p>Template design by <a href=”http://www.sixshootermedia.com”>Six Shooter Media</a><br />
<!– you can delete below here –>
<?php the_time(‘Y’); ?> <?php bloginfo(‘name’); ?><br />
<a href=”<?php bloginfo(‘rss2_url’); ?>”>Grab the feed</a></p>
</div>
</div>
< ?php wp_footer(); ?>
</body>
</html>
步骤四、建立index.php文件
index.php是wordpress模板中两个不可缺少的文件之一(另一个是style.css文件)
1、在“snail”文件夹下面用记事本程序新建一个文件,命名为index.php。
2、添加以下代码到index.php文件。
<?php get_header(); ?>
<?php get_footer(); ?>
3、添加以下代码到“<?php get_header(); ?>”与“<?php get_footer(); ?>”之间,然后保存。
<div id=”content”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<p><?php the_time(‘F j, Y’); ?> at <?php the_time(‘g:i a’); ?> | <?php the_category(‘, ‘); ?> | <?php comments_number(‘No comment’, ’1 comment’, ‘% comments’); ?></p>
<?php endwhile; else: ?>
<h2>Woops…</h2>
<p>Sorry, no posts we’re found.</p>
<?php endif; ?>
<p align=”center”><?php posts_nav_link(); ?></p>
</div>
成果展示:
现在,我们建立好了四个文件,这样一个简单的wordpress模板就建成了,将snail文件夹上传到wordpress的模板目录,进入网站后台,就会看到我们刚刚上传的模板也出现在wordpress可选的模板列表里面了,如下图所示:
联系客服