WordPress主題theme1開發 · WordPress平臺的網站開發

【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(); ?> ~~~ ![](https://box.kancloud.cn/8201cb7226565b411b0413d64eaaa800_1555x833.png) 【9.WordPress Excerpt Tutorial】 ~~~ <p> <?php echo get_the_excerpt(); ?> <a href='<?php the_permalink(); ?>'>Read More »</a> </p> ~~~ ![](https://box.kancloud.cn/57e24e84166e9fe0bd28269c78742c31_639x157.png) 【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縮略圖： ~~~  <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> ~~~ ![](https://box.kancloud.cn/20aa660c3e3b9da30605d830e6f58f45_702x403.png) single.php縮略圖： ~~~ <?php the_post_thumbnail('banner-image'); ?> <?php the_content(); ?> ~~~ ![](https://box.kancloud.cn/28f9ca33b360ab949dd1cd7909c64189_1133x530.jpg) 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'); ~~~ ![](https://box.kancloud.cn/b8f97a7f379a53b090957720be4113df_396x88.png) ![](https://box.kancloud.cn/2e46dbdb43d15ab17d06e3818a73d449_488x131.png) ![](https://box.kancloud.cn/e74a39aee90223fb7af5eb80f08ff3a0_553x651.png) 【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' ); ~~~ ![](https://box.kancloud.cn/f73c07cbb3451189b898d6b587577d82_1642x792.jpg)