Free the Internet
Across the Great Wall we can reach every corner in the world

欢迎来到《真香,30天做一套wordpress主题》系列文章,我们的目标是(没有蛀牙!)建立一套全新的wordpress主题,花上30天的时间闭关修炼,如果你看到的第一篇文章不是《基础框架搭建》,建议你关注我们(数字江湖异志录),从该系列的第一篇开始阅读。

我们将尽量保持文章的循序渐进和通俗易懂,请确保自己已经掌握了那一篇文章的全部内容时才选择跳过,不然可能会错过关键的信息噢~

这里我们假定你已经知晓了以下基础知识,这些基础知识对理解文章内容是至关重要的:

  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属性,只能把搜索小工具也给移除了,然后我们来手写一个自定义搜索小工具,这里我们为了偷懒直接从wordpress源文件里复制一个WP_Widget_Search修改使用。

第一步,引入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 &hellip;’‘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$instancearray‘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_instancearray‘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样式,大多数的小工具都直接美化好了,对于不能用的官方小工具,我们先直接屏蔽了

明天我们将稍加休整一下,完成页面的通用底部,实现顶部菜单的二级展开,做一些细节上的优化。

如果你喜欢这个系列的文章,赶快关注我们(数字江湖异志录)吧,不要错过后续的更多干货噢。

发表评论