Приветствую!
Юзаю wordpress с адаптивной темой.
Столкнулся с необходимостью придать Custom Backgrounds свойство background-size.
все бы ничего,но background задается не в настройках темы а в админке самого wordpress.
в css это никак не регулируется а как оказалось этим правят два файла customize-preview.js и customize-preview.min.js
в сети информации по данному поводу нет,видать я первый кого не устроил wordpress
как добавить данное свойство в js понятия не имею по причине полного отсутствия знаний в js.
код прилагается.
файл
customize-preview.js
/* Custom Backgrounds */
bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
return 'background_' + prop;
});
api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
var body = $(document.body),
head = $('head'),
style = $('#custom-background-css'),
update;
update = function() {
var css = '';
// The body will support custom backgrounds if either
// the color or image are set.
//
// See get_body_class() in /wp-includes/post-template.php
body.toggleClass( 'custom-background', !! ( color() || image() ) );
if ( color() )
css += 'background-color: ' + color() + ';';
if ( image() ) {
css += 'background-image: url("' + image() + '");';
css += 'background-position: top ' + position_x() + ';';
css += 'background-repeat: ' + repeat() + ';';
css += 'background-attachment: ' + attachment() + ';';
}
// Refresh the stylesheet by removing and recreating it.
style.remove();
style = $('<style type="text/css" id="custom-background-css">body.custom-background { ' + css + ' }</style>').appendTo( head );
};
$.each( arguments, function() {
this.bind( update );
});
});
api.trigger( 'preview-ready' );
});
})( wp, jQuery );
файл
customize-preview.min.js
!function(a,b){var c,d=wp.customize;c=function(a,b,c){var d;return function(){var e=arguments;c=c||this,clearTimeout(d),d=setTimeout(function(){d=null,a.apply(c,e)},b)}},d.Preview=d.Messenger.extend({initialize:function(a,e){var f=this;d.Messenger.prototype.initialize.call(this,a,e),this.body=b(document.body),this.body.on("click.preview","a",function(a){a.preventDefault(),f.send("scroll",0),f.send("url",b(this).prop("href"))}),this.body.on("submit.preview","form",function(a){a.preventDefault()}),this.window=b(window),this.window.on("scroll.preview",c(function(){f.send("scroll",f.window.scrollTop())},200)),this.bind("scroll",function(a){f.window.scrollTop(a)})}}),b(function(){if(d.settings=window._wpCustomizeSettings,d.settings){var a;d.preview=new d.Preview({url:window.location.href,channel:d.settings.channel}),d.preview.bind("settings",function(a){b.each(a,function(a,b){d.has(a)?d(a).set(b):d.create(a,b)})}),d.preview.trigger("settings",d.settings.values),d.preview.bind("setting",function(a){var b;a=a.slice(),(b=d(a.shift()))&&b.set.apply(b,a)}),d.preview.bind("sync",function(a){b.each(a,function(a,b){d.preview.trigger(a,b)}),d.preview.send("synced")}),d.preview.bind("active",function(){d.settings.nonce&&d.preview.send("nonce",d.settings.nonce),d.preview.send("documentTitle",document.title)}),d.preview.send("ready",{activePanels:d.settings.activePanels,activeSections:d.settings.activeSections,activeControls:d.settings.activeControls}),a=b.map(["color","image","position_x","repeat","attachment"],function(a){return"background_"+a}),d.when.apply(d,a).done(function(a,c,d,e,f){var g,h=b(document.body),i=b("head"),j=b("#custom-background-css");g=function(){var g="";h.toggleClass("custom-background",!(!a()&&!c())),a()&&(g+="background-color: "+a()+";"),c()&&(g+='background-image: url("'+c()+'");',g+="background-position: top "+d()+";",g+="background-repeat: "+e()+";",g+="background-attachment: "+f()+";"),j.remove(),j=b('<style type="text/css" id="custom-background-css">body.custom-background { '+g+" }</style>").appendTo(i)},b.each(arguments,function(){this.bind(g)})}),d.trigger("preview-ready")}})}(wp,jQuery);
буду рад любой помощи,как практической так и теоретической)
