为wordpress文章添加独有的css样式

有时候我们在发布wordpress文章或者页面的时候,想为它们添加独有的css样式，以免受到其它样式的冲突或者影响。那么我们该如何创建呢？下面我分享一个简单实用的方法通过添加自定义字段meta_box来实现不同文章页面加载不同的css样式。

工作原理：

1.在wordpress 功能函数中添加一个钩子 hook,在后台添加meta_box自定义输入框。

2.保持输入框中输入的值，也就是你添加的css文件名或者脚本文件名。

3.将钩子放到<link> 或者 <script>标签里面进行加载，前提是你的目录中必须存在css或者js文件。

4.在你主题目录中新建一个css文件夹，将你独有的css样式或者js脚步提前放进去以便进行加载。

首先在functions中添加以下功能函数添加css自定义输入框

//  在文章或者页面中添加自定义css样式字段
add_action('admin_menu', 'digwp_custom_css_hooks');   
add_action('save_post', 'digwp_save_custom_css');   
add_action('wp_head','digwp_insert_custom_css');   
function digwp_custom_css_hooks() {   
    add_meta_box('custom_css', 'Name of custom CSS file', 'digwp_custom_css_input', 'post', 'normal', 'high');   
    add_meta_box('custom_css', 'Name of custom CSS file', 'digwp_custom_css_input', 'page', 'normal', 'high');   
}   
function digwp_custom_css_input() {   
    global $post;   
    echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';   
    echo '<input type="text" name="custom_css" id="custom_css" style="width:100%;" value="'.get_post_meta($post->ID,'_custom_css',true).'" />';   
}   
function digwp_save_custom_css($post_id) {   
    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;   
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;   
    $custom_css = $_POST['custom_css'];   
    update_post_meta($post_id, '_custom_css', $custom_css);   
}   
function digwp_insert_custom_css() {   
    if (is_page() || is_single()) {   
        if (have_posts()) : while (have_posts()) : the_post();   
          $filename = get_post_meta(get_the_ID(), '_custom_css', true);   
          if ($filename) {   
            echo "<link rel='stylesheet' type='text/css' href='" . get_bloginfo('template_url') . "/css/" . $filename . "' />";   
          }   
        endwhile; endif;   
        rewind_posts();   
    }   
}  

当然如果你还需要添加自定义js脚本可以继续添加以下代码

//  在文章或者页面中添加自定义js脚本字段

add_action('admin_menu', 'digwp_custom_js_hooks');   
add_action('save_post', 'digwp_save_custom_js');   
add_action('wp_head','digwp_insert_custom_js');   
function digwp_custom_js_hooks() {   
    add_meta_box('custom_js', 'Name of custom JavaScript file', 'digwp_custom_js_input', 'post', 'normal', 'high');   
    add_meta_box('custom_js', 'Name of custom JavaScript file', 'digwp_custom_js_input', 'page', 'normal', 'high');   
}   
function digwp_custom_js_input() {   
    global $post;   
    echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';   
    echo '<input type="text" name="custom_js" id="custom_js" style="width:100%;" value="'.get_post_meta($post->ID,'_custom_js',true).'" />';   
}   
function digwp_save_custom_js($post_id) {   
    if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;   
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;   
    $custom_js = $_POST['custom_js'];   
    update_post_meta($post_id, '_custom_js', $custom_js);   
}   
function digwp_insert_custom_js() {   
    if (is_page() || is_single()) {   
        if (have_posts()) : while (have_posts()) : the_post();   
            $filename = get_post_meta(get_the_ID(), '_custom_js', true);   
            if ($filename) {   
             echo "<script type='text/javascript' src='" . get_bloginfo('template_url') . "/js/" . $filename . "' ></script>";   
            }   
        endwhile; endif;   
        rewind_posts();   
    }   
}  

添加成功后就会出现如图所示的输入框

添加成功后你的头部文件中会出现

<link rel='stylesheet' type='text/css' href='http://yoursite.com/notes/wp-content/themes/your-theme/css/mystyle.css' />  

今后你就可以根据每一篇文章或者页面添加你自己想要的样式或者脚本了，非常方便实用。

原文地址：为wordpress文章添加独有的css样式