Cum să înregistrez/încarci un fișier CSS personalizat în WordPress?
Bună ziua.
Folosesc o temă WordPress și vreau să adaug propriul meu CSS personalizat. Am încercat să adaug propria mea foaie de stil separat după toate celelalte apeluri PHP din fișierul header.php. Am încercat să editez fișierul de stil din Aspect>Editor și chiar am adăugat !important la TOATE stilurile mele. Dar WordPress continuă să-mi suprascrie stilurile cu fișierul de stil implicit.
Am citit puțin despre înregistrarea/încărcarea foilor de stil în functions.wp-styles.php, dar codul de acolo mi-e complet neclar... Nu știu unde să adaug CSS-ul meu...
Iată codul din pagina functions.wp-styles.php: Ajutorul vostru ar fi foarte apreciat!
<?php
/**
* API procedural pentru stiluri BackPress.
*
* @package BackPress
* @since r79
*/
/**
* Afișează stilurile care sunt în coadă sau parte din $handles.
*
* @since r79
* @uses do_action() Apelă hook-ul 'wp_print_styles'.
* @global object $wp_styles Obiectul WP_Styles pentru afișarea stilurilor.
*
* @param array|bool $handles Stiluri de afișat. Un array gol afișează coada,
* un array cu un șir afișează acel stil, iar un array de șiruri afișează acele stiluri.
* @return bool True la succes, false la eșec.
*/
function wp_print_styles( $handles = false ) {
if ( '' === $handles ) // pentru wp_head
$handles = false;
if ( ! $handles )
do_action( 'wp_print_styles' );
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Scripturile și stilurile nu ar trebui înregistrate sau încărcate până la hook-urile %1$s, %2$s sau %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
if ( !$handles )
return array(); // Nu este necesară instanțierea dacă nu există nimic.
else
$wp_styles = new WP_Styles();
}
return $wp_styles->do_items( $handles );
}
/**
* Adaugă CSS suplimentar.
*
* Funcționează doar dacă foaia de stil a fost deja adăugată.
* Acceptă un șir $data care conține CSS-ul. Dacă două sau mai multe blocuri de cod CSS sunt
* adăugate la aceeași foaie de stil $handle, acestea vor fi afișate în ordinea
* în care au fost adăugate, adică stilurile adăugate ulterior pot redeclara cele anterioare.
*
* @since 3.3.0
* @see WP_Scripts::add_inline_style()
*/
function wp_add_inline_style( $handle, $data ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Scripturile și stilurile nu ar trebui înregistrate sau încărcate până la hook-urile %1$s, %2$s sau %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
return $wp_styles->add_inline_style( $handle, $data );
}
/**
* Înregistrează un fișier de stil CSS.
*
* @since r79
* @see WP_Styles::add() Pentru informații suplimentare.
* @global object $wp_styles Obiectul WP_Styles pentru afișarea stilurilor.
* @link http://www.w3.org/TR/CSS2/media.html#media-types Lista tipurilor de media CSS.
*
* @param string $handle Numele foii de stil.
* @param string|bool $src Calea către foaia de stil din directorul rădăcină al WordPress. Exemplu: '/css/mystyle.css'.
* @param array $deps Array de handle-uri ale oricărei foi de stil de care depinde această foaie de stil.
* (Foi de stil care trebuie încărcate înaintea acesteia.) Trimite un array gol dacă nu există dependențe.
* @param string|bool $ver Șir care specifică numărul versiunii foii de stil. Setează null pentru a dezactiva.
* Folosit pentru a asigura că versiunea corectă este trimisă clientului indiferent de caching.
* @param string $media Media pentru care această foaie de stil a fost definită.
*/
function wp_register_style( $handle, $src, $deps = array(), $ver = false, $media = 'all' ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Scripturile și stilurile nu ar trebui înregistrate sau încărcate până la hook-urile %1$s, %2$s sau %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
$wp_styles->add( $handle, $src, $deps, $ver, $media );
}
/**
* Elimină un fișier CSS înregistrat.
*
* @since r79
* @see WP_Styles::remove() Pentru informații suplimentare.
* @global object $wp_styles Obiectul WP_Styles pentru afișarea stilurilor.
*
* @param string $handle Numele foii de stil.
*/
function wp_deregister_style( $handle ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Scripturile și stilurile nu ar trebui înregistrate sau încărcate până la hook-urile %1$s, %2$s sau %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
$wp_styles->remove( $handle );
}
/**
* Încarcă un fișier de stil CSS.
*
* Înregistrează stilul dacă este furnizat src (NU suprascrie) și îl încarcă.
*
* @since r79
* @see WP_Styles::add(), WP_Styles::enqueue()
* @global object $wp_styles Obiectul WP_Styles pentru afișarea stilurilor.
* @link http://www.w3.org/TR/CSS2/media.html#media-types Lista tipurilor de media CSS.
*
* @param string $handle Numele foii de stil.
* @param string|bool $src Calea către foaia de stil din directorul rădăcină al WordPress. Exemplu: '/css/mystyle.css'.
* @param array $deps Array de handle-uri (nume) ale oricărei foi de stil de care depinde această foaie de stil.
* (Foi de stil care trebuie încărcate înaintea acesteia.) Trimite un array gol dacă nu există dependențe.
* @param string|bool $ver Șir care specifică numărul versiunii foii de stil, dacă are unul. Acest parametru
* este folosit pentru a asigura că versiunea corectă este trimisă clientului indiferent de caching, așa că ar trebui inclus
* dacă un număr de versiune este disponibil și are sens pentru foaia de stil.
* @param string $media Media pentru care această foaie de stil a fost definită.
*/
function wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Scripturile și stilurile nu ar trebui înregistrate sau încărcate până la hook-urile %1$s, %2$s sau %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
if ( $src ) {
$_handle = explode('?', $handle);
$wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
}
$wp_styles->enqueue( $handle );
}
/**
* Elimină un stil încărcat.
*
* @since WP 3.1
* @see WP_Styles::dequeue() Pentru informații despre parametri.
*/
function wp_dequeue_style( $handle ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Scripturile și stilurile nu ar trebui înregistrate sau încărcate până la hook-urile %1$s, %2$s sau %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
$wp_styles->dequeue( $handle );
}
/**
* Verifică dacă un stil a fost adăugat în Stilurile WordPress.
*
* În mod implicit, verifică dacă stilul a fost încărcat. Poți de asemenea
* să transmiți 'registered' la $list, pentru a vedea dacă stilul este înregistrat,
* și poți verifica stările de procesare cu 'to_do' și 'done'.
*
* @since WP necunoscut; BP necunoscut
* @global object $wp_styles Obiectul WP_Styles pentru afișarea stilurilor.
*
* @param string $handle Numele foii de stil.
* @param string $list Opțional. Implicit este 'enqueued'. Valorile sunt
* 'registered', 'enqueued' (sau 'queue'), 'to_do' și 'done'.
* @return bool Dacă stilul este în listă.
*/
function wp_style_is( $handle, $list = 'enqueued' ) {
global $wp_styles;
if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
if ( ! did_action( 'init' ) )
_doing_it_wrong( __FUNCTION__, sprintf( __( 'Scripturile și stilurile nu ar trebui înregistrate sau încărcate până la hook-urile %1$s, %2$s sau %3$s.' ),
'<code>wp_enqueue_scripts</code>', '<code>admin_enqueue_scripts</code>', '<code>init</code>' ), '3.3' );
$wp_styles = new WP_Styles();
}
return (bool) $wp_styles->query( $handle, $list );
}

Consultați intrarea din Codex pentru wp_enqueue_style()
.
Presupunând că ai o foaie de stil personalizată, numită custom.css
, situată în directorul rădăcină al temei tale:
wp_enqueue_style( 'mytheme-custom', get_template_directory_uri() . '/custom.css' );
Ai putea pune acest cod în functions.php
, în interiorul unei funcții callback, legată de un eveniment potrivit, astfel:
function wpse87681_enqueue_custom_stylesheets() {
if ( ! is_admin() ) {
wp_enqueue_style( 'mytheme-custom', get_template_directory_uri() . '/custom.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse87681_enqueue_custom_stylesheets', 11 );
Poți experimenta cu evenimentul (poți folosi chiar wp_head
) sau prioritatea (implicită este 10
) pentru a te asigura că foaia ta de stil personalizată se încarcă după orice altă foaie de stil pe care dorești să o suprascrii. Dar, dacă încerci doar să suprascrii foaia de stil implicită, orice eveniment și prioritate ar trebui să fie suficiente, deoarece link-ul către foaia de stil implicită este de obicei hardcodat în secțiunea head a documentului în header.php
.
