wordpress网页设计-header模板开发

by zhuzhenPosted on

♦ 注册菜单位置

// functions.php
function example3_setup() {
    register_nav_menus(
        array(
            'primary-menu' => __( 'Primary Menu', 'example3' ),
            'footer-menu' => __( 'Footer Menu', 'example3' )
        )
    );
}
add_action( 'after_setup_theme', 'example3_setup' );

进入后台菜单，创建菜单对象，并绑定菜单位置：

菜单位置和菜单对象区别

前者定义菜单位置，后者创建和管理菜单内容，两者结合才能在网站上实现完整的导航菜单功能。之所以要菜单位置和菜单内容，主要是起到了解耦作用。举个例子：我创建了菜单内容：菜单1和菜单2，菜单1内容既可以绑定主菜单位置，也可以绑定底部菜单位置。

♦ 头部区域布局样式

◆ header栏总体设置

最大宽度1640px。元素的显示模式设置为弹性布局（Flexbox），排列方向为水平方向（从左到右），第一个项目会紧贴容器的起始边缘，最后一个项目会紧贴容器的结束边缘，项目之间的间隔会均匀分布，实现两端对齐的效果。垂直方向上居中显示，使布局更加美观和整齐。相关css如下：

/*当 box-sizing 的值为 border-box 时，元素的宽度和高度包含了内容区、内边距和边框，但不包含外边距（margin）。*/
.site {
    box-sizing: border-box;
    padding: 0 20px;
    width: 100%;
}
  
  hgroup.site{
        max-width: 1640px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

◆导航菜单中的列表项和链接设置为水平排列

    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
        font-size: 15px;
        font-size: 1.071428571rem;
    }

display: inline-block;该属性用于设置元素的显示方式。inline-block 表示元素会像内联元素一样在一行内显示，但同时又具有块级元素的特性，可以设置宽度、高度、内外边距等。对于导航菜单来说，使用 inline-block 可以让列表项及其链接在一行内依次排列，形成水平导航的效果。

◆ logo元素水平居中

logo放置父元素容器中间，考虑logo自身元素宽度，在向左移动logo宽度，达到居中效果。

    body.page-template-homepage hgroup .site-logo{
        position: absolute;
        left: calc(50% - 63px);
    }

这段 CSS 代码的整体作用是：当页面的 <body> 标签具有 page-template-homepage 类名时，将 <hgroup> 标签内的 .site-logo 元素进行绝对定位，并且将其左边缘定位到父元素宽度的 50% 位置再向左偏移 63 像素，通常是为了实现该元素在父元素中水平居中的效果。

◆ 在浅色导航背景下将 logo 变黑以提高对比度增强视觉

logo是svg文件，默认是白色。还要导航里的菜单对象也是白色字体。统一提黑，设置如下：

    /*字体提黑*/
    .light-nav .main-navigation li a{
        color: #000;
    }
    /*logo提黑*/
    .light-nav #masthead .site-logo{
        filter: brightness(0);
    }
<div class="light-nav">
    <header id="masthead">
        <a class="site-logo" href="#">
            <img src="logo.png" alt="Site Logo">
        </a>
    </header>
</div>

在这个 HTML 结构中，由于 .site-logo 元素是 #masthead 的后代，而 #masthead 又是 .light-nav 的后代，所以该样式规则会应用到这个 .site-logo 元素上。

◆ 避让管理工具栏

上图所示，当用户登录网站后台后，在页面顶部出现的一条横向工具栏。它提供了一系列快捷链接和操作选项，使用户无需进入后台管理界面，就能快速访问和管理网站的各种功能，例如发布新文章、查看评论、访问后台仪表盘等。但同时也会把正常网页显示一部分被遮住。所以需要进行避让管理工具栏设置。只需css样式设置即可，代码如下：

    .site-header{
        position: fixed;
        z-index: 99;
        top:0;
        background-color: transparent;
    }
    /*有管理工具栏时，进行避让*/
    .admin-bar .site-header{
        top:32px;
    }

◆ 鼠标滚动一定距离，实现浮动顶部导航栏的效果

思路：设置鼠标滚动监听事件，滚动设定距离，通过改变行高，字体颜色等，实现浮动导航效果

    /*鼠标滚动一定距离，改变行高为4，实现浮动导航效果*/
    .site-header.scroll .main-navigation li a {
        line-height: 4;
        color:#000
        /*color: #333;*/
    }

    /*鼠标滚动小于设定距离，保持原来行高为6.5*/
    .main-navigation li a {
        display: block;
        color: #fff;
        /*text-transform: uppercase;*/
        white-space: nowrap;
        -webkit-transition:0.2s all;
        transition:0.2s all;
        background-color: transparent;
        padding: 0 28px;
        line-height: 6.5;
    }

♦ 相关wp函数使用

◆body_class()

<body <?php body_class( $custom_classes); ?> >

body_class() 是 WordPress 提供的一个内置函数，用于根据当前页面的特征自动生成一系列类名，并将这些类名输出到 <body> 标签的 class 属性中。这些特征涵盖页面类型（如首页、单篇文章页、存档页等）、文章分类、使用的模板文件等。这些类名能够用来标识页面的各种特性，还方便开发者借助 CSS 和 JavaScript 对特定页面或者页面类型进行样式设置与交互处理。

CSS 样式定制：开发者能够依据 <body> 标签上的类名，为不同类型的页面应用不同的 CSS 样式。例如，为首页设置独特的背景颜色：

body.home {
    background - color: #f5f5f5;
}

JavaScript 交互控制：在 JavaScript 里，可以根据 <body> 标签的类名来判断当前页面类型，进而执行不同的交互逻辑。例如，在首页执行特定的轮播图初始化操作：

if (document.body.classList.contains('home')) {
    // 初始化首页轮播图
    initHomeSlider();
}

◆get_template_part()

<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

get_template_part() 是 WordPress 提供的一个内置函数，它的主要作用是加载并包含指定的模板文件。这个函数可以将主题中的代码模块化，把一些重复使用的代码片段封装到单独的文件中，提高代码的可维护性和可复用性。

第一个参数：指定模板文件所在的目录和文件名的基础部分。在 get_template_part( 'template-parts/header/header', 'image' ); 中，'template-parts/header/header' 表示要查找的模板文件位于主题目录下的 template-parts/header 文件夹中，并且文件名的基础部分是 header。

第二个参数：（可选）指定模板文件的变体名称。在这个例子里，'image' 就是变体名称。WordPress 会先尝试查找名为 header-image.php 的文件，如果找到就加载该文件；若未找到，则会尝试加载基础文件名对应的文件，即 header.php。

◆wp_body_open();

在 WordPress 里，动作钩子是一种特殊的函数，允许开发者在特定的执行点插入自定义代码，从而扩展或修改 WordPress 的默认行为。wp_body_open 这个动作钩子会在 HTML 文档的 <body> 标签刚打开之后立即执行。

<?php wp_body_open(); ?>

使用场景

添加自定义脚本或样式：开发者可以利用 wp_body_open 钩子在页面的 <body> 标签打开后立即加载特定的 JavaScript 脚本或 CSS 样式。例如，某些统计脚本需要在页面开始加载时就启动，或者添加一些只在页面主体开始时生效的样式。

// 在 wp_body_open 钩子中添加自定义脚本
function custom_script_on_body_open() {
    echo '<script>console.log("页面主体开始加载啦！");</script>';
}
add_action( 'wp_body_open', 'custom_script_on_body_open' );

实现特定功能逻辑：比如进行用户跟踪、权限检查等操作。当用户进入页面时，检查用户的登录状态或权限级别，根据不同的情况执行相应的操作。

// 在 wp_body_open 钩子中检查用户登录状态
function check_user_login_on_body_open() {
    if ( ! is_user_logged_in() ) {
        // 执行未登录用户的操作，例如跳转到登录页面
        wp_redirect( wp_login_url() );
        exit;
    }
}
add_action( 'wp_body_open', 'check_user_login_on_body_open' );

增强页面加载体验：例如添加一些动画效果、提示信息等，在页面主体开始加载时给用户更好的视觉和交互体验。

♦ Seo优化

<head>
<link rel="profile" href="https://gmpg.org/xfn/11">

XFN 规范为社交关系的标记提供了一套统一的语义。没有这个链接，网页的社交关系标记就缺乏明确的语义定义，不同的开发者可能会使用不同的方式来表示相同的关系，导致信息的不一致性和难以理解。不过，对于普通用户浏览网页而言，没有这个标签不会影响网页的基本显示和功能，它主要影响的是搜索引擎、社交网络爬虫等对网页社交关系信息的解析和利用。

♦ 对不同菜单项对应页面，应用特定CSS 样式

<?php
    // 引入全局的 $wp 变量
    global $wp;
    // 获取当前激活的菜单项
    $menu_items = wp_get_nav_menu_items('primary-menu'); // 替换 'primary-menu' 为你的菜单位置名称
    $current_url = home_url( add_query_arg( array(), $wp->request ) );
    $current_class = '';
    if ($menu_items) {
        foreach ($menu_items as $menu_item) {
            if ($menu_item->url === $current_url) {
                $current_class = sanitize_html_class( strtolower( str_replace(' ', '-', $menu_item->title) ) );
                break;
            }
        }
    }
    // 合并自定义类名
    $custom_classes = 'light-nav' . ( $current_class ? ' ' . $current_class : '' );
?>
...
<body <?php body_class( $custom_classes); ?> >

代码虽然看起来复杂，但它对于实现页面样式的定制、差异化以及与 JavaScript 的交互都非常有帮助，是 WordPress 主题开发中一个实用的技巧。

生成唯一且合法的 CSS 类名

唯一性：每个菜单项的标题通常是不同的，通过将菜单项标题转换为类名，可以为每个激活的菜单项生成一个唯一的 CSS 类名。这使得开发者能够针对不同的菜单项对应的页面，应用特定的 CSS 样式。例如，当用户访问 “关于我们” 页面时，通过这个类名可以为该页面设置独特的背景颜色、字体样式等。

合法性：HTML 类名有一定的命名规则，不能包含特殊字符和空格。str_replace(' ', '-', $menu_item->title) 这部分代码将菜单项标题中的空格替换为连字符 -，strtolower() 函数将标题转换为小写，而 sanitize_html_class() 函数则进一步清理字符串，去除所有不符合 HTML 类名规范的字符，确保生成的类名是合法的。例如，如果菜单项标题是 “Our Services!”，经过处理后会变成 our-services，这是一个符合 HTML 规范的类名。

实现页面样式的差异化

在网站设计中，不同页面可能需要不同的视觉效果。通过为每个激活的菜单项对应的页面添加唯一的 CSS 类名，可以在 CSS 文件中为这些类名编写特定的样式规则，实现页面样式的差异化。以下是一个简单的示例：

body.about-us {
    background-color: #f5f5f5;
    color: #333;
}

body.contact-us {
    background-color: #eaeaea;
    color: #666;
}

在这个示例中，about-us 和 contact-us 就是根据菜单项标题生成的类名，通过为这些类名设置不同的背景颜色和文字颜色，实现了不同页面的样式区分。

 便于 JavaScript 操作

除了 CSS 样式定制，生成的类名还可以用于 JavaScript 操作。例如，开发者可以使用 JavaScript 根据这些类名来动态修改页面元素的属性、添加交互效果等。以下是一个简单的 JavaScript 示例：

// 获取 body 元素
const bodyElement = document.querySelector('body');

// 检查 body 元素是否包含特定的类名
if (bodyElement.classList.contains('about-us')) {
    // 如果是关于我们页面，执行特定操作
    const aboutSection = document.querySelector('.about-section');
    aboutSection.style.display = 'block';
}

在这个示例中，通过检查 <body> 标签的类名，判断当前页面是否为 “关于我们” 页面，如果是，则显示特定的元素。

代码文件：header.php

<?php
    // 引入全局的 $wp 变量
    global $wp;
    $current_class1 = array( 'light-nav', 'class2' );;
    // 获取当前激活的菜单项
    $menu_items = wp_get_nav_menu_items('primary-menu'); // 替换 'primary-menu' 为你的菜单位置名称
    $current_url = home_url( add_query_arg( array(), $wp->request ) );
    $current_class = '';

    if ($menu_items) {
        foreach ($menu_items as $menu_item) {
            if ($menu_item->url === $current_url) {
                $current_class = sanitize_html_class( strtolower( str_replace(' ', '-', $menu_item->title) ) );
                break;
            }
        }
    }
    // 合并自定义类名
    $custom_classes = 'light-nav page-template-homepage' . ( $current_class ? ' ' . $current_class : '' );
?>
<!doctype html>
<html lang="<?php language_attributes(); ?>">
<head>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?2a5098a2621490de12c934c9e1ae0c1e";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <title><?php echo get_bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class( $custom_classes); ?> >
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <hgroup class="site">

        <?php get_template_part( 'template-parts/header/header', 'image' ); ?>

        <?php if ( has_nav_menu( 'primary-menu' ) ) : ?>
            <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
        <?php endif; ?>

    </hgroup>
</header><!-- #masthead -->