以下教程适合以下类型人阅读
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">‹</div> <div class="page next" data-target="next">›</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
未完待续