修改WordPress中作品编辑器的体裁的形式详解

以下是本站的css,供大家参考(由于我的custom-login.css是放在主题文件夹的子文件里,所以background里的url要写成如../images/login-bg-body.jpg的形式,熟悉MCS的人就会知道
“..” 代表上一级目录)

另外,当自定义栏目的值是一个数组时,在文章编辑页面,该栏目对用户也是不可见的,即使自定义栏目的名称前没加下划线。

在文章编辑器添加一个自定义的 CSS 样式表只需要使用 add_editor_style()
函数。

/* 页面css */
html,body,#wpbody,.form-table .pre{background: #ffffff url("../images/login-bg-body.jpg");? font-size: 13px; font-family: 微软雅黑,宋体;}
a{text-decoration: none;}
body.login,body{border: none;}
h1 a{display: none;}

/* 登陆框主体部分css */
#login{background: url("../images/login-bg.jpg") no-repeat;? width: 650px;? height: 500px;? position: relative; margin: 50px auto;}
#loginform {padding-left: 110px;? float: right;? border-left: 2px solid #e3e3d3}
#loginform #user_login , #loginform #user_pass {border: 2px dotted #666666}
form{width: 280px;? height: 166px;? padding: 45px 0px 0px 0px;? background: url() no-repeat; margin: 60px 0 0 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
#user_pass,#user_login,#user_email{width: 190px; height: 20px; margin-bottom: 10px;}

/* 登陆框各组成css */
label {font-size: 13px; color: #fff;}
form .forgetmenot label {font-size: 13px;? color: #666666;}
.login #nav a{color: #666666 !important;}
input.button-primary, button.button-primary, a.button-primary{background: none; border: none; text-shadow: none; margin: 0; padding: 0; font-size: 13px; font-family: 微软雅黑,宋体;}
form .submit input {color: #666666;}
input.button-primary: active, button.button-primary: active, a.button-primary: active {background: none;}

/* 其他 */
#nav{margin: 0; padding: 0; position: absolute; text-shadow: none;}

这样就给id为68的文章添加了名称为
_ludou,值为露兜博客的唯一的自定义栏目,而且在文章编辑页面用户也看不到。平常情况下,我们可能是这样使用的,这样在文章编辑页的自定义了栏目中就能看到
ludou 字段:

首先在你的主题根目录创建一个 editor-style.css 样式表文件,然后在
functions.php 文件里添加:

您可能感兴趣的文章:

  • 解析WordPress中控制用户登陆和判断用户登陆的PHP函数
  • WordPress中登陆后关闭登陆页面及设置用户不可见栏目
  • 金沙js333娱乐场 ,WordPress中访客登陆实现邮件提醒的PHP脚本实例分享

金沙js333娱乐场 1

这时访问后台 CKEditor – Upload Options 进行相关设置即可。

看到效果后就会发现,虽然我们不能改变页面的html元素,但包括登陆框结构在内的整个登陆页面都可以自定义,只要你知道每个部分的css选择器名称即可。所以只要用firebug等工具查看所有css的id或class,就可以制作出一个完全自己作主的登陆界面。

您可能感兴趣的文章:

  • 解析WordPress中控制用户登陆和判断用户登陆的PHP函数
  • WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
  • 制作个性化的WordPress登陆界面的实例教程

CKEditor 和 CKFinder 下载

首先在functions.php中添加一个函数:

金沙js333娱乐场 2

Kindeditor for WordPress插件(符合国人习惯) Kindeditor 编辑器是国人开发的简单高效,易于使用的编辑器,内置了google
code prettify,可以简单快速的插入代码。此外,盘先海
哥们将其制作了一个WordPress插件: Kindeditor for WordPress
。比较好的是可以一键排版、使用自带的图片上传功能、插入代码高亮、可视化插入<!-more->摘要按钮等等。

在/wp-admin/images找到login-bkg-tile.gif和login-bkg-bottom_new.gif两张图片,用自己定制的图片(大小最好相同)替换就行了。

用户登录后关闭登录页面 WordPress默认的登录页面是:

这样就会调用主题目录的 “css/custom-editor-style.css” 文件。

// custom login for theme
// folder themes/theme_name/custom-login/
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="'%20.%20get_bloginfo('template_directory')%20.%20'/custom-login.css" />';
}
add_action('login_head', 'custom_login');

对一些不想让用户看到,更不想让用户修改的自定义栏目,我们可以使用此技巧,不仅让文章编辑页面的自定义栏目简约些,而且不会让用户看到不熟悉的自定义栏目而感到困惑,甚至胡乱修改。下面是个使用范例:

删掉原有文件夹下的config.php文件,将ckfinder_config.php改为config.php。

通过一个简单的“勾子”,现在你的主题已经可以开启个性化登陆界面了,接下来要做的,是为你的登陆界面写css样式,命名为custom-login.css,然后再把css文件放到主题文件夹里就行了。

创建对用户不可见的自定义栏目 如果你是一个插件或者主题开发者,应该经常会使用自定义栏目(或者叫自定义字段)来存储你的插件或主题的相关参数,有趣的是,在WordPress后台的文章编辑页面或使用the_meta()模板函数时,WordPress不会显示名称以
_(下划线)开头的自定义栏目。

CKEditor编辑器是老外的一款很强大的富文本编辑器,而CKEditor for WordPress
就是专门为 WordPress
定制的版本,用来替换默认的编辑器,有两套皮肤可选,支持为评论框添加编辑工具栏,配合
CKFinder 文件上传控件可以实现更多的功能。

金沙js333娱乐场 3

用户登录后,我们将上面的登录和注册链接删除,换成:

Kindeditor for WordPress 安装使用

个性化登陆界面的方法有两种,第一种是替换登陆背景,这个算是小型个性化吧:

面对如此冰冷的登录框,用户会感到困惑,我刚刚不是已经登录了吗?怎么还要我输入用户名和密码?所以,用户登录后,我们不该让用户再看到登录框。解决此问题的办法有两个:

KEditor本身有比较灵活的设置选项,大家可以根据自己的需要配置,下面介绍一下文件上传控件CKFinder。

送上效果图

    
有些时候,用户登录后还是会偶然点击到wp-login.php登录链接,如浏览器的地址栏。我们这时就该做些补救措施了,不要不作为让登录框显示在用户面前。这里介绍的方法是,当用户已经登录,但是又打开wp-login.php链接,我们就让他跳转到后台首页wp-admin,具体方法是,在当前主题的functions.php中加入以下php代码:

CKEditor for WordPress
下载:

当然这个不能改变登陆框的布局,显然对于追求完美的处女座来说是不够的,于是第二种方法出现了:

wp-login.php做跳转

1.可以在后台插件安装界面搜索 Kindeditor 在线安装,或者下载 Kindeditor
for WordPress

金沙js333娱乐场 4

CKEditor for WordPress 特色功能:

function redirect_logged_user() {
 if(is_user_logged_in() && (empty($_GET['action']) || $_GET['action'] == 'login')) {
  wp_redirect( admin_url() );
  exit;
 }
}
add_action( 'login_init', 'redirect_logged_user' );

自定义 CSS 文件

发表评论

电子邮件地址不会被公开。 必填项已用*标注