Ir para o conteúdo principal

Como adicionar um menu drop-down com o CSS em seu Editor Visual

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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 o que permitirá que você aplique estilos CSS personalizados ao conteúdo do seu artigo.

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

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

O resultado final.

O resultado final deste tutorial será permitir que você selecione o texto em seu artigo e aplique um estilo a ele através do menu suspenso do editor de artigos.

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

How-To-Styles-01

Usando o novo menu, será possível aplicar um estilo CSS ao link de texto no seu artigo, para criar um efeito de botão sem usar imagens. Os links podem ter esta aparência, embora a aparência dependa de você:

How-To-Styles-02

Essa abordagem não apenas economiza seu tempo ao criar um artigo, mas também permite que todos os colaboradores do seu blog possam sempre usar os mesmos estilos para decorar botões ou qualquer outro item de item.

Instruções de segurança.

Neste tutorial, editaremos os seguintes arquivos:

  • fonctions.php
  • style.css

Como esses dois arquivos fazem parte do seu tema, trabalharemos com as versões associadas ao tema atualmente ativo no seu blog. Primeiro é 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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

Adicionado um elemento "Styles" ao menu.

O menu suspenso "Estilos" já faz parte do Editor Visual do WordPress, mas foi desativado por padrão. Para habilitá-lo, você só precisa adicionar um código ao arquivo fonctions.php do seu tema atual.

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

How-To-Styles-03

Primeiro, verifique se o tema atualmente usado pelo seu blog está 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ê poderia 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
// Ativar o item de menu suspenso Estilos
// função de chamada de retorno para inserir 'styleselect' para os $ botões de matriz
função my_mce_buttons_2 ( $ botões ) {
array_unshift(  $ botões,  'Styleselect' );
retorno $ botões;
}
// Registra a nossa chamada de retorno para o filtro apropriado
add_filter ('Mce_buttons_2',  'My_mce_buttons_2');
// fim da parte I

Depois que o código for adicionado ao arquivo, clique no botão Atualizar para salvar as alterações. Se tudo estiver bem, você verá que o menu suspenso de estilos foi adicionado ao editor visual de artigos do WordPress.

No entanto, ainda não terminamos. Se você observar os itens de menu nessa nova lista suspensa, notará que esses são estilos vinculados ao Editor Visual dos outros botões.

queremos Adicione nossos próprios estilos à lista.

Crie os estilos CSS dos seus botões.

Neste tutorial, criaremos um botão para nossos links de texto, mas você poderá criar com facilidade a decoração e a formatação para qualquer outro tipo de elemento.

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

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

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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:inserção 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inserção 0px 1px 0px 0px #bbdaf7;
box-shadow:inserção 0px 1px 0px 0px #bbdaf7;
fundo: -webkit de gradiente (linear, esquerda topo,  esquerda fundo, Cor-stop (0.05,  #79bbff), Cor-stop (1,  #378de5));
fundo: -moz-linear de gradiente ( centro topo,  #79bbff 5%,  #378de5 100% );
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr ='#79bbff', EndColorstr ='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-raio-topleft:0px;
raio border-top-left-:0px;
-webkit-border-top-rádio direito:0px;
-moz-fronteira-raio topright:0px;
border-top-rádio direito:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-raio-bottomright:0px;
-Border-bottom-rádio direito:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-raio-bottomleft:0px;
raio border-bottom-esquerda:0px;
text-indent:0;
fronteira:1px sólido #84bbf3;
exibição: inline-quadra;
cor:# Ffffff;
font-family: Trebuchet MS;
tamanho da fonte:15px;
peso da fonte:pino;
font-style:normal;
altura:40px;
altura da linha:40px;
largura:100px;
text-decoration:Nenhum;
text-align:centro;
text-shadow:1px 1px 0px #528ecc;
}
.linkButton: hover {
fundo: -webkit de gradiente (linear, esquerda topo,  esquerda fundo, Cor-stop (0.05,  #378de5), Cor-stop (1,  #79bbff));
fundo: -moz-linear de gradiente ( centro topo,  #378de5 5%,  #79bbff 100% );
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr ='#378de5', EndColorstr ='#79bbff');
background-color:#378de5;
}
.linkButton: {activa
posição:relativo;
topo:1px;
}
/ * Este botão foi gerado usando 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
// Adicione o CSS menu botão suspenso ao
// função de chamada de retorno para as configurações de filtro MCE
função my_mce_before_init_insert_formats ( $ init_array ) {
// Definir as style_formats matriz
$ style_formats =  ordem(
// Cada matriz é um tamanho da criança com suas configurações próprias
ordem(
'Título' => 'Botão Link',
'Selector' => 'A',
'classes' => 'LinkButton',
),
);
// inserir a matriz, JSON codificado, em 'style_formats'
$ init_array['Style_formats'] = Json_encode ( $ style_formats );
retorno $ init_array;
}
// Anexar callback para 'tiny_mce_before_init'
add_filter ( 'Tiny_mce_before_init',  'My_mce_before_init_insert_formats' );
// extremidade da parte II

Observe estas linhas dentro da tabela:

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

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

Depois de colar o código, clique no botão Atualizar para salvar as alterações. Depois que o arquivo for salvo, vá para o editor de postagem do WordPress e atualize a janela para que as alterações entrem em vigor. Em seguida, clique no menu suspenso "Estilos" e você verá uma entrada chamada " 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 você deseja atribuir ao seu botão no menu. Os estilos não estarão visíveis na janela do editor de artigos. Você deve visualizar o artigo, que deve ser assim:

How-To-Styles-06

Agora, sempre que você precisar inserir um botão atraente e atraente em seus artigos ou páginas, basta criar um link de texto e selecionar seu estilo no menu suspenso.

Opções avançadas.

Espero que você possa pensar em outros usos desse recurso. Por exemplo, você pode adicionar estilos adicionais ao menu. Pode estar formatando a aparência do texto ou qualquer outra coisa que você possa fazer com CSS.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

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

1
2
3
4
5
ordem(
'Título' => Button Bigger '
'Selector' => 'A',
'classes' => 'BiggerButton',
),

Em seguida, adicione um novo estilo CSS ao 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 todas as opções acima são uma ótima teoria para você, no entanto, você deseja uma maneira mais rápida de aplicar essa teoria sem precisar editar o código; portanto, esses dois plug-ins podem lhe interessar:

Conclusão.

Agora, você pode criar facilmente grandes botões de pesquisa no WordPress simplesmente selecionando uma opção em 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.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
11 ações
ação10
chilrear1
Enregistrer