为WordPress主题添加顶部自定义图片功能

发布时间:2020-05-05

wordpress主题中,头部(header)的自定义一般来说就是能让用户在后台能够自行更改主题默认显示的图片或者标题的大小颜色这些功能。而为一个主题添加上这些后台选项并不难,在wordpress较新的版本中已经为我们定义好了模块(add_custom_image_header),我们只需要对主题的一些文件简单修改即可。

这里我以自己制作的免费主题Js O4w 为例简单说一下。首先我会建立一个新的文件并命名为banner.php,名字大家随便就可以了,把它放到主题的目录中去。而我放置的路径为 inc/banner.php。文件的代码简单如下:

  1. <?php
  2. //* HEAD
  3. define(‘HEADER_IMAGE’, ‘%s/images/banner-white.jpg’); // %s is theme dir uri
  4. define(‘HEADER_IMAGE_WIDTH’, 930);
  5. define(‘HEADER_IMAGE_HEIGHT’, 200);
  6. define(‘NO_HEADER_TEXT’, true );
  7. define(‘HEADER_TEXTCOLOR’, );
  8. function admin_header_style() { ?>
  9. <style type=“text/css”>
  10. #headimg{
  11. background: #fff url(<?php header_image(); ?>) no-repeat 0 0;
  12. color: #333;
  13. float: left;
  14. margin: 0;
  15. padding: 0;
  16. height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
  17. width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
  18. clear:both;
  19. }
  20. #headimg h1,#desc {
  21. display: none;
  22. }
  23. .wrap {
  24. clear:both;
  25. }
  26. #uploadForm {
  27. margin:0!important;
  28. }
  29. </style>
  30. <?php }
  31. function header_style() { ?>
  32. <style type=“text/css”>
  33. #banner{
  34. background: #fff url(<?php header_image(); ?>) no-repeat 0 0;
  35. color: #333;
  36. float: left;
  37. margin: 0;
  38. padding: 0;
  39. height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
  40. width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
  41. }
  42. </style>
  43. <?php }
  44. if ( function_exists(‘add_custom_image_header’) ) {
  45. add_custom_image_header(‘header_style’, ‘admin_header_style’);
  46. }
  47. ?>

其中,

  1. define(‘HEADER_IMAGE’, ‘%s/images/banner-white.jpg’); // %s is theme dir uri

这一句的路径是默认主题的图片路径。

  1. define(‘HEADER_IMAGE_WIDTH’, 930);
  2. define(‘HEADER_IMAGE_HEIGHT’, 200);

 

上面的两句是确认主题头部中使用图片的长度和宽度值,这个根据主题的不同而不同。设定这个数值一来是为了让图片符合主题的显示效果,另一个是用来在更换图标时候,对较大图片进行裁剪功能时候的尺寸限制。

接着的两句

  1. define(‘NO_HEADER_TEXT’, true );
  2. define(‘HEADER_TEXTCOLOR’, );

这里需要说明一下,在我使用的主题中,图片上是没有网站标题和描述显示的,所以我是需要这样的写。如果,在你的主题中,网站标题和描述是在图标内显示的,而你又需要在后台为其添加样式定义的话,可以改成如下:

  1. define(‘HEADER_TEXTCOLOR’, ‘ffffff’);

其中的ffffff是表示默认显示字样的颜色值,根据主题设计不同而不同。

然后我们需要为wordpress自带的这个模块定义两个样式,分别是在后台选项中头部的显示样式

  1. function admin_header_style()

和主题前台中头部的显示样式

  1. function header_style()

对于这两个样式的定义,大家在最文章开始的代码中能看到,当然也是需要根据主题不同而不同的了。对于我的情况,显示图标的区块定义是#banner 。另外,因为我们已经在这个文件中定义了主题前台的头部显示样式,我们就不再需要在传统的style.css文件中重复定义它了。

基本的设置代码就是如上,重点需要设置的还是上面提及到的两个样式而已,其它的都好理解。最后我们需要把这一个文件包括在主题的function.php文件中,在其内添加一句:

  1. include_once(TEMPLATEPATH . ‘/inc/banner.php’);

上面的路径什么的大家请根据自己的设置自行对上。这里补充要说的是,可能我这样多做一个文件有点多余,其实我们是可以直接把最初的一整段代码直接放入到主题的function.php文件中去的。但有一个情况,就是当你的function.php文件中已经有关于后台选项的代码存在了,那么为了避免不必要的出错修正,可以按我的方法加入,这样会方便点。

如上面的更改一切顺利,我们就能在后台的选项中看到自定义头部的选项了,因为这个模块是wordpress自带的,所以里面的翻译也是同步了。

wordpress主题中头部图片自定义功能的实现” src=”https://lh5.ggpht.com/_i4s3JEV_7rM/S44TqZ4lCDI/AAAAAAAAJxw/fKfFz_GOHzw/custom-header.jpg?imgmax=512″ width=”512″ height=”238″ alt=”为wordpress主题添加顶部自定义图片功能” />

点击上传按钮,选择自己喜欢的图片,如果图片尺寸大于我们的设定值,我们也可以直接对上传的图片进行裁剪,很方便的。如图,

wordpress主题中头部图片自定义功能的实现” src=”https://lh4.ggpht.com/_i4s3JEV_7rM/S44Tq8Amk9I/AAAAAAAAJx0/vmjHzmN0GTw/custom-header-1.jpg?imgmax=512″ width=”512″ height=”224″ alt=”为wordpress主题添加顶部自定义图片功能” />

指定裁剪位置后,点击“裁切头部”,OK, ALL DONE。(另外,当指定新图片后,后台是会多出一个恢复到默认图片的选项,我这里就不多说了。)

P.S. 目前这个功能在Js O4w的最新版1.1.5中已经内置,使用该主题的朋友直接在后台点升级则可。这样的话,大家想更换一下那个圈圈图片的话现在可以了,就象下图一样。希望这个功能能方便地让大家把主题弄得个性一点,尽管我一直觉得那个圈圈图案很好看,呵呵。

wordpress主题中头部图片自定义功能的实现” src=”https://lh5.ggpht.com/_i4s3JEV_7rM/S44TraDtlYI/AAAAAAAAJx4/Oi3aMhEA_9c/custom-header-2.jpg?imgmax=512″ width=”512″ height=”206″ alt=”为wordpress主题添加顶部自定义图片功能” />

原文:wordpress主题中头部图片自定义功能的实现

大熊wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为2000多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。大熊wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18324743309,我们会详细为你一一解答你心中的疑难。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”互联网推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体互联网推广吧,我们和你一起,开创互联网大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。