WordPress 3.0给我们带来了以往版本所没有的一些明显的新特性,其中一个显著的亮点就是让我们可以在后台控制面板中设定主题的头部图像,这个功能同时也被整合到了其默认主题 Twenty Ten中。到了WordPress3.2,在新的默认主题Twenty Eleven中,我们还可以设定随机显示头部图像。这篇文章将要讲述的是,如果你使用的并不是WordPress的默认主题,你的主题又不支持自定义头部图像(Custom Header),但你又很需要这个功能,那怎么办呢?下文所介绍的方法可以帮你轻松实现你的这个愿望。
添加代码到Functions.php文件
你的主题中应该有一个功能函数文件functions.php,如果没有则自建一个,然后复制并粘贴以下代码进去:
- <?php
- //Check see if the customisetheme_setup exists
- if ( !function_exists('customisetheme_setup') ):
- //Any theme customisations contained in this function
- function customisetheme_setup() {
- //Define default header image
- define( 'HEADER_IMAGE', '%s/header/default.jpg' );
- //Define the width and height of our header image
- define( 'HEADER_IMAGE_WIDTH', apply_filters( 'customisetheme_header_image_width',960 ) );
- define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'customisetheme_header_image_height',220 ) );
- //Turn off text inside the header image
- define( 'NO_HEADER_TEXT', true );
- //Don't forget this, it adds the functionality to the admin menu
- add_custom_image_header( '', 'customisetheme_admin_header_style' );
- //Set some custom header images, add as many as you like
- //%s is a placeholder for your theme directory
- $customHeaders = array (
- //Image 1
- 'perfectbeach' => array (
- 'url' => '%s/header/default.jpg',
- 'thumbnail_url' => '%s/header/thumbnails/pb-thumbnail.jpg',
- 'description' => __( 'Perfect Beach', 'customisetheme' )
- ),
- //Image 2
- 'tiger' => array (
- 'url' => '%s/header/tiger.jpg',
- 'thumbnail_url' => '%s/header/thumbnails/tiger-thumbnail.jpg',
- 'description' => __( 'Tiger', 'customisetheme' )
- ),
- //Image 3
- 'lunar' => array (
- 'url' => '%s/header/lunar.jpg',
- 'thumbnail_url' => '%s/header/thumbnails/lunar-thumbnail.jpg',
- 'description' => __( 'Lunar', 'customisetheme' )
- )
- );
- //Register the images with WordPress
- register_default_headers($customHeaders);
- }
- endif;
- if ( ! function_exists( 'customisetheme_admin_header_style' ) ) :
- //Function fired and inline styles added to the admin panel
- //Customise as required
- function customisetheme_admin_header_style() {
- ?>
- <style type="text/css">
- #wpbody-content #headimg {
- height: <?php echo header_image_height; ?>px;
- width: <?php echo header_image_width; ?>px;
- border: 1px solid #333;
- }
- </style>
- <?php
- }
- endif;
- //Execute our custom theme functionality
- add_action( 'after_setup_theme', 'customisetheme_setup' );
- ?>
说明:上面代码中设定了三张头部图像,分别为default.jpg、tiger.jpg、lunar.jpg以及它们各自的缩略图(分别为tiger-thumbnail.jpg、pb-thumbnail.jpg、lunar-thumbnail.jpg)。你可以自己制作这些图像(包括它们相应的缩略图),然后将这些图像都放到主题目录下面的header文件夹(没有则自建一个)中。其中,
Default.jpg 是默认显示的头部图像,名称可自定
960 是默认头部图像的宽度
220 是默认头部图像的高度
保存好上面的代码之后,你会在WordPress后台的左侧【外观】菜单下看到一个叫做【顶部】的子菜单,就跟WordPress默认主题Twenty Ten或Twenty Eleven一样,打开【顶部】菜单即可看到如下图所示的自定义顶部图像选项页面:
进入自定义顶部图像选项页面之后,你可以自己再上传一张图片作为固定的主题头部图像,也可以从预先制作好的图像中(默认图像一栏)选择一张,或者选择随机显示也可以。
让头部图像在你的主题中显示出来
这是最后一步,你还得在主题的header.php文件中适当的位置插入以下代码,这样头部图像才能正常显示出来 :
- <div id="header">
- <!-- other header code here.... -->
- <!-- This line adds the header to the theme -->
- <img id="headerimg" src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header image alt text" />
- </div>
一般情况下,你找到id 为header的那对<div>···</div> 标签,将代码放到里面即可。
相关推荐
wordpress主题自定义导航菜单操作使用方法
主要介绍了WordPress主题制作中自定义头部的相关PHP函数解析,包括header_image()函数和get_custom_header()函数的用法讲解,需要的朋友可以参考下
add_post_meta为指定文章添加自定义(meta)字段。 若$unique参数设为true且已指定meta关键字,函数返回false,不作更改;否则返回true。【用法】 【参数】 $post_id (整数)(必需)将添加自定义字段的页面编号...
主题巴巴博客X主题zui新免授权版源码 WordPress主题模板主题巴巴博客X主题zui新免授权版源码 WordPress主题模板主题巴巴博客X主题zui新免授权版源码 WordPress主题模板主题巴巴博客X主题zui新免授权版源码 WordPress...
WordPress 165 自定义文章类型/分类 自由读取自定义分类
微小的MCE 向 WordPress TinyMCE 添加自定义按钮
为了更好的互动,更好的与访客朋友们联系,你是否想过为自己的博客添加留言板功能,在自己的博客中添加联系表单功能,如果自己写的话,如果你的CSS功底比较不错,写过具有这样功能的表单没有什么问题,如果你CSS学的...
wordpress-fieldmanager, WordPress的自定义字段类型 FieldmanagerFieldmanager是为WordPress构建表单。metaboxes和定制管理屏幕的综合工具包。 在你的WordPress项目中使用 FieldmanagerFieldmanager是一个强大的库...
wordpress自定义主题.txt
Adorable是一套来自themeforest的wordpress主题,这套wordpress主题非常的简洁干净,支持移动设备访问。主题特色:主题是WordPress 3.4,WordPress 3.3,WordPress 3.2主题具有响应布局(也可以停用)多个组合(创建...
WordPress主题:deStyle WordPress主题:deStyle WordPress主题:deStyle WordPress主题:deStyle WordPress主题:deStyle
将高级自定义字段的灵活性与WordPress REST API结合起来,我将展示这种使用WordPress的新方法不仅具有令人难以置信的灵活性,而且还可以与AngularJS等前端框架配合使用。 我将在《泰晤士报》和《星期日泰晤士报》...
8.主题自带Wordpress自定义头像上传功能,不需要另外安装插件 9.高强度DIY,自定义网站背景图片,自定义头部图片等等 10.网站图片LOGO、文字LOGO 随意切换 11.简约快捷的后台配置 12.响应式 13.内置WP优化策略 ...
自定义wordpress登陆界面插件。
wordpress主题modown主题V8.12开源版亲测可用无线授权WordPress主题模板兔是一个独特的主题,它以可爱的兔子为主题,给人带来了一种轻松愉快的感觉。这个主题模板是由一群热爱WordPress的设计师和开发者共同开发的,...
add_post_meta 函数是 WordPress 中用来给文章或页面添加自定义字段值的一个函数, 其用法与在编写文章时在文章编写界面中利用自定义栏目面板为文章添加自定义字段值的效果是一样的。 add_post_meta函数描述 为文章...
不多说,WordPress主题Modownv8.1.2主题无密源码,完整开源 利于二次开发和子主题开发
WordPress主题Zing V2.2.1,模块化WordPress响应式通用企业商城主题。 功能介绍 百度熊掌号文章实时推送、原创保护 多设备支持自适应布局,支持电脑、Pad、手机以及各种浏览器 SEO优化首页、文章、页面、分类均...
一种向您的WordPress网站添加自定义CSS的简单,可靠的方法。 描述 该插件在WordPress用户界面中添加了一个管理屏幕,可为您的网站添加简单而可靠的自定义CSS规则。 它的创建是为了添加简单的规则而无需在样式表上...