PHP 帮助使用 ACF Pro Load/Enqueue CSS WordPress 存档、页面和帖子上的样式表

Question

我没有使用 PHP 的经验。我正在使用 ACF select 字段让我的客户可以选择在单个页面、post 和存档级别选择样式表。仅供参考，字段为singular_css、portfolio_css和careers_css，具体取决于内容类型，并分享这些下拉值：

/wp-content/themes/hello-theme-child-master/custom-css/white.css : White
/wp-content/themes/hello-theme-child-master/custom-css/black.css : Black
/wp-content/themes/hello-theme-child-master/custom-css/blue.css : Blue
/wp-content/themes/hello-theme-child-master/custom-css/tan.css : Tan
/wp-content/themes/hello-theme-child-master/custom-css/gray.css : Gray

functions.php 中的这个脚本似乎可以按预期工作以控制在单数 Posts/Pages 上加载的样式表，但不允许他们为自定义选择样式表 post 输入档案：

/** Insert Dynamic Stylesheet Into <Head> using ACF Field **/
add_action( 'wp_head', 'add_head_script' );
function add_head_script() { ?>

<?php 
$singular_css = get_field('singular_css');
if( $singular_css ): ?>
    <link rel="stylesheet" href="<?php echo esc_url( $singular_css ); ?>">
<?php endif; ?>

<?php }

由于我无法以同样的方式控制自定义 post 存档中的样式表，因此我为它们创建了选项页面：

/** Creates ACF Options Pages **/
if( function_exists('acf_add_options_page') ) {
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Portfolio Style',
        'menu_title'    => 'Portfolio Style',
        'parent_slug'   => 'edit.php?post_type=portfolio',
        'capability'    => 'manage_options'
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Careers Style',
        'menu_title'    => 'Careers Style',
        'parent_slug'   => 'edit.php?post_type=careers',
        'capability'    => 'manage_options'
    ));
    
}

并尝试将样式表加入队列，但有些东西不起作用：

/** Enqueue Dynamic Stylesheet using ACF Field **/
function dynamic_style() {
    $singular_css = get_field('singular_css');
    $portfolio_css = get_field('portfolio_css', 'option');
    $careers_css = get_field('careers_css', 'option');

    if (is_singular()) {
    wp_enqueue_style( 'singular_css', get_stylesheet_directory_uri(). $singular_css );
    }
    elseif (is_post_type_archive('portfolio')) {
    wp_enqueue_style( 'portfolio_css', get_stylesheet_directory_uri(). $portfolio_css );
    }
    elseif (is_post_type_archive('careers')) {
    wp_enqueue_style( 'careers_css', get_stylesheet_directory_uri(). $careers_css );
    }
}
add_action( 'wp_enqueue_scripts', 'dynamic_style' );

我也试过这样写，还是不行：

/** Enqueue Dynamic Stylesheet using ACF Field **/
function singular_style() {
    $singular_css = get_field('singular_css');
    if (is_singular()) {
    wp_enqueue_style( 'singular_css', get_stylesheet_directory_uri(). $singular_css );
    }
}
add_action( 'wp_enqueue_scripts', 'singular_style' );
    
function portfolio_style() {
    $portfolio_css = get_field('portfolio_css', 'option');
    if (is_post_type_archive('portfolio')) {
    wp_enqueue_style( 'portfolio_css', get_stylesheet_directory_uri(). $portfolio_css );
    }
}
add_action( 'wp_enqueue_scripts', 'portfolio_style' );  
    
function careers_style() {
    $careers_css = get_field('careers_css', 'option');  
    if (is_post_type_archive('careers')) {
    wp_enqueue_style( 'careers_css', get_stylesheet_directory_uri(). $careers_css );
    }
}
add_action( 'wp_enqueue_scripts', 'careers_style' );

Answer 1

我建议您将下拉值更改为

  /custom-css/white.css : White
    /custom-css/black.css : Black
    /custom-css/blue.css : Blue
    /custom-css/tan.css : Tan
    /custom-css/gray.css : Gray

然后在functions.php文件中添加如下代码

 function dynamic_style()
    {
        if (is_singular()) {
            global $post;
            $cog_stylesheet = get_field('cog_background_color', $post->ID);
            wp_enqueue_style('singular_css', get_stylesheet_directory_uri() . $cog_stylesheet);
        }else {

    global $post;
    $post_type = get_current_post_types($post);

    if ($post_type == 'portfolio') {
        $portfolio_css = get_field('portfolio_css', 'option');
        wp_enqueue_style('portfolio_css', get_stylesheet_directory_uri() . $portfolio_css);
    } elseif ($post_type == 'careers') {
        $careers_css = get_field('careers_css', 'option');
        wp_enqueue_style('careers_css', get_stylesheet_directory_uri() . $careers_css);
    } 
}
    }
    add_action('wp_enqueue_scripts', 'dynamic_style');

但是，如果您仍想使用当前的下拉值，请在 functions.php 文件中添加以下代码到

function dynamic_style()
{
    if (is_singular()) {
        global $post;
        $cog_stylesheet = get_field('cog_background_color', $post->ID);
        wp_enqueue_style('singular_css', home_url() . $cog_stylesheet);
    } else {

    global $post;
    $post_type = get_current_post_types($post);

    if ($post_type == 'portfolio') {
        $portfolio_css = get_field('portfolio_css', 'option');
        wp_enqueue_style('portfolio_css', home_url() . $portfolio_css);
    } elseif ($post_type == 'careers') {
        $careers_css = get_field('careers_css', 'option');
        wp_enqueue_style('careers_css', home_url() . $careers_css);
    } 
}
}
add_action('wp_enqueue_scripts', 'dynamic_style');

并在functions.php上添加以下代码，这样我们就可以在存档页面

上得到post_type

function get_current_post_types($object = null)
{

    // if a numeric value passed, assume it is a post ID
    if (($object) && (is_numeric($object))) {
        $object = get_post($object);
    }
    // if an object is passed, assume to be a post object
    if (($object) && (is_object($object))) {
        return get_post_type($object);
    }

    // standard single post type checks
    if (is_404()) {
        return '';
    }
    // update: removed this check, handled by is_singular
    // if (is_single()) {return 'post';}
    if (is_page()) {
        return 'page';
    }
    if (is_attachment()) {
        return 'attachment';
    }
    if (is_singular()) {
        return get_post_type();
    }

    // if a custom query object was not passed, use $wp_query global
    if ((!$object) || (!is_object($object))) {
        global $wp_query;
        $object = $wp_query;
    }
    if (!is_object($object)) {
        return '';
    } // should not fail

    // if the post_type query var has been explicitly set
    // (or implicitly set on the cpt via a has_archive redirect)
    // ie. this is true for is_post_type_archive at least
    // $vqueriedposttype = get_query_var('post_type'); // $wp_query only
    if (property_exists($object, 'query_vars')) {
        $posttype = $object->query_vars['post_type'];
        if ($posttype) {
            return $posttype;
        }
    }

Answer 2

谢谢Bijay！你帮了大忙。只是为其他人回顾一下，这是我采取的步骤：

我注册了这些选项页面：

/** Creates ACF Options Pages **/
if( function_exists('acf_add_options_page') ) {
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Posts Style',
        'menu_title'    => 'Posts Stylesheet',
        'parent_slug'   => 'edit.php',
        'capability'    => 'manage_options'
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Portfolio Style',
        'menu_title'    => 'Portfolio Stylesheet',
        'parent_slug'   => 'edit.php?post_type=portfolio',
        'capability'    => 'manage_options'
    ));
    
    acf_add_options_sub_page(array(
        'page_title'    => 'Careers Style',
        'menu_title'    => 'Careers Stylesheet',
        'parent_slug'   => 'edit.php?post_type=careers',
        'capability'    => 'manage_options'
    ));
    
}

我创建了我的 ACF select 个字段：

singular_css
articles_css
portfolio_css
careers_css

它们都共享这些下拉值：

/custom-css/white.css : 白色
/custom-css/black.css : 黑色
/custom-css/blue.css : 蓝色
/custom-css/tan.css : 谭
/custom-css/gray.css : 灰色

functions.php 文件中的这段代码有效：

/** Enqueue Dynamic Stylesheet using ACF Field **/
function dynamic_style()
{
    if (is_singular()) {
        global $post;
        $singular_css = get_field('singular_css', $post->ID);
        wp_enqueue_style('singular_css', get_stylesheet_directory_uri(). $singular_css);
    } elseif (is_home()) {
        $articles_css = get_field('articles_css', 'option');
        wp_enqueue_style('articles_css', get_stylesheet_directory_uri(). $articles_css);
    } elseif (is_post_type_archive('portfolio')) {
        $portfolio_css = get_field('portfolio_css', 'option');
        wp_enqueue_style('portfolio_css', get_stylesheet_directory_uri(). $portfolio_css);
    } elseif (is_post_type_archive('careers')) {
        $careers_css = get_field('careers_css', 'option');
        wp_enqueue_style('careers_css', get_stylesheet_directory_uri(). $careers_css);
    } elseif (is_404()) {
        wp_enqueue_style('white_css', get_stylesheet_directory_uri(). '/custom-css/white.css');
    }
}
add_action('wp_enqueue_scripts', 'dynamic_style', 99);

PHP 帮助使用 ACF Pro Load/Enqueue CSS WordPress 存档、页面和帖子上的样式表

PHP Help Using ACF Pro to Load/Enqueue CSS Stylesheet on WordPress Archives, Pages, and Posts

php

wordpress

advanced-custom-fields

elementor

acfpro