WordPress Temas

Procure outros textos relacionados a este, no campo de busca desse blog , digitando “WordPress”.

 

Tema Nevia (WordPress)

Demonstração: http://purethe.me/demo/?theme=nevia
Documemtação: http://www.docs.purethemes.net/nevia/

nevia-miniatura

Traduzindo seções do tema NEVIA

O tema NEVIA, no modelo de página Home Page Template vem com as seções “Recent works“, “Recent news” e “Testemonials” com shortcodes (marcações de metatags * = [shortcode]) simpificadas, sem opções de edição/tradução dos títulos e subtitulos (em negrito e normal/itálico/cinza claro).

nevia-home.page.template-secoes

Para resolver isso basta ir na barra de ferramentas do editor da página/post e procurar “Add recent items” ou “Add testemonials” e substituir os códigos existentes (simplificados) por códigos gerados por esses botões (códigos completos).

nevia-editor-barra.ferramenta

Para não ter surpresas, compare os parâmetros/opções do “código simplificado” com o “código completo”, antes de remover o “código simplificado”. Faça as adaptações testando e modificando.

Exemplo:
Código simplificado: [recent_work limit=”2″][/recent_work]
Código completo: [recent_work limit=”2″ title=”Seu título” orderby=”date” order=”DESC”  carousel=”yes” filters=””]Seu texto[/recent_work]

Se precisar traduzir o tema, leia este link sobre como traduzir temas do WordPress.


Notas:
(*) chamo metatag ou metamarcação códigos que inserem funcionalidades ou conteúdo que vão além da própria marcação.
Ex.: a tag <B> = Bold, do HTML, apenas formata texto em negrito.
Um shortCode  (ex..: [Recent Blog]) insere título, subtítulo, número de resumo de postagens a serem exibidas, p.ex.
O HTML5 e a linguagem ColdFusion são exemplos disso.

Home

O tema Nevia possui galeria de imagens/slide-show na home em duas versões: com imagem animada (na demonstração) e estática; você escolhe o tipo de galeria ao criar e inserir as imagens.

Tema Svelde

svelte-wp-tema

  • Esse tema tem versão gratuita e paga;
  • a versão gratuita possui apenas a página inicial;
  • a versão paga se resume a 3 modelos de página: a home, os links da home (posts) e páginas.
    A home tem links para as postagens.
  • O autor possui outros temas, mais simples, completos e totalmente gratuitos.

As dicas a seguir tem como objetivo auxiliar a deixar o tema Svelte o mais próximo do exemplo de demonstração do site oficial:
http://demo.themecobra.com/svelte/

Como definir a ordem das imagens da home (blog)

Imagens da galeria de fotos tipo carrossel (slider)

As imagens e os textos da página inicial (Home) vêm dos posts; estes por sua vez para exibir a galeria carrossel/slider (e miniaturas da Home) tem de ter definida uma imagem destacada nos posts.
A ordem das imagens da galeria é aleatória, muda cada vez que a home é carregada.

Miniaturas de fotos

Basta definir a hora dos posts: quanto mais tarde (ou recente) for o horário, mais no início. Ex.: o post 1 publicado com a hora 4:02 aparecerá entes do post 2 com hora de 4:01.

Observações:

  • O tamanho das miniaturas é 300 x 160 px; relembrando: estas imagens também aparecem  na galeria de slides (logo acima), que por sua vez é definida nas imagens destacadas dos posts. Assim sendo, a imagem (destacada) do post deve ser proporcional, para que não haja distorçoes – algo em torno de 878 x  468 pixels.
  • Você pode isserir imagens dentro do post, mas na postagem do blog, esta imagem vai aparecer abaixo da imagem destacada.
  • Se por algum motivo você não definir a imagem destacada no post (você querer ter a página de blog em outro local que não a Home ou uma página de blog diferente do modelo; neste caso pode usar um plug-in como Posts in Page) a imagem dentro post ficará no topo da postagem.

Como exibir links de numeração de páginas no rodapé da Home

Basta definir nas preferências do WordPress quantos posts serão exibidos. P.ex., se tiver 7 posts publicados e você definir em
Dashboard/painel de controle

configurações
 leitura
que apenas 6 páginas serão exibidas, você terá links para a página 1 e 2, no rodapé da Home.

Problemas:

Não consegui manter as cores da home, ao mudar a home de blog para página estática e depois para para blog novamente.

Template Monster Tema 52056 (Restaurant) versão 3.1

restaurant-theme52056-editado

Esse tema do Template Monster é um tema-filho do Cherry Framework, muito utilizado atualmente como tema-pai (base) de outros temas.
A versão gratuita vem com apenas 2 layouts de página, mas como tem certa complexidade, seguem aqui algumas dicas básicas:

  • leia a documentação que vem com o tema, vai ser útil (!)
  • Comece a instalação pelo tema-pai, o Cherry FrameWork
  • Você vai precisar instalar arquivos-padrão para ver o tema conforme ele é oferecido/vendido

Galerias de fotos

As imagens do slide-show (galeria de fotos maior, no topo da home) são gerenciadas na seção Slides (Dashboard/Painel de controle > Slides); os links destas imagens ficam neste lugar, também, na última opção (URL).

As imagens da galeria de fotos menor, que aparece no meio/final home (página inicial), vem das imagens destacadas da seção portfolio (Dashboard/Painel de controle > Portfolio): páginas image format, gallery format, p.ex.

Configurando a galeria de fotos (menor)

1) Há uma descrição e uma legendas nas fotos dessa galeria de fotos (menor):

  1. Descrição da foto que aparece ao passar o cursor sobre a miniatura da foto (tag “alt” da imagem)
  2. Legenda no rodapé da foto ampliada, à esquerda (ao clicar na foto)

Para modificar ambas, primeiro observe qual o nome “original” da foto (basta passar o cursor sobre a foto para ver sua descrição); neste exemplo, usarei o image format.

  • Depois disso vá à seção portfolio (Dashboard/Painel de controle > Portfolio), procure o nome da foto (image format, neste exemplo) e escolha “edição rápida”
  • Modifique o título do portfólio (para “Nome 01”, p.ex.) e salve as alterações.
  • A descrição e a legenda das fotos estão modificadas.

2) definindo a ordem das fotos

As fotos serão exibidas da seguinte forma: as páginas de portfólio mais recentes serão as primeiras imagens da galeria. Assim sendo, se deseja que determinada foto fique no início, insira esta foto por último. Ser tiver fotos em ordem pré-definida, insira as fotos da última para a primeira foto.

Resumo dos posts abaixo do slide-show

Os resumos dos posts na Home ficam na seção de páginas (Dashboard/Painel de controle > Pages/Páginas > página da home).
Antes de prosseguir seria interessante criar ou definir uma categoria para seus posts (ex.: serviços) e definir esta categorias nestes posts desejados.

O shortcode ( [código] ) que insere os posts, na página que é fornecida como exemplo no modelo, é semelhante a esse:

[title_box title=”Latest Posts”]
[posts_grid columns=”3″ rows=”1″ order_by=”date” order=”DESC” thumb_width=”370″ thumb_height=”219″ meta=”yes” excerpt_count=”14″ link=”yes” link_text=”more info”]

Se você remover esse código e ir no editor do WordPress vai achar o botão “Insert Cherry Shortcode” > Posts > Post Grid que vai lhe exibir um atela com diversas opções para inserir seus posts. Defina a categoria inicialmente sugerida (neste exemplo, serviços).

Dependendo das opções que escolher, o seu código será semelhante a esse:

[title_box title=”Serviços”]
[posts_grid  columns=”3″ rows=”1″ order_by=”date” order=”ASC” thumb_width=”370″ thumb_height=”219″ meta=”yes” link=”yes” excerpt_count=”28″ category=”serviços” link_text=” “]

Observe o parâmetro category=”serviços”. São os posts dessa categoria (serviços) que serão exibidos na Home.

Páginas com posts

Barra lateral

Você pode remover ou editar as opções da barra lateral direita indo em Dashboard/Painel de controle > Appereance/Aparência > Widgets
Por padrão ali ficam as seções de Categorias (links para páginas/posts com as categorias exibidas) e advanced cycle (resumo dos posts), por exemplo.

Caso opte por remover todos os widgets, irá aparecer os widgets do tema pai (meta,  arquivos, busca, etc). Você pode incluir um widget de texto, sem nenhum conteúdo, para a coluna ficar vazia.

Remover outras opções

Você deverá usar as folhas de estilo (style.css) do modelo para ocultar seções como comentários (lista e formulário para postar comentários).

 

Tema Be Clean

be-clean

Conceitos básicos (práticos)

Antes de tudo, leia a documentação que vem com o tema, se ainda não o fez; ela informa muitos detalhes sobre como usar o BeClean.

Se já leu (ou não teve tempo /paciência de ler) e ficou com dúvidas , a grosso modo o Be Clean utiliza shortcodes (códigos entre colchetes que eu chamo de meta-tags) para inserir suas funcionalidades, no editor de páginas e posts.
Nestes locais, você clica no botão azul, no topo da página ou post, para alternar entre o default editor (ou editor visual) e o Content editor (editor tradicional do WordPress, em modo texto)

Default editor: ícones que representam os shortcodes/códigos do tema. Cada ícone representa um objeto, que contém outro, como no HTML :
Ex.:
<html><head><title></title></head></html> = [shortcode 1][shortcode 2][shortcode 3][/shortcode 3][/shortcode 2][/shortcode 1]

be-clean-shortcodes-content-editor

Para editar esse código, deve-se procurar seu conteúdo (que pode ser imagem ou texto) e visualizar os shortcodes (containers). Não se deve incluir espaços ou quebras de linha nesses shortcodes, pois eles param de funcionar.

Content composer (padrão): editor visual dos shortcodes

be-clean-shortcodes-default-(visual)-editor

Seção correspondente aos objetos visuais (e shortcodes):

wordpress-temas-be-clean-secao

Como editar o shortcode portfólio

Este tema possui diversos  shortcodes (metatags) em modo visual/grafico, por padrão.
Antes de tudo, leia a documentação oficial que vem na pasta
DOCS > BE CLEANDOCS,
tópico VISUAL COMPOSER & SHORTCODES;
ela explica como as seções das páginas funcionam.

Utilizo nesta explicação páginas que vem na demonstração do tema, para facilitar a localização, entendimento e edição. Portanto, tenha o tema Be Clean instalado completo, antes de prosseguir.

Nome da página de exemplo: home
Seção/shortcode: portfolio
home-3

Para exibir o conteúdo do shortcode Portfolio na sua página (neste exemplo, Home) faça o seguinte:

  1.  crie um projeto – que também pode ser chamado de portfolio – (dashboard/painel de controle do WordPress > Projects) e dê um nome (ex.: serviços domésticos)
  2. no painel direito da página do projeto criado,procure a opção PROJECT CATEGORIES e crie pelo menos uma (ou duas) categoria(s) para seu projeto; ex.: serviços (e residenciais). as categorias definem quem vai ser exibido no shortcode Portfolio.
  3. defina uma imagem destacada para ser exibida na lista de portfólios: no painel direito da página, procure a opção IMAGEM DESTACADA

Agora volte para a página onde o shortcode Portfolio está inserido (página Home)

  • procure a seção onde há o shorcode Portfolio e procure a barra cinza acima do ícone Portfolio; clique no ícone lápis para editar o shortcode.
  • role a tela e procure a seção METADATA; veja se a opção CATEGORIES está marcada; isso vai definir que projetos (ou portfólios) com categorias de projeto definidas serão exibidas aqui.

Como editar texto da galeria de posts, na seção Latest News

O texto que aparece abaixo das miniaturas dos posts, na seção (original) Latest News, é um resumo dos posts.

home-5

Para exibir/editar esses textos, vá à página de posts, e clique na guia Screen options/Opções de tela e selecione a opção Resume/Resumo

be-clean-editar-texto-postagens-home-1

Geito isso, role a tela de postagem para baixo e digite o texto desejado no campo Resumo.

be-clean-editar-texto-postagens-home-2

O texto que, na página, aparece ao clicar no botão “Read more”/”Leia mais” é o texto do próprio post.

 

Problemas ao editar ícones da página Contacts

O tema Be Clean tem problemas para renderizar recursos usando o navegador de internet Google Chrome ou Opera; se tiver problemas nesse sentido (tela congelar, opções indisponíveis), use outro navegador (Mozilla Firefox, p.ex).

wordpress-tema-be-clean-icones-contact

Como traduzir palavras no tema Be Clean

Após a instalação do tema Be Clean, mesmo estando com o WordPress em seu idioma (neste caso, em português do Brasil) algumas palavras como “Read more”/”Leia mais” pode aparecer em alguns botões e seções do site (p.ex., no resumo das postagens na página Home).
Nas postagens, na área de editor do WordPress há um campo chamado “Read more button” (vide ilustração a seguir, fornecida pelo suporte da empresa que comercializa o tema):

2016-06-23_0934
Captura de tela: cmsmasters support center, agente de suporte Kate, 23/Jun , 09:35 EEST

Mas esta opção pode não funcionar, como ocorreu comigo (!).

Neste caso o Be Clean possui uma pasta em
[instalação do WordPress]/wp-content/themes/be-clean/framework/languages
onde há o arquivo .POT com a lista de palavras do tema.

Para traduzir a(s) palavra(s) desejadas, você pode seguir este tutorial sobre como traduzir modelos/temas doWordpress.

Editando o slide-show do Be Clean

O BeClean possui por padrão um slide-show na home, complexo como qualquer programa de animação.

Para alterar rapidamente o slide-show padrão, vá no painel de controle > LayerSlider WP > All sliders

be-clean-slide-show-1

Selecione o slider home-main para ver as configurações dele.

be-clean-slide-show-2

Selecionando o elemento a ser editado (texto, p.ex.) mais abaixo estão as opções desse elemento (texto, imagem, cor, etc).

Como trocar a cor dos boxes/caixas/blocks/blocos de layout do Be Clean

Observe que o editor de páginas/posts no modo (visual) content composer exibe as sections/seções em forma de caixas com ícones de edição (lápis). E existem pelo menos 3 níveis de edição/settings:
Section, Column e Featured Block Shortcode Settings.

be-clean-content-composer-secftions

No caso das caixas/boxes coloridos da home, com texto

wallace-vianna-web-designer-freelancer-autonomo-rio-janeiro-rj-portfolio-mf-PQ

A opção para edição de cor fica em Featured Block Shortcode Settings > Color overlay

wordpress-be-clean-mudar-cor-box-block

Se a cor não estiver definida, será aplicada uma das cores-padrão do tema (tom de azul médio, p.ex.)

Como alterar outras cores no Be Clean

Muitas das opções de for estão nas telas do próprio elemento a ser editado.
Por exemplo, as cores dos ícones do formulário de contato estão em
Icon list > Icon List Shortcode Settings > (ícone) > Custom List Item Color

wordpress-be-clean-mudar-cores

 

Tema Mokka

mokka-wordpress-temaa

Esse tutorial pressupõe que você já trabalha ou usa o WordPress, ou seja, já sabe instalar ou administrar uma instalação do WordPress, nem que seja só para postar textos com imagens.

Antes de ler este tutorial você deve (como todos os temas/modelos/templates para WordPress /WP)
– ler a documentação do tema (na pasta docs, documentation ou documentação)
– instalar o arquivo com as páginas de demonstração (demos) antes de iniciar a fazer seu blog.

O layout de página utilizado aqui será New HomePage 4 (que fica na seção de pages/páginas do wp);

mokka-pages-nhp4-topo

As seções do blog abordadas neste tutorial serão as duas primeiras (Grid/slider e Latest by category).

a página inicial de seu blog você define nas configurações de leitura do WordPress (Dashboard/Painel de controle > Settings/Configurações > Reading/leitura). Escolha, neste exemplo, a NewHomePage4.

As configurações desta página devem ser:
Modelo: page composer (para exibir as opções de configuração do modelo de página)
1. Grid/slider:
Select grid slider: owl Carrossel
Select option: specific categories
Categories: (selecione as categorias desejadas)
Number of posts: 6 (recomendado)

  1. Latest by category:
    Main title: (digfitar o títuilo da categoria; neste exemplo, cuidados com a pele)
    Subtitle: (difgitar subtítulo)
    Category: (selecionar a categoria desejada na lista)

  2. code box:
    (inserir a url/localização da imagem, no seu WordPress)

 

Definido esses pressupostos, vamos às perguntas mais comuns:

Como exibir as postagens no layout de página escolhido?

Crie uma categoria para suas postagens (Dashboard/Painel de controle > Posts > Categorias; ou Dashboard/Painel de controle > Posts ).
Neste exemplo a categoria será “Novidades”.

Você pode aproveitar uma postagem existente (pode ser a primeira da lista de postagens existentes) ou criar a sua. Defina esta categoria – Novidades, p.ex. – na sua postagem.

Por fim, volte a página que está utilizando e selecione na segunda seção do seu layout – Latest by category – a categoria das postagens a serem exibidas – Novidades.

Salve tudo e acesse a home de seu blog com o tema Mokka. Apenas os posts com a categoria definida estão sendo exibidos.

mokka-pages-nhp4-latest-category

Observações importantes:

  • Você pode adicionar ou remover seções desta página (ou modelo de página inicial) através do botão azul “Add section” e dos ícones “+” e “-” no topo de cada seção
  • Você só pode exibir uma categoria por seção/section. Se desejar exibir mais de uma categoria, terá de ter mais de uma seção por página

Como exibir imagens no slide-show do topo da página?

Neste exemplo, iremos exibir no slide show do topo da página apenas as imagens de determinada categoria.
Se não o fez, crie uma categoria para suas postagens (Dashboard/Painel de controle > Posts > Categorias; ou Dashboard/Painel de controle > Posts ).
Neste exemplo a categoria será “Novidades”.

Você pode aproveitar uma postagem existente (pode ser a primeira da lista de postagens existentes) ou criar a sua. Defina esta categoria – Novidades, p.ex. – na sua postagem.

Por fim, volte a página que está utilizando e selecione na primeira seção do seu layout – grid/slider -a categoria das postagens a serem exibidas – Novidades.

Salve tudo e acesse a home de seu blog com o tema Mokka. Apenas os posts com a categoria definida (Novidades) estão sendo exibidos.

mokka-pages-nhp4-grid-slider

Na página da postagem, procure “Post options” > “Add this post in HP Grid/slider” e marque a opção “Add this post”

mokka-pages-nhp4-grid-slider-2

Por fim, defina a imagem destacada para seu post, na seção “Imagem destacada” de sua página de post:

mokka-pages-nhp4-grid-slider-3

Pronto! a imagem agora faz parte de seu slide-show, na página inicial de seu blog.

Menu primário e secundário (localização e ativação)

wordpress-mokka-main-menuwordpress-mokka-secundary-menu

Definindo o Mega Menu (menu com fotos e submenus)

mokka-mega-menu

No Mega Menu cada link (categoria) no menu principal pode ter um sub-menu exibido  de 3 a 4 modos diferentes:

  • Por categorias – adicione ao seu menu do WordPress  as categorias disponíveis em Aparência > Menus
  • Posts – Vá em Posts > Categorias; procure “Latest Posts in drop down menu” e selecione a opção “Enable”.
  • Ambos acima – faça ambas ações acima.
  • Posts ou páginas isoladas – pegue o link permanente de cada página ou post e adicione manualmente no seu menu em Aparência > Menus > Links

Como definir os widgets ou sidebar/barras laterais

mokka-wordpress-layout-posts

Basta ir em Posts > Editar o post;
Procure Post Layout e escolha o layout que deseja (com ou sem widgets/sidebar/barra lateral).

Como editar o crédito da foto/imagem nos posts

mokka-wordpress-credito-imagens-1

Se desejar remover ou editar o crédito das imagens nos posts…

mokka-wordpress-credito-imagens-2

  • Vá em Posts > editar o post;
  • Procure “Featured image credit line”
  • Apague ou edite o texto

Problemas com o tema Mokka

  • o modelo de página New Homepage 4 parece não exibir corretamente na home do blog mais do que 6 postagens (no total, somando todas as seções existentes).
  • postagens novas às vezes não entram na home (no resumo de posts e/ou slide-show) corretamente;
    a solução: copiar postagem anterior (que já aparece corretamente na home), renomear e mudar o conteúdo. Use um plugin como o Duplicate post para esse fim.

Dicas para o tema Mokka

No Dashboard/Painel de controle do WordPress há um menu para o tema Mokka: Mokka options. Ali você tem a opção de :

  • fazer backup/cópia de segurança das configurações aqui definidas por você, facilitando a restauração do tema, em outra instalação do WordPress.
  • personalizar o código do modelo, em vez de fazê-lo num tema-filho ou editando o código existente (opções que podem não funcionar)
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: