How can a .css file be applied to a virtual page?

admin管理员组

文章数量:1130349

If creating a virtual page while keeping the theme intact using the following plugin wp-virtual-page-tutorial, how can a .css file be applied to this virtual page?

How can this be done using an if-statement using the virtual page name as the conditional?

Any help would be greatly appreciated.

Here is the code that creates the virtual page:

Class VPTutorial {
    function __construct() {
        register_activation_hook( __FILE__, array( $this, 'activate' ) );
        add_action( 'init', array( $this, 'rewrite' ) );
        add_filter( 'query_vars', array( $this, 'query_vars' ) );
        add_action( 'template_include', array( $this, 'change_template' ) );
    }
    function activate() {
        set_transient( 'vpt_flush', 1, 60 );
    }
    function rewrite() {
        add_rewrite_endpoint( 'dump', EP_PERMALINK );
        add_rewrite_rule( '^the-page$', 'index.php?vptutorial=1', 'top' );
        if(get_transient( 'vpt_flush' )) {
            delete_transient( 'vpt_flush' );
            flush_rewrite_rules();
        }
    }
    function query_vars($vars) {
        $vars[] = 'vptutorial';
        return $vars;
    }
    function change_template( $template ) {
        if( get_query_var( 'dump', false ) !== false ) {
            //Check theme directory first
            $newTemplate = locate_template( array( 'template-dump.php' ) );
            if( '' != $newTemplate )
                return $newTemplate;
            //Check plugin directory next
            $newTemplate = plugin_dir_path( __FILE__ ) . 'templates/template-dump.php';
            if( file_exists( $newTemplate ) )
                return $newTemplate;
        }
        if( get_query_var( 'vptutorial', false ) !== false ) {
            $newTemplate = locate_template( array( 'template-vptutorial.php' ) );
            if( '' != $newTemplate )
                return $newTemplate;
            //Check plugin directory next
            $newTemplate = plugin_dir_path( __FILE__ ) . 'templates/template-vptutorial.php';
            if( file_exists( $newTemplate ) )
                return $newTemplate;
        }
        //Fall back to original template
        return $template;
    }
}
new VPTutorial;

If creating a virtual page while keeping the theme intact using the following plugin wp-virtual-page-tutorial, how can a .css file be applied to this virtual page?

How can this be done using an if-statement using the virtual page name as the conditional?

Any help would be greatly appreciated.

Here is the code that creates the virtual page:

Class VPTutorial {
    function __construct() {
        register_activation_hook( __FILE__, array( $this, 'activate' ) );
        add_action( 'init', array( $this, 'rewrite' ) );
        add_filter( 'query_vars', array( $this, 'query_vars' ) );
        add_action( 'template_include', array( $this, 'change_template' ) );
    }
    function activate() {
        set_transient( 'vpt_flush', 1, 60 );
    }
    function rewrite() {
        add_rewrite_endpoint( 'dump', EP_PERMALINK );
        add_rewrite_rule( '^the-page$', 'index.php?vptutorial=1', 'top' );
        if(get_transient( 'vpt_flush' )) {
            delete_transient( 'vpt_flush' );
            flush_rewrite_rules();
        }
    }
    function query_vars($vars) {
        $vars[] = 'vptutorial';
        return $vars;
    }
    function change_template( $template ) {
        if( get_query_var( 'dump', false ) !== false ) {
            //Check theme directory first
            $newTemplate = locate_template( array( 'template-dump.php' ) );
            if( '' != $newTemplate )
                return $newTemplate;
            //Check plugin directory next
            $newTemplate = plugin_dir_path( __FILE__ ) . 'templates/template-dump.php';
            if( file_exists( $newTemplate ) )
                return $newTemplate;
        }
        if( get_query_var( 'vptutorial', false ) !== false ) {
            $newTemplate = locate_template( array( 'template-vptutorial.php' ) );
            if( '' != $newTemplate )
                return $newTemplate;
            //Check plugin directory next
            $newTemplate = plugin_dir_path( __FILE__ ) . 'templates/template-vptutorial.php';
            if( file_exists( $newTemplate ) )
                return $newTemplate;
        }
        //Fall back to original template
        return $template;
    }
}
new VPTutorial;

• pages
• css

Share Improve this question edited Nov 21, 2018 at 16:36 65535 asked Nov 21, 2018 at 15:08 6553565535 13566 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can hook into wp_enqueue_scripts and use wp_enqueue_style() the same way you normally would, but use the same condition you use to change the template to conditionally enqueue the stylesheet:

if ( get_query_var( 'dump', false ) !== false ) {}

So you you'd load the stylesheet with this method:

function enqueue_stylesheet() {
    if ( get_query_var( 'dump', false ) !== false ) {
        wp_enqueue_style( 'dump', 'path/to/css/file.css' );
    }
}

And alongside your other add_action() calls:

add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_stylesheet' ) );

If creating a virtual page while keeping the theme intact using the following plugin wp-virtual-page-tutorial, how can a .css file be applied to this virtual page?

How can this be done using an if-statement using the virtual page name as the conditional?

Any help would be greatly appreciated.

Here is the code that creates the virtual page:

Class VPTutorial {
    function __construct() {
        register_activation_hook( __FILE__, array( $this, 'activate' ) );
        add_action( 'init', array( $this, 'rewrite' ) );
        add_filter( 'query_vars', array( $this, 'query_vars' ) );
        add_action( 'template_include', array( $this, 'change_template' ) );
    }
    function activate() {
        set_transient( 'vpt_flush', 1, 60 );
    }
    function rewrite() {
        add_rewrite_endpoint( 'dump', EP_PERMALINK );
        add_rewrite_rule( '^the-page$', 'index.php?vptutorial=1', 'top' );
        if(get_transient( 'vpt_flush' )) {
            delete_transient( 'vpt_flush' );
            flush_rewrite_rules();
        }
    }
    function query_vars($vars) {
        $vars[] = 'vptutorial';
        return $vars;
    }
    function change_template( $template ) {
        if( get_query_var( 'dump', false ) !== false ) {
            //Check theme directory first
            $newTemplate = locate_template( array( 'template-dump.php' ) );
            if( '' != $newTemplate )
                return $newTemplate;
            //Check plugin directory next
            $newTemplate = plugin_dir_path( __FILE__ ) . 'templates/template-dump.php';
            if( file_exists( $newTemplate ) )
                return $newTemplate;
        }
        if( get_query_var( 'vptutorial', false ) !== false ) {
            $newTemplate = locate_template( array( 'template-vptutorial.php' ) );
            if( '' != $newTemplate )
                return $newTemplate;
            //Check plugin directory next
            $newTemplate = plugin_dir_path( __FILE__ ) . 'templates/template-vptutorial.php';
            if( file_exists( $newTemplate ) )
                return $newTemplate;
        }
        //Fall back to original template
        return $template;
    }
}
new VPTutorial;

If creating a virtual page while keeping the theme intact using the following plugin wp-virtual-page-tutorial, how can a .css file be applied to this virtual page?

How can this be done using an if-statement using the virtual page name as the conditional?

Any help would be greatly appreciated.

Here is the code that creates the virtual page:

Class VPTutorial {
    function __construct() {
        register_activation_hook( __FILE__, array( $this, 'activate' ) );
        add_action( 'init', array( $this, 'rewrite' ) );
        add_filter( 'query_vars', array( $this, 'query_vars' ) );
        add_action( 'template_include', array( $this, 'change_template' ) );
    }
    function activate() {
        set_transient( 'vpt_flush', 1, 60 );
    }
    function rewrite() {
        add_rewrite_endpoint( 'dump', EP_PERMALINK );
        add_rewrite_rule( '^the-page$', 'index.php?vptutorial=1', 'top' );
        if(get_transient( 'vpt_flush' )) {
            delete_transient( 'vpt_flush' );
            flush_rewrite_rules();
        }
    }
    function query_vars($vars) {
        $vars[] = 'vptutorial';
        return $vars;
    }
    function change_template( $template ) {
        if( get_query_var( 'dump', false ) !== false ) {
            //Check theme directory first
            $newTemplate = locate_template( array( 'template-dump.php' ) );
            if( '' != $newTemplate )
                return $newTemplate;
            //Check plugin directory next
            $newTemplate = plugin_dir_path( __FILE__ ) . 'templates/template-dump.php';
            if( file_exists( $newTemplate ) )
                return $newTemplate;
        }
        if( get_query_var( 'vptutorial', false ) !== false ) {
            $newTemplate = locate_template( array( 'template-vptutorial.php' ) );
            if( '' != $newTemplate )
                return $newTemplate;
            //Check plugin directory next
            $newTemplate = plugin_dir_path( __FILE__ ) . 'templates/template-vptutorial.php';
            if( file_exists( $newTemplate ) )
                return $newTemplate;
        }
        //Fall back to original template
        return $template;
    }
}
new VPTutorial;

• pages
• css

Share Improve this question edited Nov 21, 2018 at 16:36 65535 asked Nov 21, 2018 at 15:08 6553565535 13566 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can hook into wp_enqueue_scripts and use wp_enqueue_style() the same way you normally would, but use the same condition you use to change the template to conditionally enqueue the stylesheet:

if ( get_query_var( 'dump', false ) !== false ) {}

So you you'd load the stylesheet with this method:

function enqueue_stylesheet() {
    if ( get_query_var( 'dump', false ) !== false ) {
        wp_enqueue_style( 'dump', 'path/to/css/file.css' );
    }
}

And alongside your other add_action() calls:

add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_stylesheet' ) );

本文标签： How can a css file be applied to a virtual page