为WordPress某个文章添加额外的样式

时间:2022-09-17 16:48:18

如需把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某个文章添加额外的样式

为WordPress某个文章添加额外的样式的更多相关文章

  1. wordpress给文章添加缩略图

    百度是个好东西,翻了半个小时的文章,终于把这个问题解决了. 一个问题的解决方法很多,但要找到一个自己理解的方法,缺比较难找,不管怎样,多动手,可能弄着弄着就会了. 教程开始: 1.先去后台管理安装Ea ...

  2. 如何为wordpress 的文章添加分页

    原文参考:http://www.wpdaxue.com/add-next-page-button-wordpress-post-editor.html 1.在编辑文章时切到text 模式,然后加上&l ...

  3. wordpress写文章添加gif图片变成静态图片的解决办法

    添加文章时gif只能静态,记得在添加时选择完整尺寸,不要压缩即可

  4. 黄聪:在WordPress后台文章编辑器的上方或下方添加提示内容

    WordPress 3.5 新增了一对非常有用的挂钩,可以快速在WordPress后台文章编辑器的上方或下方添加提示内容,下面是一个简单的例子,直接将代码添加到主题的 functions.php 文件 ...

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

    有时候我们需要添加一些额外的设置选项到常规设置(后台 > 设置 > 常规)页面,下面是一个简单的范例: 直接添加到主题的 functions.php 即可:   /*** WordPres ...

  6. wordpress插件:multiple post thumbnails(可为文章添加多个特色图片)

    我们经常会给wordpress的文章加上特色图片来实现日志缩略图的需求,但是很多时候一张图片并不能够完美而又全面的表达我们wordpress文章的内容,这时候您可能就会需要这样一个能让wordpres ...

  7. WordPress发布文章&sol;页面时自动添加默认的自定义字段

    如果你每篇文章或页面都需要插入同一个自定义字段和值,可以考虑在WordPress发布文章/页面时,自动添加默认的自定义字段.将下面的代码添加到当前主题的 functions.php 即可: 1 2 3 ...

  8. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  9. SEO优化:WordPress发布文章主动推送到百度,加快收录保护原创

    工作实在太忙,也没时间打理网站.最近公司额外交待了一些网站 SEO 方面的优化任务让我关注(这就是啥都要会.啥都要做的苦逼运维的真实写照了...). 于是抽空看了下百度站长平台,至少看到了2个新消息: ...

随机推荐

  1. &lbrack;CUDA&rsqb; CUDA to DL

    又是一枚祖国的骚年,阅览做做笔记:http://www.cnblogs.com/neopenx/p/4643705.html 这里只是一些基础知识.帮助理解DL tool的实现. “这也是深度学习带来 ...

  2. ASP&period;NET设计模式(一)、适配器模式、依赖注入依赖倒置、空对象模式

    鸟随凤鸾,人伴贤良,得以共之,我之幸也.说的是鸟随着鸾凤可以飞的更高远,人和比自己境界高的相处,自己也会得到熏染进步. 一.概述 分享出来简单的心得,望探讨 依赖倒置 依赖注入 Adapter模式 N ...

  3. 条码知识之十:EAN-128条码&lpar;下&rpar;

    国际物品编码协会(EAN)和美国统一代码委员会(UCC)将CODE-128码引入EAN/UCC系统,并作如下规定:起始符由一个START A/B/C 加一个辅助字符FNC1构成,以区别普通的CODE- ...

  4. 在MySql中实现MemberShip的权限管理

    步骤: 1.在MySql种创建一个数据库,名称任意取,我们只是要得到一个空的数据库,我们假设这个数据库的名称为authentication. 2.在VS种创建一个Web应用程序,File——new—— ...

  5. Java - 初始化

    用构造器保证初始化 构造器名称必须与类名完全相同,所以“每个方法首字母必须小写”的风格不适合构造器. 不接受任何参数的构造器叫做默认构造器.Java文档中通常叫做无参构造器. 构造器没有返回值,但与返 ...

  6. 使用webpack打包vue工程

    记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...

  7. 【html】使ifram搭建的项目,新页面跳出框架

    方法一: <a href="<?php echo $baseUrl . '#/study/order';?>" target="_parent&quot ...

  8. Oracle存储过程procedure in、out、in out 模式参数【不发布,纯转】

    Oracle存储过程procedure in.out.in out 模式参数 Oracle存储过程基本语法介绍 注意存过不会自动提交,需要在存过本身添加commit; rollback;等语句

  9. PKU campus 2018 A Wife——差分约束?&sol;dp

    题目:http://poj.openjudge.cn/campus2018/A 有正规的差分约束做法,用到矩阵转置等等. 但也有简单(?)的dp做法. 有一个结论(?):一定要么在一天一点也不选,要么 ...

  10. BZOJ1660:&lbrack;USACO2006NOV&rsqb;Bad Hair Day

    浅谈栈:https://www.cnblogs.com/AKMer/p/10278222.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?id ...