为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编辑框

输入样式试试

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

时间: 2024-10-25 23:57:56

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

如何为wordpress 的文章添加分页

原文参考:http://www.wpdaxue.com/add-next-page-button-wordpress-post-editor.html 1.在编辑文章时切到text 模式,然后加上<!--nextpage--> 2.每次都要手动添加分页代码 <!--nextpage-->是一件非常费力的事,其实,我们只要在当前主题的 functions.php 添加下面的代码,就可以显示“下一页”按钮啦: 如果你是 WP 4.2 或以上的版本,可以使用下面的代码: flymood:

wordpress给文章添加缩略图

百度是个好东西,翻了半个小时的文章,终于把这个问题解决了. 一个问题的解决方法很多,但要找到一个自己理解的方法,缺比较难找,不管怎样,多动手,可能弄着弄着就会了. 教程开始: 1.先去后台管理安装Easy Thumbnail Switcher插件  直接搜索  下载完成后  启用就行了 2.启用之后,就可以给文章设置缩略图了,文章后面会多个功能,如下图: 3.添加成功后,我们去文章列表看看效果,貌似没什么反应. 4.去主题文件找到functions.php这个文件,将下面的代码添加进去(如果没有

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

有时候我们需要添加一些额外的设置选项到常规设置(后台 > 设置 > 常规)页面,下面是一个简单的范例: 直接添加到主题的 functions.php 即可: /*** WordPress 添加额外选项字段到常规设置页面* http://www.wpdaxue.com/add-field-to-general-settings-page.html*/$new_general_setting = new new_general_setting();class new_general_setting

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

WordPress 3.5 新增了一对非常有用的挂钩,可以快速在WordPress后台文章编辑器的上方或下方添加提示内容,下面是一个简单的例子,直接将代码添加到主题的 functions.php 文件: function below_the_title() { echo '<h3>在编辑器上方添加的提示内容</h3>'; }   add_action( 'edit_form_after_title', 'below_the_title' );   function below_th

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

为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码 1 2 3 4 5 < ?php /* Template Name: Reader wall */ ?> 2.接着改文件下面找到 1 < ?php the_content('');?> 在它的前面添加下面的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 1

杨泽业:给你的wordpress博客添加经典语录功能,适合所有php网站

我们做一个网站就是要不断给访客提供最佳的用户体验,同时提升自己的品牌价值,而文章结束的经典语录的功能,完全可以实现我们所要达到的效果.(如下图) 给你的wordpress博客添加经典语录功能 这个是怎样实现的呢?其实很简单,下面我就将核心文件和代码分享给大家. 第一步:添加语录功能的核心文件. 在网站的根目录里面添加一个yulu的文件夹,里面含有index.php和yulu.txt两个文件.其中index.php里面是核心代码,yulu.txt是要显示的经典语录,一条占用一行. 文末免费给出了所

Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.month.time.week. number.email.url.search.tel 和 color. <form> <div class="form-group"> <label>电子邮件</label> <input type=&

WordPress 后台文章列表设置文章特色图片(缩略图)集成版

functions.php添加以下代码 /** * WordPress 后台文章列表设置文章特色图片(缩略图)集成版 * Plugin Name: Easy Thumbnail Switcher */ class doocii_Easy_Thumbnail_Switcher { public $add_new_str; public $change_str; public $remove_str; public $upload_title; public $upload_add; public

WordPress 更改文章密码保护后显示的提示内容

WordPress 有一个密码保护功能,你可以在文章和页面的编辑界面看到设置选项: 设置了密码后,你就可以在前台看到如下提示内容: 本文的目的就是要修改这个提示内容,核心函数如下(添加到当前主题的 functions.php 即可): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 /** * WordPress 更改文章密码保护后显示的提示内容 * https://www.wpdaxue.com/change-