Fornecer uma sólida experiência de usuário é um aspecto chave da criação de qualquer plugin.
Isso inclui navegação intuitiva, facilidade de uso e clareza de recursos, mas mesmo os melhores plugins possuem alguns sub-sistemas, que podem ser mais complexos ou, pelo menos, levantar algumas questões.
Seções de documentação e FAQ são ótimas ferramentas para lidar com essas situações. Eles não apenas servem para informar o usuário, mas para ter o fardo de responder essas perguntas de você.
Neste tutorial, daremos uma olhada em como podemos adicionar uma seção de FAQ em um plugin. Usaremos as páginas de administrador associadas a algumas magias do jQuery UI para criar uma seção de Q & A que seja pesquisada instantaneamente a partir de uma caixa de entrada e sem tempos de carregamento.
Nossa Arquitetura de Plugins
Para os fins deste tutorial, assumirei que você tenha um plugin no local, o que cria um menu de navegação de alto nível. Eu estou praticamente contra isso, a menos que haja uma boa razão, mas servirá melhor para os propósitos deste tutorial.
Para plugins simples, recomendo criar um item de sub-menu no menu de configurações. A página de administrador criada pode ter uma interface com abas com uma seção de FAQ. Isso garante que nosso plugin saia do caminho quando não for necessário.
Se você ainda não possui um plugin ou precisa de ajuda, use o código abaixo para começar. wp-content/pluginsCertifique -se de criar uma pasta no diretório primeiro. Eu nomeei o meu my-plugine coloquei o código abaixo em um arquivo chamadomy-plugin.php:
| <? Php | |
| / * | |
| Nome do Plugin: Meu Plugin | |
| URI do plugin: http://myplugindomain.com | |
| Descrição: Este é um plugin nifty com um built-in FAQ. | |
| Versão 1.0 | |
| Autor: Daniel Pataki | |
| Autor URI: http://danielpataki.com | |
| Licença: GPL2 | |
| * / | |
| Add_action ( ‘ admin_menu ‘ , ‘ my_admin_menu ‘ ); | |
| Function my_admin_menu () { | |
| Add_menu_page ( ‘ My Plugin ‘ , ‘ My Plugin ‘ , ‘ manage_options ‘ , ‘ myplugin / myplugin-admin-page.php ‘ , ‘ myplguin_admin_page ‘ , ‘ dashicons-tickets ‘ , 6 ); | |
| Add_submenu_page ( ‘ myplugin / myplugin-admin-page.php ‘ , ‘ My Plugin FAQ ‘ , ‘ FAQ ‘ , ‘ manage_options ‘ , ‘ myplugin / myplugin-admin-faq.php ‘ , ‘ myplguin_admin_faq ‘ ); | |
| } | |
| Function myplguin_admin_page () { | |
| Echo ‘ <div class = “wrap”> <h2> Esta é a principal página de administração </ h2> </ div> ‘ ; | |
| } | |
| Function myplguin_admin_faq () { | |
| Incluir ( ‘ faq.php ‘ ); | |
| } |
Se você ativar seu plugin, você deve ver um menu de nível superior com uma entrada de FAQ abaixo. Não se esqueça de criar faq.phpna sua pasta de plugins. Este arquivo é inserido como o conteúdo da página de FAQ.
A estrutura de FAQ
Dentro do faq.phparquivo, podemos criar o HTML que mostrará nossas perguntas e respostas. Veja o código básico abaixo para a estrutura que usei:
| < Div class = ‘ wrap ‘ > | |
| < H2 > Perguntas frequentes </ h2 > | |
| < Form id = ‘ mpf-search ‘ > | |
| < Input id = ‘ mpf-input ‘ type = ‘ text ‘ placeholder = ‘ comece a digitar para pesquisar … ‘ > | |
| </ Form > | |
| < Div id = ‘ mpf-container ‘ > | |
| < Div class = ‘ mpf-faq-item ‘ > | |
| < H3 class = ‘ question ‘ > Pergunta </ h3 > | |
| < Div class = ‘ answer ‘ > | |
| Responda | |
| </ Div > | |
| </ Div > | |
| < Div class = ‘ mpf-faq-item ‘ > | |
| < H3 class = ‘ question ‘ > Pergunta </ h3 > | |
| < Div class = ‘ answer ‘ > | |
| Responda | |
| </ Div > | |
| </ Div > | |
| / * Como muitos elementos da classe mpf-faq-item conforme necessário * / | |
| </ Div > | |
| </ Div > |
Como você pode ver, eu criei uma caixa de pesquisa na parte superior e algum HTML para perguntas e respostas. Na verdade, usei o FAQ do WordPress no meu exemplo. Você pode pegar o código completo da Github .
Styling the FAQ
Para modelar esta página, precisaremos adicionar nossa própria folha de estilo. No WordPress, fazemos isso enchantando nosso arquivo CSS e certificando-se de que ele é aplicado somente às páginas de administrador em que queremos usá-lo.
| Add_action (‘admin_enqueue_scripts’, ‘my_plugin_assets’); | |
| Function my_plugin_assets ($ hook) { | |
| Se (‘my-plugin_page_myplugin / myplugin-admin-faq’! = $ Hook) { | |
| Retorna; | |
| } | |
| Wp_enqueue_style (‘my-plugin-faq’, plugin_dir_url (__FILE__). ‘Faq.css’); | |
| } |
Todos os estilos e scripts usados no administrador devem ser adicionados através de uma função conectada admin_enqueue_scripts. O primeiro parâmetro desta função nos permite segmentar o arquivo CSS para nossa página específica. Este parâmetro exibirá a slug do menu da página – que definimos como o 5º parâmetro na add_submenu_page()função.
Certifique-se de criar o faq.cssarquivo para que possamos começar a adicionar nossas regras. Para tornar os itens de perguntas freqüentes parecidos, adicionei as seguintes regras:
| # Mpf-container { | |
| Largura máxima : 600 px ; | |
| } | |
| .mpf-faq-item { | |
| Background : #fff ; | |
| Raio de borda : 5 px ; | |
| Margem inferior : 22 px ; | |
| Estofamento : 22 px ; | |
| } | |
| .mpf-faq-item h3 { | |
| Margem : 0 px ; | |
| Altura da linha : 32 px ; | |
| } | |
| .mpf-faq-item .answer p { | |
| Tamanho da fonte : 16 px ; | |
| Altura da linha : 28 px ; | |
| } |
Veja o que parece depois de aplicar as regras de estilo:
Vamos também tornar a seção de pesquisa agradável e ousada. Adicionar algumas linhas à nossa folha de estilo nos permite fazer uma interface amigável para que nossos usuários busquem.
| # Mpf-search { | |
| Margem : 22 px 0 22 px 0 ; | |
| Dimensionamento de caixa : caixa de borda ; | |
| Largura : 600 px ; | |
| Estofamento : 22 px ; | |
| Background : # 555 ; | |
| Raio de borda : 5 px ; | |
| } | |
| # Mpf-search input { | |
| Largura : 100 % ; | |
| Raio de borda : 5 px ; | |
| Borda : 0 px ; | |
| Preenchimento : 6 px 11 px ; | |
| Font-size : 18 px ; | |
| } |
E aqui está o que parece:
Pesquisando no local
Temos quase tudo o que precisamos para tornar isso um FAQ pesquisável – a parte faltante é algum JavaScript. O plano é que, sempre que o usuário digitar algo na caixa de pesquisa, as respostas são reduzidas a outras relevantes instantaneamente. Uma vez que todos os itens de FAQ são carregados na página, isso deve ser facilmente executável.
A primeira coisa é a primeira, precisamos enqueue o script. Nós já adicionamos um estilo, então isso será tão simples como adicionar uma wp_enqueue_script()ligação à nossa my_plugin_assets()função existente.
| Add_action (‘admin_enqueue_scripts’, ‘my_plugin_assets’); | |
| Function my_plugin_assets ($ hook) { | |
| Se (‘my-plugin_page_myplugin / myplugin-admin-faq’! = $ Hook) { | |
| Retorna; | |
| } | |
| Wp_enqueue_style (‘my-plugin-faq’, plugin_dir_url (__FILE__). ‘Faq.css’); | |
| Wp_enqueue_script (‘my-plugin-faq’, plugin_dir_url (__FILE__). ‘Faq.js’, array (‘jquery’), ‘1.0’, true); | |
| } |
Observe que usei o último parâmetro da função para forçar o arquivo a carregar no rodapé. Não é necessário antes e apenas inchar o site no cabeçalho. Uma vez que você cria a faq.jspasta do plugin, você pode colar o código abaixo e todos se juntarão, a explicação se segue.
| ( Função ( $ ) { | |
| $ ( Documento ). On ( ‘ keyup ‘ , ‘ # mpf-input ‘ , function () { | |
| Var query = $ ( this ). Val (). ToLowerCase (); | |
| Var faqs = $ ( ‘ .mpf-faq-item ‘ ); | |
| $ . Cada (faqs, function () { | |
| Var $ el = $ ( this ); | |
| Var title = $ el . encontrar ( ‘ .question ‘ ). Html (). ToLowerCase (); | |
| Se ( título . IndexOf (consulta) == – 1 ) { | |
| $ El . Hide (); | |
| } | |
| Else { | |
| $ El . Show (); | |
| } | |
| }) | |
| }); | |
| }) (JQuery); |
Eu envolvi tudo em uma função anônima para garantir que possamos usar o $sinal em vez de jQuerytodo. Eu detecto keyupeventos que disparam uma vez que o usuário pressiona e libera uma chave. Quando isso acontece, nós agarramos a consulta atualmente digitada.
Em seguida, examinamos todas as tags e veremos se a consulta existe dentro da pergunta. Se isso acontecer, mostramos essa seção, se não for desativar essa seção – é assim tão fácil.
Nesta fase você deve ser capaz de digitar “recurso” para reduzir a lista até a pergunta sobre os recursos do WordPress. À medida que você pressiona backspace para excluir sua consulta, todas as perguntas voltarão a existir.
Adicionando palavras-chave
Uma pequena adição que eu gosto de fazer é adicionar palavras-chave. A segunda pergunta é intitulada “Por que escolher o WordPress?”, Mas os usuários podem perguntar “Razões para escolher o WordPress”. Se você começar a digitar “razões”, nada aparecerá. Vamos consertar isso adicionando um atributo de dados ao nosso elemento que contém uma série de frases-chave. Eu adicionei data-keywordso atributo de dados ao mpf-faq-elementelemento.
| < Div class = ‘ mpf-faq-item ‘ keywords-keywords = ‘ razões ‘ > | |
| < H3 class = ‘ question ‘ > Por que escolher WordPress? </ H3 > | |
| < Div class = ‘ answer ‘ > | |
| </ Div > |
Em vez de apenas procurar correspondências no título, adicionaremos as palavras-chave também ao nosso Javascript. Esta é uma modificação muito simples. Nós agarramos nossas palavras-chave usando var keywords = $this.data('keywords');e adicionamos o keywords.indexOf( term ) == -1cheque à nossa cláusula if. Aqui está o código JS completo.
| ( Função ( $ ) { | |
| $ ( Documento ). On ( ‘ keyup ‘ , ‘ # mpf-input ‘ , function () { | |
| Var query = $ ( this ). Val (). ToLowerCase (); | |
| Var faqs = $ ( ‘ .mpf-faq-item ‘ ); | |
| $ . Cada (faqs, function () { | |
| Var $ el = $ ( this ); | |
| Var title = $ el . encontrar ( ‘ .question ‘ ). Html (). ToLowerCase (); | |
| Var keywords = $ el . Dados ( ‘ palavras-chave ‘ ); | |
| Se ( palavras-chave . IndexOf (consulta) == – 1 && title . IndexOf (consulta) == – 1 ) { | |
| $ El . Hide (); | |
| } | |
| Else { | |
| $ El . Show (); | |
| } | |
| }) | |
| }); | |
| }) (JQuery); |
Conclusão
Como você pode ver, adicionar um toque de utilidade ao seu plugin não é tão difícil. Um sistema de FAQ utilizável tornará seus usuários mais felizes e também pode tirar uma carga das costas do autor do plugin.
Se você quiser o plugin empacotado totalmente funcional, você pode agarrá-lo aqui . Basta instalá-lo e ativá-lo para ver o exemplo em sua instalação do WordPress.
Se você viu algumas seções de FAQ especialmente excelentes ou tiver dicas sobre como torná-las melhores, informe-nos nos comentários abaixo.
