In de recente nieuwe WordPress-versie heeft WordPress een aantal nieuwe functies toegevoegd, zoals Aangepaste achtergrond, Aangepaste koptekst, enzovoort. U kunt dit in actie zien in het Twenty Eleven-thema. De aangepaste achtergrond zal een CSS-fragment toevoegen dat de achtergrond van het element, wat als u alleen wilt dat deze functie een ander element effectueert dat u opgeeft? Misschien de
,
, of elementen of een andere HTML-tag.
In deze tutorial gebruik ik Twenty Eleven (in WordPress versie 3.4) als een demonstratie. Hieronder ziet u een functie die de aangepaste achtergrondfunctie voor dit thema behandelt, waar ik het in heb gevonden functions.php het dossier:
add_theme_support ('custom-background', array (// Laat WordPress weten wat onze standaard achtergrondkleur is. // Dit is afhankelijk van ons huidige kleurenschema. 'default-color' => $ default_background_color,));
En het werd verklaard in de theme.php bestand onder de wp-includes directory:
functie add_theme_support ($ feature) global $ _wp_theme_features; if (func_num_args () == 1) $ args = true; else $ args = array_slice (func_get_args (), 1); switch ($ feature) // Deze functie is zo lang, ik toon alleen dingen die we nodig hebben 'custom-background' van de case: if (! is_array ($ args)) $ args = array (0 => array ()); $ defaults = array ('default-image' => ", 'default-color' =>", 'wp-head-callback' => '_custom_background_cb', 'admin-head-callback' => ", 'admin- preview-callback '=> ",); $ jit = isset ($ args [0] ['__ jit']); unset ($ args [0] ['__ jit']); // Samenvoegen in gegevens van eerdere add_theme_support () -aanroepen. De eerste geregistreerde waarde wint. if (isset ($ _wp_theme_features ['custom-background'])) $ args [0] = wp_parse_args ($ _wp_theme_features ['custom-background'] [0], $ args [0]); if ($ jit) $ args [0] = wp_parse_args ($ args [0], $ defaults); if (defined ('BACKGROUND_COLOR')) $ args [0] ['default-color'] = BACKGROUND_COLOR; elseif (isset ($ args [0] ['default-color']) || $ jit) define ('BACKGROUND_COLOR', $ args [0] ['default-color']); if (defined ('BACKGROUND_IMAGE')) $ args [0] ['default-image'] = BACKGROUND_IMAGE; elseif (isset ($ args [0] ['default-image']) || $ jit) define ('BACKGROUND_IMAGE', $ args [0] ['default-image']); pauze;
We kunnen het zien add_theme_support
wordt gebruikt zonder de waarde van wp-head-callback
parameter (behalve voor default-color
) dat betekent dat de standaard callback-functie zal worden aangeroepen. In dit geval is dat zo _custom_background_cb
. Het werd ook gedefinieerd in theme.php het dossier:
function _custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); als (! $ background &&! $ color) retourneert; $ stijl = $ kleur? "achtergrondkleur: # $ kleur;" : "; if ($ background) $ image =" background-image: url ('$ background'); "; $ repeat = get_theme_mod ('background_repeat', 'repeat'); if (! in_array ($ repeat, array ('no-repeat', 'repeat-x', 'repeat-y', 'repeat'))) $ repeat = 'repeat'; $ repeat = "background-repeat: $ repeat;"; $ position = get_theme_mod ( 'background_position_x', 'left'); if (! in_array ($ positie, array ('center', 'right', 'left'))) $ position = 'left'; $ position = "background-position: top $ positie; "; $ attachment = get_theme_mod ('background_attachment', 'scroll'); if (! in_array ($ attachment, array ('fixed', 'scroll'))) $ attachment = 'scroll'; $ attachment =" achtergrond -attachment: $ attachment; "; $ style. = $ image. $ repeat. $ position. $ attachment;?>Heb je nog iets gezien? Ja, het CSS-fragment dat we nodig hebben aan het einde van de functie.
Wat we moeten doen
In uw functions.php bestand, voeg je de volgende code toe:
function change_custom_background_cb () $ background = get_background_image (); $ color = get_background_color (); als (! $ background &&! $ color) retourneert; $ stijl = $ kleur? "achtergrondkleur: # $ kleur;" : "; if ($ background) $ image =" background-image: url ('$ background'); "; $ repeat = get_theme_mod ('background_repeat', 'repeat'); if (! in_array ($ repeat, array ('no-repeat', 'repeat-x', 'repeat-y', 'repeat'))) $ repeat = 'repeat'; $ repeat = "background-repeat: $ repeat;"; $ position = get_theme_mod ( 'background_position_x', 'left'); if (! in_array ($ positie, array ('center', 'right', 'left'))) $ position = 'left'; $ position = "background-position: top $ positie; "; $ attachment = get_theme_mod ('background_attachment', 'scroll'); if (! in_array ($ attachment, array ('fixed', 'scroll'))) $ attachment = 'scroll'; $ attachment =" achtergrond -attachment: $ attachment; "; $ style. = $ image. $ repeat. $ position. $ attachment;?>Het enige dat u nodig hebt, is vervangen
body.custom-achtergrond
met de CSS-selector die u nodig hebt. De functie Aangepaste achtergrond wijzigt alleen de achtergrond van het element dat u definieert, niet de hele site. Deze fragmenten werken ook met oude WordPress-versies (3.0 of eerder). Helemaal klaar!We imiteren in feite de ingebouwde functionaliteit, maar passen deze aan onze eigen behoeften aan.
Dat is het! Ik hoop dat je die snelle tip leuk vindt, ik stel reacties op prijs.
Bijwerken: Deze zelfstudie is bijgewerkt om de fouten te corrigeren die worden vermeld in de onderstaande opmerkingen. Laat het ons weten als u andere fouten opmerkt!