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

Posted tinyphp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为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网站添加百度分享按钮或悬浮窗

从 wordpress 中删除未使用的样式

PHP WordPress条件为主页SlideDeck主题代码片段

Django 为登录表单设置样式并添加额外的 span

在你的wordpress文章中插入一个片段

WordPress Gutenberg block Inspector Controls:我需要为控件添加样式表吗?