Bom, pelo que eu entendi do código que você postou, você tem 3 arquivos .css
diferentes, e você está tentando randomizar qual deles vai ser carregado e usado pela página. Como eu sugeri nos comentários, talvez seja mais inteligente fazer essa randomização toda vez que o usuário entra na página, e não necessariamente a cada 30 minutos. Guardar esse tempo pode ser feito com cookies
ou localStorage
(isso falando exclusivamente do lado do cliente) mas uma sessão anônima já pode quebrar a lógica, fora que, pelo que percebi, a sua randomização não leva em conta o css
que estava aplicado antes do cookie
expirar será excluído da próxima randomização. Ou seja, você pode acabar trocando, após 30 minutos, o arquivo1.css
pelo arquivo1.css
!
Portanto, vou basear a minha resposta em uma randomização instantânea, e não a cada 30 minutos, conforme você pediu nos comentários. Caso você a aceite, talvez seja interessante editar a pergunta. A minha resposta também não levará em conta a verificação do css
anterior.
Vou dar duas soluções: Uma mudando o href
da tag <link>
, conforme o seu código, e outro alterando a classe da tag <body>
, o que acho mais interessante, pois você pode concentrar todo o seu css
em um arquivo só.
Alterando o <href>
De acordo com esta linha
<link rel="stylesheet" id="bones-stylesheet-css" href="http://www.mople.com.br/wp-content/themes/mople/library/css/mople-theme-1.css" type="text/css" media="all">
Tirei a conclusão (e assumo como verdade a partir de agora) que seus arquivos .css
tem os nomes
mople-theme-1.css
mople-theme-2.css
mople-theme-3.css
Com javascript
puro, você pode criar o arquivo .css
dessa maneira:
var _random = Math.floor((Math.random() * 3) + 1);
var _href = 'http://www.mople.com.br/wp-content/themes/mople/library/css/mople-theme-' + _random + '.css';
var _link = document.createElement('link');
_link.setAttribute('rel', 'stylesheet');
_link.setAttribute('type', 'text/css');
_link.setAttribute('href', _href);
var _head = document.getElementsByTagName('head')[0];
_head.appendChild(_link);
Isso faz com que, a cada vez que a página for carregada, um dos 3 arquivos seja carregado juntamente. Vale lembrar que isso não garante que toda vez será um arquivo diferente, apenas garante que será um dos 3.
Alterando a classe da tag <body>
Eu acho essa opção um pouco mais válida, uma vez que você teria apenas um arquivo .css
para manter. Supondo que você tenha classes do tipo
.tema-1{}
.tema-2{}
.tema-3{}
Que controlem a sua cor de fundo, por exemplo, e que todo o resto do seu tema cascateie a partir delas (i.e., o seletor h1
para o .tema-1
seria .tema-1 h1{}
, e assim por diante, você pode adicionar a classe à tag <body>
randomicamente, de uma maneira similar ao exemplo anterior. Usando puro javascript
var _random = Math.floor((Math.random() * 3) + 1);
var _body = document.getElementsByTagName('html')[0];
_body.className = 'tema-' + _random;
Você pode ver um exemplo básico desse funcionamento nessa pen. A cor de fundo muda cada vez que você faz um reload, e a cor do texto do <h1>
muda também, de acordo com o tema.
EDIT
Consegui chegar em uma solução onde a cada 30 minutos, o arquivo .css
que será carregado é diferente, garantindo que não será igual ao anterior (ou seja, trocar o arquivo1.css
por arquivo1.css
.
Basicamente, crio dois cookies
: o primeiro, chamado last
, guarda uma referência a qual foi o último arquivo que foi criado. O segundo, denominado css
, recebe o valor true e tem uma validade de 30 minutos. Quando ele deixa de existir, eu uso o valor guardado em last
para garantir que ele não seja o próximo a ser criado. Fiz alguns poucos testes, e parece-me que está tudo correto. Veja se o código lhe atende e me avisa. Solução em puro JavaScript
EDIT 2
Faltava recriar o cookie que controlava a expiração do tempo. Criei um método que faz exatamente isso. Veja o código alterado
function getCookie(cname) { //método retirado do site da W3C
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return null;
}
function createStylesheet(_file){
var _href = 'http://www.mople.com.br/wp-content/themes/mople/library/css/' + _file + '.css';
var _link = document.createElement('link');
_link.setAttribute('rel', 'stylesheet');
_link.setAttribute('type', 'text/css');
_link.setAttribute('href', _href);
var _head = document.getElementsByTagName('head')[0];
_head.appendChild(_link);
document.cookie = "last=" + _file; //cria um cookie dizendo qual foi o ultimo css
}
function createExpireCookie(){
var _date = new Date();
_date.setTime(_date.getTime()+(30*60*1000));
var _expires = ";expires=" + _date.toUTCString();
document.cookie = "css=true"+ _expires; //cria cookie com validade de 30 minutos
}
if(null == getCookie('last')){ //nao existe cookie do ultimo arquivo
createStylesheet('mople-theme-1');
createExpireCookie();
}
else if (null == getCookie('css')){ //existe cookie referente ao ultimo css, mas já se passaram 30 minutos
var _sheets = ['mople-theme-1', 'mople-theme-2', 'mople-theme-3']; //possíveis arquivos
var _index = _sheets.indexOf(getCookie('last'));
_sheets.splice(_index, 1); //remove o ultimo do array de possibilidades
createStylesheet(_sheets[Math.floor(Math.random()*_sheets.length)]); //cria um css randomizando as possibilidades do array
createExpireCookie();
};