Posts de Ana Flávia Cador
18 de mar de 2015

Como fazer posts destacados responsivos no WordPress

Ter uma área de posts em destaque é maravilhosa para chamar o seu leitor à assuntos que você acredita que merece aquele olhar diferente. Vários blogs adotam esta técnica pois, além de direcionar o leitor aos melhores posts, também incentiva o leitor a navegar mais no blog. O tutorial de hoje é sobre como fazer estes posts destacados de uma forma fácil (e responsiva!), onde você vai ter total autonomia para selecionar qual post irá para o destaque no topo do blog. E neste tutorial também explicarei várias coisas sobre responsividade e teorias de proporção para deixar tudo lindo em qualquer dispositivo!

O tutorial é grandinho, mas garanto que vale muito a pena!

Visual dos posts em destaque que será ensinado neste tutorial

Visual dos posts em destaque que será ensinado neste tutorial // Fonte das imagens: 001, 002, 003, 004

Introdução

Antes de mais nada, é bom saber o que você está lidando por aqui. O CSS é responsivo, ou seja, ele vai mudar de acordo com a largura do dispositivo para adequar. Na medida que ele for diminuindo, o número de posts também diminui, e os recursos de mouseover são eliminados, já que no celular não temos um pouse para pousar em cima do elemento, mas sim um dedo que obrigatoriamente deverá dar um “tap” — um clique — para que a ação aconteça. Além disso, vamos pensar também que estes são uma espécie de lista, onde cada um é um item de lista. Veja abaixo a demonstração que fiz para você visualizar, bem como é a estrutura do html abaixo:

Ver Demonstração

<div class="wrap-posts-destaque">
	<div class="posts-destaque">
		<ul>
			<li>
				<div class="mostra-post">
					<div class="thumb"><img src="http://imagem-thumbnail.jpg" alt=""></div>
					<a href="http://link">
						<h4>Titulo post <span>Data</span></h4>
					</a>
				</div>
			</li>
		</ul>
	</div>
</div>

O código PHP do posts em destaque pode ser personalizado em duas formas:

  1. Por seleção do último post de uma ou várias categorias específicas;
  2. Por posts que receberam mais visualizações.

O código para estes tipos de posts no WordPress é chamado de loop. Isso significa que este recebe uma atualização constante e sempre de forma repetitiva, como na área de posts nativa em que aparece nossas postagens do blog. O que vamos fazer em nosso tema é fazer uma nova chamada de loop para personalizar e realizar uma tarefa específica. O loop que usaremos no tutorial de hoje é o primeiro item da lista: seleção do último post de uma ou várias categorias específicas.

Os códigos podem parecer um pouco complicados, mas prometo que o deixarei o mais explicadinho possível para não houver confusão hehe. Vamos botar a mão na massa agora?

Saiba mais…

13 de fev de 2015

Qual a diferença entre o wordpress.com e .org?

Eis aqui uma dúvida que pega uma galera aqui e acho que seria ótimo ter um post bem esclarecedor sobre uma das maiores dúvidas da blogosfera — e também para abrir o primeiro post da nossa categoria de html e tutoriais daqui do blog! Se chegou aqui de pára-quedas, dê uma lidinha no nosso primeiro post para saber mais como funciona nosso projeto. E agora, vamos ao que interessa, néah? Quando se trata de wordpress, sempre surge aquela dúvida sobre o porque da existência de dois tipos de uso da plataforma. Por que há esta diferença? O wordpress é pago de verdade? Por que o .com é tão limitado? O que o .org oferece de diferente? Agora é a hora de tirar todas estas duas dúvidas!

Qual a diferença entre o wordpress.com e .org?

Antes de mais nada, WordPress.org e WordPress.com não são a mesma coisa, apesar de ambos serem o mesmo CMS (do inglês Content Management Systems, que significa Sistema de Gerenciamento de Conteúdo). O que acontece é que um já lhe fornece tudo pronto (o .com) e o outro lhe dá a opção de download do software para baixar e você ser livre para instala-lo o que quiser com ele.

Sobre o WordPress.com

Oferecido pela empresa Auttomatic, o wp.com é oferecimento de hospedagem que utiliza o software como plataforma de blogagem. Imagine como se fosse um blogger, no qual você o cria e já sai com um blog escrito meublog.blogspot.com no final. É praticamente o mesmo processo e contexto — só muda de plataforma e o final será meublog.wordpress.com, no caso. A partir do momento em que você faz a conta e coloca os dados básicos, o seu blog em wordpress já está pronto para receber conteúdo, seguir outros blogs wp.com, ter um ótimo painel de estatísticas etc.

É de graça?

Sim! É bom? Demais, e não tenho dúvidas disso! O porém é que ele é extremamente limitado no quesito de customização para conta free e muito caro se quer uma conta premium.

Por que é limitado?

Na conta free do wordpress.com nenhum layout premium vem incluso. Ou seja, o usuário precisa se virar nos 30 com os layouts free que vem por ali. Eles fornecem poucas opções de customização. Os premiums são melhorzinhos, mas você ainda sim fica limitado ao template. Ana, posso contratar um designer para fazer um layout para mim? Não, não pode. Posso mexer na programação dos temas frees de lá? Também não. Você fica à mercê da loja online e sem possibilidade alguma de um design próprio e contratado por um profissisonal ou feito por você. T.T E além de tudo isso ele só possui 3G de espaço. Quem posta muitas fotos consegue atingir o limite em poucos meses.

Por que é caro?

Muitas pessoas assinam a conta Premium na esperança de ter mais opções, mas ainda sim, se comparado ao wp.org, você pode sair no prejuízo. Por ano sai cerca de R$275 reais (US$99) no plano Premium, e este ainda não vem templates premium para te dar um pouco mais de liberdade — e precisam ser comprados à parte. O que você ganha é mais 10G de espaço, um domínio e mais algumas vantagens. Já na conta Business o negócio sai mais de R$800 (exatamente US$299) ao ano — e só assim você tem acesso aos templates premium à rodo, loja virtual e mais uma pancada de coisa.

Mas é necessário lembrar de uma coisa: O wordpress.com é maravilhoso para determinados tipos de usuários. Ele não é péssimo, muito menos ruim. Ele possui o melhor programa de gerenciador de conteúdo e é bastante seguro e você pode, sim, blogar normalmente nele!

A conta Business é maravilinda para empresas e a Premium é ótima para quem não se importa muito com uma identidade visual própria e um layout exclusivo. Blogs corporativos e institucionais usam bastante estes serviços. Mas somos blogueiros ultra-mega power criativos! Gostamos que tudo tenha a nossa carinha, né? :) É ai que entra o wordpress.org para maravilhar nossa vidinha blogueira, haha.

Sobre o WordPress.org

Ao contrário do wordpress.com onde o blog já vem pronto para receber conteúdo, o wordpress.org oferece o download do software. Ele não oferece nenhum tipo de hospedagem, nem login, nem nada! O wp.org oferece apenas o download e possui um diretório praticamente ilimitado de plugins e possui toda a documentação para quem for desenvolver um layout — o chamado Codex. E o melhor: você não depende mais da loja do wordpress e pode baixar e fazer upload do tema que quiser, inclusive contratar um designer para fazer o seu layout!

O bicho pega para vários blogueiros depois do download. Isso acontece porque muitos não têm ideia do fazer, já que é necessário correr atrás do que o wordpress.com já faria por nós: ter uma hospedagem e em seguida instalar a plataforma.

O wp.org é pago?

Não! Nunca foi e (espero que) nunca será. Se alguém te falou que o wordpress.org é pago essa pessoa está equivocada. O download é 100% gratuito, e você pode instalar todos os plugins que você quiser da galeria, além te entregar de bandeja listas de todas as tags de post. Como não amar?

O mito de que o wordpress.org é pago provém do uso da hospedagem. Muitos blogueiros optam por contratar uma hospedagem particular por ter servidores mais estáveis (ou seja, o risco do blog sair do ar é menor) e possui um melhor atendimento e pela equipe de suporte da hospedagem ajuda a resolver qualquer pepino que brota em seu blog se tiver a ver com servidor (ao contrário das frees, que nem sempre são boas devido à alta demanda).

É possível ter hospedagem de graça?

Sim, é possível! Segue abaixo uma lista de hospedagens grátis que suportam wordpress.

Dentre as que citei acima a Hostinger é a melhorzinha da lista. O painel é lindo, intuitivo, e é em português! Isso não é lindo? Mas caso você queira uma hospedagem particular de qualidade, recomendo estas empresas:

É obrigatório ter domínio?

Não. As próprias hospedagens free (e algumas particulares) oferecem o serviço de subdomínio onde você ganha um nome para o seu blog através de um domínio deles. O domínio é opcional e dependerá de sua necessidade com site e não passa de R$30 a R$40 anuais.

Como instalar?

Várias hospedagens oferecem no pacote de ferramentas de instalação de diversos softwares no site, e dentre eles o WP! E há também o método de instalação manual que é super fácil também. Inclusive eu já fiz um tutorial ensinando a instalar o WP usando a Hostinger como exemplo. Vale a pena conferir.


Conclusão

Sabemos agora das infinidades do wordpress.org e o que o .com tem a nos oferecer. Se você registrar um domínio e contratar hospedagem, você sabia que poderá ficar mais barato do que se fosse no wp.com na conta premium? Há hospedagens que não passam de R$10 ao mês e você possui muito mais espaço do que a conta premium do wordpress.com e mais benefícios. Contando R$10 mensais + R$30 de domínio você não passa dos R$150, ao contrario do .com que seria, no mínimo, R$270!

Talvez o que poderá pesar em seu bolso é a contratação de um designer para o layout, porque não há nada melhor do que ter nosso cantinho com nossa cara e com aquele toque profissional, né? Mas se não tem $$, não tem problema! Há inúmeros tutoriais sobre WP, inclusive temas bases para você começar a aprender a desenvolver. Eu aprendi WordPress assim! E eu mesma escrevo vários tutoriais sobre esta plataforma lá no meu blog e também disponibilizo um tema base para quem está iniciando.

Agora já sabe né? WordPress não tem nada daquele mimimi que imaginávamos. É só encontrar o caminho certo que você terá um blog lindão em wordpress, e tudo de uma forma bem acessível e praticamente ilimitada! *u*

Página 2 de 212