O player nativo do Powerpress é extremamente básico e pouco chamativo, sua versão mais rebuscada e com várias funções está disponí­vel apenas para usuários da hospedagem do Blubrry. Porém, é possí­vel, localmente, customizar o player do Powerpress como quisermos.

Abaixo mostrarei como construí­ o player do Mundo Podcast. Com base nele, você poderá fazer igual ou customizar ao seu gosto ou ao formato do seu site.

Requisitos:

• Ter o plugin Powerpress instalado (Tutorial Powerpress)
• Entender um pouco de PHP e CSS para não explodir seu site

Player

O player atual do Mundo Podcast oferece opções para Download do arquivo mp3, download do arquivo em formato zip e uma opção para assinatura do feed.

Desabilitando o player do Powerpress

Primeiramente, o player não será mais carregado automaticamente nos posts em que você inseriu a URL do arquivo mp3. Você desabilitar essa função. Iremos inserir algumas linhas de código em seu site para que o player seja carregado customizado ao seu gosto.

Para desabilitar o player, acesse o menu “Powerpress”, vá até a aba “Website” e marque a opção “Desativar”. Desabilite também e exibição dos links de download. Salve.

Feito isto. Vamos colocar a mão na massa.

Como criar e customizar esta estrutura

1º Passo – Arquivos necessários

Os í­cones exibidos em cada botío são fontes, faça o download dessa fontes clicando aqui. Descompacte o arquivo e coloque a pasta “fonts” na raiz do seu site, na pasta public_html.

2º Passo – Onde inserir o código do player

Localize na pasta do seu tema o arquivo single.php, ou o arquivo usado para gerar as postagens. Localize o código responsável por inserir a imagem principal do post, nós iremos inserir o player logo abaixo dela, fazendo assim uma integração de imagem e áudio, algo similar a um ví­deo.

3º Passo – Código do player

Insira as 32 linhas de código abaixo logo depois do código responsável por inserir sua imagem destacada.

Explicando o código do player

• Linha 1 – Determina que o código do player será carregado apenas em posts que possuí­rem um arquivo MP3 inserido.
• Linha 3 – Insere o player
• Linhas 5 a 31 – Insere o botões de baixar MP3, ZIP e assinar
• Linhas 19 a 25 – Insere um link para o arquivo zip a partir do arquivo MP3.

Como isso é feito? O código pegará o tí­tulo do arquivo mp3 e o converterá para zip.
Ex: episodio-1.mp3 se transformado em episodio-1.zip.

• Linhas 24 – URL para a pasta onde o arquivo ZIP está hospedado. VOCíŠ DEVERí substituir a URL entre aspas pela URL correspondente onde você hospeda seus arquivo ZIP. Não esqueça do tracker do Blubrry.
• Linha 29 – Altere o texto “URL FEED RSS” para a URL do feed do seu podcast.

Dessa forma, apenas inserindo o arquivo mp3 no post, o sistema saberá onde o zip está hospedado.

4º Passo – CSS (Estilo)

Acesse a pasta do seu tema e localize o arquivo style.css. É nesse arquivo que iremos inserir as linhas de css.

Observação: Caso não queira usar o arquivo do tema, crie com o bloco de notas um arquivo chamado player.css. Salve esse arquivo na raiz do seu site, na pasta public_html. Em seguida, vá na pasta do tema e procure pelo arquivo header.php, abra-o e localize a tag </head>, logo abaixo dela insira a seguinte linha:

5º Passo – Código CSS

Insira as 63 linhas de código abaixo no final do seu arquivo style.css ou no arquivo novo que você criou.

Explicando o CSS

• Linhas 2 a 5 – Estilo do player.
• Linhas 8 a 36 – Estilo dos botões.
• Linhas 39 a 63 – Estilo dos í­cones dos botões.

Player:

• Linha 3 – Código HEX da cor do background do player.
• Linhas 4 – Determina a distncia do player para as bordas.

Background dos botões:

• Linha 24 – Código HEX da cor do background do primeiro botío.
• Linha 26 – Código HEX da cor do background do segundo botío.
• Linha 28 – Código HEX da cor do background do terceiro botío.

Salve o arquivo.

Com isso, seu player ficará igual ao do Mundo Podcast, mas você pode alterar algumas linhas, alguns códigos css e deixá-lo exatamente como você quer, de acordo com seu site.

P.S: Essas modificações NÃO impedem você de atualizar o plugin. As alterações não serío perdidas.

Beijo no coração.