Tuesday, 3 October 2017

(WP) Before After: Código PHP + Javascript para mostra antes e depois das fotografias

Precisei criar um código para mostra o antes e depois da foto de um cliente.

Então fiz uma classezinha em PHP pra se usar como shortcode no wordpress.

Coloque essa classe em algum plugin seu, ou na functions.php do seu template.

Dessa forma o wordpress já estará com todos os arquivos necessários (css e js) e também terá criado o shortcode pra você usar onde quiser.

Como usar (shortcode)

[before_after before="http://seusite.com/wp-content/uploads/antes.jpg" after="http://seusite.com/wp-content/uploads/depois.jpg"]

Ajustes

Você pode ajustar o texto “BEFORE” e “AFTER” que aparece na renderização desse plugin e trocar para o português..
Insira o css abaixo no seu site.

twentytwenty-before-label:before{content:"Antes"}.twentytwenty-after-label:before{content:"Depois"}

Saturday, 6 May 2017

Wednesday, 3 May 2017

Parsing (crawling) (scrapping) imagens do post de um arquivo XML exportado do WordPress

Eu estava precisando puxar as imagens de um wordpress que estava num servidor pra outro. Porém eu não tinha acesso ao FTP para migrar as imagens que o cliente anexou ao post.

Com a própria ferramenta de exportação do wordpress eu criei um XML onde viria todo o conteúdo pra mim, mesmo assim, não teve jeito dessa ferramenta de migração/exportação do wordpress me entregar essas imagens, mantendo o endereço do site antigo e as imagens ainda hospedadas lá.

Por isso eu primeiro criei um script para baixar as imagens pro meu servidor


$xml = simplexml_load_file('posts.wordpress.2017-05-03.xml');
$items = $xml->channel->item;

//regex do filter images
$regex = '/src="(.*?)"/';


foreach($items as $item) {
	
	//get encoded from xml exported wordpress file
	$body = (string) $item->children('http://purl.org/rss/1.0/modules/content/')->encoded;
	
	//find images
	preg_match_all($regex, $body, $matches);

	foreach ($matches[1] as $url) {
		// i'll output line by line that url for you
    	// echo $url . "\n";
    	// i'll append this url in a list file
    	file_put_contents('list.txt', $url . "\n", FILE_APPEND | LOCK_EX);
	}
}

// I need wget installed in your terminal
system('wget -x -i list.txt');

rodei esse script acima pelo ssh com o seguinte comando

php download-images-wp.php

onde download-images-wp.php é o nome do arquivo que coloquei o código acima ok?

Depois desse script eu precisei rodar outra rotina no banco de dados pra poder mudar o dominio.

UPDATE wp_posts 
SET post_content = REPLACE (post_content, 'www.dominioantigo.com', 'www.novodominio.com');

pronto.. agora eu baixei todas as imagens que tinha no outro servidor e atualizei o banco para apontar para meu novo dominio.

Saturday, 25 February 2017

Vue-cli: Como criar protótipos rápidos com vuejs

Criar protótipos com vuejs e maneira super rápida é tão fácil… somente 4 comandos no terminal

npm install -g vue-cli

para instalar o vue-cli de maneira global. Se você já fez esse passo uma vez, não precisa mais para os próximos projeto

vue init webpack meuprojeto

para iniciar o projeto

cd meuprojeto && npm install

para ir para o diretório do seu novo projeto instalar as dependências

e por fim

npm run dev

para rodar seu projeto!!