如何制作一款属于自己的WordPress主题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何制作一款属于自己的WordPress主题相关的知识,希望对你有一定的参考价值。
工具/原料本地测试环境搭建工具
WordPress安装程序
NotPad++文本编辑工具
html+CSS+php的基本知识
方法/步骤
使用XAMPP搭建本地环境,启动后的画面是这样的,关于使用方法,请善用百度
2.规划主题文件目录
这是完整的主题目录里应该包含的文件,包含了一些有用的扩展
方框里的内容是我们本文所必须的。
3.分离主题文件代码
根据我们前面设计的页面外观我们的主页的HTML代码可以是这样的:<code><html> <head> <title>Tutorial theme</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>HEADER</h1> </div> <div id="main"> <div id="content"></div> <div id="sidebar"></div> </div> <div id="delimiter"></div> <div id="footer"> <h1>FOOTER</h1> </div> </div> </body></html>
</code>接下来,我们对这些代码进行模块分离,区分出header,footer,sidebar,index等内容。头部文件Header.php:<code><html> <head> <title>Book Review</title> <link rel="stylesheet" href="<?php bloginfo(\'stylesheet_url\'); ?>"> </head> <body> <div id="wrapper"> <div id="header"> <h1>HEADER</h1> </div>
</code>Header.php文件中的第4行我们更换了样式表的文件路径,这样主题就会自己判断并加载侧边栏文件sidebar.php<code><div id="sidebar"> <h2 ><?php _e(\'Categories\'); ?></h2> <ul > <?php wp_list_cats(\'sort_column=name&optioncount=1&hierarchical=0\'); ?> </ul> <h2 ><?php _e(\'Archives\'); ?></h2> <ul > <?php wp_get_archives(\'type=monthly\'); ?> </ul></div>
</code>Siderbar.php文件中分别输出了分类的列表和归档的列表。底部文件footer.php <code>
<div id="footer"> <h1>FOOTER</h1> </div> </div> </body></html></code>主题样式文件:style.css
<code>/*Theme Name: Book ReviewTheme URI: http://www.aidd.me/themeAuthor: the WordPress teamAuthor URI: http://www.ibooks.org.cn/*/body text-align: center; #wrapper display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; #header border: 2px #a2a2a2 solid; #content width: 75%; border: 2px #a2a2a2 solid; float: left; #sidebar width: 23%; border: 2px #a2a2a2 solid; float: right; #delimiter clear: both; #footer border: 2px #a2a2a2 solid; .title font-size: 11pt; font-family: verdana; font-weight: bold; </code>主题样式文件主要完成对主题外观的控制,这些只是最基本的样式控制文件,你可以根据自己的需要进行适合的修改以达到自己想要的效果。通过对最简单的HTML的不同控制,您会发现在以后的主题制作中如何优化代码,提高代码的通用性。主文件index.php:<code><?php get_header(); ?><div id="main"> <div id="content"> <h1>Main Area</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <h4>Posted on <?php the_time(\'F jS, Y\') ?></h4> <p><?php the_content(__(\'(more...)\')); ?></p> <hr> <?php endwhile; else: ?> <p><?php _e(\'Sorry, no posts matched your criteria.\'); ?></p><?php endif; ?> </div> <?php get_sidebar(); ?></div><?php get_footer(); ?></code>在主文件中,我们分别通过调用了get_header(),get_sidebar(),get_footer()实现了文件的整合,通过if判断是否存在日志文章,然后通过While循环来输出数据库中的日志文档。这虽然是一个最基本,最简单的主题,但通过主题的制作您能够会不断的发现问题,并通过请教百度,谷歌等搜索引擎来获取更多的知识。通过查CSS您可能获得更多的CSS控制的特效的技能或许您会发现BootStrap是如此强大。通过查找get_header,您会发现更多其独特的功能,你会发现wp_footer函数像WP_head()函数一样重要,通过查找侧边栏sidebar,您会发现原来可能通过小工具使侧边栏变得如此强大,通过查找文章类型,文章形式,分类法,你会发现原来WordPress可以完成你想要的任何功能。 参考技术A 供参考,其实摸清下面的窍门,修改成自己的网站信息,就是小菜了:
如何去掉”自豪的采用wordpress”字样
当你刚开始使用wordpress的时候在你的主页的右下角会有这么一行字
“自豪地采用wordpress”,你是可能很想把这行讨厌的玩意去掉。
其实这个很简单。
只需要找到主题文件夹(比如我使用的是twentyten)下的footer.php文件,删除掉文件的第35行代码,也就是
<?php printf( __(‘Proudly powered by %s.’, ‘twentyten’), ‘WordPress’ ); ?>
只要删掉这行代码,问题就解决啦,当然,如果你以后还想添加上,可以将其注释掉。
怎样制作wordpress手机主题
参考技术A一、安装MobilePress插件
在此之前,需要有个wordpress博客平台,然后按照下图的(图示一)安装MobilePress插件。MobilePress插件是一款自动识别访问设备的插件,它可以根据用户的设备来决定以什么样的主题来呈现内容,非常方便。
二、配置MobilePress Options选项
安装成功后,会在左侧菜单栏增加一个菜单荐,名字为“MobilePress”,点击展开,会有3个选项(图1):
- Options:选项
- Themes :主题
- Moblie Ads:广告代码
这一步,打开Options这个菜单,如(图2)所示,
- Blog Title:博客标题
- Blog Description:博客描述
- Mobile Themes Directory:手机博客主题目录
- Force Mobile Site:是否强制使用手机模式浏览
三、配置MobilePress Themes选项
MobilePress插件自身会提供两套现成的手机主题:
- default(默认):`plugins/mobilepress/system/themes/default`
- iphone(iphone版):`plugins/mobilepress/system/themes/iphone`
用户可以选择自已喜欢的模板做为展现用。
四、配置Moblie Ads选项
因为MobilePress系国外的插件,所以,广告联盟也是国外的,这个选项暂时无用,可跳过。
五、准备手机主题的2次开发
MobilePress自带的两个主题模板,样式简陋,兼容性也比较差,可以在它的基础上进行2次开发,以达到个性化的需求。
开发流程:
- 复制 default默认主题模板,路径为`plugins/mobilepress/system/themes/default`;
- 按照自已的需求对defult主题代码进行2次开发即可。
default模板文件布如图所示:
这个模板提供了基础的输出功能和简单的样式,按照文件名可以为各个页面进行方便地2次开发。
以上是关于如何制作一款属于自己的WordPress主题的主要内容,如果未能解决你的问题,请参考以下文章