wordpress主题制作教程:制作网站头部header

2017年12月9日13:48:57 发表评论 30

        首先我们来了解下wordpress主题基本的目录,一定得有index.php和style.css文件,我们现在就先不拆分为header.php,footer.php,sidebar.php,comment.php了,现在要讲的是制作网站头部header区域,我们找到之前下载的前端页面,把里面的里面的文件放进一个目录中,把css里面文件放到要目录,并且取一个主题名称放到wordpress目录下的\wp-content\themes中,并把.html的后辍改成.php。就如下图这样:

wordpress主题制作教程:制作网站头部header

我们先把完成后的代码贴出来,之后我们再详细讲解下

静态头部代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>猿梦|钟储兵-关注web全栈开发和seo优化的个人博客</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_484804_8oa1lynvj97fogvi.css">
</head>

<body>
    <!-- 头部 -->
    <div>
        <!-- 导航 -->
        <div>
            <!-- logo -->
            <a href="#"><img src="img/logo.svg" alt=""></a>
            <!-- 菜单 -->
            <div>
                <ul>
                    <div>
                        <span><i class="iconfont icon-x"></i></span>
                        <input placeholder type="text">
                        <span><i class="iconfont icon-sousuo"></i></span>
                    </div>
                    <li><a href="#">首页</a></li>
                    <li>
                        <a href="#">前端技术</a>
                        <ul>
                            <li><a href="#">H5/CS3</a></li>
                            <li><a href="#">JS/Jquery</a></li>
                            <li><a href="#">BootStrap</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">后端技术</a>
                        <ul>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">Python</a></li>
                            <li><a href="#">NodeJs</a></li>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">Python</a></li>
                            <li><a href="#">NodeJs</a></li>
                        </ul>
                    </li>
                    <li><a href="#">运营技术</a></li>
                    <li><a href="#">福利资源</a></li>
                    <li><a href="#">猿梦生活</a></li>
                    <li><a href="#"><i class="iconfont icon-sousuo"></i></a></li>

                </ul>
            </div>
            <!-- 登录 -->
            <a class="fr login" href="#"><i class="iconfont icon-touxiang"></i>登录</a>
        </div>
    </div>
    <!-- 头部END -->

修改为动态头部代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<!-- seo关键词和描述 -->
<?php if (is_home() || is_front_page())
    {
    $description = "web前端,web后端,seo优化,网络运营,猿梦日记";
    $keywords = "钟储兵博客,是一个专注web全栈开发和seo优化的个人博客,主要涵盖web前后端,网络运营,seo优化,生活日记和网络技巧等";
    }
    elseif (is_category())
    {
    $description = strip_tags(trim(category_description()));
    $keywords = single_cat_title('', false);
    }
    elseif (is_tag())
    {
    $description = sprintf( __( '与标签 %s 相关联的文章列表'), single_tag_title('', false));
    $keywords = single_tag_title('', false);
    }
    elseif (is_single())
    {
     if ($post->post_excerpt) {$description = $post->post_excerpt;} 
     else {$description = mb_strimwidth(strip_tags($post->post_content),0,110,"");}
    $keywords = "";
    $tags = wp_get_post_tags($post->ID);
    foreach ($tags as $tag ) {$keywords = $keywords . $tag->name . ", ";}
    }
    elseif (is_page())
    {
    $keywords = get_post_meta($post->ID, "keywords", true);
    $description = get_post_meta($post->ID, "description", true);
    }
?>
<meta name="keywords" content="<?php echo $keywords ?>" />
<meta name="description" content="<?php echo $description?>" />


<!-- seo标题 -->
<?php if ( is_home() ) { ?><title><?php bloginfo('name'); ?>-<?php bloginfo('description'); ?></title><?php } ?>
<?php if ( is_search() ) { ?><title>搜索结果-Search Results-<?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_single() ) { ?><title><?php echo trim(wp_title('',0)); ?>-<?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_page() ) { ?><title><?php echo trim(wp_title('',0)); ?>-<?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_category() ) { ?><title><?php single_cat_title(); ?>-<?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_month() ) { ?><title><?php the_time('F'); ?>-<?php bloginfo('name'); ?></title><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><title><?php single_tag_title("", true); ?>-<?php bloginfo('name'); ?></title><?php }?> <?php } ?>


<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/reset.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_484804_8hhprms3hyjbgldi.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">




</head>
<body>
<!-- 头部 -->
    <div class="header">
        <!-- 导航 -->
        <div class="nav">
            <!-- logo -->
            <a class="logo" href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt=""></a>
            <!-- 菜单 -->
            <div class="menu-box">
          
                <?php wp_nav_menu(array( 'theme_location'   =>'primary')); ?>

            </div>
            <!-- 登录 -->
            <a class="fr login" href="#"><i class="iconfont icon-touxiang"></i>登录</a>
        </div>
    </div>
    <!-- 头部END -->


这里我们用到了wordpress引入文件的方法和部分显示函数的调用。

引入CSS,js,引入图片,引入字体,图标都不能使用相对路径,我们要用WP自带的函数” get_template_directory_uri() “来获得主题的目录,然后通过php echo输出。

引用css :<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

引入js:<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.2.1.min.js"></script>

引入图片: <img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="">

wordpress默认的title是固定的,不利于seo优化,我们利用wordpress和条件标签来进一步改进title,下面是判断语句,用到的函数有:

条件函数

  1. is_home() :判断是否是wordpress首页

  2. is_search() : 判断是否搜索页

  3. is_single() :判断是否文章页

  4. is_page():判断是否单页面

  5. is_category():判断是否分类页

  6. is_month():判断是否存档页

  7. is_tag():判断是否标签页

显示博客信息函数:

具体用法:<?php bloginfo($show); ?>

  • $show代表的是字符串,需要输出的信息的关键词,默认输出的是name

  • name : 返回worpdress站点标题,就是后台设置>常规中的”站点标题”

  • description : 返回worpdress站点副标题,就是后台设置>常规中的”副标题”

  • wpurl : 返回worpdress 网站的URL,就是后台设置>常规中的”站点地址”,可以用site_url()来替代

  • charset : 返回页面和feed的编码

  • adnub_email : 返回网站后台常规中设置的“电子邮件地址”

  • version : 返回网站wordpress版本

  • language : 返回wordpress使用的语言

优化博客的标题(title)、关键词(keywords)和描述(description)

调用wordpress菜单,如果没指定调用菜单名 ,则默认第一个:

<?php wp_nav_menu(array( 'theme_location'   =>'primary')); ?>

在wp-includes/nav-menu-templates.php 文件中可以修改菜单的各种默认值,我的要加个搜索框,研究了好久再找到这个默认给它加上去了:

$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => false,
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s<li class="search-btn"><a href="#"><i class="iconfont icon-sousuo"></i></a></li></ul>',
	'depth'           => 0,
	'walker'          => ''
);

先大致的说下这些属性的意思吧:

$theme_locaton:(字符串)(可选)

默认值: None

用于在调用导航菜单时指定注册过的某一个导航菜单名,如果没有指定,则显示第一个。

$menu:(字符串)(可选)

默认值: None

使用导航菜单的名称调用菜单,可以是 id, slug, name (按顺序匹配的) 。

$container:(字符串)(可选)

默认值: div

ul 父节点(这里指导航菜单的容器)的标签类型,只支持div 和 nav 标签, 如果是其它值, ul 父节点的标签将不会被显示。也可以用false(container => false)去掉ul父节点标签。

$container_class:(字符串)(可选)

默认值: menu-{menu slug}-container

ul 父节点的 class 属性值。

$container_id:(字符串)(可选)

默认值: None

ul 父节点的 id 属性值。

$menu_class:(字符串)(可选)

默认值: menu

ul 节点的 class 属性值。

$menu_id:(字符串)(可选)

默认值: menu slug, 自增长的

ul 节点的 id 属性值。

$echo:(布尔型)(可选)

默认值: true (直接显示)

确定直接显示导航菜单还是返回 HTML 片段,如果想将导航的代码作为赋值使用,可设置为false。

$fallback_cb:(字符串)(可选)

默认值: wp_page_menu (显示页面列表作为菜单)

用于没有在后台设置导航时调的回调函数。

$before:(字符串)(可选)

默认值: None

显示在每个菜单链接前的文本。

$after:(字符串)(可选)

默认值: None

显示在每个菜单链接后的文本。

$link_before:(字符串)(可选)

默认值: None

显示在每个菜单链接文本前的文本。

$link_after:(字符串)(可选)

默认值: None

显示在每个菜单链接文本后的文本。

$items_wrap:(字符串)(可选)

默认值: None

使用字符串替换修改ul的class。

$depth:(整型)(可选)

默认值: 0

显示菜单的深度, 当数值为 0 时显示所有深度的菜单。

$walker:(对象型)(可选)

默认值:  new Walker_Nav_Menu

wordpress主题制作教程:制作网站头部header

本地测试:打开wordpress首页,我们的动态菜单就完成了,无论后台怎么修改都会更新的,不过页面上其它的还都是固定的,静态的哦,如果说你测试了图片不显示,文件不引入,可能用的是相对路径,再看看上面文件引入就知道了。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: