WordPress--主题开发

一 基础

1. 让WordPress识别到主题

  • 找到主题所在的目录:wp-content/themes/,然后新建目录(目录名及主题名)Theme_Dev
  • 新建index.phpstyle.css
// style.css /* Theme Name: Theme_Dev Theme URI: http://yizihan.github.io Author: 翌子涵 Author URI: http://yizihan.github.io Description: 一个基于Bootstrap架构的WordPress主题 Version: 1.0 */ 

2. 主题预览图-screenshot.png

将设计图尺寸改为600px*450px并命名screenshot.png,然后保存在Theme_Dev文件夹内

3. 解构模板

首页构成

  • index.php
  • header.php
  • footer.php

4. 在页面模板文件中加载不同部分的模板文件

// index.php <?php get_header(); ?> <?php get_sidebar('right'); ?>  // 更改载入默认模板 <?php get_footer(); ?> 

三 页头

5. 页头部分的模板-header.php

<!DOCTYPE html> <html <?php language_attributes(); ?>> <!-- language_attributes():根据网站的设置动态的生成语言环境 -->   <head>     <meta <?php bloginfo('charset'); ?>>     <!-- bloginfo('charset'):获取网站的字符集 -->     <title><?php wp_title(); ?></title>     <!-- wp_title():根据不同的页面动态的生成标题 -->     <?php wp_head(); ?>     <!-- wp_head():一般插件向主题头部<head>标签加入CSS和JS文件,都是通过它 -->     <!-- echo get_template_directory_uri():获得主题的位置 -->     <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/bootstrap/css/bootstrap.css">     <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">     <script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.js"></script>     <script src="<?php echo get_template_directory_uri(); ?>/js/fenikso.js"></script>   </head> 

6.网站标志

<div class="span6">   <!-- esc_url():用于URL过滤,消除无效字符和删除危险字符 -->   <!-- esc_attr_e():显示翻译的文本-->   <a href="<?php echo esc_url(home_url('/')); ?>" title="<?php esc_attr_e('Jump to the front page', 'fenikso'); ?>">     <!-- esc_attr():将 < > & " '(小于号,大于号,&,双引号,单引号)编码,转成HTML实体 -->     <img id="logo" src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>">   </a> </div> 

7. 搜索框

<div class="span6">     <?php get_search_form(); ?> </div> 

在functions.php文件中,写一个自定义函数,并通过钩子挂载这个函数到get_search_form这个动作钩子。

8. 主题支持定制菜单的功能

注册菜单

register_nav_menu( 'primary', __( 'Primary Menu', 'fenikso' ) ); 

后台设置菜单分类

WordPress--主题开发
设置分类菜单

使用注册的菜单

<div class="navbar">   <?php wp_nav_menu( array(     'theme_location'  =>  'primary',// 使用注册的菜单     'menu_class'      =>  'nav',    // 为导航菜单添加nav类     'container'       =>  false,     'walker'          =>  new fenikso_Nav_Walker,   ) ); ?> </div> 

四 循环

9. 循环

<?php if(have_posts()) : ?>   <!-- if(have_posts()):判断当前页面是否还有要显示的文章 -->   <?php while(have_posts()) : the_post()?>     <!-- while(have_posts()):重复执行下面的代码 -->     <!-- the_post():准备要显示的文章 -->     <p><?php the_title(); ?></p>     <!-- the_title():模板标签显示文章的标题 -->   <?php endwhile ?> <?php endif; ?> 

10. 条件判断标签

<p>   <!-- in_category():判断文章是否在指定分类内 -->   <?php if(in_category('6')): ?>     <i class="icon-star"></i>   <?php else: ?>     <i class="icon-heart"></i>   <?php endif; ?>   <?php the_title(); ?> </p> 

11. 自定义查询-WP_Query

<?php $myqueryargs = array(   'post_type' => 'post',        // 设置显示文章的类型   'posts_per_page' => 5,        // 设置每页显示多少条   'orderby' => 'date',          // 设置排序   'order' => 'ASC',             // 排序方法   'category__in' => array(6,7), // 根据分类限定 ); ?> <?php $myquery = new WP_Query($myqueryargs); ?> <?php if($myquery -> have_posts()) : ?>   <?php while($myquery -> have_posts()) : $myquery -> the_post()?>     <?php the_title(); ?>   <?php endwhile ?> <?php endif; ?> <?php wp_reset_postdata(); ?> 

五 主体

1. 主内容列表块的设计

<article class="span6">   <div class="media-box">     <?php the_post_thumbnail(); ?>     <!-- the_post_thumbnail():文章缩略图 -->   </div>   <div class="content-box">     <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>     <!-- the_permalink():文章链接 -->     <!-- the_title():文章标题 -->     <footer class="content-meta">       <span>         <a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))) ?>" rel="tooltip"  >         <!-- get_author_posts_url():获取当前作者的所有文章,参数为作者的ID值 -->         <!-- get_the_author_meta():获取作者的ID -->           <?php echo get_avatar(get_the_author_meta('user_email')); ?>           <!-- get_avatar():获取用户的头像,参数是用户的id或email -->           <!-- get_the_author_meta():获取用户信息 -->         </a>       </span>       <time><?php echo get_the_date('Y-m-d'); ?></time>       <!-- get_the_data():获取文章发布日期 -->       <span><?php the_category(' '); ?></span>       <!-- the_category():获取文章的分类,使用'空格'参数分割分类 -->       <div class="btn-group pull-right">         <a href="#" class="btn btn-mini" rel="popover"                    ><i class="icon-info-sign"></i></a>         <!-- get_the_excerpt():获取文章摘要 -->         <?php comments_popup_link('<i class="icon-comment"></i>','<i class="icon-comment"></i> 1', '<i class="icon-comment"></i> %', 'btn btn-mini') ?>         <!-- comments_popup_link():设置文章评论按钮,并添加评论数和class -->       </div>     </footer>   </div> </article> 

六 分页导航

1. 分页导航按钮

<ul class="pager">   <li class="previous">     <?php previous_posts_link(__('← Previous', 'fenikso')); ?>   </li>   <li class="next">     <?php next_posts_link(__('Next →', 'fenikso')); ?>   </li> </ul> 

2. 面包屑导航

安装Breadcrumb NavXT插件

<?php if(function_exists('bcn_display')) : ?>   <!-- function_exists():判断函数是否存在 -->   <ul class="breadcrumb">     <?php bcn_display(); ?>     <!-- bcn_display():调用Breadcrumb NavXT插件,显示当前页面的导航面包屑 -->   </ul><!-- end .breadcrumb --> <?php endif; ?> 

七 页脚

1. 注册区域来显示小工具

function fenikso_widgets_init(){   register_sidebar(array(       'name' => __('Sidebar Bottom', 'fenikso'),  // 小工具名称       'id'   => 'sidebar-bottom',                 // 小工具ID       'description' => __('Sidebar Bottom', 'fenikso'),       'before_widget' => '<div id="%1$s" class="%2$s"><section>', // widget前的包裹标签       'after_widget'  => '</section></div>',      // widget后的包裹标签       'before_title'  => '<h3><span>',            // 标题前的包裹标签       'after_title'   => '</span></h3>',     )); } add_action('widgets_init', 'fenikso_widgets_init'); 

2. 边栏里的小工具的设计

<?php if(is_active_sidebar('sidebar-bottom')) : ?>   <!-- is_active_sidebar():如果有内容发布到sidebar_bottom这个区域上,则显示 -->   <?php dynamic_sidebar('sidebar-bottom'); ?> <?php endif; ?> 

3. 小工具的布局

安装Widget CSS Classes插件,为小工具添加class

4. 页脚

<footer id="footer">   <div class="container">     © <?php echo date('Y'); ?> <?php bloginfo('name'); ?>   </div> </footer><!-- end #footer --> <?php wp_footer(); ?> <!-- 很多插件依靠wp_footer()函数才能起作用,标准的WordPress主题这个函数是不可或缺的 --> 

七 文章

1. 文章内容的模板

新建single.php模板

<?php get_header(); ?> <div id="main-content">   <div class="container">     <div class="row">       <div class="span8"></div>       <div class="span4"></div>     </div>   </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> 

2. 文章内容

<?php if(have_posts()) : ?>   <?php while(have_posts()) : the_post(); ?>     <h1 class="article-title"><?php the_title(); ?></h1>     <!-- the_title():文章标题 -->       <footer class="content-meta">         <time><i class="icon-calendar"></i> <?php the_date(); ?></time>         <!-- the_date():文章发布日期 -->         <span><i class="icon-book"></i> <?php the_category(' '); ?></span>         <!-- the_category():文章所在分类,参数空格为分类之间的连接符 -->         <span><i class="icon-tags"></i> <?php the_tags(' ', ' '); ?></span>         <!-- the_tags():文章标签 -->         <span> <?php comments_popup_link('<i class="icon-comment"></i>', '<i class="icon-comment"></i> 1', '<i class="icon-comment"></i> %') ?></span>         <!-- comments_popup_link():文章评论 -->       </footer>       <div id="content">         <?php the_content(); ?>       </div><!-- end #content -->   <?php endwhile; ?> <?php endif; ?> 

3. 显示文章的自定义字段

<?php fenikso_the_meta(); ?>  <!-- fenikso_the_meta():在the_meta()函数输出自定义字段列表的基础上添加了css类 --> 
// functions.php /*  * 自定义字段列表的显示  */ function fenikso_the_meta() {    if ( $keys = get_post_custom_keys() ) {       echo "<dl class='dl-horizontal'>n";       foreach ( (array) $keys as $key ) {               $keyt = trim($key);                 if ( is_protected_meta( $keyt, 'post' ) )                       continue;               $values = array_map('trim', get_post_custom_values($key));               $value = implode($values,', ');               echo apply_filters('the_meta_key', "<dt>$key</dt><dd>$value</dd>n", $key, $value);       }       echo "</dl>n";     } } 

4. 文章的导航

<ul class="pager">   <li class="previous">     <?php previous_post_link('%link', '←' . '%title'); ?>     <!-- previous_post_link():上一篇文章 -->     <!-- %link:目标文章的链接 -->     <!-- %title:目标文章的标题 -->   </li>   <li class="next">     <?php next_post_link('%link', '%title' . '→'); ?>     <!-- next_post_link():下一篇文章 -->   </li> </ul><!-- end .pager --> 

八 评论

1. 评论的模板

新建comments.php文件,并在需要的地方使用comments_template();引入

// comments.php <section id="comments">   <h2>     <?php printf(       // _n():用来进行单复数编译的,常见于WordPress的评论功能模块,用来区分一条或多条评论       _n('“ %2$s ” comment %1$s',          '“ %2$s ” comments %1$s',          'fenikso'),       '<span class="badge badge-important">' . get_comments_number() . '</span>',       // 返回留言的数量       get_the_title()       // 文章的标题     ); ?>   </h2>   <!-- wp_list_comments():循环输出当前文章或页面每个评论的函数 -->   <?php wp_list_comments(array(     'avatar_size' => 64,   )); ?> </section> 

2. 重新设计评论列表

定义fenikso_comment()函数,并设置评论显示的格式

// functions.php => fenikso_comment(); /*  * 评论列表的显示  */ if ( ! function_exists( 'fenikso_comment' ) ) : function fenikso_comment( $comment, $args, $depth ) {   $GLOBALS['comment'] = $comment;   switch ( $comment->comment_type ) :     case 'pingback' :     case 'trackback' :     // 用不同于其它评论的方式显示 trackbacks 。   ?>   <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">     <p><?php _e( 'Pingback:', 'fenikso' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edit)', 'fenikso' ), '<span class="edit-link">', '</span>' ); ?>     </p>   <?php     break;     default :     // 开始正常的评论     global $post;    ?>   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">     <article id="comment-<?php comment_ID(); ?>" class="media comment">       <div class="pull-left">         <?php // 显示评论作者头像           echo get_avatar( $comment, 64 );         ?>       </div>       <?php // 未审核的评论显示一行提示文字         if ( '0' == $comment->comment_approved ) : ?>         <p class="comment-awaiting-moderation">           <?php _e( 'Your comment is awaiting moderation.', 'fenikso' ); ?>         </p>       <?php endif; ?>       <div class="media-body">         <h4 class="media-heading">           <?php // 显示评论作者名称               printf( '%1$s %2$s',               get_comment_author_link(),               // 如果当前文章的作者也是这个评论的作者,那么会出现一个标签提示。               ( $comment->user_id === $post->post_author ) ? '<span class="label label-info"> ' . __( 'Post author', 'fenikso' ) . '</span>' : ''             );           ?>           <small>             <?php // 显示评论的发布时间                 printf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',                 esc_url( get_comment_link( $comment->comment_ID ) ),                 get_comment_time( 'c' ),                 // 翻译: 1: 日期, 2: 时间                 sprintf( __( '%1$s %2$s', 'fenikso' ), get_comment_date(), get_comment_time() )               );             ?>           </small>         </h4>         <?php // 显示评论内容           comment_text();         ?>         <?php // 显示评论的编辑链接           edit_comment_link( __( 'Edit', 'fenikso' ), '<p class="edit-link">', '</p>' );         ?>         <div class="reply">           <?php // 显示评论的回复链接             comment_reply_link( array_merge( $args, array(               'reply_text' =>  __( 'Reply', 'fenikso' ),               'after'      =>  ' <span>↓</span>',               'depth'      =>  $depth,               'max_depth'  =>  $args['max_depth'] ) ) );           ?>         </div>       </div>     </article>   <?php     break;   endswitch; // end comment_type check } endif; 
// comments.php <!-- wp_list_comments():循环输出当前文章或页面每个评论的函数 --> <ol>   <?php wp_list_comments(array(     'callback' => 'fenikso_comment',   )); ?> </ol> 

3. 添加评论的表单

建立评论分页

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :  ?>   <!-- 满足两个条件,评论个数大于一个且设置了分页数量 -->   <ul class="pager">     <li class="previous">       <?php previous_comments_link( __( '← Older Comments', 'fenikso' ) ); ?>       <!-- 上一页评论 -->     </li>     <li class="next">       <?php next_comments_link( __( 'Newer Comments →', 'fenikso' ) ); ?>       <!-- 下一页评论 -->     </li>   </ul> <?php endif; ?> 

评论的参数

<?php   $comment_form_args = array(       // 添加评论内容的文本域表单元素     'comment_field'         => '<label for="comment" class="control-label">' .                                 _x( 'Comment', 'noun' ) .                                '</label>                                 <textarea id="comment" name="comment" cols="45" rows="5" class="span8" aria-required="true"></textarea>',       // 评论之前的提示内容     'comment_notes_before'  => ' ',     // 评论之后的提示内容     'comment_notes_after'   => ' ',     // 默认的字段,用户未登录时显示的评论字段     'fields'                => apply_filters( 'comment_form_default_fields', array(       // 作者名称字段         'author'                => '<label for="author" class="control-label">' .                                     __( 'Name', 'fenikso' ) .                                     '</label> ' .                                     '<div class="controls">' .                                     '<input id="author" name="author" type="text" value="' .                                      esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />' .                                      ( $req ? '<span class="required help-inline">*</span>' : '' ) .                                     '</div>',        // 电子邮件字段         'email'                 => '<label for="email" class="control-label">' .                                     __( 'Email', 'fenikso' ) .                                     '</label> ' .                                     '<div class="controls">' .                                     '<input id="email" name="email" type="text" value="' .                                      esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />' .                                      ( $req ? '<span class="required help-inline">*</span>' : '' ) .                                      '</div>',        // 网站地址字段     'url'                   => '<label for="url" class="control-label">' .                                   __( 'Website', 'fenikso' ) .                                   '</label>' .                                   '<div class="controls">' .                                   '<input id="url" name="url" type="text" value="' .                                    esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div>' ) ) ); ?> 

调用comment_form(),并传入参数

<?php comment_form($comment_form_args); ?> 

点击回复时移动回复框

// functions.php /*  * 脚本与样式  */ function fenikso_scripts_styles() {   global $wp_styles;   //  需要时加载回复评论的脚本文件   if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )     wp_enqueue_script( 'comment-reply' ); } add_action( 'wp_enqueue_scripts', 'fenikso_scripts_styles' ); 

九 右边栏

1. 右边栏

注册右边栏

// functions.php function fenikso_widgets_init(){   // 注册右边栏小工具   register_sidebar(array(     'name' => __('Sidebar Right', 'fenikso'),  // 小工具名称     'id'   => 'sidebar-right',                 // 小工具ID     'description' => __('Sidebar Right', 'fenikso'),     'before_widget' => '<div id="%1$s" class="%2$s"><section>', // widget前的包裹标签     'after_widget'  => '</section></div>',      // widget后的包裹标签     'before_title'  => '<div class="title-line"><h3>',            // 标题前的包裹标签     'after_title'   => '</h3></div>',   )); } add_action('widgets_init', 'fenikso_widgets_init'); 

新建右边栏文件sidebar-right.php

<div class="span4">   <aside id="sidebar-right">     <?php if(is_active_sidebar('sidebar-right')) : ?>       <!-- is_active_sidebar():如果有内容发布到sidebar-right这个区域上,则显示 -->       <?php dynamic_sidebar('sidebar-right'); ?>     <?php endif; ?>   </aside> </div> 

十 页面

1. 图像附件页面的模板-image.php

2. 页面内容的模板-page.php

新建full-page.php

<?php /*  * Template Name: Full Width    // 让WordPress识别模板  */ ?>  // 宽屏模板 <?php get_header(); ?> <div id="main-content">   <div class="container">     <?php if(have_posts()) : ?>       <?php while(have_posts()) : the_post(); ?>         <!-- the_title():文章标题 -->         <h1 class="article-title"><?php the_title(); ?></h1>         <!-- 文章主体内容 -->         <div id="content">           <?php the_content(); ?>         </div><!-- end #content -->         <!-- 面包屑导航 -->         <?php if(function_exists('bcn_display')) : ?>           <!-- function_exists():判断函数是否存在 -->           <ul class="breadcrumb">             <?php bcn_display(); ?>             <!-- bcn_display():显示当前页面的导航面包屑 -->           </ul><!-- end .breadcrumb -->         <?php endif; ?>         <!-- 评论模块 -->         <?php comments_template(); ?>       <?php endwhile; ?>     <?php endif; ?>   </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> 

3. 归档页面的模板-archive.php

新建archive.php文件并使用index.php文件代码

// 按照不同的分类特征进行分类归档 <h4 class="archives-title"> <?php     /* 查询第一个文章,这样我们就知道整个页面的作者是谁。      * 在下面我们使用 rewind_posts() 重置了一下,这样一会儿我们才能正确运行循环。      */     the_post(); ?> <?php     if ( is_day() ) :         printf( __( 'Daily Archives: %s', 'fenikso' ), '<span>' . get_the_date() . '</span>' );     elseif ( is_month() ) :         printf( __( 'Monthly Archives: %s', 'fenikso' ), '<span>' . get_the_date( _x( 'F Y', 'monthly archives date format', 'fenikso' ) ) . '</span>' );     elseif ( is_year() ) :         printf( __( 'Yearly Archives: %s', 'fenikso' ), '<span>' . get_the_date( _x( 'Y', 'yearly archives date format', 'fenikso' ) ) . '</span>' );     elseif ( is_category() ) :       printf( __( 'Category Archives: %s', 'fenikso' ), '<span>' . single_cat_title( '', false ) . '</span>' );     elseif ( is_tag() ) :       printf( __( 'Tag Archives: %s', 'fenikso' ), '<span>' . single_tag_title( '', false ) . '</span>' );     elseif ( is_author() ) :       printf( __( 'Author Archives: %s', 'fenikso' ), '<span>' . get_the_author() . '</span>' );     else :         _e( 'Archives', 'fenikso' );     endif; ?> <?php    /* 把循环恢复到开始,    * 这样下面的循环才能正常运行。    */   rewind_posts();  ?> </h4> 

3. 搜索结果模板-search.php

新建search.php文件

<?php printf( __( 'Search Results for: %s', 'fenikso' ), '<span>' . get_search_query() . '</span>' ); ?> 

十 结尾

1. 激活菜单项

安装Context Manager插件并创建规则

When these conditions match  :  in_category(7)&& is_single() Apply this rule  :  Emulate current page as a child but do not create a menu item. To these menu items  :  真实婚礼 

2. 最后整理

// 为文章和评论在 <head> 标签上添加 RSS feed 链接。 add_theme_support( 'automatic-feed-links' );  // 主题支持的文章格式形式。 // add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );  // 主题为特色图像使用自定义图像尺寸,显示在 '标签' 形式的文章上。 add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 650, 9999 ); 

翻译定义字符
安装插件Codestyling Localization(失败)

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注