Classe Odin_Shortcodes - adammacias/odin GitHub Wiki

Instalação:

Adicione a seguinte linha em seu functions.php

require_once get_template_directory() . '/core/classes/class-shortcodes.php';

Bootstrap Shortcodes:

O Odin possui o Bootstrap 3 implementado. Preparamos shortcodes com os principais componentes do bootstrap para facilitar o desenvolvimento.

Caso não conheça os componentes em questão, visite a documentação do Bootstrap para ter uma explicação detalhada sobre cada um deles.

Também é possível utilizar os shortcodes sem o bootsrap, mas lembre-se que neste caso você precisará implementar as classes do CSS manualmente.

Botões

[button]Text[/button]

Parametros:

type tipo do botão, aceita os valores: default, primary, success, info, warning, danger e link.
size define o tamanho, aceita os valores: lg, sm e xs.
link aceita a entrada de uma URL/Link.
class permite que adicione classes no botão.
tooltip permite adicionar um texto que irá aparecer como tooltip.
direction funciona apenas com tooltip e serve para definir a posição que irá aparecer, aceita os valores: top, right, left, bottom.

Exemplo:

Grupo de botões

[button_group][button]Text[/button][button]Text[/button][/button_group]

Parametros:

type tipo do grupo, aceita os valores: group e vertical.
size define o tamanho dos botões, aceita os valores: lg, sm e xs.
justified faz com que o tamanho dos botões ocupem toda a área na horizontal, é booleano, aceita true.

Alertas:

[alert]Message[/alert]

Parametros:

type tipo do alerta, aceita os valores: success, info, warning e danger.
close adiciona um botão para fechar o alerta, é booleano, aceita true.

Etiquetas:

[label]Message[/label]

Parametros:

type tipo do label, aceita os valores: default, primary, success, info, warning e danger.

Badges:

[badge]123[/badge]

Icons:

[icon type="adjust"]

Parametros:

type tipo do ícone, aceita os valores:
adjust
align-center
align-justify
align-left
align-right
arrow-down
arrow-left
arrow-right
arrow-up
asterisk
backward
ban-circle
barcode
bell
bold
book
bookmark
briefcase
bullhorn
calendar
camera
certificate
check
chevron-down
chevron-left
chevron-right
chevron-up
circle-arrow-down
circle-arrow-left
circle-arrow-right
circle-arrow-up
cloud
cloud-download
cloud-upload
cog
collapse-down
collapse-up
comment
compressed
copyright-mark
credit-card
cutlery
dashboard
download
download-alt
earphone
edit
eject
envelope
euro
exclamation-sign
expand
export
eye-close
eye-open
facetime-video
fast-backward
fast-forward
file
film
filter
fire
flag
flash
floppy-disk
floppy-open
floppy-remove
floppy-save
floppy-saved
folder-close
folder-open
font
forward
fullscreen
gbp
gift
glass
globe
hand-down
hand-left
hand-right
hand-up
hd-video
hdd
header
headphones
heart
heart-empty
home
import
inbox
indent-left
indent-right
info-sign
italic
leaf
link
list
list-alt
lock
log-in
log-out
magnet
map-marker
minus
minus-sign
move
music
new-window
off
ok
ok-circle
ok-sign
open
paperclip
pause
pencil
phone
phone-alt
picture
plane
play
play-circle
plus
plus-sign
print
pushpin
qrcode
question-sign
random
record
refresh
registration-mark
remove
remove-circle
remove-sign
repeat
resize-full
resize-horizontal
resize-small
resize-vertical
retweet
road
save
saved
screenshot
sd-video
search
send
share
share-alt
shopping-cart
signal
sort
sort-by-alphabet
sort-by-alphabet-alt
sort-by-attributes
sort-by-attributes-alt
sort-by-order
sort-by-order-alt
sound-5-1
sound-6-1
sound-7-1
sound-dolby
sound-stereo
star
star-empty
stats
step-backward
step-forward
stop
subtitles
tag
tags
tasks
text-height
text-width
th
th-large
th-list
thumbs-down
thumbs-up
time
tint
tower
transfer
trash
tree-conifer
tree-deciduous
unchecked
upload
usd
user
volume-down
volume-off
volume-up
warning-sign
wrench
zoom-in
zoom-out

Wells:

[well]Content[/well]

Parametros:

size define o tamanho dos botões, aceita os valores: lg e sm.

Tabelas:

[table cols="#,Table heading" rows="1,Table cell"]

Parametros:

type define o tipo de tabela, aceita os valores: striped, hover, condensed e responsive.
border adiciona borda na tabela, é booleano aceitando border
cols lista dos títulos das colunas separados por , (virgula)
rows lista de linhas de cada coluna separado por | (pipe) e cada item de lista separado por , (virgula)

Grids:

[row]
[col class="col-md-6"]Content left[/col]
[col class="col-md-6"]Content right[/col]
[/row]

Parametros:

row não recebe parametros
col
class recebe classes de grids do Twitter Bootstrap

Progress Bar:

[progress]

Parametros:

type define o tipo de barra, aceita os valores: success, info, warning e danger.
class permite adicionar classes na barra, por exemplo: progress-striped e active.
value define o valor em qual a barra deve estar preenchida em porcentagem, o padrão é 50 para 50%.
max define o valor máximo de preenchimento da barra, o padrão é 100.
min define o valor mínimo de preenchimento da barra, o padrão é 0.

Painéis:

[panel][panel_body]Content[/panel_body][/panel]

Parametros:

panel:
type define o tipo de painel, aceita os valores: default, primary, success, info, warning e danger.

Abas:

[tabs]
[tab id="id" active="true"]Title[/tab]
[/tabs]
[tab_contents]
[tab_content id="id" active="true"]
Content
[/tab_content]
[/tab_contents]

Parametros:

tabs não recebe parametros
tab
title define o nome do conjunto de abas.
tab_contents não recebe parametros
tab_content
id define o ID do conteúdo da aba (precisa ser o mesmo adicionado na aba).
active campo booleano que define qual conteúdo de aba será marcada como ativo.

Accordion:

[accordions id="my-accordion"]
[accordion id="my-accordion" title="title"]
Content
[/accordion]
[accordion id="my-accordion" title="title"]
Content
[/accordion]
[/accordions]

Parametros:

accordions
id define ID da sanfona, o padrão é odin-accordion.
accordion
id deve ser o mesmo ID da sanfona, o padrão é odin-accordion.
title define o título da sanfona.
type define o tipo de sanfona, aceita os valores: default, primary, success, info, warning e danger.
active campo booleano que define qual aba será marcada como ativa

Tooltips:

[tooltip title="Text"]Content[/tooltip]

Parametros:

title define o conteúdo que será usado no tooltip.
link define o link/URL do tooltip, o padrão é #.
direction define a posição que o tooltip irá aparecer, aceita os valores: top, right, left e bottom, o padrão e top.

Google Shortcodes

Mapas:

[map]

Parametros:

id configura o ID do mapa (útil apenas quando é necessário mais de um mapa na mesma página), o padrão é odin_gmap.
latitude define a latitude da localização no mapa, o padrão é 0.
longitude define a longitude da localização no mapa, o padrão é 0.
zoom define o zoom do mapa, o padrão é 10.
width define a largura do mapa, o padrão é 600.
height define a altura do mapa, o padrão é 400.
maptype define o tipo de mapa, aceita os valores ROADMAP, SATELLITE, HYBRID e TERRAIN, o padrão é ROADMAP.
address utilizado no lugar de latitude e longitude, define o endereço no formato de texto.
kml aceita o link/URL de um arquivo em KML.
kmlautofit campo booleano que força o zoom sobrescrever o zoom do arquivo KML.
marker campo booleano que ativa o marcador da posição do mapa, o padrão é false.
markerimage usado para definir um link/URL de imagem para ser utilizado como `marcador, funciona apenas com o marker como true.
traffic campo booleano que pode exibir o tráfego no mapa, o padrão é false.
bike campo booleano que pode exibir as rodas para bicicletas no mapa, o padrão é false.
fusion define um ID de um “Fusion Table Layer“, o padrão é vazio(null).
infowindow define um texto que aparece ao clicar no marcador, funciona apenas com o marker como true.
infowindowdefault campo booleano que abre a caixa de texto de infowindow ao carregar o mapa (sem precisar de clique), o padrão é false, funciona apenas com o marker como true e com o infowindow.
hidecontrols campo booleano que desativa os controles do mapa, o padrão é false.
scale campo booleano que desativa a escala do mapa, o padrão é false.
scrollwheel opção booleana que ativa ou desativa o scroll do mouse para dar zoom no mata, o padrão é true.

Helpers

Clear:

Adiciona um <br class="clear" /> no conteúdo para limpar o efeito do CSS float.

[clear]

QR Code:

Cria um QR Code utilizando o goqr.me.

[qrcode data="Text"]

Parametros:

data define o conteúdo que será usado para criar o QR Code, podendo ser um texto ou até mesmo um link.
size define o tamanho do QR Code, o padrão é 150x150.
title configura um título para a imagem do QR Code.

Código fonte:

Odin_Shortcodes esta localizado em core/classes/class-shortcodes.php.

Classe Odin_Shortcodes - adammacias/odin GitHub Wiki

Instalação:

Bootstrap Shortcodes:

Botões

Grupo de botões

Alertas:

Etiquetas:

Badges:

Icons:

Wells:

Tabelas:

Grids:

Progress Bar:

Painéis:

Abas:

Accordion:

Tooltips:

Google Shortcodes

Mapas:

Helpers

Clear:

QR Code:

Código fonte:

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️