Customizar o Player do Powerpress

21 julho 2016 Por Thiago Miro
Customizar o Player do Powerpress

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:

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.

player do mundo podcast

Desabilitando o player do Powerpress

desabilitar playerPrimeiramente, 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 distância 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.

Euler ETI Euler ETI