鄱阳县精准扶贫旅游网站建设目的,医院网站建设的目的,人和动物做的网站,网站网站建设考虑要素wordpress网站建设中#xff0c;主题的制作是最为核心的环节。了解模板文件结构是模板制作的第一步#xff0c;本文所讲的模板文件结构包括两部分#xff0c;一是指以文件名为概念的文件结构#xff0c;二是指文件内容的代码结构。
一、如何使模板文件起作用 ↑
wordpres…wordpress网站建设中主题的制作是最为核心的环节。了解模板文件结构是模板制作的第一步本文所讲的模板文件结构包括两部分一是指以文件名为概念的文件结构二是指文件内容的代码结构。
一、如何使模板文件起作用 ↑
wordpress模板文件夹放置于/wp-content/themes/下开发者只需将自己的模板文件全部置于一个文件夹中将文件夹置于该目录下wordpress系统就会自动检测发现模板文件可用时就会在后台“主题”中列出该模板。
我们创建一个文件夹命名为mytheme在mytheme中创建两个文件分别是style.css,index.php,functions.php用文本编辑器编辑这两个文件。在style.css首置入如下代码
/* Theme Name: utubon.com Theme URI: http://www.phpstudio.info/ Description: PHP网站建设工作室 Author: PHP网站建设 Version: 1.0 License: License URI: Tags: 工作室 */ 保存即可。然后将mytheme文件夹放入到wordpress主题目录中进入后台查看是否有了一个新的主题。
其实wordpress对主题的检测紧限于style.css,index.php有了这两个文件和上面的声明即可在后台检测到新的主题。现在开始你可以在index.php中写网页结构在style.css中写样式在functions.php中添加新的函数和功能了。
你会问其他的主题中为什么会有这么多文件呢如sidebar.php,page.php,single.php,category.php等。wordpress使用模板通过函数的调用让模板之间形成完整的整体例如在index.php中你会看到get_header()即调用文件名为header.php的模板文件 get_footer()亦然。get_template_part( loop, index );则是调用模板loop-index.php。wordpress并非傻瓜的像include()函数一样包含这些文件而是对文件的存在与否要进行判断如果不存在该文件将用对应的相关文件代替这需要你查看开发文档中该函数的具体解释。
二、一般情况下模板文件列表和对应的函数 ↑
我们查看所有的模板都会获悉该主题所拥有的模板文件一般情况下模板文件拥有下面的这些文件他们分别对应了自己的调用函数一并列出
文件名一般作用对应的函数备注使用技巧style.css样式表?php bloginfo( stylesheet_url ); ?调用地址index.phpwordpress识别首页自动识别functions.php包含增函数和新功能自动识别header.php头部get_header()footer.php尾部get_footer()sidebar.php边侧栏get_sidebar(foot)无参数则调用sidebar.php参数foot指文件sidebar-foot.php类推loop.php content.php 内容循环get_template_part( loop, index )和sidebar一样参数的意思是调用模板loop-index.php类推如果get_template_part( content,single );404.php search.php page.php single.php 分别是404页搜索页单独页面文章内容页自动识别和index.php一样使用上述函数没有该文件的话用index.phparchive.php category.php tag.php author.php 分别是归档页分类页标签页作者页同上但如果只有archive.php或category.php没有其他页其他页用archive.php代替或category.php代替
除了上面这些页面之外当然还会有主题特殊的文件如主题自身的图片js代码screenshot.png是主题预览图片自动检测并在后台显示。上面没有提到的文件不一定不存在如loop-tag-cloud.php,你可以用get_template(loop,tag-cloud)来调用这是一类上述衍生文件。其他特殊文件如果没有特定的说明或功能也可用include()等php函数将其包含。上面的文件除了style.css,index.php都是可选文件例如模板中没有很多文件。
三、文件代码结构写一个最简单的模板 ↑
正如文章开头提到最简单的模板就只有style.css和index.php这两个文件接下来就用这个最简单的模板来讲解模板文件代码结构。如果你懂得html网页设计并对wordpress函数有一些了解制作自己的模板并不困难完全可以仿照别人的模板慢慢完成自己的模板。
这里强烈建议你采用标准的网页设计方法放弃table布局认真学习css采用divcss布局。
请先自己设计出html代码一个页面首页加入一些测试的文章、图片、特效等然后按照本文的方法进行修改。然后将所有代码拷贝到index.php中这时你甚至可以不用理会style.css。在index.php中我给出的基本框架如下
html head titlewordpress/title style typetext/css mediascreen html { margin-top: 28px !important; } * html body { margin-top: 28px !important; } /style /head body div idwapper div idheader/div div idcontainer div idleft/div div idright/div /div div idfooter/div /div /body /html 上面的只是最基本的框架通过css样式控制页面的宽度、呈现颜色、表现形式等。
我们将头部定义到div header的地方头部中既包含了网页的css、meta声明也包含了网页顶部的一些元素如导航条、logo、公告等。在头部中我们需要修改一些内容
1、引入style.csslink relstylesheet typetext/css mediaall href?php bloginfo( stylesheet_url ); ? / 2、引入wordpress本身需要添加的代码 ?php if ( is_singular() get_option( thread_comments ) ) wp_enqueue_script( comment-reply ); wp_head(); ? 3、用下面的代码替换title的内容以显示网页标题 ?php global $page, $paged; wp_title( |, true, right ); bloginfo( name ); $site_description get_bloginfo( description, display ); if ( $site_description ( is_home() || is_front_page() ) ) echo | $site_description; if ( $paged 2 || $page 2 ) echo | . sprintf( __( Page %s, twentyten ), max( $paged, $page ) ); ? 以上是网站声明部分这些内容作为wordpress应该拥有的内容最好不要缺少当然你也可以根据自己的需要和想法替换为自己想要的内容。例如在wp_title()后面添加echo 你想要添加的内容;从而增加你的网页标题的信息。 4、修改你的div header的内容导航可以使用wordpress后台菜单用wp_nav_menu()函数来实现要想使用该功能还需要在functions.php中预先初始化主题让主题支持后台菜单功能。或用分类列表代替用wp_list_categories()函数来实现这些函数需要你慢慢学习他们的使用方法。 接下来是内容的部分我们将文章在首页的呈现列表放在div left中用下面的代码来实现文章列表的呈现。
?php while(has_posts()) : the_post(); ? div idpost div idpost-titlea href?php the_permalink(); ??php the_title(); ?/a/div div idpost-content?php the_content(); ?/div /div ?php endwhile; ? 以上是最最简单的文章循环了将列出对应条数的最新文章标题和内容。作为开发者你需要根据自己的想象和需要结合js效果、css样式实现自己最终想要的结果。
接下来是sidebar,我们将sidebar放在div right中使用下面这段代码实现在后台放置widget: ?php if(is_active_sidebar(sidebar-widget-area-primary)): ? div idprimary ?php dynamic_sidebar( sidebar-widget-area-primary ); ? /div!--//end of primary-- ?php endif; // end primary widget area ? 不过目前这还是无法实现的我们需要在functions.php中定义一个widget这样才能实现后台小工具的使用并在这里表现出来。
网页footer尾部可以由你自由发挥等你慢慢熟练了wordpress模板的写作之后可以实现很多调用和特效例如在底部放入友情链接等。
四、functions.php的初始化定义 ↑
虽然style.css和index.php就可以让主题工作但这样的主题是没有任何功能的在前文中你已经发觉这个问题。怎样让主题拥有一些功能呢如小工具widget的使用菜单的使用特色图片的使用等等。你可以在网络上其他文章中发现这些功能如何激活本文只是做一个最简单的解释丰富的功能需要你自己慢慢学习。
add_action( after_setup_theme, twentyten_setup ); if (!function_exists( twentyten_setup)): function twentyten_setup() { add_editor_style(); add_theme_support( post-formats, array( aside, gallery ) ); add_theme_support( post-thumbnails ); add_theme_support( automatic-feed-links ); load_theme_textdomain( twentyten, TEMPLATEPATH . /languages ); $locale get_locale(); $locale_file TEMPLATEPATH . /languages/$locale.php; if ( is_readable( $locale_file ) ) require_once( $locale_file ); register_nav_menus( array( primary __( Primary Navigation, twentyten ), ) ); add_custom_background(); if ( ! defined( HEADER_TEXTCOLOR ) ) define( HEADER_TEXTCOLOR, ); if ( ! defined( HEADER_IMAGE ) ) define( HEADER_IMAGE, %s/images/headers/path.jpg ); define( HEADER_IMAGE_WIDTH, apply_filters( twentyten_header_image_width, 940 ) ); define( HEADER_IMAGE_HEIGHT, apply_filters( twentyten_header_image_height, 198 ) ); set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true ); if ( ! defined( NO_HEADER_TEXT ) ) define( NO_HEADER_TEXT, true ); } endif; if(function_exists(register_sidebar)){ register_sidebar(array( name上部边栏, id sidebar-widget-area-primary, description , before_widget div, after_widget /div, before_title h3span, after_title /span/h3, )); register_sidebar(array( name下部边栏, id sidebar-widget-area-secondary, description , before_widget div, after_widget /div, before_title h3span, after_title /span/h3, )); register_sidebar(array( name边栏右边, id sidebar-widget-area-right, description 一般放分类列表, before_widget div, after_widget /div, before_title h3span, after_title /span/h3, )); } 这段代码是我从tweentyten主题中抄袭和稍加修改过来的你可以将这段代码拷贝到你的functions.php中进入后台看看是否已经激活了不少功能。
接下来的工作就是要添加新的函数了用新的函数来实现很多新的wordpress系统没有的功能。由于wordpress模板开发是一个巨大的工程无法用一篇文章讲完因此本文只是稍加点讲无法深入你可以看其他文章以获取新的信息。
五、构建完整的模板体系 ↑
通过上文的讲解加上你坚持不懈的学习应该对wordpress模板的初浅知识有了较为深刻的体会。接下来你就将拥有一个庞大复杂但逻辑合理成系统体系的模板了。
我们利用之前制作好的index.php文件将其分割将我所指的头部全部剪切到一个新的header.php文件中置于mytheme下在index.php被剪切的地方用?php get_header(); ?代替将div container全部剪切到新的loop.php中用?php get_template_part(loop,index); ?代替将尾部全部剪切到footer.php中用?php get_footer(); ?代替。这样一来你就发现你的index.php只留下了三条php语句了在运行你的博客试试是否跟刚才的效果一模一样呢再将loop.php中的div right剪切到sidebar.php中用?php get_sidebar(); ?代替。这下是不是觉得你的主题文件夹内就丰富了好多。
新建一个category.php将index.php中的内容拷贝过来修改?php get_template_part(loop,index); ?为?php get_template_part(loop,category); ?新建一个loop-category.php并在里面编写分类页想要呈现的表现形式。
按照这个思路很快你的模板文件就会有很多而且随着你对模板文件之间调用关系的理解很快可以自由编写文件了。
六、总结 ↑
编写wordpress模板是一个比较繁杂的过程对于初学者是很难一下获得成功的只有慢慢学习和敢于挑战才能获取成功。wordpress模板的关键主要体现在
1、模板样式模板的外观决定了模板的成败一个好的模板首先体现在另读者很舒服的外观上而作为程序员往往被设计难倒要向拥有令人眼前一亮的wordpress模板学好设计和css是必不可少的网编基础。 2、模板功能模板的功能是体现模板开发者水平的衡量标准一个功能丰富的模板能给用户一种权威的感觉无论是个人站还是企业站华丽的网站功能让用户觉得站长是用心做站的人。 3、模板的设计理念开发者根据自己的目标设计符合自身需要的模板不盲目追求不刻意回避而是以需求为目标以用户体验为设计动力。
因此其实开发wordpress到后期问题不是在wordpress模板的代码逻辑和函数编写上而是在于天才的开发思路和高雅的审美观念上。
