为WordPress某个文章添加额外的样式
如需把css直接写在某文章,把下面代码放如function.php
/*
为特定文章添加特定css最简单的方式.
*/
/*添加自定义CSS的meta box*/
add_action('admin_menu', 'cwp_add_my_custom_css_meta_box');
/*保存自定义CSS的内容*/
add_action('save_post', 'cwp_save_my_custom_css');
/*将自定义CSS添加到特定文章(适用于Wordpress中文章、页面、自定义文章类型等)的头部*/
add_action('wp_head','cwp_insert_my_custom_css');
function cwp_add_my_custom_css_meta_box() {
add_meta_box('my_custom_css', '自定义CSS', 'cwp_output_my_custom_css_input_fields', 'post', 'normal', 'high');
add_meta_box('my_custom_css', '自定义CSS', 'cwp_output_my_custom_css_input_fields', 'page', 'normal', 'high');
}
function cwp_output_my_custom_css_input_fields() {
global $post;
echo '<input type="hidden" name="my_custom_css_noncename" id="my_custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
echo '<textarea name="my_custom_css" id="my_custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_my_custom_css',true).'</textarea>';
}
function cwp_save_my_custom_css($post_id) {
if (!wp_verify_nonce($_POST['my_custom_css_noncename'], 'custom-css')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$my_custom_css = $_POST['my_custom_css'];
update_post_meta($post_id, '_my_custom_css', $my_custom_css);
}
function cwp_insert_my_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_my_custom_css', true).'</style>';
endwhile; endif;
rewind_posts();
}
}
大致原理:以post meta的方式在文章的发布/编辑页面添加自定义输入栏用以输入自定义的css,在文章详情页载入前述输入的css。
然后编辑文章时就会看见自定义css编辑框
输入样式试试

查看文章头部输出,成功!

为WordPress某个文章添加额外的样式的更多相关文章
- wordpress给文章添加缩略图
百度是个好东西,翻了半个小时的文章,终于把这个问题解决了. 一个问题的解决方法很多,但要找到一个自己理解的方法,缺比较难找,不管怎样,多动手,可能弄着弄着就会了. 教程开始: 1.先去后台管理安装Ea ...
- 如何为wordpress 的文章添加分页
原文参考:http://www.wpdaxue.com/add-next-page-button-wordpress-post-editor.html 1.在编辑文章时切到text 模式,然后加上&l ...
- wordpress写文章添加gif图片变成静态图片的解决办法
添加文章时gif只能静态,记得在添加时选择完整尺寸,不要压缩即可
- 黄聪:在WordPress后台文章编辑器的上方或下方添加提示内容
WordPress 3.5 新增了一对非常有用的挂钩,可以快速在WordPress后台文章编辑器的上方或下方添加提示内容,下面是一个简单的例子,直接将代码添加到主题的 functions.php 文件 ...
- WordPress 后台添加额外选项字段到常规设置页面
有时候我们需要添加一些额外的设置选项到常规设置(后台 > 设置 > 常规)页面,下面是一个简单的范例: 直接添加到主题的 functions.php 即可: /*** WordPres ...
- wordpress插件:multiple post thumbnails(可为文章添加多个特色图片)
我们经常会给wordpress的文章加上特色图片来实现日志缩略图的需求,但是很多时候一张图片并不能够完美而又全面的表达我们wordpress文章的内容,这时候您可能就会需要这样一个能让wordpres ...
- WordPress发布文章/页面时自动添加默认的自定义字段
如果你每篇文章或页面都需要插入同一个自定义字段和值,可以考虑在WordPress发布文章/页面时,自动添加默认的自定义字段.将下面的代码添加到当前主题的 functions.php 即可: 1 2 3 ...
- 为你的WordPress博客添加CSS3炫酷读者墙
为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...
- SEO优化:WordPress发布文章主动推送到百度,加快收录保护原创
工作实在太忙,也没时间打理网站.最近公司额外交待了一些网站 SEO 方面的优化任务让我关注(这就是啥都要会.啥都要做的苦逼运维的真实写照了...). 于是抽空看了下百度站长平台,至少看到了2个新消息: ...
随机推荐
- LightOJ1417 Forwarding Emails(强连通分量+缩点+记忆化搜索)
题目大概是,每个人收到信息后会把信息发给他认识的一个人如此下去,问一开始要把信息发送给谁这样看到信息的人数最多. 首先找出图中的SCC并记录每个SCC里面的点数,如果传到一个SCC,那么里面的人都可以 ...
- JavaScript初学者应注意的七个细节
每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的.本文利列举了JavaScript初学 ...
- HDU 2364 (记忆化BFS搜索)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2364 题目大意:走迷宫.从某个方向进入某点,优先走左或是右.如果左右都走不通,再考虑向前.绝对不能往 ...
- HDU 1180 (BFS搜索)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1180 题目大意:迷宫中有一堆楼梯,楼梯横竖变化.这些楼梯在奇数时间会变成相反状态,通过楼梯会顺便到达 ...
- MySQL安装问题:Unable to update security settings解决方案
主要问题还是之前装过,卸载的时候卸载不干净导致的. 如下: 安装到最后出现: Unable to update security settings. Access denied for user 'r ...
- C# params object[] args 可以传多个参数,可以不限制类型(转)
C# params object[] args 可以传多个参数,可以不限制类型 using System;using System.Collections.Generic;using System.T ...
- GC 基础
= GC 基础 ===================== JAVA堆的描述如下: 内存由 Perm 和 Heap 组成. 其中 Heap = {Old + NEW = { Eden , from, ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody
最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...
- 利用窗口引用漏洞和XSS漏洞实现浏览器劫持
==Ph4nt0m Security Team== Issue 0x03, Phile #0x05 of 0x07 |=----------------- ...
- HTML&CSS----练习隐藏导航栏(初级)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...