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

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

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

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

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

静态头部代码

修改为动态头部代码


这里我们用到了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 文件中可以修改菜单的各种默认值,我的要加个搜索框,研究了好久再找到这个默认给它加上去了:

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

$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: