php怎么设置顶部图标,为WordPress主题添加顶部自定义图片功能
在WordPress主题中,头部(header)的自定义一般来说就是能让用户在后台能够自行更改主题默认显示的图片或者标题的大小颜色这些功能。而为一个主题添加上这些后台选项并不难,在WordPress较新的版本中已经为我们定义好了模块(add_custom_image_header),我们只需要对主题的一些文件简单修改即可。
这里我以自己制作的免费主题Js O4w 为例简单说一下。首先我会建立一个新的文件并命名为banner.php,名字大家随便就可以了,把它放到主题的目录中去。而我放置的路径为 inc/banner.php。文件的代码简单如下:
//* HEAD
define('HEADER_IMAGE', '%s/images/banner-white.jpg');// %s is theme dir uri
define('HEADER_IMAGE_WIDTH', 930);
define('HEADER_IMAGE_HEIGHT', 200);
define('NO_HEADER_TEXT', true );
define('HEADER_TEXTCOLOR','');
functionadmin_header_style() { ?>
#headimg{
background: #fff url(<?php header_image(); ?>) no-repeat 0 0;
color: #333;
float: left;
margin: 0;
padding: 0;
height: <?phpechoHEADER_IMAGE_HEIGHT ; ?>px;
width: <?phpechoHEADER_IMAGE_WIDTH ; ?>px;
clear:both;
}
#headimg h1,#desc {
display: none;
}
.wrap {
clear:both;
}
#uploadForm {
margin:0!important;
}
functionheader_style() { ?>
#banner{
background: #fff url(<?php header_image(); ?>) no-repeat 0 0;
color: #333;
float: left;
margin: 0;
padding: 0;
height: <?phpechoHEADER_IMAGE_HEIGHT ; ?>px;
width: <?phpechoHEADER_IMAGE_WIDTH ; ?>px;
}
if( function_exists('add_custom_image_header') ) {
add_custom_image_header('header_style', 'admin_header_style');
}
?>
其中,
define('HEADER_IMAGE', '%s/images/banner-white.jpg');// %s is theme dir uri
这一句的路径是默认主题的图片路径。
而
define('HEADER_IMAGE_WIDTH', 930);
define('HEADER_IMAGE_HEIGHT', 200);
上面的两句是确认主题头部中使用图片的长度和宽度值,这个根据主题的不同而不同。设定这个数值一来是为了让图片符合主题的显示效果,另一个是用来在更换图标时候,对较大图片进行裁剪功能时候的尺寸限制。
接着的两句
define('NO_HEADER_TEXT', true );
define('HEADER_TEXTCOLOR','');
这里需要说明一下,在我使用的主题中,图片上是没有网站标题和描述显示的,所以我是需要这样的写。如果,在你的主题中,网站标题和描述是在图标内显示的,而你又需要在后台为其添加样式定义的话,可以改成如下:
define('HEADER_TEXTCOLOR', 'ffffff');
其中的ffffff是表示默认显示字样的颜色值,根据主题设计不同而不同。
然后我们需要为WordPress自带的这个模块定义两个样式,分别是在后台选项中头部的显示样式
functionadmin_header_style()
和主题前台中头部的显示样式
functionheader_style()
对于这两个样式的定义,大家在最文章开始的代码中能看到,当然也是需要根据主题不同而不同的了。对于我的情况,显示图标的区块定义是#banner 。另外,因为我们已经在这个文件中定义了主题前台的头部显示样式,我们就不再需要在传统的style.css文件中重复定义它了。
基本的设置代码就是如上,重点需要设置的还是上面提及到的两个样式而已,其它的都好理解。最后我们需要把这一个文件包括在主题的function.php文件中,在其内添加一句:
include_once(TEMPLATEPATH . '/inc/banner.php');
上面的路径什么的大家请根据自己的设置自行对上。这里补充要说的是,可能我这样多做一个文件有点多余,其实我们是可以直接把最初的一整段代码直接放入到主题的function.php文件中去的。但有一个情况,就是当你的function.php文件中已经有关于后台选项的代码存在了,那么为了避免不必要的出错修正,可以按我的方法加入,这样会方便点。
如上面的更改一切顺利,我们就能在后台的选项中看到自定义头部的选项了,因为这个模块是WordPress自带的,所以里面的翻译也是同步了。
点击上传按钮,选择自己喜欢的图片,如果图片尺寸大于我们的设定值,我们也可以直接对上传的图片进行裁剪,很方便的。如图,
指定裁剪位置后,点击“裁切头部”,OK, ALL DONE。(另外,当指定新图片后,后台是会多出一个恢复到默认图片的选项,我这里就不多说了。)
P.S. 目前这个功能在Js O4w的最新版1.1.5中已经内置,使用该主题的朋友直接在后台点升级则可。这样的话,大家想更换一下那个圈圈图片的话现在可以了,就象下图一样。希望这个功能能方便地让大家把主题弄得个性一点,尽管我一直觉得那个圈圈图案很好看,呵呵。
php怎么设置顶部图标,为WordPress主题添加顶部自定义图片功能相关推荐
- php自动轮播图代码,教你纯代码实现wordpress主题幻灯片轮播图片功能小工具
class Yu_banner extends WP_Widget { //继承了 WP_Widget 这个类来创建新的小工具(Widget) function Yu_banner() { // 主要 ...
- WordPress主题添加鼠标点击特效
关于WordPress主题添加鼠标点击特效方法以及代码使用.看着花里胡哨的,其实实现很简单.找到相对应的文件位置,然后复制粘贴,最后保存运行即可.为了方便新手我尽可能详细些,使用方法:打开宝塔Linu ...
- hexo博客yilia主题添加复制代码块功能
博客中的复制代码块功能还是挺实用的,本文参考自 这个博客,感谢并膜拜这位大佬,该博客应该是yilia主题添加复制代码块功能的首创,详细记录了整个过程,看起来比较繁琐(无贬义),所以我单独整理一份最终版 ...
- php添加自定义头部关键字,WordPress主题制作中自定义头部的相关PHP函数解析
header_image()header_image() 函数是 WordPress 自定顶部图像的标准接口函数,该函数可以自动判断后台设置,并返回字符串形式的用户自定义顶部图像地址.本文主要涉及该函 ...
- php主题怎么增加导航页,教你如何给wordpress主题添加导航栏
烈火建站学院转载 不是所有的wordpress主题都自带导航栏的,我早就想自行添加一个.昨天的标题前有"GOOGLE是个好老师"这个句子,今早赶紧删了,倒不是不认同,而是觉得在添加 ...
- 《如何在WordPress上添加微信/支付宝打赏功能》
场景:经常在微博或者微信上看见好的文章下面有"赏"这个小工具,也想在自己的网站上弄一个.我的网站 需求:博文下面有"赏"字,可以通过鼠标悬停,显示个人的支付宝/ ...
- html增加语音朗读功能,给wordpress主题添加上语音播放文章内容文本朗读功能
摘要:大挖最近在淘wp主题的时候发现一款主题已经支持了语音朗读功能7b2,大挖一直关注的一些产品和运营网站也陆续上线了语音播放... 大挖最近在淘wp主题的时候发现一款主题已经支持了语音朗读功能7b2 ...
- php花朵飘落特效,【新年气象】WordPress 主题添加花瓣飘落特效
摘要 分享一个花瓣飘落的特效,可以加到自己博客上再装点一下节日氛围. [效果展示] [PHP文件] 此处为隐藏的内容 发表评论并刷新,方可查看 以上代码保存为hua.php文件,图片居右显示. [JS ...
- php花朵飘落特效,WordPress 主题添加花瓣飘落特效
上篇文章过年啦,挂灯笼!教大家在博客上挂个动画灯笼,可能大家认为很好玩,那就再分享一个花瓣飘落的特效,可以加到自己博客上再装点一下节日氛围. 先贴一下代码,下面有打包的文件下载.// 封装代码 fun ...
最新文章
- php绘图效率,对于PHP绘图技术的理解
- java 调 cmd 没反应
- 小黑小波比.搭建个人网站
- BZOJ1734: [Usaco2005 Feb]Aggressive cows 愤怒的牛
- 阿里云SLB负载均衡与使用SSL域名证书
- python3 抓取图片
- JSP中meta http-equiv=pragma content=no-cache属性ttp-equiv功能介绍转载
- Source Insight下载及注册码
- 95-233-040-源码-TaskManager-TaskManager的jvm-exit-on-oom配置
- 【nosql】NoSql是什么?
- android学习笔记---52_发送状态栏通知
- 切换账号_在iOS 13在如何切换App Store账号
- android lbs查询距离,不仅能搜索还能查信息 带你了解LBS应用
- python模拟浏览器访问企查查_python爬虫另辟蹊径绕过企查查的登录验证,我太冇财了...
- 你会刷牙吗?图解正确刷牙方法
- hp 打印机更改 wifi direct 的密码
- 百度地图聚合点的展示
- java 当前时间加12小时_Java设置时间的24或12小时机制
- 库存出现负数 mysql_MySQL处理高并发,防止库存超卖库存出现负数
- python 单元测试与测试用例