Cum să încarci fișiere CSS diferite pentru pagini diferite

Question

Cum să încarci fișiere CSS diferite pentru pagini diferite

8 ian. 2018, 14:44:13

Vizualizări: 13.8K

Voturi: 3

Am mai multe pagini diferite. Fiecare dintre ele are link-uri CSS diferite. În loc ca aceste link-uri CSS să fie aceleași în elementul head al tuturor paginilor. Trebuie să mut aceste elemente head în header.php astfel încât să pot include head-ul folosind get_header().

Deci, cum pot încărca fișiere CSS diferite pentru pagini diferite? Am aproximativ 20 de pagini diferite, așa că încărcarea fișierelor după verificarea condițiilor este puțin complicată pentru mine.
Există vreo abordare mai bună decât aceasta?
Dacă este posibil, sugerează-mi o soluție pentru această problemă folosind un plugin personalizat?

pagina 1:

<html lang="en">
<head>
     <link rel="stylesheet" href="css/one.css" />
     .......
 </head>

pagina 2:

<html lang="en">
<head>
     <link rel="stylesheet" href="css/two.css" />
     .......
 </head>

LogicalAnt

131

pluginuri dezvoltare de plugin wp enqueue style wp head

Comentarii

Ai testat dacă acest lucru este cu adevărat benefic? Presupun că combinarea lor și având fișierul în cache ar fi mai rapid decât solicitarea a 20 de fișiere diferite

kero

8 ian. 2018 14:46:10

Toate răspunsurile la întrebare

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

Puteți realiza acest lucru folosind condiționale în interiorul funcției care încarcă stilurile.

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' );

Dacă doriți mai mult control atât asupra markup-ului paginii, cât și asupra fișierelor CSS încărcate, puteți utiliza ierarhia de template-uri din WordPress și să creați un template de pagină sau ceva mai specific precum page-5.php. Apelând wp_enqueue_scripts din interiorul acestor fișiere de template, se vor încărca doar resursele pentru acele pagini.

Andrew

919

8 ian. 2018 15:07:00

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

Dacă dorești să faci acest lucru în șablonul tău, poți proceda în felul următor.

Poți afla mai multe despre funcția is_page aici: https://developer.wordpress.org/reference/functions/is_page/

<html lang="ro">
<head>
     <?php if ( is_page(1) ): //Schimbă acest număr cu ID-ul paginii ?> 
     <link rel="stylesheet" href="css/one.css" />
     <?php endif; if ( is_page(2) ): //Schimbă acest număr cu ID-ul paginii ?>
     <link rel="stylesheet" href="css/two.css" />
     <?php endif; ?>
 .......
</head>

Liam Stewart

997

9 ian. 2018 02:16:36

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

<html lang="ro">
    <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{ //Schimbă acest număr cu ID-ul paginii ?>
         <link rel="stylesheet" href="css/three.css" />
         <?php } ?>
     .......
    </head>

Dharmishtha Patel

713

19 ian. 2018 08:49:53