WordPress 后台上传自定义网站Logo

需求:

众所周知一般网站的logo都是固定的所以我在做网站时也是使用的静态logo文件,但最近用wp给一个客户做的网站时,因为网站现在的logo可能会需要重新设计,所以客户提出了需要在后台可以自己修改网站logo,接收需求后就在网络上找如何解决,但找了一圈都没有找到想要的效果(都是如何修改wp的登录logo),还好找到两篇相关的文章,最后根据这两篇文章自己Codeing最终实现了功能代码:

1.在function中添加以下代码

  1. <?php
  2. /**在function中添加以下代码
  3. * WordPress 添加额外选项字段到常规设置页面
  4. * http://www.wpdaxue.com/add-field-to-general-settings-page.html
  5. */
  6. $new_general_setting = new new_general_setting();
  7. class new_general_setting {
  8. function new_general_setting( ) {
  9. add_filter( ‘admin_init‘ , array( &$this , ‘register_logo‘ ) );
  10. }
  11. function register_logo(){
  12. //需要‘js/uploader.js组件
  13. wp_enqueue_script( ‘fli-upload-js‘, $this->url . ‘js/uploader.js‘, array( ‘jquery‘, ‘media-upload‘, ‘thickbox‘ ) );
  14. wp_enqueue_style( ‘thickbox‘ );
  15. wp_enqueue_style( ‘fli-upload-css‘, $this->url . ‘css/uploader.css‘ );
  16. register_setting( ‘general‘, ‘logo‘, ‘esc_attr‘ );
  17. add_settings_field(‘logo‘, ‘<label for="logo">‘.__(‘网站Logo‘ ).‘</label>‘ , array(&$this, ‘logo_fields_html‘) , ‘general‘ );
  18. }
  19. function logo_fields_html() {
  20. $value = get_option( ‘logo‘, ‘‘ );
  21. echo ‘<input type="text" class="regular-text ltr" id="logo" name="logo" maxlength="200" value="‘. $value .‘" readonly/> <input type="button" id="general_logo" class="button insert-media add_media" value="上传">‘;
  22. }
  23. }
  24. // 自定义后台Css和Js
  25. add_action( ‘admin_enqueue_scripts‘, ‘myAdminScripts‘ );
  26. function myAdminScripts() {
  27. //主题下加载admin.js
  28. wp_register_script( ‘default‘, get_template_directory_uri() . ‘/admin.js‘, array(), ‘‘, ‘all‘ );
  29. wp_enqueue_script( ‘default‘ );
  30. wp_register_style( ‘default‘, get_template_directory_uri() . ‘/admin.css‘, array(), ‘‘, ‘all‘ );
  31. wp_enqueue_style( ‘default‘ );
  32. }
  33. ?>

2.在主题admin.js中添加代码

  1. options_general();
  2. //在常规选项页面添加自定义信息
  3. function options_general () {
  4. if(!Islocatl_pathname(‘options-general.php‘))return;
  5. //点击上传按钮或input元素时打开上传窗口
  6. jQuery(‘#general_logo,#logo‘).click(function() {
  7. //打开上传窗口需要js/uploader.js组件
  8. tb_show(‘‘, ‘media-upload.php?type=image&TB_iframe=true‘);
  9. return false;
  10. });
  11. //图片上传页面回传
  12. //html:为选择的图片元素
  13. window.send_to_editor = function(html) {
  14. imgurl = jQuery(html).attr(‘src‘);
  15. // 保存值并写入optuions表
  16. jQuery(‘#logo‘).val(imgurl);
  17. //删除图片上传窗口
  18. tb_remove();
  19. return false;
  20. } //end send_to_editor
  21. }
  22. //当前页面是否是指定的页面
  23. function Islocatl_pathname (pathname) {
  24. return location.pathname.indexOf(pathname)>=0;
  25. }//end 当前页面是否是指定的页面

效果图:

参考:

进阶教程(三十四):调用新版的媒体中心上传图片

定制和使用WordPress图片上传功能

WordPress 添加额外选项字段到常规设置页面

来自为知笔记(Wiz)

时间: 2024-10-22 05:33:00

WordPress 后台上传自定义网站Logo的相关文章

升级IOS8游戏上传自定义头像功能失效的问题

为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VIP之后就可使用了上传自定义功能的特权,我们的游戏就"复制"了该功能.   具体实现就是点击游戏内换自定义头像的按钮后,调用不同平台相应的方法,获取用户选择的图片数据,然后将图片裁剪再传给后台保存至特定的目录下.   测试设备是ipad air2,系统版本IOS 8.0.1,点击游戏内的按钮

ueditor样式过滤去除和远程图片上传自定义

ueditor自定义编辑的时候,比如需要做延迟加载,这个时候需要自定义图片等,但是,ueditor会去除img上面的属性,比如data-original和把远程图片自动上传. 这个时候,首先,需要给图片自动上传加上属性,不如对于jquery.lazyload延迟加载的图片,必定带有data-original属性,只要检测出此属性,就不远程上传.其它属性自定义提那家,代码如下: 'wordimage':{ execCommand:function () { var images = domUtil

Web Service(1):用Web Service实现客户端图片上传到网站

由于项目需要,通过本地客户端,把图片上传到网站.通过webservice. 这是客户端代码: 1 private void btnimg_Click(object sender, EventArgs e) 2 { 3 this.yanzheng(); 4 mylocalhost.MySoapHeader myheader = new mylocalhost.MySoapHeader();///这是soapheader 5 mylocalhost.MyWebService myService =

背水一战 Windows 10 (120) - 后台任务: 后台上传任务

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 后台任务 后台上传任务 示例演示 uwp 的后台上传任务BackgroundTask/TransferModel.cs /* * 扩展了 DownloadOperation 和 UploadOperation,用于 MVVM 绑定数据 */ using System; using System.ComponentModel; using Windows.Networking.BackgroundTransfer; nam

Django(十九)文件上传:图片上传(后台上传、自定义上传)、

一.基本设置 参考:https://docs.djangoproject.com/zh-hans/3.0/topics/http/file-uploads/ 1)配置project1/settings.py 因为图片也属于静态文件,所以保存到static目录下. MEDIA_ROOT=os.path.join(BASE_DIR,"static/media") 2)在static目录下创建media目录,再创建应用名称的目录,此例为app1 F:\Test\django-demo\pro

上传自定义水印图片到图片空间及保存数据库的方法

(1).添加我的水印,按钮展示: <div class="form-actions"> <button data-toggle="modal" class="sui-btn btn-primary btn-large" onclick="addmywatermark();" >添加我的水印</button> </div> /** * 添加我的水印 **/ function add

搭建自己的NuGet服务器,上传自定义NuGet包

第一步搭建NuGet服务器 创建空Web项目 安装Nuget服务,目前最新版本2.8.2 安装完成,会自动生产服务,出现如下界面 发布该网站,并部署至IIS 将.nupkg文件发布至网站的Packages目录. 在VS中修改NuGet引用路径 注意把自定NuGet放在首位,这样每次搜索都默认从MyNuGet开始. 以上就成功部署了自己的NuGet服务器了.关于.nupkg文件其实就是程序的安装包压缩文件,它包含了程序包的版本信息,dll及相关的外部依赖,NuGet安装包时会进行自动解压.因此上传

offcloud:一个强大的支持离线下载和网盘下载/上传的网站

说明:现在国内很多下载工具都不行了,QQ旋风也被关停了,迅雷也是惨不忍睹,下载国外资源和冷门资源的时候基本没速度,这时候就需要个工具来拯救了,今天介绍个强大的离线下载站offcloud,对于下载冷门资源和国外资源还是很给力的. 简介 offcloud是一款网盘+离线下载的网站,提供10GB免费空间(付费后无限空间),支持离线下载磁力链接,BT种子文件,HTTP,HTTPS等直链,同时还提供国外视频网站的下载,包括Youtube.Youjizz等,此外offcloud还支持把下载好的离线上传,支持

WordPress解决上传文件大小限制问题

在自定义WordPress,想上传主题啊,图片啊,音视频之类的,经常大小会被限制在2M以内,这是web服务器怕文件大影响性能,跟WP没关系. 在nginx的配置文件里http下面加入一句:client_max_body_size 64M; 例如我的配置文件路径为: /etc/nginx/nginx.conf 只改这个是不行的,后来还会出现限制,还要改php的文件php.ini,如果不知道在哪可以搜一下: 我的在/etc/php/7.2/fpm/php.ini 打开后,找到并设置以下选项的值: u