我们将只管即便保持文章的循规蹈矩和普通易懂，请确保自己已经节制了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下根本知识，这些根本知识对理解文章内容是至关主要的：
1. HTML/CSS/JS根本
2. PHP根本
3. 如何利用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上根本知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
伟大的侧边栏本日我们开始制作主题的侧边栏（sidebar），wordpress可以把小工具（widgets）放到侧边栏里，我们先为主题开启侧边栏功能，在functions.php里添加如下代码：
function my_sidebar_registration() { register_sidebar(array( 'name' => __( 'Sidebar'), 'id' => 'sidebar-1', ));}add_action( 'widgets_init', 'my_sidebar_registration' );
我们就可往后台看到官方默认的一些widgets了，当然，我们还会须要自定义widgets，但是现在，我们先对这些默认widgets供应支持：
看上去有点多，不过没紧要，只要把小工具的通用容器设计好了，很多内容都是重复的。我们首先配上一个Categories小工具，然后在首页侧边栏的位置显示出来。
<aside class="sidebar"> <?php dynamic_sidebar('my-sidebar'); ?> </aside>
这里对付官方的小工具，我们不去动它的DOM构造，只通过CSS进行样式描述就可以了：
还记得我们的my_sidebar_registration吗？我们在里面把一些官方的小工具在我们的主题里去掉，比如image audio video这些，会毁坏AMP的规则，其它的暂时没用到的我们也屏蔽了：
unregister_widget('WP_Widget_Media_Audio'); // remove audio unregister_widget('WP_Widget_Media_Video'); // remove video unregister_widget('WP_Widget_Media_Image'); // remove image unregister_widget('WP_Widget_Media_Gallery'); // remove galley unregister_widget('WP_Widget_Calendar'); // remove calendar unregister_widget('WP_Nav_Menu_Widget'); // remove nav menu unregister_widget('WP_Widget_Pages'); // remove pages menu unregister_widget('WP_Widget_RSS'); // remove rss unregister_widget('WP_Widget_Text'); // remove text unregister_widget('WP_Widget_Tag_Cloud'); // remove tag cloud
鉴于我们须要amp-form担保页面的amp属性，只能把搜索小工具也给移除了，然后我们来手写一个自定义搜索小工具，这里我们为了偷
第一步，引入amp-form文件(header.php)：
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
第二步，建立自定义搜索小工具类(functions.php)：
class my_search extends WP_Widget { public function __construct() { $widget_ops = array( 'classname' => 'widget_search', 'description' => __( 'A search form for your site.' ), 'customize_selective_refresh' => true, ); parent::__construct( 'search', _x( 'Search', 'Search widget' ), $widget_ops ); } public function widget( $args, $instance ) { $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; $title = apply_filters( 'widget_title', $title, $instance, $this->id_base ); echo $args['before_widget']; if ( $title ) { echo $args['before_title'] . $title . $args['after_title']; } echo '<form target="_top" role="search" method="get" class="search-form" action="/"> <input type="text" class="search-field" placeholder="' . esc_attr_x( 'Search …', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" /> <button type="submit" class="search-submit"></button> </form>'; echo $args['after_widget']; } public function form( $instance ) { $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) ); $title = $instance['title']; ?> <p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /></label></p> <?php } public function update( $new_instance, $old_instance ) { $instance = $old_instance; $new_instance = wp_parse_args( (array) $new_instance, array( 'title' => '' ) ); $instance['title'] = sanitize_text_field( $new_instance['title'] ); return $instance; }}
这里我们须要知道，__construct布局函数对这个小工具的基本信息进行了描述，form方法定义了后台添加小工具时看到的选项，update方法定义了更新小工具设置时数据的更新，widget方法定义了小工具在前台的展现构造。
第三步，注册这个小工具：
register_widget('my_search');
末了我们就可以在后台利用我们自定义的搜索小工具了，添加后到页面上看看：
这里有一个要特殊把稳的地方，amp-form对action里的url是有哀求的，虽然可以是完全的url也可以是绝对路径，但是终极利用的action url必须是https协议的，否则无法通过amp checker的检测。
总结和预报
本日我们完成了侧边栏的开拓，并且创建了属于我们的自定义小工具，通过定义通用css样式，大多数的小工具都直接美化好了，对付不能用的官方小工具，我们先直接屏蔽了
来日诰日我们将稍加休整一下，完成页面的通用底部，实现顶部菜单的二级展开，做一些细节上的优化。
如果你喜好这个系列的文章，赶紧关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。
