Como Instalar o Template Wharton no WordPress

Template Wharton para WordPress é um tema sofisticado e elegante e, ao mesmo tempo, leve e simples. Aqui estarei explicando a instalação e configuração do Wharton, mas o procedimento de instalação pode ser aplicado a outros temas adquiridos ou baixados fora do WordPress, como o Themeforest da  Envato por exemplo. O Template Wharton no WordPress pode ser totalmente customizado de acordo com a sua personalidade ou a marca de sua empresa, compartilhando suas ideias, artigos, vídeos, inserindo citações e áudio, além da opção de incorporar o seu status do Twitter e do Facebook. Veja aqui alguns exemplos da utilização do Template Wharton no WordPress: 

mulher-gold-Template-Wharton-Wordpress5

mulher-gold-Template-Wharton-Wordpress6

  • Carregar uma imagem completa para o cabeçalho na largura do post / página;
  • Controlar a cor de fundo do cabeçalho em cada página depois de pronta;
  • Controlar a opacidade da imagem de cabeçalho em cada página;
  • Repetir a imagem de fundo do cabeçalho;
  • Posicionar a imagem de fundo do cabeçalho;
  • Suporte para todos os formatos (áudio, vídeo, galeria, imagem, estado, bate-papo, os links, citações).

1. Instalação do Template Wharton no WordPress

Primeiro você precisa ter o WordPress instalado. Em caso de dúvidas acesse: http://codex.wordpress.org/Installing_WordPress

Existem duas opções para fazer upload de seu tema:
1. Via FTP : primeiro, descompacte o tema usando seu programa de FTP e carregue-o na pasta / wp-content / themes / no seu servidor.
2. WordPress Upload: entre no seu site WordPress dentro da área administrativa e vá até—>Aparência—>Temas—> Adicionar Novos Temas—> Upload.

Localize a pasta zipada do tema clique em “Instalar agora”.  Pode demorar por alguns segundos para o upload de arquivos. Com o tema já carrregado no seu servidor,  é preciso ativá-lo. Vá em  Aparência—> Temas e ativar Wharton. É recomendável a instalação do plugin Regenerate Thumbnails quando você instalar um novo tema, pois isso fará com que seus uploads de imagens sejam redimensionados para as dimensões corretas deste tema.

Você  pode encontrar o plug-in digitando regenerate thumbnails dessa forma:
Vá em plugins—> Adicionar novo —> regenerate thumbnails —>instalar agora ou você pode baixar a partir de: http://wordpress.org/extend/plugins/regenerate-thumbnails/

2. Configurando

Quando você instala o Template Wharton no WordPress, verá que ele está configurado quase exatamente como a sua DEMO. No arquivo principal de download do zip ThemeForest você encontrará uma pasta chamada “Demo XML ” que contém o XML. Agora, dentro do seu WordPress vá em-–> Ferramentas —> Importar e escolha a opção “WordPress”, vai abrir uma tela pedindo para você instalar o Plugin WordPress Importer. Clique em “Instalar agora” e depois clique em “Ativar Plugin e Importar”

mulher-gold-template-wharton-wordpress.png

Agora, escolha o arquivo clicando em “Escolher arquivo” e siga as instruções da tela.
Obs.: Se você estiver usando o plugin Formulário de Contato 7, verifique as configurações de envio de e-mail para se certificar que os e-mails irão para o seu endereço e não para o endereço none@email.com no XML de demonstração do Wharton.

3 Opções do Tema

Esse é o lugar onde você vai passar a maior parte do seu tempo. No seu painel do wordpress vá em —> aparência —> personalizar. Essa página é dividida em opções no lado esquerdo e uma visualização ao vivo do site no lado direito. A maioria das configurações será atualizada automaticamente na janela de visualização ao vivo. Para salvar as alterações que você fez, clique no botão azul “Salvar e publicar”. mulher-gold-Template-Wharton-WordpressW1Se em alguma configuração não aparecer a opção atualizar, não se preocupe, clique em “Salvar e Publicar” e, em seguida, atualize o personalizador.

3.1 Configurações Gerais
Na versão 1.1.7 do Template Wharton no WordPress foi adiconada a opção Show Comment Count on Home/Archive? (mostrar comentário na página inicial / Arquivo?). Marque essa opção se quiser ativá-la. A partir daí você pode definir o comprimento do trecho do comentário. Certifique-se, também, de marcar a opção “Auto Excerpt on Blog”.
Você também pode optar por ocultar:
• plain text (texto simples);
• logo (logotipo);
• tagline (slogan);
• comments (comentários);
• global sidebar (barra lateral);
• social sharing on posts (compartilhamento em redes sociais nas postagens).

Desde a versão 1.1.2 do Template Wharton no WordPress é possível permitir comentários em páginas e definir onde quer que o cabeçalho seja alinhado: no centro (center header) ocupando toda a tela ou na barra lateral alternativa (onde sobra um espaço na lateral) caso tenha optado por utilizar sidebar.

Usuário do Twitter: para definir o seu nome de usuário do Twitter para compartilhamento de suas postagens no twitter vá em —> viayour_username

Na versão1.0.4 foi adicionada a opção “Subtle” de layout “Sutil”. Marque essa opção para alterar o layout padrão para um mais clean (sutil) sobre os posts e páginas .

3.2 Configurações do Menu
• Hide Menu Icon (esconder o ícone do menu);
• Hide Navigation Title on Navigation (ocultar o título de navegação);
• Hide Recent Posts Title on Navigation Overlay (ocultar o título de navegação de posts recentes sobre a Navegação de sobreposição);
• Amount of Recent Posts on Navigation Overlay (definir a quantidade de posts recentes que serão mostrados na navegação de sobreposição.

A partir da versão 1.0.4 é possível mudar o sistema de menus para um sistema padrão (Use Standard Desktop Menu?) que tem uma navegação sempre visível em vez de  “clique para ativar”.
Obs.: Essa opção não tem sobreposição de navegação. Ao usar o menu padrão, você também vai estar usando o MeanMenu que, por padrão, ativa em 767px. Você pode substituir o screenwidth do Mean Menu através da opção Activate mobile menu at (only use in conjunction with “Standard Desktop” (“Ative o menu móvel”).

Obs.: Não coloque a unidade (px), apenas o número 880.

3.3 Título do site & Tagline
Edite o título do site principal e tagline (slogan ou frase perto da logo).
3.4 Cores
Esta seção permite-lhe controlar todas as principais cores e fontes de texto.
3.5 Fundo e cores de borda
Esta seção permite-lhe controlar as cores de fundo e das bordas.
3.6 Fontes
• Main Font (fonte principal): você pode escolher a partir de uma fonte do Google ou as fontes disponíveis no sistema;
• Heading & Meta Font (cabeçalho e subtítulo);
• Uppercase all “Titles”? Você pode também optar por maiúscula em todos os títulos e subtítulos.
3.7 Opções Avançadas de Fontes
O template apoia as fontes do Google na Eeb, fontes da Web Typekit e Adobe. Cole o código da fonte do serviço abaixo relacionado e em seguida digite a família de fontes conforme informado nas caixas de texto “Família de fontes para a rubrica & Main”. Por fim, escolha o seu font-weight. Você precisa salvar e publicar para visualizar suas alterações. Para localizar as Fontes do Google, vá para: http://www.google.com/fonts
Selecione o(s) tipo(s) de letra(s) e escolha “Use”. Agora, selecione a opção “Adicionar este código ao seu site:“,copie e cole-o na caixa “Service Code” box in the theme customizer e.g. “código de serviço” no tema personalizador, por exemplo. Em seguida, escolha somente a fonte, não a parte do código da família da fonte e insira em sua CSS (copie e cole em: Heading/Meta or Main e.g.). Escolha suas opções da fonte, se você quer que ela seja em itálico. Em seguida clique em —> Salvar e Publicar.

mulher-gold-Template-Wharton-WordpressW2

mulher-gold-Template-Wharton-WordpressW3

Usuários do Typekit vão precisar do código JavaScript fornecido do Typekit em: https://typekit.com/fonts
Os usuários do Adobe Web Font irão precisar copiar o código JavaScript fornecido a partir de Fontes Adobe Web em : http://html.adobe.com/edge/webfonts/
3.8 Imagem Uploads
• Logo: esta seção permite fazer o upload de um logotipo;
• Logo Retina: esta seção permite fazer o upload de um logotipo para dispositivos retina (tela em HD);
• Favicon: faça upload como um arquivo PNG, 32x32px;
• Ícone da Apple: Touch: faça upload em 144x144px:
• Post & Page Lead Image: Imagem principal de Post e página: pode ser usado até 1650px de largura e 650px;
• Body Background Tile: imagem de fundo, essa imagem será repetida ao longo de todo o fundo que pode ser visto no canto direito em telas de grande formato.

3.9 Configurações de imagem
Você pode optar por substituir as configurações de imagem existentes, como altura e largura por exemplo. Não coloque valores (px), basta digitar 1100 e não 1100px. Você deve assegurar que a caixa “Override image settings with below?” (sobrescreva as configurações conforme abaixo) esteja marcada para que as definições entrem em vigor. Uma vez salva as configurações, execute o plugin Regenerate Thumbnails, caso ainda não tenha instalado, você poderá encontrar em: https://wordpress.org/plugins/regenerate-thumbnails/
3.10 Texto Customizado
Esta seção permite que você edite o texto de:
• Home Headline Text (título da página);
• Headline da página 404 (título da página 404);
• Footer Tagline, (texto do rodapé).
Obs.: essas áreas aceitam código HTML.

Para os títulos das páginas principal e 404, o tema utiliza um Plugin JQuery chamado SlabText. Você pode inserir o texto livremente que o SlabText vai adivinhar as proporções corretas. Se você quiser um pouco mais de controle, coloque <‘slabtext’ span class => Seu texto aqui > para forçar uma linha completa.

Obs.: o uso de aspas simples no código acima é exigido, pois aspas duplas irão causar erros de tradução. Você também pode controlar o link do texto do “menu”, o texto alt da imagem do logotipo e o texto do título do logotipo.
3.11 Bloco personalizado CSS
Você pode fazer edições para o CSS aqui que não irão afetar a atualização do tema.
3.12 JavaScript do Google Analytics
Cole o código JavaScript do analytics aqui, incluindo o <script> </ script> marcas e será adicionado ao </ head> da página.
3.13 Navegação
Aqui você pode escolher o menu principal.
3.14 Página inicial estática
Essa opção é para você escolher se quer uma página estática ou as suas últimas postagens na primeira página.

4. Modelos de Páginas

Existem 3 modelos de páginas utilizadas neste tema:
1. Default (Padrão): esta é a página padrão.
2. Page – Archives (Página – Arquivos): ela tem exatamente o mesmo layout da página padrão onde serão adicionadas suas últimas 30 postagens, a categoria, o mês e o ano abaixo do conteúdo principal.
3. Page – Home Alternative (Página Inicial alternativa): aqui você pode adicionar um texto livre ou imagens para o texto “Slab” (texto de fundo). Você pode continuar utilizando a cor e imagem de fundo que vem com o páginas padrão. Para fazer desta página a sua homepage, basta criar uma nova página como Home Alternative page template (Modelo de página alternativa.) e em seguida vá para —>configurações —> leitura e escolha essa nova página como estática.

5. Blog

O Template Wharton no WordPress apoia todos os formatos de correio, conforme descrito em: http://codex.wordpress.org/
Formatos de Posts
Para facilitar o seu trabalho, existem caixas na parte inferior da cada post do blog na administração do painel WordPress. Basta escolher o formato de post na direita e em seguida preencher as informações correspondentes abaixo do editor de conteúdo, chamado “Post Formatos”.

mulher-gold-Template-Wharton-WordpressW4Aqui você pode adicionar uma ligação com detalhes de um link do post. Por padrão, as mensagens de formato de ligação irão abrir em uma nova janela. Se quiser substituir, marque a opção “Abrir esta ligação na mesma janela”.

Para obter a galeria de posts com imagens anexas por post, basta fazer upload de imagens mas não adicioná-las ao post como uma galeria, deixá-las somente como anexos e, em seguida, atualizar o post que o tema fará o resto.

A configuração de posts por página é definida da forma da forma habitual a partir do WordPress —> Configurações —> Leitura.

Biografia do Autor (Author Support: Autor):  a Bio Autor só vai aparecer se você já tiver preenchido uma descrição para esse autor. Ela vai também estar no campo ‘site’ em “Display Name” para esse autor.

6. Menus

Vá até —> Aparência —> Menus. Você pode criar um menu com o nome que quiser e colocá-lo na posição através do ‘Theme Locations’ setting.Easy (ajuste fácil de configurações do tema). Aqui está um link útil no caso de você ficar em dúvida: http://en.support.wordpress.com/menus/

7. Shortcodes

Alguns códigos estão pré-definidos para facilitar o seu uso. Para utilizá-los basta incluir os seguintes códigos abaixo em torno de seu conteúdo no editor de conteúdo para permitir os seguintes layouts …
Ícones sociais
[social site=’facebook’ url=”#” style=”black”]Facebook.com[/social]
a das seguintes cores, esses estão na seção style =
• branco
• preto
Redes Sociais

  • Twitter, adn,  Facebook,  linkedin,  googleplus,  vimeo, YouTube, zerply, Pinterest, Dribbble, github, instagram, flickr, rss, behance, Soundcloud e Mixcloud. Ex. código: [social site=’facebook’ url=”#”style=”black”]Facebook.com[/social]
  • Você tem a opção de escolher as cores branco e preto

Citações: Você também pode adicionar citações através do código[quote source=”Source in here” rating=”3″]Quote text goes in here[/quote]

Para um maior engajamento dos leitores coloque classificações na citação. Você tem a escolha das classificações em estrelas que vai até 5 em: “” seção:
• 0 (isso irá remover a classificação),  1,  2, 3, 4,5 (*****)
Em seção style = “” seção, você pode adicionar o estilo = “branco” para aspas e branco e para estrelas.

mulher-gold-Template-Wharton-WordpressW9Status:
[status_ok] Estado Ok! [/ status_ok]
[status_oops] Oops Estado! [/ status_oops]
[status_lessoops] Menos Estado Ops! [/ status_lessoops]

mulher-gold-Template-Wharton-WordpressW10Botões
Estilo e tamanho: [url = botão “http://www.meanthemes.comstyle = “gray” size = “large”

estilo = “cinza”

tamanho = “grande”. target = Botão “_ blank”] [/ botão]

Escolha as cores dos botões conforme abaixo na seção style = “”: cinza, preto, verde, azul claro, azul, vermelho, laranja e roxo.
Escolha o tamanho do botão, padrão ou grande na seção size = “” :
• pequena
• grande

mulher-gold-Template-Wharton-WordpressW11


Link
Escolha se o link será aberto na mesma janela ou em nova aba (janela) em target = “”seção:
• _self (mesma janela)
• _blank (nova aba/janela)
Tabelas
Você poderá fazer tabelas com até 6 colunas


1. Para configurar a tabela abra
2. Para inserir colunas na tabela coloque o código: [title tab = “Tab 1”] Tab Content 1 [/ tab]
3. Em seguida, repita a etapa 2 até que você tenha todas as suas colunas
4. feche os separadores com [/]
2 colunas

mulher-gold-Template-Wharton-WordpressW13

3 colunas

mulher-gold-Template- Wharton- WordPressW14

Alternância

 Alterar os estados dos títulos para open(aberto) e closed (fechado).

[toggle title=”Toggle 1″ state=”open”] Toggle Content 1 [/toggle][toggle title=”Toggle 2″ state=”closed”] Toggle Content 2 [/toggle]

Listas

Escolha a côr do estilo do ícone nas listas com o código:

[bullets style=”green” type=”tick”]

  • List item

[/bullets]

  • cinza
  • preto
  • verde
  • azul claro
  • azul
  • vermelho
  • laranja
  • roxo

 

8. Tamanho das imagens

 

Image sizes: Este tema irá redimensionar quaisquer imagens que você enviar a partir deste ponto para as seguintes dimensões:
– Single (Default) (padrão): 1100px de largura;
– Wide – for header (grande para cabeçalho), recomendado: 1680px de largura.
Não há quaisquer restrições de altura. Se você estiver carregando o tema para um site já existente, recomendamos utilizar o plugin “regenerate thumbnails”, que irá redimensionar todas as suas imagens de acordo com o tema.

9. Widgets

9.1 widgets personalizados
Este tema contém um widget personalizado que foi projetado para 2 áreas de sidebar.
Vá em —> aparência —> widgets
MeanThemes social Widget: arraste e solte este widget em qualquer área widget para preencher as redes sociais e escolher a cor do seu ícone e se deseja que o link abra.
9.2 Áreas Widget
1. Footer Widget Area (widget do rodapé) – aqui você pode ver a demonstração no rodapé. Pode-se utilizar qualquer dos widgets padrão do WordPress ou, se preferir, utilizar o MeanThemes Widget social.
2. Sidebar Widget Area – Este widget fica no lado direito de todas as mensagens e arquivos, ele não é visto nas páginas. Aqui você também pode utilizar os widgets padrãodo WordPress ou a ferramenta MeanThemes sociais.
3. Sidebar Widget Area (Page) – Widget sidebar de página – introduzido na versão1.0.1, esste widget fica no lado direito e será visto somente em páginas, posts ou arquivos. Aqui você também pode utilizar os widgets padrãodo WordPress ou a ferramenta MeanThemes sociais.

10. Funcões Personalizadas

No canto inferior direito do editor de posts você vai encontrar uma caixa personalizada que irá permitir:
Header Background Settings: o controle da cor de fundo do cabeçalho em uma página ou post;
Control header background color on a page/post basis: ajustar a sua imagem dando-lhe um fundo mais forte, por exemplo: preto;
Control opacity of your header image: controlar a opacidade de sua imagem de cabeçalho, por exemplo: se quer algo mais brilhante coloque 100% de opacidade, ou se quer algo mais sutil coloque 5%. de opacidade.
Repeat your header background image: se não quiser uma imagem grande ocupando a largura total, escolha uma dessas opções: Cover, Repeat, No repeat, Repeat-X and Repeat-Y.
Position your header background image – posicione a sua imagem de fundo do cabeçalho incluindo qualquer um desses posicionamentos Center, Top Center, Top Left, Top direito.
Na versão 1.1.5 do Template Wharton no WordPress foi adicionada uma caixa que lhe permite escolher se quer ou não que a sua imagem de cabeçalho esteja destacada na sua homepage. Disable Featured Image on Archive? . Selecione yes para remover a imagem de exibição que está em destaque em qualquer página de arquivo incluindo a homepage. Isso é ótimo quando você estiver usando um layout grande e quer uma imagem destacada, mas não necessariamente que ela seja mostrada nas páginas homepage / ou índice de arquivo.

11. Problemas comuns

11.1 erro ou ausência da de folha estilo CSS durante a instalação do tema
Um problema comum que pode ocorrer com os usuários na hora de instalar ou ativar novos temas WordPress é uma mensagem de erro “o tema e / ou folhas de estilo CSS está quebrado ou em falta”. Esta mensagem de erro não significa que o tema que você comprou está quebrado, isso simplesmente significa que ele foi carregado incorretamente. Felizmente, há uma solução muito fácil no link abaixo:
http://support.envato.com/index.php?/Knowledgebase/Article/View/269
Se ainda estiver tendo problemas vá até :
http://www.meanthemes.com/support/

12. Plugins recomendados

• Formulário de Contato 7 por Takayuki Miyoshi
http://wordpress.org/plugins/contact-form-7/
Este plugin é usado na página de formulário de contato e é compatível com esse tema na seção styling
• Últimos tweets por Tim Whitlock
http://wordpress.org/extend/plugins/latest-tweets-widget/
Este plugin é usado na área de widget de cabeçalho para apresentar os seus mais recentes Tweets. Também há styling para combinar com o tema.
• Regenerar Miniaturas por Viper007Bond
https://wordpress.org/plugins/regenerate-thumbnails/
Utilize este plugin é para redimensionar suas imagens
• WordPress SEO por Yoast
http://wordpress.org/plugins/wordpress-seo/
Este plugin controla todo o SEO do seu site
• W3 Total Cache SEO por Frederick Townes
http://wordpress.org/plugins/w3-total-cache/
Esse plugin acelera o seu site
Página do Tema

http://themeforest.net/item/wharton-a-big-bold-wordpress-blog-theme/6928979

É isso aí! Espero ter colaborado com você para instalar o tema. Se você é um profissional, eis aqui uma ótima opção para apresentar para os seus clientes. Grande abraço!

Você também pode se interessar por:

Fanpage de Sucesso

Curso de Photoshop

Curso de Corel Draw

Curso de Power Point

 

Receba aulas sobre Negócios Digitais. Você e Sua Empresa na Era Digital em 2017 (é grátis!). 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *