Come caricare file CSS diversi per pagine diverse

Question

Come caricare file CSS diversi per pagine diverse

8 gen 2018, 14:44:13

Visualizzazioni: 13.8K

Voti: 3

Ho diverse pagine con diversi collegamenti CSS. Attualmente tutti gli elementi head sono identici tranne che per i link CSS. Vorrei spostare questi elementi head in header.php per poter includere l'head usando get_header().

Come posso caricare file CSS diversi per pagine diverse? Ho circa 20 pagine diverse, quindi controllare le condizioni per ogni caricamento risulta macchinoso.
Esiste un approccio migliore rispetto a questo?
Se possibile, suggeritemi una soluzione che utilizzi un plugin personalizzato?

pagina 1:

<html lang="it">
<head>
     <link rel="stylesheet" href="css/uno.css" />
     .......
 </head>

pagina 2:

<html lang="it">
<head>
     <link rel="stylesheet" href="css/due.css" />
     .......
 </head>

LogicalAnt

131

plugin sviluppo plugin wp enqueue style wp head

Commenti

Hai testato se questo è davvero vantaggioso? Presumo che combinarli e avere il file nella cache sarebbe più veloce che richiedere 20 file diversi

kero

8 gen 2018 14:46:10

Tutte le risposte alla domanda

Andrew 919 · Answer 1 · 2018-01-08T15:07:00Z

Puoi ottenere questo risultato utilizzando i condizionali all'interno della funzione che carica i tuoi stili.

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'global', get_stylesheet_uri() );

    if ( is_page(5) ) {
      wp_enqueue_style( 'page-five', get_stylesheet_uri() . '/page-five-styles.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Se desideri un maggiore controllo sia sul markup della tua pagina che sui file CSS caricati, potresti utilizzare la gerarchia dei template di WordPress e creare un template di pagina o qualcosa di più specifico come page-5.php. Chiamando wp_enqueue_scripts all'interno di questi file template, verranno caricati solo gli asset per quelle pagine.

Andrew

919

8 gen 2018 15:07:00

Liam Stewart 997 · Answer 2 · 2018-01-09T02:16:36Z

Se desideri farlo nel tuo template puoi procedere come segue.

Puoi saperne di più sulla funzione is_page qui: https://developer.wordpress.org/reference/functions/is_page/

<html lang="it">
<head>
     <?php if ( is_page(1) ): //Cambia questo numero con l'ID della pagina ?> 
     <link rel="stylesheet" href="css/one.css" />
     <?php endif; if ( is_page(2) ): //Cambia questo numero con l'ID della pagina ?>
     <link rel="stylesheet" href="css/two.css" />
     <?php endif; ?>
 .......
</head>

Liam Stewart

997

9 gen 2018 02:16:36

Dharmishtha Patel 713 · Answer 3 · 2018-01-19T08:49:53Z

<html lang="it">
    <head>
<?php global $post;
if( $post->ID == 346) { ?>
       <link rel="stylesheet" href="css/one.css" />
<?php } ?>
    elseif ( $post->ID == 342){ ?> 
         <link rel="stylesheet" href="css/two.css" />
         <?php } else{ //Cambia questo numero con l'ID della pagina ?>
         <link rel="stylesheet" href="css/three.css" />
         <?php } ?>
     .......
    </head>

Dharmishtha Patel

713

19 gen 2018 08:49:53