文章
文章

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

未完待续

给TA赞助
共{{data.count}}人
人已赞助
wordpress主题教程
wordpress教程

wordpress主题制作-介绍篇

2020-2-22 11:19:33

wordpress教程

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

2020-3-10 10:55:31

猜你喜欢

wordpress主题制作-介绍篇

0938
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • 客服微信

返回顶部