Categorias
WordPress

Twenty Twenty, Logótipo e Título em simultâneo

Ao personalizar o tema Twenty Twenty do blog, deparei-me que não é possível visualizar o logótipo e o título ao mesmo tempo. Se colocar-mos um logótipo e de seguida preencher o título ele não vai estar visível, ou se têm um ou se têm outro, com os dois o tema da preferência a mostrar o logótipo.

Se analisar-mos o código fonte, vamos ver:

<h1 class="site-logo">
    <a href="http://ivovargas.pt/" class="custom-logo-link" rel="home">...</a>
    <span class="screen-reader-text">Ivo Vargas</span></h1>

Podemos ver que o titulo se encontra no html com apenas uma classe CSS “screen-reader-text”:

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal;
}

O código que está a fazer com que o título fique escondido é :

clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
overflow: hidden;

Podemos começar por colocar o seguinte código em: overflow: Apresentação > Personalizar > CSS Adicional

.screen-reader-text {
     clip: auto;
     -webkit-clip-path: none;
     clip-path: none;
     overflow: visible;
 }

O titulo deste modo já é visível, mas torna-mos outras coisas visíveis que não se queria. Temos de ser mais específicos:

.site-logo > .screen-reader-text {
     clip: auto;
     -webkit-clip-path: none;
     clip-path: none;
     overflow: visible;
 }

Agora que já tornamos apenas o titulo visível, já o podemos colocar na posição que se pretende. No meu caso quero que ele se situe por cima da descrição.
E temos de considerar como vai ficar nas outras resoluções:

@media (min-width: 700px) {
	.site-logo {
		font-size: 30px;
	}
	
	.site-logo > .screen-reader-text {
			clip: auto;
			-webkit-clip-path: none;
			clip-path: none;
			overflow: visible;
			font-size: 1.8rem;
			font-weight: 500;
			letter-spacing: -0.0311em;
			color: #fe7c0d;
			width: auto;
		  text-align: center;
		  position: relative !important;
	}
}

@media (min-width: 1000px) {
	.site-logo img {
		float: left;
	}
	
	.site-logo > .screen-reader-text {
		top: 40px;
		margin-left: 24px;
		position: absolute !important;
	}
}
Categorias
WordPress

Twenty Twenty, conteúdo muito estreito.

Quando escrevi a primeira publicação verifiquei que algo estranho se estava a passar, o conteúdo estava a ocupar muito pouco espaço na horizontal, mesmo com o modelo “Full Width”.

Depois de muita pesquisa, parece que não é um problema, mas sim como foi desenhado o tema.

A solução é colocar o seguinte código css em: Apresentação > Personalizar > CSS Adicional

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 85rem;
}
Antes
Depois
Categorias
WordPress

Primeiro desafio WordPress, tradução.

Sou fã do WordPress, é a melhor plataforma de blogging que existe na actualidade. Fácil, bonito e com tudo o que é necessário para fazer um bom Blog. Para 2020 o WordPress traz o novo tema Twenty Twenty. E como estou a iniciar um novo blog, nada melhor que utilizar o melhor e mais recente tema.

Mas de momento há um pequeno problema, não está disponível a tradução de Português de Portugal. 🙁

Estado das traduções em 11/01/2020:

Traduções de Português do tema Twenty Twenty.

O pessoal do Brazil têm a tradução completa, em segundo lugar está Angola com 30% completa, em terceiro lugar está Portugal com 15% completa e por ultimo está Portugal(AO90, acordo ortográfico 1990) com 0% (apesar de estar com 96% pendente de aprovação).

Então como solução poderia colocar a tradução do Brazil e está feito!

Poderia seguir esse caminho, que de certeza que iria funcionar sem problemas, mas depois qual era a piada.

Então vamos ajudar o pessoal de Portugal a completar a tradução, mais especificamente a de Português(Portugal).

  1. Entra na página da tradução: https://translate.wordpress.org/projects/wp-themes/twentytwenty/
  2. Faz o Log In ou caso ainda não tenhas conta o registo.
  3. Selecciona a língua que desejas traduzir, neste caso vou seleccionar Portuguese(Portugal).
  4. Na tabela e na coluna “Set / Sub Project” o nome “Twenty Twenty” é um link que dá acesso aos textos a traduzir.
  5. Na tabela de traduções temos a coluna “Original string” com o texto original em Inglês e a coluna “Translation” onde se coloca o texto traduzido.

Vamos lá a obra, das 123 frases falta traduzir 105!

Depois das traduções efectuadas o estado da tradução ficou:

Após as introduções de sugestão de tradução.

Neste momento só me resta esperar que um dos editores verifique e aprove o trabalho feito, quando isso acontecer o tema irá receber uma actualização automática.

Ou actualizar os ficheiros de tradução manualmente. Como vou fazer a seguir.

Para obter os ficheiros, em: https://translate.wordpress.org/projects/wp-themes/twentytwenty/pt/default/ no fundo da página, clica-se em “export” com as seguintes definições:

O ficheiro obtido devera ter um nome similar a “wp-themes-twentytwenty-pt.mo” que deve ser renomeado para “twentytwenty-pt_PT.mo”.

De seguida carrega-se o ficheiro para o servidor, vou utilizar o “cPanel File Manager” para carregar o ficheiro na seguinte localização “../public_html/wp-content/languages/themes”:

Agora o blog já se encontra traduzido. 😄