Neste tutorial, você aprenderá como facilmente transformar links de texto em botões atraentes no WordPress. Seguindo este guia de procedimentos, você saberá como adicionar um menu suspenso para o editor visual do WordPress que permitirá que você aplique estilos CSS personalizados ao conteúdo do seu artigo.

Esses estilos CSS personalizados podem ser aplicados ao texto em suas postagens para decorá-los e formatá-los. Eles são amplamente usados ​​para criar botões atraentes e atraentes para seus artigos. Este tutorial também cobrirá a criação de um botão de estilos CSS.

Se você deseja uma maneira fácil de adicionar botões atraentes em postagens e páginas, este tutorial é para você.

O resultado final.

O resultado final deste tutorial permitirá que você selecione o texto em seu artigo e, em seguida, aplique um estilo a ele por meio do menu suspenso do editor de artigos.

Assim que terminarmos, o Editor Visual terá esta aparência e conterá um elemento "estilos" na forma de um menu suspenso:

How-To-Styles-01

Com o novo menu, será possível aplicar um estilo CSS ao link de texto do seu artigo, a fim de criar um efeito de botão sem usar imagens. Os links podem ser assim, embora a aparência seja sua:

How-To-Styles-02

Esta abordagem não só economiza seu tempo ao criar um artigo, mas também permite que todos os colaboradores seu blog poder usar sempre os mesmos estilos para decorar botões ou qualquer outro elemento dos artigos.

Instruções de segurança.

Neste tutorial, editaremos os seguintes arquivos:

  • fonctions.php
  • style.css

Esses dois arquivos fazem parte do seu tema, portanto trabalharemos com as versões que estão associadas ao tema atualmente ativo no seu blog. Em primeiro lugar, é importante para fazer um backup desses arquivos caso algo dê errado.

Em segundo lugar, é aconselhável criar um tema filho do seu tema atual. Se você não sabe como criar um tema filho. O uso de um tema filho garantirá que o seu tema atual seja atualizado. Também vale ressaltar que, se você mudar o tema, ces alterações serão perdidas.

No entanto, se você estiver trabalhando em um blog em desenvolvimento ou em uma instalação local do WordPress, não precisa criar um tema filho.

Adição de um item “Estilos” ao Menu.

O menu suspenso 'estilos' já faz parte do Editor Visual do WordPress, mas foi desativado por padrão. Para ativá-lo você só precisa adicionar alguns códigos ao arquivo fonctions.php do seu tema atual.

Para abrir o arquivo e modificá-lo, vá ao menu » apparence  »Em seguida, clique em« Editor No submenu. Se você tem uma versão em inglês, vá para Aparência> Editor

How-To-Styles-03

Primeiro verifique se o tema atualmente usado por seu blog é selecionado no menu suspenso no canto superior direito da página. No momento estou editando o arquivo fonctions.php Tema vinte e doze mas para você pode ser um tema diferente.

Em seguida, clique sobre o arquivo fonctions.php na lista de arquivos no lado direito da página, para começar a editá-lo. Copie e cole o seguinte código no arquivo. Por conveniência, recomendo que você o cole no final do arquivo, para poder acompanhar facilmente o que adicionou ao arquivo.

1
2
3
4
5
6
7
8
9
// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

Depois de adicionar o código ao arquivo, clique no botão atualizar para salvar as alterações. Se tudo correr bem, você verá que a lista suspensa de seleção de estilo foi adicionada ao editor de postagem visual do WordPress.

No entanto, ainda não terminamos. Se você examinar os itens de menu neste novo menu suspenso, notará que esses são estilos relacionados ao Editor Visual dos outros botões.

queremos Adicione nossos próprios estilos à lista.

Crie os estilos CSS dos seus botões.

Neste tutorial, vamos criar um botão para nossos links de texto, mas você poderia facilmente criar a decoração e a formatação para qualquer outro tipo de elemento.

Agora vamos criar alguns estilos CSS para os botões. Você pode criar seu próprio CSS ou usar um dos muitos aplicativos geradores de botões online. Gerador de botão CSS é uma boa escolha, então visite o site e crie rapidamente um botão e copie o CSS. Em seguida, vá em "Aparência" e depois em "Editor" e clique no arquivo style.css na lista de arquivos do lado direito. Em inglês, você terá Appearance> Editor page> style.css

Novamente, role até o final do arquivo e cole o CSS do botão abaixo ou use o seu próprio CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Atualize o arquivo para salvar as alterações.

Adicione estilos ao menu suspenso.

Agora clique novamente no arquivo fonctions.php  e cole o seguinte código na parte inferior do arquivo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

Observe estas linhas dentro da tabela:

  • título - este é o título que será exibido no menu suspenso
  • seletor - o "a" se refere à âncora, indicando que este estilo é para links.
  • classes - este é o nome da classe do nosso botão CSS

Se você usou seu próprio CSS, o nome da classe seria o que você deu como o nome de sua própria classe CSS. No exemplo acima, o botão de estilo CSS é denominado linkButton.

Depois de colar o código nele, clique no botão atualizar para salvar as alterações. Assim que o arquivo for salvo, vá para o editor de postagem do WordPress e atualize a janela para que as alterações tenham efeito. Em seguida, clique no menu suspenso "Estilos" e você verá uma entrada intitulada " linkbutton"

 

How-To-Styles-05

Para aplicar o estilo CSS e criar o botão, basta crie um link de texto em o seu artigo, selecione o texto e, em seguida, selecione o estilo que deseja dar ao botão no menu. Os estilos não ficarão visíveis na janela do editor de postagem. Você deve visualizar o artigo, que deve ser semelhante a este:

How-To-Styles-06

Agora, sempre que você precisar inserir um botão cativante e atraente em suas postagens ou páginas, apenas crie um link de texto e selecione seu estilo no menu suspenso.

Opções avançadas.

Espero que você possa pensar em outros usos para esse recurso. Por exemplo, você pode adicionar estilos adicionais ao menu. Pode ser a formatação da aparência do texto ou qualquer outra coisa que você possa fazer com CSS.

Se você quiser criar um estilo de botão adicional que será adicionado à lista suspensa, será apenas o suficiente para criar outra entrada na tabela (que foi adicionada ao fonctions.php) E alterar as linhas e o título da classe:

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Em seguida, adicione um novo estilo CSS no arquivo style.css. Se você deseja criar estilos para itens que não são links, também pode fazer isso. Isso requer uma alteração da segunda linha, dependendo da área em que você deseja aplicar o estilo.  

Atalhos.

Se todos os itens acima são uma ótima teoria para você, no entanto, você deseja uma maneira mais rápida de aplicar essa teoria sem ter que editar o código, então estes dois plug-ins podem interessá-lo:

Conclusão.

Agora, você pode criar facilmente ótimos botões de pesquisa no WordPress apenas selecionando uma opção de um menu suspenso no editor de postagem do WordPress.

Esperamos que este tutorial tenha ajudado a criar um seletor de estilo no seu editor de postagem. Se omitimos certas partes ou se você pensa em trazer mais detalhes, não hesite em deixar seus comentários na seção reservada para essas últimas.