Por exemplo, quando um usuário digita CMD+F / CTRL + F, ele quer buscar na página ou no documento que está navegando naquele momento, não buscar na biblioteca de documentos. E se você insistir em sequestrar, por favor: i) avise de forma bem explícita que fez isto ii) ofereça uma opção para desligar o sequestro de função.
desenvolvimento
ComicA11y: Um experimento de quadrinhos web acessível e inclusivo
Isso é tão legal. Um experimento de biblioteca de quadrinhos acessível usando tecnologia básica da web.
Criado por Paul Spencer, além do formato de roteiro de quadrinhos mais “padrão”, permite navegar por meio da tecla TAB, ler por meio de leitores de tela, modo de alto contraste, mudar a tira para orientação vertical, traduções, seleção de texto e legenda (closed caption).
Itty-bitty, um website inteiro em uma URL
Itty-Bitty, uma forma de se criar um site inteiro (ou ao menos uma página que funcione como um site) usando apenas uma URL.
Aqui, por exemplo, tem um teste que eu fiz https://bit.ly/IttyBittyCelso
É importante notar que Itty Bitty permite scripts, então, é preciso ficar atento pois pode ser usado maliciosamente. Prevejo que hackers vão utilizar (se já não utilizam) esta técnica com frequência daqui para a frente.
- Saiba sobre o Itty Bittymais em about.bitty.site
- Repositório no Github: https://github.com/alcor/itty-bitty/
WordPress: como usar shortcode em campos customizados (do_shortcode e filtro the_content)
Shortcodes são códigos especiais usados em conteúdos no WordPress que, quando publicados na parte pública do site, se transformam em conteúdos ou funcionalidades especiais. Por exemplo, um shortcode [button color=”blue”] pode vir a se transformar ou como os grids no Superlumina», que são criados com códigos como [sl_grid columns=”3″].
Mas em diversas situações os usuários tentam usar estes códigos em locais que normalmente não permitiriam estes códigos. E ao invés de aparecer o conteúdo transformado (i.e. o botão ou o grid dos exemplos acima) e mostra o código em si.
Hoje, por exemplo, vi um caso de um site onde a descrição de uma seção/categoria (arquivo archive.php na hierarquia de templates do WordPress) deveria contar também com uma imagem e sua legenda. E ao invés da legenda, aparecia o shortcode para legenda.
Em casos como estes, geralmente é possível usar 2 soluções: a função do_shortcode ou o filtro the_content.
função do_shortcode
do_shortcode( $content, false ); |
Esta função recebe um conteúdo em texto (parâmetro $content), verifica e executa todos os shortcodes nele e retorna o conteúdo filtrado. Se o segundo parâmetro for false, ignora shortcodes dentro elementos HTML.
Filtro the_content
apply_filters('the_content', $content); |
Esta função também recebe um conteúdo em texto (parâmetro $content), e executa todo e qualquer filtro que esteja atrelados a ele, incluindo shortcodes e QUALQUER função que temas e plugins tenham configurado para rodar no the_content.
Particularmente, prefiro usar o do_shortcode quando só quero executar shortcodes. Veja alguns exemplos:
Pegar o conteúdo de um campo customizado (custom field) e executar shortcodes:
do_shortcode( get_post_meta($post_id, 'nome_do_campo', true), false ); |
Usar shortcode na descrição de uma categoria e executá-los na área pública (front-end)
do_shortcode( term_description( $term_id, $taxonomy ), false ); |
Neste caso, também pode usar get_term_meta, que funciona de forma similar à get_post_meta
do_shortcode( get_term_meta($term_id, 'nome_do_campo', true), false ); |
Referências na documentação do WordPress, em inglês:
Estes exemplos também estão disponíveis no Github. Espero ter ajudado
Adding a noscript element to WordPress scripts using the script_loader_tag filter
A good practice for developing websites and webapps is to give alternatives for features that depend on Javascript. Something known as progressive enhancement.
[Versão em Português? Clique aqui.]
Ideally, you start from the basic experience without Javascript and progressivelly enhances the experience with new Javascript features. At least, you should give some kind of warning or alternative content to the user (or search engines) if you can’t provide the same experience.
One way of doing that is by using noscript
elements with the description, the warning or an alternative feature. Say, for example, an static image instead of some kind of interactive graphic.
Unfortunately, so far, WordPress doesn’t have a native specific way to add noscript elements to any Javascript enqueued with the native wp_register_script/wp_enqueue_script functionsw
The good news is that you can solve that by using a WordPress filter. Specifically, by using the script_loader_tag
, as you can see below.
/** * @summary filters an enqueued script tag and adds a noscript element after it * * @description filters an enqueued script tag (identified by the $handle variable) and * adds a noscript element after it. If there is also an inline script enqueued * after $handled, adds the noscript element after it. * * @access public * @param string $tag The tag string sent by `script_loader_tag` filter on WP_Scripts::do_item * @param string $handle The script handle as sent by `script_loader_tag` filter on WP_Scripts::do_item * @param string $src The script src as sent by `script_loader_tag` filter on WP_Scripts::do_item * @return string $tag The filter $tag variable with the noscript element */ function add_noscript_filter($tag, $handle, $src){ // as this filter will run for every enqueued script // we need to check if the handle is equals the script // we want to filter. If yes, than adds the noscript element if ( 'script-handle' === $handle ){ $noscript = '<noscript>'; // you could get the inner content from other function $noscript .= ' this site demands javascript '; $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adds the add_noscript_filter function to the script_loader_tag filters // it must use 3 as the last parameter to make $tag, $handle, $src available // to the filter function add_filter('script_loader_tag', 'add_noscript_filter', 10, 3); |
Enjoy! This function is also available on Github.
Adicionando elementos noscript a scripts do WordPress usando o filtro script_loader_tag
Uma boa prática em desenvolvimento de sites e webapps é oferecer alternativas para funcionalidades que dependam de Javascript. Conhecido como progressive enhancement ou aperfeiçoamento progressivo.
[for english version, check this link]
Idealmente, você começa da experiência mais básica, sem Javascript, e progressivamente aperfeiçoa a experiência com nova funcionalidades. Ou ao menos, adicionar avisos e conteúdos que possam ser visto por usuários e robôs de busca sem Javascript.
Uma das formas é colocar elementos noscript
com descrição ou alternativa da funcionalidade, ou o aviso para o usuário. Infelizmente, o WordPress — o sistema de gerenciamento de conteúdo que usamos em clientes e projetos de clientes 2Aces — não oferece uma função específica para adicionar este elementos noscript.
A boa notícia é que é possível resolver isto usando o ótimo sistema de filtros do WordPress. Neste caso usando o filtro script_loader_tag
, como você pode ver abaixo.
/** * @summary filtra uma tag de script na fila e adiciona um elemento noscript após ela * * @description filtra uma tag de script na fila (identificada pela variável $handle) e adiciona * um elemento noscript após ela. Se também houver um script inline após o script * identificado por $handle, adiciona o elemento noscript após ele. * * @access público * @param string $tag A string da tag enviada pelo filtro `script_loader_tag` em WP_Scripts::do_item * @param string $handle O nome (handle) do como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item * @param string $src A origem (src) do script como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item * @return string $tag A variável $tag filtrada e com o elemento `noscript` */ function add_noscript_filter($tag, $handle, $src){ // como este filtro roda para cada script na fila // precisamos verificar se o $handle é igual o script // que queremos filtrar e adicionar o noscript a ele if ( 'script-handle' === $handle ){ $noscript = '<noscript>'; // você poderia pegar o conteúdo interno de outra função $noscript .= ' Este site demanda JavaScript '; $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adiciona a função add_noscript_filter aos filtros em script_loader_tag // deve ysar 3 no último parmetro para garantirque $tag, $handle, $src // estejam disponíveis à funço add_noscript_filter add_filter('script_loader_tag', 'add_noscript_filter', 10, 3); |
Aproveite! A função acima também está disponível no Github.
Adicionando a categoria às classes do elemento body no WordPress
Uma função rápida para adicionar o “slug” de uma ou mais categorias ao elemento body nos template category.php ou single.php WordPress. Adicione a função do gist a seguir no arquivo functions.php do tema.
Criada em resposta a uma pergunta no StackExchange, onde estou adorando participar.
Link: medindo o uso do WordPress (The Case for WordPress Telemetry
Morten Rand-Hendriksen, da Pink & Yellow Media Inc. defende um sistema de telemetria que permita à comunidade WordPress medir como o software é usado, a fim de diminuir a especulação e dar informações bem embasadas para futuros desenvolvimentos da plataforma.
Concordo inteiramente e enfatizo a necessidade de que tais dados sejam totalmente anônimos e abertos.
Veja o post inteiro, em inglês, em https://mor10.com/the-case-for-wordpress-telemetry/