I den senaste nya WordPress-versionen har WordPress lagt till några nya funktioner som Anpassad bakgrund, Anpassad rubrik, etc. Du kan se detta i åtgärd i tjugo elva temat. Den anpassade bakgrunden lägger till ett CSS-kod som påverkar elementets bakgrund, vad händer om du bara vill att den här funktionen ska utföra ett annat element du anger? Kanske
,
, eller element eller annan HTML-tagg.
I denna handledning använder jag tjugo elva (i WordPress version 3.4) som en demonstration. Nedan är en funktion som hanterar funktionen Anpassad bakgrund för det här temat, jag hittade den i functions.php fil:
add_theme_support ('custom-background', array (// Låt WordPress veta vad vår standard bakgrundsfärg är. // Det här är beroende av vårt nuvarande färgschema. 'default-color' => $ default_background_color,));
Och det förklarades i theme.php fil under wp-includes katalogen:
funktion add_theme_support ($ feature) global $ _wp_theme_features; om (func_num_args () == 1) $ args = true; annars $ args = array_slice (func_get_args (), 1); switch ($ feature) // Den här funktionen är så lång, jag visar bara saker vi behöver fallet "anpassad bakgrund": om (! is_array ($ args)) $ args = array (0 => array ()); $ default = array ('default-image' => ", 'default-color' =>", 'wp-head-callback' => '_custom_background_cb', 'admin-head-callback' => förhandsgranskning-callback '=> ",); $ jit = isset ($ args [0] ['__ jit']); unset ($ args [0] ['__ jit']); // Sammanfoga data från tidigare add_theme_support () samtal. Det första värdet registreras vinner. $ args [0] = wp_parse_args ($ _wp_theme_features ['custom-background'] [0], $ args [0]); om ($ jit) $ args [0] = wp_parse_args ($ args [0], $ standardvärden); om (definierad ('BACKGROUND_COLOR')) $ args [0] ['default-color'] = BACKGROUND_COLOR; elseif (isset ($ args [0] ['standardfärg']) || $ jit) define ('BACKGROUND_COLOR', $ args [0] ['standardfärg']); om (definierad ('BACKGROUND_IMAGE')) $ args [0] ['default-image'] = BACKGROUND_IMAGE; elseif (isset ($ args [0] ['standardbild']) || $ jit) define ('BACKGROUND_IMAGE', $ args [0] ['standardbild']); ha sönder;
Vi kan se add_theme_support
används utan att värdet av wp-head-callback
parameter (med undantag för default-färg
) som betyder att standard återuppringningsfunktionen kommer att ringas. I det här fallet är det _custom_background_cb
. Det definierades också i theme.php fil:
funktion _custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); om (! $ background &&! $ color) returnera; $ style = $ color? "bakgrundsfärg: # $ color;" : ", om ($ bakgrund) $ image =" bakgrunds-bild: url ("$ bakgrund"); "; $ repeat = get_theme_mod ('background_repeat', 'repeat'); ('repetera', 'repeat-x', 'repeat-y', 'repeat'))) $ repeat = 'repetera'; $ repeat = "bakgrundsrepetition: $ repeat;"; $ position = get_theme_mod 'background_position_x', 'left'); om (! in_array ($ position, array ('center', 'right', 'left'))) $ position = 'left'; $ position = "bakgrundsställning: topp $ "$ attachment = get_theme_mod ('background_attachment', 'scroll'); om (! in_array ($ attachment, array ('fixed', 'scroll'))) $ attachment = 'scroll'; $ attachment = -attachment: $ attachment; "; $ style. = $ bild. $ repeat. $ position. $ attachment;?>Lägg märke till något? Ja, CSS-fragmentet behöver vi i slutet av funktionen.
Vad vi behöver göra
I din functions.php fil, lägger du till följande kod:
funktion change_custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); om (! $ background &&! $ color) returnera; $ style = $ color? "bakgrundsfärg: # $ color;" : ", om ($ bakgrund) $ image =" bakgrunds-bild: url ("$ bakgrund"); "; $ repeat = get_theme_mod ('background_repeat', 'repeat'); ('repetera', 'repeat-x', 'repeat-y', 'repeat'))) $ repeat = 'repetera'; $ repeat = "bakgrundsrepetition: $ repeat;"; $ position = get_theme_mod 'background_position_x', 'left'); om (! in_array ($ position, array ('center', 'right', 'left'))) $ position = 'left'; $ position = "bakgrundsställning: topp $ "$ attachment = get_theme_mod ('background_attachment', 'scroll'); om (! in_array ($ attachment, array ('fixed', 'scroll'))) $ attachment = 'scroll'; $ attachment = -attachment: $ attachment; "; $ style. = $ bild. $ repeat. $ position. $ attachment;?>Allt du behöver är att ersätta
body.custom-bakgrund
med CSS väljaren du behöver. Funktionen Anpassad bakgrund ändrar bara bakgrunden till det element du definierar, inte hela webbplatsen. Dessa utdrag fungerar också med gamla WordPress-versioner (3.0 eller tidigare). Klart!Vi mäter i grunden den inbyggda funktionaliteten, men anpassar den till våra egna behov.
Det är allt! Hoppas du gillar det snabba tipset, skulle jag uppskatta några kommentarer.
Uppdatering: Denna handledning har uppdaterats för att åtgärda de fel som nämns i kommentarerna nedan. Om du märker några andra fel kan du meddela oss!