Como mudar o lugar das informações do autor no Wordpress?

Oi...

Em um blog que estou trabalhando, o autor do post aparecia beeem lá em baixo, no fim do post.

Para dar mais visibilidade ao autor... eu coloquei ele no lado do texto...

Bom, isso vai depender de cada tema, mas o que eu fiz foi esconder a caixa original:

/* escondendo a caixa de informacoes do autor, pois sera usada outra */
#content .post_content .post-author {
 display: none!important;
 visibility: hidden!important;
}

Talvez seja um pouco diferente par você, mas a ideia é essa ali.

E para eu exibir as informações do autor no lado do texto, no meu template tinha um widget onde eu podia colocar HTML.
Então eu instalei o plugin Author Bio Shortcode:
https://br.wordpress.org/plugins/author-bio-shortcode/installation/

E no Widget eu botei isso:

[author_bio name="yes" avatar="yes" ]

Além disso, criei esse CSS:

/* alterando o estilo do novo box de informacoes do autor, na pagina de post de blog */
.author_bio_shortcode .avatar img {
    float: left;
    margin: 5px 10px 0px 10px;
    border-radius: 150px;
    border: 2px solid #981258;
    height: 96px;
    width: 96px;
}

Mas quando é celular, esse widget vai lá pra baixo... então fiz um menorzinho para celular...

Para isso editei o código fonte do tema, alterei o "Post único (single.php)" e adicionei o código abaixo antes do início do conteudo:

<div class="author-info-mobile">
 <?php echo get_avatar( get_the_author_meta( 'ID' ), 40 ); ?>
 Por <?php the_author_link()?>
</div>

E adicionei o CSS abaixo para customizar o estilo e para só aparecer em celulares e tablets:

/* estilo do nome do autor para mobile, na pagina de post de blog */
@media (min-width: 768px) {
 .author-info-mobile {
  display: none;
  visibility: hidden;
 }
}

.author-info-mobile {
 margin-left: 11px;
 font-size: 14px;
 color: white;
}

.author-info-mobile img {
 border-radius: 150px;
 border: 2px solid #981258;
 margin-right: 5px;
 height: 40px;
 width: 40px;
}

Provavelmente pra vc vai ser um pouco diferente... mas a ideia é essa aí :D


---------------------------

Depois que escrevi o post, precisei achar um plugin pra poder colocar fotos pra cada usuário (para que o próprio usuário ou o admin setasse uma foto para o usuário, por padrão pega do gravatar).

Usei esse plugin:
https://wordpress.org/plugins/user-photo/

Em configurações > User Photo vc pode mexer nas configurações se quiser.

Pra usar só tem q chamar userphoto_the_author_thumbnail() q vem a foto... mas no meu widget não dava pra colocar código PHP.

Então tive que instalar esse plugin para ter um widget q eu pudesse colocar código PHP:
https://wordpress.org/plugins/php-code-widget/

E montei tudo na mão:

<div class="author_bio_shortcode">
  <div class="avatar">

      <?php userphoto_the_author_thumbnail() ?>

      <h3 class="name"><?php the_author()?></h3>

      <div class="bio"><p>
        <?php the_author_description() ?>
         Para saber mais: <?php the_author_link()?>
      </p>
   </div>
</div>

E no single-post ao invés de usar

echo get_avatar( get_the_author_meta( 'ID' ), 40 );

eu usei

userphoto_the_author_thumbnail()

Abraço!
Adriano Schmidt

Loja Integrada - Mostrar todas as formas de pagamento

No Loja Integrada, para modificar a forma de pagamento, é preciso clicar em "Alterar forma de pagamento"...

Com o CSS que vou mostrar aqui já fica de início mostrando todas as opções.

Antes:



Depois:



Segue o código para fazer isso:

/* ajustando para aparecer todas as formas de pagamento */
#formas-pagamento-wrapper #formasPagamento .deposito, 
#formas-pagamento-wrapper #formasPagamento .pagseguro {
    display: block!important;
}

#formas-pagamento-wrapper #exibirFormasPagamento {
    display: none!important;
}

Aí no meu caso só configurei para o deposito e pagseguro (classes usadas ali no CSS)... para fazer mais é só ver a class utilizada pela forma de pagamento q vc quer e alterar o script.

PS: Ele dá uma tremidinha quando troca a forma de pagamento enquanto está o "carregando", mas acho q não é nada demais.

Abraço!
Adriano Schmidt

Failure [INSTALL_FAILED_NO_MATCHING_ABIS]

Hi :)

I tried to install an .apk into a cell phone and I got the error Failure [INSTALL_FAILED_NO_MATCHING_ABIS]

C:\ws-ionic\localhost8080app>adb.exe install -r platforms/android/build/outputs/apk/android-x86-debug.apk
2442 KB/s (33320124 bytes in 13.320s)
        pkg: /data/local/tmp/android-x86-debug.apk
Failure [INSTALL_FAILED_NO_MATCHING_ABIS]

That happened because I should have used the armmv7 version and not the x86 for this cell phone... the cpu architecture of the cell phone was the other one...

With the bellow command, the app was successfully installed

adb.exe install -r platforms/android/build/outputs/apk/android-armv7-debug.apk

Best regards,
Adriano Schmidt

Adicionar * nos campos obrigatórios da Loja Integrada

Opa :)

O formulário de cadastro da loja integrada é legal.. mas não tem os asteriscos de obrigatório... pra adicionar os * é só usar esse CSS:

.required label:after { content:" *"; }

Abraço!
Adriano Schmidt

Adicionar item no menu da Loja Integrada

Fala pessoal :D

No menu superior da Loja Integrada você consegue adicionar todas as categorias e/ou todas as páginas extras... mas só um item em específico não dá :(

Pra isso fiz um javascript (nesse caso também conhecido como enjambrascript hahah) para adicionar apenas um item no menu.

Basta alterar o label e o link e adicionar esse trecho de código lá na seção Minha loja > Incluir código HTML > Código no cabeçalho

<script>
$('#nivel-um').ready(function()
{
 var newItem = document.createElement("li");
 newItem.className += ' borda-principal';

 var newLink = document.createElement("a");
 newLink.className += ' titulo cor-secundaria';
 newLink.href = '/pagina/quem-somos.html';

 var textnode = document.createTextNode("Quem Somos");

 newItem.appendChild(newLink);
 newLink.appendChild(textnode);

 var list = document.getElementsByClassName('nivel-um')[0];
 list.insertBefore(newItem, list.childNodes[0]); //use esse para adicionar no inicio do menu
 //list.appendChild(newItem); //use esse para adicionar no fim do menu
});
</script>

Se precisar alterar algo de CSS, basta olhar o CSS do menu atual e ajustar no script e pronto :D

Vaaaleu!
Adriano Schmidt

yeoman gulp angular is not defined

Hi :D

I was trying to use the Yeoman to generate a project with AngularJS and Gulp

But the CSS was not working and on the console was the error "angular is not defined"



I was following this tutorial:
https://github.com/yeoman/generator-angular#readme

However, in order to fix the error I needed to change the gulpfile.js by this one:
https://gist.github.com/adrianoschmidt/ab0b74aa694fafe66de518a31f856b8a

That's all :)

Best regards,
Adriano Schmidt

Wordpress - How to change the base URL?

Hiiii,

I'm going to show you how to change the base URL of your wordpress.

First of all, you need to access your database and to run these commands:

use <put_here_the_name_of_your_database>;
select * from wp_options;

You will see lots of lines, we will change the lines with the column 'option_name' equals 'siteurl' and 'home'

In order to do that, run the next two commands with the new URL:

UPDATE wp_options SET option_value='http://newurl.com' WHERE option_name='siteurl';

UPDATE wp_options SET option_value='http://newurl.com' WHERE option_name='home';

After that, run again the select command to check if it is OK:

select * from wp_options;

That's all,

Best regards,
Adriano Schmidt

CSS - How to change all classes that begin with a certain string?

Hi :)

I needed to change all classes whose names begin with "icon-" for example: .icon-home, .icon-user, .icon-shopping-cart, .icon-th

and instead doing something like this:

.icon-home, .icon-user, .icon-shopping-cart, .icon-th, .icon-minus, .icon-plus, .icon-trash, icon-chevron-down, icon-signout {
    font-family: FontAwesome!important;
}

I did the same thing using this approach:

i, [class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome!important;
}

it is a little better :) regular expressions rocks :D

I don't know very well how it works, but you can read more here:
http://stackoverflow.com/questions/23963073/css-regex-selector-match-one-or-another-condition
https://css-tricks.com/attribute-selectors/

Best regards,
Adriano Schmidt

how to change the font-family of all elements?

hi :)

In order to change the font-family of all elements on your website, you could use that:

* {
    font-family: 'source sans pro'!important;
}

In my case, I would like to change only a few kind of elements:

a, span, input {
    font-family: 'source sans pro'!important;
}

But if you have icons that use another font-family like FontAwesome, you may force them to not use what you've set before

i, .icon-home, .icon-user, .icon-shopping-cart {
    font-family: FontAwesome!important;
}

.fa {
    font-family: FontAwesome-v4!important;
}

The "!important" was used to force the use of the font-family even if another font-family was set in another place
I often use the "!important" when I'm working in a platform like WordPress and I am changing/overwriting the theme...
On your website you should not use '!important'

Best regards,
Adriano Schmidt

Ionic - It is forbidden to downgrade devices which previously used M permissions

Hi :)

I have a project developed with Ionic, and when the mobile app was being published on play store, one error occurred:

This configuration cannot be published for the following reason(s):
It is forbidden to downgrade devices which previously used M permissions (target SDK 23 and above) to APKs which use old style permissions (target SDK 22 and below). This occurs in the change from version 100062 (target SDK 23) to version 100072 (target SDK 22).
Version 100062 is not served to any device configuration: all devices that might receive version 100062 would receive version 100072.

I don't know if it happened because the last version was generated in another machine or because we've put the crosswalk plugin in our project.

Well, in order to solve this problem, just put this line in your config.xml

<preference name="android-targetSdkVersion" value="23"/>

Maybe you will need to change the "23" for the version you want to use.

After that, you will generate again with "ionic build android --release" and that's all :D

Best regards,
Adriano Schmidt