Arquivo da categoria: Voorus Documents

Tornar a barra de navegação fixa ao rolar a página

Como fixar a barra de navegação #navbar ao passar pelo elemento no momento da rolagem da página?

Adicione o estilo que irá fixar a barra de navegação ao campo personalizado CSS Adicional:

.navbar-fixed {
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 999;
}

Adicione o script usando o arquivo custom-functions.php:

function voorus_fix_navbar_on_scroll() {
 echo "
 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
 <script>
 $(document).ready(function() {
 
 $(window).scroll(function () {
 //if you hard code, then use console
 //.log to determine when you want the 
 //nav bar to stick. 
 console.log($(window).scrollTop())
 if ($(window).scrollTop() > $('.inner-header').innerHeight()) {
 $('#navbar').addClass('navbar-fixed');
 }
 if ($(window).scrollTop() < $('.inner-header').innerHeight()) {
 $('#navbar').removeClass('navbar-fixed');
 }
 });
 });
 </script>";
}
add_action('wp_footer', 'voorus_fix_navbar_on_scroll');

Observações:

$('.inner-header').innerHeight()

Fornece a altura renderizada do elemento. Assim, esta solução é viável em todos os dispositivos.

Para definir a altura manualmente use:

if ($(window).scrollTop() > 155) {
 $('#navbar').addClass('navbar-fixed');
 }

if ($(window).scrollTop() < 156) {
 $('#navbar').removeClass('navbar-fixed');
 }

No entanto esta solução não funciona tão bem, já que a altura do elemento varia de acordo com o dispositivo onde foi renderizado.


Referências:
How to create a sticky navigation bar that becomes fixed to the top after scrolling
CSS / JavaScript – How do you get the rendered height of an element?

Estilizando o button tag no tema Voorus

Segue abaixo o CSS responsável por estilizar o botão nativo do tema Twenty Thirteen e do tema Voorus.

button, 
input[type="submit"], 
input[type="button"], 
input[type="reset"]{
 background: #f3962c;
 border: 2px solid #f3962c;
 border-radius: 2px;
 padding: 11px 24px 10px;
}

/* Mouse Over */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover, 
input[type="reset"]:hover {
 background: #FFB055;
 border: 2px solid #f3962c;
}

Inserindo AdSense no primeiro parágrafo dos posts

Para inserir um bloco de anúncios do AdSense logo após o primeiro parágrafo dos posts no seu blog WordPress com o tema Voorus ativado, adicione o código abaixo no arquivo custom-functions.php. Lembre-se de acrescentar o script do AdSense no campo em negrito.

function voorus_process_ad_content($content){

$needle = '</p>';

$replace= '</p>your ad code here'; // do not forget the </p>

// Get the position of the first occurrence of $needle
$pos = strpos($content, $needle);

// if found
if ($pos !== false) {
    $newstring = substr_replace($content, $replace, $pos, strlen($needle));
}

return $newstring;

}

add_filter('the_content', 'voorus_process_ad_content', 20);

Referência:
http://stackoverflow.com/questions/41899547/how-to-add-adsense-code-after-1st-paragraph-only-in-genesis

O arquivo custom-functions.php

Para inserir suas funções no tema Voorus, crie um arquivo com o nome custom-functions.php e adicione-o a pasta raiz do tema. Este arquivo não será substituído quando o tema for atualizado e consequentemente suas funções permanecerão intactas.

Exemplo:

<?php
/**
 * Voorus Custom Functions
 *
 * Use with caution, you can easily screw things here. Be careful!
 *
 * @package WordPress
 * @subpackage Voorus
 * @since 1.1
 */
 
function voorus_my_function() {
 echo '';
}
add_action('get_footer', 'voorus_my_function');

Movendo os botões “compartilhar” do Jetpack para o início do post

Esta modificação pode ser aplicada no tema Voorus e em outros temas WordPress, desde que a instalação tenha o plugin Jetpack com o módulo Compartilhar ativado.

Por padrão o os botões de compartilhamento do Jetpack são posicionados ao final do post. Se você quiser movê-los para o início do post, logo após o título e meta, siga os procedimentos abaixo.

Tema Voorus

Abra o eu arquivo custom-functions.php e adicione as seguintes linhas:

function voorus_remove_jetpack_share_button() {
 remove_filter( 'the_content', 'sharing_display',19 );
 remove_filter( 'the_excerpt', 'sharing_display',19 );
}
add_action( 'loop_start', 'voorus_remove_jetpack_share_button' );


function voorus_jetpack_before_post_content( $content ) {
 if ( function_exists( 'sharing_display' ) )
 return sharing_display( '', true ) . $content;
}
add_action('the_content', 'voorus_jetpack_before_post_content');

Saiba mais sobre o arquivo custom-functions.php.

Outros temas

Para realizar o procedimento em outros temas, é recomendável inserir as funções disponibilizadas acima no arquivo functions.php em um tema filho (child theme).


Referência:
How to Reposition Jetpack’s Sharing icons and Like button