Share
I den siste nye WordPress-versjonen har WordPress lagt til noen nye funksjoner som tilpasset bakgrunn, egendefinert overskrift, osv. Du kan se dette i aksjon i det tjuefemte temaet. Den tilpassede bakgrunnen vil legge til en CSS-kode som påvirker elementets bakgrunn, hva om du bare vil at denne funksjonen skal påvirke et annet element du angir? Kanskje den , elementer eller en annen HTML-kode.
I denne opplæringen bruker jeg Tjue Elleve (i WordPress versjon 3.4) som en demonstrasjon. Nedenfor er en funksjon som håndterer Tilpasset bakgrunn-funksjonen for dette temaet, jeg fant den inn functions.php fil:
Accentsconagua
add_theme_support ('custom-background', array (// La WordPress vite hva standard bakgrunnsfarge er. / / Dette er avhengig av vårt nåværende fargeskjema. 'default-color' => $ default_background_color,)); Og det ble erklært i theme.php fil under wp-inkluderer katalogen:
funksjon add_theme_support ($ feature) global $ _wp_theme_features; hvis (func_num_args () == 1) $ args = true; ellers $ args = array_slice (func_get_args (), 1); switch ($ feature) // Denne funksjonen er så lang, jeg viser bare ting vi trenger case 'custom-background': hvis (! is_array ($ args)) $ args = array (0 => array ()); $ default = array ('default-image' => ", 'standard-color' =>", 'wp-head-callback' => '_custom_background_cb', 'admin-head-callback' => forhåndsvisning-tilbakeringing '=> ",); $ jit = isset ($ args [0] ['__ jit']); unset ($ args [0] ['__ jit']); // Merge inn data fra tidligere add_theme_support () samtaler. Den første verdien registreres vinner. hvis (isset ($ _wp_theme_features ['custom-background'])) $ args [0] = wp_parse_args ($ _wp_theme_features ['tilpasset bakgrunn'] [0], $ args [0]); hvis ($ jit) $ args [0] = wp_parse_args ($ args [0], $ defaults); hvis (definert ('BACKGROUND_COLOR')) $ args [0] ['standardfarge'] = BACKGROUND_COLOR; elseif (isset ($ args [0] ['standardfarge']) || $ jit) define ('BACKGROUND_COLOR', $ args [0] ['standardfarge']); hvis (definert ('BACKGROUND_IMAGE')) $ args [0] ['standard-image'] = BACKGROUND_IMAGE; elseif (isset ($ args [0] ['standardbilde']) || $ jit) define ('BACKGROUND_IMAGE', $ args [0] ['standardbilde']); gå i stykker; Vi kan se add_theme_support brukes uten å passere verdien av wp-head-tilbakeringing parameter (unntatt for default-farge) som betyr at standard tilbakeringingsfunksjon vil bli kalt. I dette tilfellet er det _custom_background_cb. Det ble også definert i theme.php fil:
funksjon _custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); hvis (! $ bakgrunn &&! $ farge) returnere; $ style = $ color? "bakgrunnsfarge: # $ color;" : "; $ ($ background = reaksjon) (gjenta), repeter-x, repeter-y, gjenta))) $ repeat = 'repeat'; $ repeat = "background-repeat: $ repeat;"; $ posisjon = get_theme_mod 'background_position_x', 'left'); hvis (! in_array ($ posisjon, array ('senter', 'høyre', 'venstre'))) $ position = 'left'; $ position = "bakgrunnsposisjon: topp $ stilling; "; $ attachment = get_theme_mod ('background_attachment', 'scroll'); hvis (! in_array ($ vedlegg, array ('fast', 'scroll'))) $ attachment = 'scroll'; $ attachment =" background -attachment: $ vedlegg; "; $ stil. = $ bilde. $ gjenta. $ posisjon. $ vedlegg;?>> Legg merke til noe? Ja, CSS-koden vi trenger i slutten av funksjonen.
Hva vi trenger å gjøre
I din functions.php fil, legger du til følgende kode:
funksjon change_custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); hvis (! $ bakgrunn &&! $ farge) returnere; $ style = $ color? "bakgrunnsfarge: # $ color;" : "; $ ($ background = reaksjon) (gjenta), repeter-x, repeter-y, gjenta))) $ repeat = 'repeat'; $ repeat = "background-repeat: $ repeat;"; $ posisjon = get_theme_mod 'background_position_x', 'left'); hvis (! in_array ($ posisjon, array ('senter', 'høyre', 'venstre'))) $ position = 'left'; $ position = "bakgrunnsposisjon: topp $ stilling; "; $ attachment = get_theme_mod ('background_attachment', 'scroll'); hvis (! in_array ($ vedlegg, array ('fast', 'scroll'))) $ attachment = 'scroll'; $ attachment =" background -attachment: $ vedlegg; "; $ stil. = $ bilde. $ gjenta. $ posisjon. $ vedlegg;?>> Alt du trenger er å erstatte body.custom-bakgrunn med CSS velger du trenger. Funksjonen Tilpasset bakgrunn vil bare endre bakgrunnen til elementet du definerer, ikke hele nettstedet. Disse utdragene fungerer også med gamle WordPress-versjoner (3.0 eller tidligere). Ferdig!
Vi etterligner i utgangspunktet den innebygde funksjonaliteten, men tilpasser den til våre egne behov.
Det er det! Håper du liker det raske tipset, jeg vil sette pris på noen kommentarer.
Oppdater: Denne opplæringen har blitt oppdatert for å fikse feilene nevnt i kommentarene nedenfor. Hvis du oppdager andre feil, vennligst gi oss beskjed!
