网站外观（界面）初步定制

本篇文章以 wordpress 内置主题 “twentysixteen” 为例介绍网站外观的基本定制方法。wordpress 有大量的主题供选择，不同主题的界面区别也比较大，因此本片文章主要针对比较通用、共性的需求进行定制，适合大多数主题。另外，不同主题都有一些客户化的定制功能（无需程序代码），可以参考相关主题的功能说明对界面进行修改。

一个网站是由不同的页面（Page）组成的，每个页面又是由不同的功能区块构成的，有些功能区块是公用的，比如：页头、主菜单、面包屑、侧边栏、页脚等等；有些区块是每个页面独有的，比如：页面内容、页面相关内容、页面相关的菜单/侧边栏等等。本片文章从页头、主菜单、页头幻灯片、面包屑、页脚、外观样式几个方面进行定制介绍。

一、页头

页头一般由网站图标、题头、主菜单、幻灯片、面包屑等部分组成，“twentysixteen” 主题的页头修改可以在 wordpress 后台管理工具的 “外观” 子菜单中进行相关的设置来满足一定的定制需求，而且无需程序代码，而且这些修改都比较直观，所见即所得，非常方便，这里就不做过多的介绍。这里主要介绍主菜单中增加 “登入|登出” 子菜单，增加幻灯片和面包屑区块三个方面做详细说明。

1、主菜单中增加 “登入/登出” 子菜单
登入 wordpress 后台管理工具，选择 “外观” – “主题编辑” 子菜单，在右边主题文件列表里选择模板函数（functions.php），左边的文本框里就会显示对应的模板函数代码，滚动代码到末尾，增加下面的代码：

function wpsites_loginout_menu_link( $menu ) {
    $loginout = my_wp_loginout($_SERVER['REQUEST_URI']);
    $menu .= $loginout;
    return $menu;
}
function my_wp_loginout($redirect = '') {
    if ( ! is_user_logged_in() )
       $link = '<li class="nav-menu menu-item"><a href="' . esc_url( wp_login_url($redirect) ) . '"><i class="_mi _before fa fa-sign-in" aria-hidden="true" style="font-size:1.3em;"></i><span>' . __('Log in') . '</span></a></li>';
    else
       $link = '<li class="nav-menu menu-item"><a href="' . esc_url( wp_logout_url($redirect) ) . '"><i class="_mi _before fa fa-sign-out" aria-hidden="true" style="font-size:1.3em;"></i><span>' . __('Log out') . '</span></a></li>';
       return apply_filters( 'loginout', $link );
}
add_filter( 'wp_nav_menu_items','wpsites_loginout_menu_link' );

2、增加幻灯片区块
灯片片播放功能推荐使用 “MetaSlider” 插件，安装并启用该插件后，在后台管理工具中选择 “MetaSlider” 菜单，创建相应的幻灯片并选择相应的播放主题后，在页面右下位置找到 “如何使用（How to Use）” 里面 [metaslider（空格）id=”xxx”] 的部分并记录下来。接着选择 “外观” – “主题编辑” 子菜单，在右边主题文件列表里选择主题页眉（header.php），滚动到代码底部，增加下面的代码：

...
</header><!-- .site-header -->
<?php echo do_shortcode('[metaslider（空格）id="xxx"]');?>
//仅增加中间这行代码，上下两行代码为了说明位置，其中“xxx”是前面提到的要记录的内容，注：（空格）部分用实际的空格代替。
<div id="content" class="site-content">
...

3、增加面包屑功能
面包屑功能推荐使用 Breadcrumb Trail 插件，安装并启用该插件后，同样的在后台管理工具中选择 “外观” – “主题编辑” 子菜单，然后在右边主题文件列表里选择主题页眉（header.php），在最后一行增加下面的代码：

<?php if ( function_exists( 'breadcrumb_trail' ) ) breadcrumb_trail(); ?><!-- display breadcrumb -->

二、页脚

页脚一般由网站名称、年份、版权等信息组成，修改方法是在后台管理工具中选择 “外观” – “主题编辑” 子菜单，并在右边主题文件列表里选择主题页脚（footer.php），滚动代码到尾部，增加（修改）下面的代码：

...
<div class="site-info">
<?php do_action( 'twentysixteen_credits' );?>
<span class="site-title">© <?php the_time('Y');?><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' );?></a></span><!-- 只修改这行代码 -->
<?php
 if ( function_exists( 'the_privacy_policy_link' ) ) {
  the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
 }
?>
...

三、外观样式修改

一般情况下缺省的外观样式需要修改以满足不同网站个性化的要求，wordpress 后台管理工具的 “外观” – “自定义” – “额外CSS” 功能提供了修改网站缺省样式的统一入口，可以在这里使用 CSS 代码覆盖网站缺省的样式，例如：

body:not(.custom-background-image):before, body:not(.custom-background-image):after {
height: 0px;
}
body {
background: white;
}
.site {
box-shadow: 0px 10px 30px rgba(0,0,0,0.3);
}

以上就是对网站进行初步定制的方法，比较具有共通性，有些主题可能已经提供了相应的功能（比如面包屑），因此可以根据各自的情况有选择地使用，更加深入、复杂和个性化的定制会在后续的文章里做介绍。