wordpress主题制作-准备篇

以下教程适合以下类型人阅读

1,有兴趣制作wordpress模板

2,有一定得html,css,js,php知识

3,初学wordpress制作

制作准备

1,准备一套静态前端模板(html+css+js)结构的

2,久伴在此提供一套静态模板,没有静态模板的童鞋,可以拿久伴提供的这套进行制作

[url href=https://jiubx.com/wp-content/uploads/2020/02/Template.zip]静态模板[/url]

在wordpress以下目录创建主题

更目录/wp-content/themes/例如创建jiub主题

更目录/wp-content/themes/jiub

接下来在jiub文件夹创建以下文件

创建style.css文件,index.php文件

注意:主要样式表(style.css)

style.css是每个WordPress主题所需的样式表(CSS)文件。它控制网站页面的呈现(视觉设计和布局)。

为了使WordPress将主题模板文件集识别为有效主题,style.css文件需要位于主题的根目录中,而不是子目录中。

style.css文件头部必须包含以以下注释

/*
Theme Name:jiub
Theme URI:https://jiubx.com
Author:久伴
Author URI:https://jiubx.com/author/1/
Description:久伴主题不采用任何前端框架,html5+css3+javascript制作响应式
适配PC,平板,手机多种设备终端
Version:1.0
Tags:一栏,两栏,右侧栏,灵活标题,可访问性就绪,自定义颜色,自定义标题,自定义菜单,自定义徽标,编辑器样式,特色图像,页脚小工具,后期格式,rtl语言支持,即时贴,主题选项,线程注释,可翻译
像WordPress一样,此主题已获得GPL许可。
使用它可以使事情变得有趣,有趣并与他人分享您学到的知识。
*/

创建主题预览图文件screenshot.png

以上创建完毕后,登录wordpress后台主题就可以看到你刚刚创建的主题了

创建header.php(网页头部),footer.php(网页底部),single.php(文章内容页面),sidebar.php(侧边栏)concent(首页内容页面)contenta.php(首页内容页面循环)

然后将久伴提供的静态模板index.html文件中的代码按照头部,内容,尾部分别添加到以上对应的php文件,不知道怎么加的,可以看久伴举例

header.php文件

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title><?php bloginfo( 'name' ) ?></title>
<meta name="keywords" content="久伴wordpress主题制作教学" />
<meta name="description" content="久伴wordpress主题制作教学" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php bloginfo('template_url');?>/css/base.css" rel="stylesheet">
<link href="<?php bloginfo('template_url');?>/css/index.css" rel="stylesheet">
<link href="<?php bloginfo('template_url');?>/css/m.css" rel="stylesheet">
<link href="<?php bloginfo('template_url');?>/css/info.css" rel="stylesheet">
<script src="<?php bloginfo('template_url');?>/js/jquery.min.js"></script>
<script src="<?php bloginfo('template_url');?>/js/jquery.easyfader.min.js"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
<script>
window.onload = function ()
{
	var oH2 = document.getElementsByTagName("h2")[0];
	var oUl = document.getElementsByTagName("ul")[0];
	oH2.onclick = function ()
	{
		var style = oUl.style;
		style.display = style.display == "block" ? "none" : "block";
		oH2.className = style.display == "block" ? "open" : ""
	}
}
</script>
</head>
<header>
  <div id="mnav">
    <h2><span class="navicon"></span></h2>
    <ul>
      <li><a href="index.html">网站首页</a></li>
      <li><a href="about.html">关于我</a></li>
      <li><a href="share.html">模板分享</a></li>
      <li><a href="list.html">学无止境</a></li>
      <li><a href="list.html">慢生活</a></li>
      <li><a href="link.html">博客导航</a></li>
      <li><a href="gbook.html">留言</a></li>
    </ul>
  </div>
  <div class="topnav">
    <nav>
      <ul>
      <li><a href="index.html">网站首页</a></li>
      <li><a href="about.html">关于我</a></li>
      <li><a href="share.html">模板分享</a></li>
      <li><a href="list.html">学无止境</a></li>
      <li><a href="list.html">慢生活</a></li>
      <li><a href="link.html">博客导航</a></li>
      <li><a href="gbook.html">留言</a></li>
      </ul>
    </nav>
  </div>
</header>

footer.php文件

 <div class="links">
      <h2 class="hometitle">友情链接</h2>
      <ul>
        <li><a href="http://www.yangqq.com">久伴个人博客</a></li>
        <li><a href="http://www.yangqq.com/download/">个人博客模板</a></li>
        <li><a href="http://www.yangqq.com/link.html">优秀个人博客</a></li>
      </ul>
    </div>
    <div class="weixin">
      <h2 class="hometitle">官方微信</h2>
      <ul>
        <img src="<?php bloginfo('template_url');?>/images/wx.jpg">
      </ul>
    </div>
  </div>
</article>
<footer>
  <p>Design by <a href="/">久伴个人博客</a> <a href="/">蜀ICP备11002373号-1</a></p>
</footer>

sidebar.php文件

<div class="rbox">
   
    <div class="paihang">
      <h2 class="hometitle">站长推荐</h2>
      <ul>
        <li><b><a href="/download/div/2015-04-10/746.html" target="_blank">【活动作品】柠檬绿兔小白个人博客模板30...</a></b>
          <p><i><img src="<?php bloginfo('template_url');?>/images/t02.jpg"  /></i>展示的是首页html,博客页面布局格式简单,没有复杂的背景,色彩局部点缀,动态的幻灯片展示,切换卡,标...</p>
        </li>
        <li><b><a href="/download/div/2014-02-19/649.html" target="_blank"> 个人博客模板(2014草根寻梦)30...</a></b>
          <p><i><img src="<?php bloginfo('template_url');?>/images/b03.jpg"  /></i>2014第一版《草根寻梦》个人博客模板简单、优雅、稳重、大气、低调。专为年轻有志向却又低调的草根站长设...</p>
        </li>
        <li><b><a href="/download/div/2013-08-08/571.html" target="_blank">黑色质感时间轴html5个人博客模板30...</a></b>
          <p><i><img src="<?php bloginfo('template_url');?>/images/b04.jpg"  /></i>黑色时间轴html5个人博客模板颜色以黑色为主色,添加了彩色作为网页的一个亮点,导航高亮显示、banner图片...</p>
        </li>
        <li><b><a href="/download/div/2014-09-18/730.html" target="_blank">情侣博客模板系列之《回忆》Html30...</a></b>
          <p><i><img src="<?php bloginfo('template_url');?>/images/b05.jpg"  /></i>Html5+css3情侣博客模板,主题《回忆》,使用css3技术实现网站动画效果,主题《回忆》,分为四个主要部分,...</p>
        </li>
        <li><b><a href="/download/div/2014-04-17/661.html" target="_blank">黑色Html5个人博客模板主题《如影随形》30...</a></b>
          <p><i><img src="<?php bloginfo('template_url');?>/images/b06.jpg"  /></i>014第二版黑色Html5个人博客模板主题《如影随形》,如精灵般的影子会给人一种神秘的感觉。一张剪影图黑白...</p>
        </li>
        <li><b><a href="/jstt/bj/2015-01-09/740.html" target="_blank">【匆匆那些年】总结个人博客经历的这四年…30...</a></b>
          <p><i><img src="<?php bloginfo('template_url');?>/images/mb02.jpg"  /></i>博客从最初的域名购买,到上线已经有四年的时间了,这四年的时间,有笑过,有怨过,有悔过,有执着过,也...</p>
        </li>
      </ul>
    </div>

index.php文件

<?php get_header(); ?>
<?php   get_template_part('content'); ?>
<?php get_sidebar(); ?>
<?php get_footer();?>

content.php文件

<article>
  <div class="banner">
    <div id="sucaihuo" class="fader"> <img class="slide" src="<?php bloginfo('template_url');?>/images/banner01.jpg"> <img class="slide" src="<?php bloginfo('template_url');?>/images/banner02.jpg"> <img class="slide" src="<?php bloginfo('template_url');?>/images/banner03.jpg">
      <div class="fader_controls">
        <div class="page prev" data-target="prev">&lsaquo;</div>
        <div class="page next" data-target="next">&rsaquo;</div>
        <ul class="pager_list">
        </ul>
      </div>
    </div>
    <script>
$(function() {
	$('#sucaihuo').easyFader();
});
</script> 
  </div>
  
  <div class="newblogs">
    <h2 class="hometitle">最新文章</h2>
    <ul>
<?php 
if ( have_posts() ) : 
    while ( have_posts() ) : the_post();
get_template_part('contenta');
    endwhile;
else :
    _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>
    
   
    </ul>
  </div>

contenta.php文件

<li>
        <h3 class="blogtitle"><span><a href="/jstt/css3/" title="css3" target="_blank"  class="classname"></a><?php
$category = get_the_category();
echo $category[0]->cat_name;
?></span><a href="<?php echo get_permalink(); ?>" target="_blank" ><?php the_title($ID); ?></a></h3>
        <div class="bloginfo"><span class="blogpic"><a href="/jstt/css3/2018-03-26/812.html" title="帝国cms 首页或者列表无图,不使用默认图片的方法"><img src="<?php bloginfo('template_url');?>/images/t01.jpg" alt="帝国cms 首页或者列表无图,不使用默认图片的方法" /></a></span>
          <p><?php echo wp_trim_words( get_the_content(), 66 ); ?></p>
        </div>
        <div class="autor"><span class="lm f_l"></span><span class="dtime f_l"><?php the_time("Y年n月j日"); ?></span><span class="viewnum f_l">浏览(<a href="/">1429</a>)</span><span class="f_r"><a href="/jstt/css3/2018-03-26/812.html" class="more">阅读原文>></a></span></div>
        <div class="line"></div>
      </li>

到了这步首页就能动态显示wordpress后台发布的文章了 效果预览:9b5.cn/wordpress

未完待续

人已赞赏
wordpress教程

wordpress主题制作-介绍篇

2020-2-22 11:19:33

wordpress教程

wordpress评论点赞踩一踩插件Comments Like Dislike

2020-3-10 10:55:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索