如何给WordPress主题添加自定义头部图像

kuaidi.ping-jia.net  作者:佚名   更新日期:2024-07-08
如何给WordPress主题添加自定义头部图像

  添加代码到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() {
  ?>
  
  #wpbody-content #headimg {
  height: px;
  width: px;
  border: 1px solid #333;
  }
  
  <?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一样,打开【顶部】菜单即可看到自定义顶部图像选项页面:

1、首先设置好自己的本地头像头像avatar.jpg(80*80px),把他上传到主题images目录下

2.修改主题函数模版,将下列代码粘贴到主题functions.php中去。
/设置默认头像
add_filter( 'avatar_defaults', 'custom_gravatar' );
function custom_gravatar($avatar_defaults) { $myavatar=get_bloginfo('template_url') . '/images/avatar.jpg';
$avatar_defaults[$myavatar] = "2015新头像"; return $avatar_defaults; }

3、这样我们就添加好了新的默认头像“2015新头像”,赶快到后台设置他作为默认头像。

添加代码到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一样,打开【顶部】菜单即可看到自定义顶部图像选项页面

有这个插件,WP User Avatar

  • 如何自定义您的 WordPress 主题(新手指南)
    答:在SeedProd的Landing Pages界面,你可以创建新的页面,选择模板,利用拖放设计工具编辑内容。添加表单、导航和WooCommerce功能,让你的主题更加丰富。主题自定义的高级实践:使用Theme Builder若想打造独一无二的主题,利用SeedProd的Theme Builder功能是关键。从基础模板开始,添加动态区块,然后启用你的创作。一旦...
  • 如何在wordpress外观中添加自定义菜单
    答:1 首先,登录您的WordPress管理后台,依次进入【Appearance(外观) – Menus(菜单或叫做导航菜单)】模块,进入导航菜单设置页面;2 如果您之前没有使用或者没有设置过菜单的话,您需要点击右侧上方的“+”按钮,添加新的 Menu Name(菜单名),之后,点击右侧的 Create Menu(创建菜单)按钮,激活新的菜单(本...
  • 如何给WordPress主题添加自定义头部图像
    答:保存好上面的代码之后,你会在WordPress后台的左侧【外观】菜单下看到一个叫做【顶部】的子菜单,就跟WordPress默认主题Twenty Ten或Twenty Eleven一样,打开【顶部】菜单即可看到自定义顶部图像选项页面
  • 如何在wordpress主题中添加设置页面
    答:在进行主题定制前,应该首先创建一个可供自定义的“设置选项页面”。创建设置选项页的代码需要放置在主题目录下的functions.php文件中。如果模板名为“OptionPage”,那么functions文件的路径为:wp-contentthemesOptionPagefunctions.php。不需要让wordpress手动加载它,在执行时wordpress会自动加载。2、建立设置...
  • 请问怎么在wordpress主题添加一个设置选项页面
    答:给wordpress主题添加主题设置页面。 本节预案实现:1、改变主题配色方案;2、增加两个广告位内容;3、自定是否显示搜索框。 第一步:在主题函数function.php文件中添加如下代码: <?php // 设置选项页 function themeoptions_admin_menu() { // 在控制面板的侧边栏添加设置选项页链接 add_theme_page(...
  • 如何在WORDPRESS首页插入一段自定义代码?
    答:具体添加哪些按钮,可参照下面这些。wordpress编辑器按钮调用的Key:1.剪切(cut)复制(copy)粘贴(paste)撤销(undo)重做(redo)居中(justifycenter)2.加粗(bold)斜体(italic)左对齐(justifyleft)右对齐(justfyright)3.两端对齐(justfyfull)插入超链接(link)取消超链接(unlink)插入图片(...
  • 如何在WordPress中添加自定义字体
    答:运用CSS3@font-face是添加WordPress自定义字体最直接的方法。首先你需要下载你喜欢的字体,并在你的主题或子主题目录下新建一个文件夹,命名为“fonts”然后上传字体到该文件夹。上传完成后,你还需要用CSS3@font-face将字体加载到你的主题样式表中,代码如下:font-face { font-family: Arvo;src:url(...
  • wordpress怎么自己创建主题和设置主题
    答:点击“外观” “主题”,就是给网站添加一个基本的框架。点击"添加”,记住要添加一个适合你的网站的主题,不能操之过急。然在点击“上传主题” 如果想用wordpress里的主题就不用在去网上下载啦 如果是淘宝客的话你可以去百度看看 也可以去淘宝网里购买一个网站模板 然后在百度上搜索主题下载 ...
  • 如何给wordpress主题添加后台设置选项
    答:1、找到wordpress主题目录下的函数文件functions.php 用notepad++等软件打开,在下面添加以下代码:require ('theme-options.php');2、在wordpress主题目录下创建一个theme-options.php文件,并将下面的代码加入 //注册数据add_action('admin_init', 'register_theme_settings');function register_theme_...
  • 如何给wordpress主题添加后台设置选项
    答:1、找到wordpress主题目录下的函数文件functions.php 用notepad++等软件打开,在下面添加以下代码:require ('theme-options.php');2、在wordpress主题目录下创建一个theme-options.php文件,并将下面的代码加入 //注册数据add_action('admin_init', 'register_theme_settings');function register_theme_...