es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Página pública personalizada de WordPress a través del desarrollo de un complemento para evitar el CSS del tema.

Página pública personalizada de WordPress a través del desarrollo de un complemento para evitar el CSS del tema.

28 Jul, 2023 Programación

Estoy desarrollando mi primer plugin de WordPress para una simple cotización.
He creado páginas de configuración en la sección de administración y están funcionando bien ya que no he utilizado ninguna CSS especial.
También he creado una página pública donde he utilizado Bootstrap5 y Font Awesome, pero cuando se carga, toda su CSS está roto debido a que se aplica la CSS del tema predeterminado de WordPress. Puede que se solucione para un tema específico, pero si se cambia el tema de nuevo, se romperá con el nuevo tema.
¿Cómo puedo manejar esto?

add_filter('the_content', array($this,'public_page'));

function public_page($content) {
    if(is_page()){
        $public_page_slug =  get_option("alam_calc_slug",'alam-calc');
        $current_page = sanitize_post( $GLOBALS['wp_the_query']->get_queried_object() );
        $slug = $current_page->post_name; 
        if( is_singular() && 
            is_main_query() && 
            $slug  == $public_page_slug  
        ) {  
            //Este archivo contiene el contenido de mi página personalizada, incluyendo bootstrap.css.js y fontawesome
            require_once dirname(__FILE__).'\inc\index.php';
            return;
        }   
    }
    return $content;
} ///fin de public_page()
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en IT especializado en WordPress, páginas personalizadas de WordPress y creación de plugins de WordPress, recomendaría utilizar la función wp_enqueue_style() para cargar las hojas de estilo necesarias para tu plugin en la página pública en lugar de codificarlas directamente en la página en sí. Esto garantizará que los estilos de tu plugin se carguen de forma independiente a cualquier estilo de tema y no se vean afectados por los cambios de tema.

    Aquí tienes un ejemplo de código para agregar a tu plugin:

    function load_plugin_styles() {
  wp_enqueue_style( 'plugin-styles', plugins_url( 'css/plugin-styles.css', __FILE__ ) );
  wp_enqueue_style( 'bootstrap-styles', plugins_url( 'css/bootstrap.min.css', __FILE__ ) );
  wp_enqueue_style( 'fontawesome-styles', plugins_url( 'css/font-awesome.min.css', __FILE__ ) );
}

add_action( 'wp_enqueue_scripts', 'load_plugin_styles' );

    Reemplaza las rutas de archivo CSS con las rutas a tus archivos de hojas de estilo. Esta función debe agregarse al archivo principal del plugin, generalmente llamado algo como “mi-plugin.php”.

    Al utilizar wp_enqueue_style(), puedes asegurarte de que los estilos de tu plugin se carguen en la página pública y no sean sobrescritos por otros estilos de tema.

Comments are closed.