【1.WordPress Tutorial 1- Introduction】 WP介绍 观念： wordpress不是一个template建设平台，而是一个建站工具。wordpress不是建站的全部，只是一个可以选择的工具之一。 【2.How to Install WordPress】 安装WP 【3.WordPress Theme Tutorial (Part 1)】 WP必须组件： 1.index.php 2.style.css style.css介绍： ~~~ /* Theme name:主题 Author:作者 Author URL: 域名 Version:版本 */ ~~~ 【8.WordPress Archive Tutorial (archive.php)】 archive.php ~~~ <?php get_header(); if(have_posts()) : ?> <h2><? if( is_category()){ single_cat_title(); }elseif(is_tag()){ single_tag_title(); }elseif(is_author()){ the_post(); echo 'Author Archives:'. get_the_author(); rewind_posts(); }elseif(is_day()){ echo 'Daily Archives:' .get_the_date(); }elseif(is_month()){ echo 'Daily Archives:' .get_the_date('F Y'); }elseif(is_year()){ echo 'Daily Archives:' .get_the_date('Y'); }else{ echo 'Archives'; } ?></h2> <?php while(have_posts()) : the_post(); ?> <article class="post"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="post-info"><?php the_time('F jS, Y g:i a');?> | by <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a> | Posted in <?php $categories = get_the_category(); $separator = ", "; $output = ''; if($categories){ foreach ($categories as $category){ $output .= '<a href="' . get_category_link($category->term_id). '">'. $category->cat_name . '</a>'. $separator; } echo trim($output, $separator); } ?> </p> <?php the_excerpt(); ?> </article> <?php endwhile; else : echo '<p>No content found</p>'; endif; get_footer(); ?> ~~~  【9.WordPress Excerpt Tutorial】 ~~~ <p> <?php echo get_the_excerpt(); ?> <a href='<?php the_permalink(); ?>'>Read More &raquo;</a> </p> ~~~  【10.WordPress Featured Image Tutorial】待調整 ***123 创建特色图： 1.function.php加入如下代码： ~~~ //Theme setup function learningWordPress_setup(){ //Navigation Menus 注册菜单功能 register_nav_menus(array( 'primary' => __( 'Primary Menu' ), 'footer' => __( 'Footer Menu' ), )); //add featured image support add_theme_support('post-thumbnails'); } add_action('after_setup_theme','learningWordPress_setup'); ~~~ index.php縮略圖： ~~~ <!-- post-thumbnail --> <div class="post-thumbnail"> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('small-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> ~~~  single.php缩略图： ~~~ <?php the_post_thumbnail('banner-image'); ?> <?php the_content(); ?> ~~~  style.css ~~~ /* Image Styles*/ img{ max-width:100%; height:auto; } .has-thumbnail{ position:relative; padding-left:200px; } .post-thumbnail{ position:absolute; top:0; left:0; } ~~~ 【12.WordPress get_template_part Tutorial】 wordpress获取content.php文件的代码： get_template_part('content'); 【13.WordPress Post Formats Tutorial】 标准 日志 相册 链接 content.php content-aside.php content-gallery.php content-link.php get_template_part('content', get_post_format()); 【14.WordPress Widgets Tutorial】 ~~~ //add our widget locations function ourWidgetsInit(){ register_sidebar( array( 'name' => 'Sidebar', 'id' => 'sidebar1', 'before_widget' => '<div class="widget-item">', 'after_widget' => '</div>', 'before_title' => '<h4 class="my-special-class">', 'after_title' =>'</h4>' )); register_sidebar( array( 'name' => 'Footer Area 1', 'id' => 'footer1' )); register_sidebar( array( 'name' => 'Footer Area 2', 'id' => 'footer2' )); register_sidebar( array( 'name' => 'Footer Area 3', 'id' => 'footer3' )); register_sidebar( array( 'name' => 'Footer Area 4', 'id' => 'footer4' )); } add_action('widgets_init', 'ourWidgetsInit'); ~~~    【15.WordPress Custom Homepage Tutorial】 创建front-page.php，wordpress会自动获取为主页。 【16.WordPress Custom Loop WP_Query Tutorial】 【17.WordPress Customize (Color Picker) Tutorial】 加入主题自定义修改css颜色功能，在functions加入如下代码： ~~~ // customize appearance options function theme1_customize_register($wp_customize){ $wp_customize->add_setting('lwp_link_color', array( 'default' => '#006ec3', 'transport' => 'refresh', )); $wp_customize->add_setting('lwp_btn_color', array( 'default' => '#006ec3', 'transport' => 'refresh', )); $wp_customize->add_section('lwp_standard_colors', array( 'title' => __('standard colors', 'theme1'), 'priority' => 30, )); $wp_customize->add_control(new wp_customize_color_control( $wp_customize, 'lwp_link_color_control', array( 'label' => __("Link Color", 'theme1'), 'section' => 'lwp_standard_colors', 'settings' => 'lwp_link_color', ))); $wp_customize->add_control(new wp_customize_color_control( $wp_customize, 'lwp_btn_color_control', array( 'label' => __("Button Color", 'theme1'), 'section' => 'lwp_standard_colors', 'settings' => 'lwp_btn_color', ))); } add_action('customize_register','theme1_customize_register'); // output customize css function theme1_customize_css(){ ?> <style type="text/css"> a:link, a:visited{ color: <?php echo get_theme_mod('lwp_link_color'); ?>; } .site-header nav ul li.current-menu-item a:link, .site-header nav ul li.current-menu-item a:visited, .site-header nav ul li.current-page-ancestor a:link, .site-header nav ul li.current-page-ancestor a:visited{ background-color:<?php echo get_theme_mod('lwp_link_color'); ?>; } div.hd-search #searchsubmit{ background-color: <?php echo get_theme_mod('lwp_btn_color'); ?>; } </style> <?php } add_action('wp_head', 'theme1_customize_css' ); ~~~