6 Jul
Dk Obama Plugin - galeria de destaques
Postado por kaiserlino em: Recursos, Todos, Wordpress. 1 Comentário
E como muitos devem ter percebido, o usado acima é nada menos que uma réplica do usado no site de Barack Obama. Quando entrei no site dele, pois sinceramente é muito bem feito, tinha reparado que usava Jquery e tentei fazer a cópia, porém não sou um grande programador. Até o dia que o pessoal do DevThought desenvolveu exatamente o que eu queria, uma cópia, e coincidentemente usava Mootools, assim como o plugin anterior que eu usava.
A criação do plugin se tornou fácil, pois foram necessárias algumas mudanças no plugin usando antes. Com isso pude aproveitar a página de opções e a garantia que o plugin funcionaria perfeitamente. Assumo que foi um processo muito mais simples do que criar do zero, porém acho besteira recriar um código que já estava correto.
Instalação:
- Baixe o arquivo “dkobama.zip“ para sua máquina.
- Extraia e envie a pasta dkobama para a “wp-content/plugins” (NÃO MUDE NENHUM NOME INTERNO OU DA PASTA).
- Ative o plugin Dk Obama no painel administrativo
- Adicione o seguinte código nos arquivos de seu template, no local onde desejar que a galeria apareça:
<?php include (ABSPATH . '/wp-content/plugins/dkobama/galeria.php'); ?>
Agora para utilizar a galeria depois de instalada, dentro da aba opções (settings) do painel administrativo basta acessar a aba Dk Obama. Os campos são auto-explicativos, portanto não deverão ter maiores problemas.
Customizando a galeria (opcional):
Para alterar as dimensões basta alterar o arquivo slideshow.css dentro da pasta “Css” do plugin. Os itens responsáveis pela largura e altura principalmente são:
#slideshow { background: url('images/fundo.gif') no-repeat top; position: relative; padding: 0px 0 0px; width: 603px; height: 306px; }
#slideshow #pictures { background: url(’images/intro.jpg’); width: 437px; height: 300px; left: 0; overflow: hidden; }
#slideshow #menu { background: url(’images/lateral.jpg’); list-style-type: none; width: 166px; height: 240px; right: 0; padding-top: 60px; }
Também pode baixar o arquivo (template-slide.zip) que contém o psd que criei para as imagens internas. Todas as imagens estão dentro da pasta “Css/images”.
